StyleBook — AI design-system generatorSheet 01 / Hero
Describe your brand.
Get a complete
design system.
Palette, typography, spacing and accessibility — generated in seconds, verified for real contrast (not just claimed), refined in Studio, exported anywhere.
No palette. No type scale. No rhythm. Its decisions live where every project's do — a tab for palettes, a tab for fonts, a tab for contrast checks, a brand PDF nobody opens. Scroll — and watch one living system replace them all.
img · 1200×600 — awaiting art
card · 4:3 — no tokens yet
h1 — size: ??px
colours: tab 3 · fonts: tab 7 · contrast: tab 12
scroll to begin
01
Act I of V — colour arrives
Colour.
Greys give way to a hand-curated library of thousands of named, contrast-checked shades — browsed like a fan deck at your thumb, not hunted across tabs. Click a blade to copy its hex.
✓ --color-primary: #C36B3E
✓ --color-ink: #211E18
✓ --color-surface: #F2EBE0
✓ --color-navy: #222D52
✓ 4 more shades bound…
Terracotta
#C36B3E
Honey
#E4C15A
Champagne
#D2B68A
Emerald
#1F5C41
Teal
#178C88
Sky
#6FB0DE
Cobalt
#2455C6
Navy
#222D52
Plum
#7A3B86
Rose
#CF4E86
Aa
02
Act II of V — type finds its voice
Type.
Times New Roman — browser default
The quick brown fox — display
Voices settle into a scale — heading
Body settles at seventeen pixels with generous leading, tuned for long reading. A modular scale binds every size to one ratio — nothing arbitrary survives.
caption · metadata · labels
✓ --font-display: Fraunces
✓ --font-body: Archivo
✓ --scale-ratio: 1.333
✓ --leading: 1.6
03
Act III of V — rhythm breathes
Rhythm.
Space breathes
Cramped boxes inhale — an 8-point rhythm spaces every element.
Corners soften
Radii round in step — one token, every corner in agreement.
Depth arrives
Shadows bloom soft and wide — weightless, never smudged.
✓ --radius-md: 14px
✓ --space-unit: 8px
✓ --shadow-lg: soft / wide
04
Act IV of V — everything binds
One theme.
Every token binds into a single edition — and a whole product assembles itself from the system. Nothing hand-placed. Nothing off-grid.
Candlelit navy and champagne — for brands that speak softly and carry taste.
Fraunces · Archivo
AureliaSign up
Calm skin, quiet confidence.
Shop the ritualOur story
Tokens applied24/24
Edition 02
Terracotta Study
Sun-baked clay and honey — warm, handmade, generous with texture.
Sora · Archivo
AureliaSign up
Calm skin, quiet confidence.
Shop the ritualOur story
Tokens applied24/24
Edition 03
Botanical
Greenhouse greens and lime light — fresh, organic, quietly optimistic.
Space Grotesk · Archivo
AureliaSign up
Calm skin, quiet confidence.
Shop the ritualOur story
Tokens applied24/24
Edition 04
Porcelain
Glazed white and washed sky — minimal, precise, gallery-quiet.
Archivo · Plex Mono
AureliaSign up
Calm skin, quiet confidence.
Shop the ritualOur story
Tokens applied24/24
Edition 01 / 04
Three ways to build
Five acts for you. Five seconds for AI.
Browse when you're exploring. Build in the Studio when you want every token in your hands. Describe it when you want speed — three doors into the same living system.
Browse it from the library, build it token-by-token in the Studio, or generate it with AI — one living system, exported anywhere: CSS variables, JSON tokens, Tailwind, Figma, React, Flutter, SwiftUI.