Skip to main content
Generate with AI
Skip to content
undesigned.html
waiting for a design system…
Copied
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.

Prompt · 01
01 — palette
5 tokens · locked
02 — type
Aa
Sora · display / 1.25 scale
03 — contrast
13.0:1
AAA · verified, not claimed
04 — shape
radius 12 · space 8 · soft shadow
stylebook — watch a page come to life

This page hasno design system.

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…
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.

theme: Velvet Dusk
24 tokens bound · 0 overrides
aurelia.com — dressed by StyleBook
AureliaShopStoryJournalSign up
Calm skin,
quiet confidence.
Shop the ritualOur story
The Balm №4
$48
Night Veil
$62
© AureliaAA contrast · verified
Edition 01

Velvet Dusk

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.

Palette · 5 tokens
Aa
Sora · display
13.0:1 · AAA
radius 12 · space 8 · soft shadow
Then take it anywhere
{ } CSS Variables[ ] JSON Tokens~/ Tailwind◇ Figma Tokens⚛ React◆ FlutterSwiftUI↓ Style Guide
Browse ready themes
24 / 24 tokens bound — fully dressed

Every page you ship,
born designed.

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.

CSS Variables · JSON Tokens · Tailwind Config · Figma Tokens · React Theme · Flutter Theme · SwiftUI Theme · Style Guide · CSS Variables · JSON Tokens · Tailwind Config · Figma Tokens · React Theme · Flutter Theme · SwiftUI Theme · Style Guide ·