Ayocin — Design System Reference

1. Visual Theme & Atmosphere

Ayocin has the warmth of handmade paper and the precision of a well-designed editorial product. The foundation is a warm parchment — not stark white, not beige, but a specific tone that reads as considered and organic. Against this base, a deep coffee-brown footer and dark warm body text create a monochromatic earth palette with genuine depth. The design avoids the coldness of pure black/white without drifting into nostalgia; it feels contemporary and artisanal simultaneously. Animated lamp gradient accents (warm yellow and coral) add ephemeral life without committing to a permanent accent color.

2. Color Palette & Roles

Foundation

• rgb(252,246,236) — page background (warm parchment)
• rgb(239,233,223) — cursor element, interactive surface (a step darker)
• rgb(206,193,178) — hero/full-screen section background (muted sand)
• rgba(178,162,139,0.1) — grid overlay at near-invisible opacity

Text & structure

• rgb(0,0,0) — body text on light bg (true black)
• rgb(46,37,33) — dark warm-brown: main content text, footer background, input text
• rgb(252,246,236) — reversed text on dark footer

Interactive

• rgb(239,233,223) — button background (parchment-lighter than base)
• rgb(46,37,33) — button border and text

Accent (ephemeral only)

• rgba(255,231,143,0.4) — warm yellow lamp gradient
• rgba(255,125,94,0.4) — coral lamp gradient

The accent colors are translucent overlays used for atmospheric effect. They are never used as button fills, borders, or text colors — the system is defined by earth tones, not these warm glows.

3. Typography Rules

Ayocin uses a custom typeface — Systemia — with Roboto as fallback. Systemia is a geometric display font with personality, contrasting with the typically neutral choices of SaaS products. The use of a custom font is the primary design differentiator; it makes the brand feel proprietary and craft-oriented.

Scale

• Medium weight (500) at 60px for headings — not bold, which keeps the display text elegant
• 1:1 line-height on headings matches the premium compression seen across top-tier product sites
• No letter-spacing adjustment — Systemia is used at its native rhythm
• No OpenType feature settings — the font’s character is in its forms, not glyph variants

What’s absent: No serif counterpoint, no monospace. Systemia carries the entire typographic identity.

4. Component Stylings

Buttons

• Rounded (border-radius: 20px, 100% pill also present)
• Fill: rgb(239,233,223) — slightly lighter than the page bg, not white
• Border + text: rgb(46,37,33) — dark warm brown
• Effect: the button appears to be cut from the same material as the page, just a lighter slice

Cursor

• Custom cursor element at rgb(239,233,223) — tracked via --cursor-x / --cursor-y CSS variables
• Interactive cursor feedback reinforces the tactile, craft-forward personality

Input fields

• Transparent background, dark warm-brown border and text
• At 12px/400 weight — small and unobtrusive, suggesting minimal form usage

5. Layout Principles

Ayocin uses a 6-column-implied grid with breakpoints at 420, 768, 1023/1024, 1280, and 1440px. The 420px mobile breakpoint is unusually specific (smaller than standard 375/390 phones), suggesting deliberate micro-layout care. Full-screen sections (div.h-screen) establish vertical rhythm. The footer inverts the color scheme — dark background, light text — functioning as a visual counterweight to the parchment page.

6. Depth & Elevation

No box-shadows exist in the system. Depth is created through:

• Background color steps (parchment → sand → dark brown)
• The grid overlay (rgba(178,162,139,0.1)) — a barely-visible texture layer
• Translucent lamp gradient overlays that float above content

This is an atmospheric depth model, not a material one. There are no cards, no modal shadows, no raised elements. Everything sits in the same plane with color alone creating z-axis sensation.

7. Do’s and Don’ts

Do:

• Use Systemia at medium weight (500) for all display text
• Maintain the warm parchment hierarchy: rgb(252,246,236) → rgb(239,233,223) → rgb(206,193,178) → rgb(46,37,33)
• Apply lamp gradients at 0.4 opacity maximum — atmospheric only, never structural
• Use pill/rounded borders (20px or 100%) for interactive elements

Don’t:

• Introduce any cool-toned color (blue, purple, green) — the entire palette is warm earth
• Use the coral/yellow accent colors as solid fills — they exist only as translucent overlays
• Apply box-shadows — depth is tonal, not shadow-based
• Substitute Roboto for Systemia at display sizes — fallback only applies for loading/system rendering

8. Responsive Behavior

Breakpoints span 420–1440px with twin entries at 1023/1024 (likely max-width / min-width pair). The custom cursor is a CSS-variable-driven element that may be hidden at mobile sizes. Tailwind CSS handles utility responsiveness. The overall layout likely shifts from multi-column to stacked at 768px, with the 420px breakpoint handling sub-mobile edge cases.

9. Agent Prompt Guide

Build a UI that matches Ayocin’s design language.

Page background is warm parchment rgb(252,246,236). Text is deep warm-brown rgb(46,37,33). Use Systemia (or an organic geometric font) at 60px/500 weight for headings, with a 1:1 line-height. Buttons are pill-shaped, filled with rgb(239,233,223), bordered in rgb(46,37,33). No shadows — depth comes from background-color steps. Optional: add translucent warm-yellow or coral radial gradients at 0.4 opacity as atmospheric overlays. Footer inverts to dark warm-brown background with parchment text. The entire palette is warm earth tones — no cool grays, no blues.

Generated by Sparkbites — extracted from live CSS analysis