Literary salon as product page. Parchment canvas, serif headlines at weight 500, terracotta brand, exclusively warm neutrals, and ring-shadow depth.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Atelier AI"3description: "Literary salon as product page. Parchment canvas, serif headlines at weight 500, terracotta brand, exclusively warm neutrals, and ring-shadow depth."4tags: [warm, editorial, ai, premium]5colors:6 primary: "#141413"7 secondary: "#5e5d59"8 tertiary: "#c96442"9 neutral: "#f5f4ed"10 surface: "#faf9f5"11typography:12 display: Fraunces13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "4rem / 1.1 / 500 / 0"17 h1: "3.25rem / 1.2 / 500 / 0"18 h2: "2rem / 1.1 / 500 / 0"19 body: "1.0625rem / 1.6 / 400 / 0"20radius:21 sm: 8px22 md: 12px23 lg: 16px24 pill: 9999px25shadows:26 card: "rgba(141,103,72,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 4px 24px"27 button: "rgba(201,100,66,0.15) 0 0 0 1px, rgba(201,100,66,0.18) 0 6px 18px -8px"28borders:29 card: "1px solid #f0eee6"30 divider: "#e8e6dc"31buttons:32 primary:33 background: #CC785C34 color: #FFFFFF35 border: none36 shape: rounded37 padding: 11px 20px38 font: display / 50039 secondary:40 background: #F4EFE641 color: #3D392942 border: none43 shape: rounded44 padding: 11px 20px45 font: display / 50046 outline:47 background: transparent48 color: #3D392949 border: 1px solid #DDD6C750 shape: rounded51 padding: 11px 20px52 font: display / 50053 ghost:54 background: transparent55 color: #CC785C56 border: none57 shape: rounded58 padding: 11px 12px59 font: display / 50060 hover: underline61charts:62 variant: "rounded-bars"63 stroke_width: 2.564 fill_opacity: 0.1865 gridlines: false66 bar_gap: 10px67 highlight: gradient68 dot_marker: true69fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"70dependencies: ["lucide-react"]71---72 73# Atelier AI74 75## AI Build Instructions76 77> **Read this section before writing any code.** The rules below78> are non-negotiable. Every value used in the UI must come from this79> file's frontmatter — never substitute, approximate, or invent new80> colors, fonts, radii, or shadows. If a value is missing, ask the81> user before adding one.82 83### 1 · Your role84 85You are building UI for a project that has adopted **Atelier AI** as its86design system. Treat `DESIGN.md` as the single source of truth.87Your job is to translate the user's product requirements into88components and pages that look like they were designed by the same89person who authored this file.90 91### 2 · Token compliance92 93- Pull every color, font family, radius, shadow, and spacing value94 from the frontmatter at the top of this file.95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never96 hard-code hex values that bypass the system.97- When a token can be expressed as a CSS variable, declare it once98 in your global stylesheet and reference it everywhere downstream.99- The Google Fonts `<link>` is provided in the Typography section.100 Add it to `<head>` before any component renders.101 102### 3 · Component recipes103 104Use these recipes verbatim when building the corresponding component.105 106#### Buttons107 108Four variants are defined. Pick one — never blend variants or invent a fifth.109 110- **Primary** — rounded shape, bg `#CC785C`, text `#FFFFFF`, padding `11px 20px`, weight `500`.111- **Secondary** — rounded shape, bg `#F4EFE6`, text `#3D3929`, padding `11px 20px`, weight `500`.112- **Outline** — rounded shape, text `#3D3929`, border `1px solid #DDD6C7`, padding `11px 20px`, weight `500`.113- **Ghost** — rounded shape, text `#CC785C`, padding `11px 12px`, weight `500`.114 115Reach for **primary** as the single dominant CTA per screen.116**Secondary** for the supporting action. **Outline** for tertiary117actions in toolbars. **Ghost** for inline links and table actions.118 119#### Cards120 121- Background: `#faf9f5`122- Border: `1px solid #f0eee6`123- Shadow: `rgba(141,103,72,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 4px 24px`124- Radius: `radius.lg` (`16px`)125- Internal padding: `20px` for compact cards, `24–28px` for content cards.126 127#### Charts128 129- Bar/line variant: `rounded-bars`130- No gridlines — let the bars/lines carry the data.131- Highlight strategy: `gradient` — emphasize a single bar/point per chart.132 133#### Typography pairings134 135- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.136- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.137- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.138 139### 4 · Hard constraints140 141Never do any of the following without explicit instruction from the user:142 143- Introduce a new color, font, radius, or shadow that isn't declared above.144- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).145- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.146- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.147- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.148 149### 5 · Before you finish — verify150 151Run through this checklist for every screen you produce:152 153- [ ] Every color used appears in the Colors table above.154- [ ] Headlines use the display font; body copy uses the body font.155- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).156- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.157- [ ] Cards and dividers use the declared border + shadow tokens.158- [ ] No values were invented; if you needed something missing, you stopped and asked.159 160---161 162## 1. Atmosphere163 164Atelier AI is a literary salon reimagined as a product page — warm, unhurried, quietly intellectual. The entire experience sits on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Atelier AI radiates human warmth, as if the model itself has good taste in interior design.165 166The signature move is a **medium-weight serif** — generous proportions that give every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta, black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." Serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating cadence that feels more like reading an essay than scanning a product page.167 168What makes Atelier AI truly distinctive is its **warm neutral palette**. Every gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) — there are no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`), shadows use warm transparent blacks, and even the darkest surfaces (`#141413`, `#30302e`) carry a barely perceptible olive warmth.169 170**Signature moves**171- Warm parchment canvas (`#f5f4ed`) — premium paper, never screens172- Medium-weight (500) serif for all headlines — single-weight discipline173- Terracotta brand (`#c96442`) — warm, earthy, deliberately un-tech174- Exclusively warm-toned neutrals — every gray has yellow-brown undertone175- Ring-based shadow system: `0 0 0 1px` border-like depth without visible borders176- Magazine-like pacing with generous section spacing177- Generous radius (8–32px) — soft, approachable surfaces178 179## 2. Palette180 181### Primary182- **Atelier Near Black** `#141413` — primary text, dark surface (warmest "black" in tech)183- **Terracotta** `#c96442` — brand CTA, signature accent184- **Coral** `#d97757` — text accents, secondary emphasis185 186### Surface187- **Parchment** `#f5f4ed` — page background188- **Ivory** `#faf9f5` — card surfaces (barely-distinguishable layering)189- **Warm Sand** `#e8e6dc` — button background, prominent surfaces190- **Dark Surface** `#30302e` — dark containers, nav191 192### Neutrals193- Charcoal Warm `#4d4c48` — go-to dark text194- Olive Gray `#5e5d59` — secondary body195- Stone Gray `#87867f` — tertiary, footnotes196- Warm Silver `#b0aea5` — text on dark197 198### Semantic199- Crimson `#b53333` — error (warm red)200- Focus Blue `#3898ec` — the only cool color, accessibility-only201 202### Borders203- Cream `#f0eee6` — gentlest containment204- Warm `#e8e6dc` — prominent dividers205- Ring Warm `#d1cfc5` — interactive states206 207## 3. Typography208 209| Role | Font | Size | Weight | Leading |210|------|------|------|--------|---------|211| Display | Serif | 64px | 500 | 1.10 |212| Section | Serif | 52px | 500 | 1.20 |213| Sub-heading L | Serif | 36px | 500 | 1.30 |214| Sub-heading | Serif | 32px | 500 | 1.10 |215| Feature title | Serif | 20.8px | 500 | 1.20 |216| Body Serif | Serif | 17px | 400 | 1.60 |217| Body | Sans | 16px | 400 | 1.60 |218| Nav | Sans | 17px | 500 | 1.00 |219| Caption | Sans | 14px | 400 | 1.43 |220| Code | Mono | 15px | 400 | 1.60 |221 222**Single weight for serif (500).** No bold, no light. Consistency creates a singular voice — as if the same author wrote every heading. Body uses generous 1.60 line-height — closer to a book than a dashboard.223 224## 4. Buttons225 226### Brand Terracotta (Primary)227```css228background: #c96442;229color: #faf9f5;230border-radius: 12px;231box-shadow: rgba(201,100,66,0.15) 0 0 0 1px;232```233 234### Warm Sand (Secondary)235- Background `#e8e6dc`, text `#4d4c48`236- Padding `0 12px 0 8px` (asymmetric, icon-first)237- 8px radius, ring shadow `#d1cfc5 0 0 0 1px`238 239### White Surface240- Background `#ffffff`, text `#141413`241- 12px radius, hover shifts to secondary bg242 243### Dark Charcoal244- Background `#30302e`, text ivory245- 8px radius, ring shadow246 247## 5. Cards248 249- Background: `#faf9f5` (Ivory) on light, `#30302e` on dark250- Border: `1px solid #f0eee6` (light) or `1px solid #30302e` (dark)251- Radius: 8px standard, 16px featured, 32px hero252- Shadow: `rgba(0,0,0,0.05) 0 4px 24px` for elevated content253 254## 6. Charts255 256**Rounded bars with gradient highlight.** Each bar uses a height-proportional opacity of the terracotta accent — taller bars are more saturated, shorter bars fade. Bars are pill-rounded (999px) for the soft, approachable warmth. Line charts use a thicker 2.5px stroke for a hand-drawn-feeling line.257 258## 7. Spacing259 260- Base: 8px261- Scale: `3, 4, 6, 8, 10, 12, 16, 20, 24, 30`262- Section vertical: 80–120px — magazine breathing room263 264## 8. Depth & elevation265 266| Level | Treatment | Use |267|-------|-----------|-----|268| 0 | Flat parchment | Page, inline text |269| 1 | `1px solid #f0eee6` | Cards, sections |270| 2 | Ring `0 0 0 1px` warm gray | Interactive cards, hover |271| 3 | `rgba(0,0,0,0.05) 0 4px 24px` | Elevated features |272| 4 | Inset `0 0 0 1px` 15% opacity | Active/pressed |273 274**Warm ring shadows.** Depth comes from `0 0 0 1px` ring patterns matching the warm palette — borders that are technically shadows. Drop shadows are extreme rare: when used, ultra-soft (0.05 opacity, 24px blur).275 276## 9. Do's & don'ts277 278✅ **Do**279- Use Parchment (`#f5f4ed`) as the primary background — warm cream IS the personality280- Use serif at weight 500 for all headlines — single-weight consistency281- Use terracotta only for primary CTA and the highest-signal moments282- Keep all neutrals warm-toned — yellow-brown undertones everywhere283- Use ring shadows for interactive states, not drop shadows284- Apply generous radius (12–32px) for soft approachable surfaces285 286❌ **Don't**287- Use cool blue-grays anywhere — palette is exclusively warm288- Use bold (700+) on serif — weight 500 is the ceiling289- Introduce saturated colors beyond terracotta — palette is muted290- Use sharp corners (<6px) on buttons or cards291- Apply heavy drop shadows — depth is ring shadows + section alternation292- Use pure white as page background — Parchment or Ivory only293 294---295 296## Tokens297 298> Generated from the same source the live preview renders from.299> Treat the values below as the contract — never substitute approximations.300 301### Colors302 303| Role | Value |304|-----------|-------|305| primary | `#141413` |306| secondary | `#5e5d59` |307| tertiary | `#c96442` |308| neutral | `#f5f4ed` |309| surface | `#faf9f5` |310 311### Typography312 313- **Display:** Fraunces314- **Body:** Inter315- **Mono:** JetBrains Mono316 317| Role | size / leading / weight / tracking |318|------|------------------------------------|319| Hero | 4rem / 1.1 / 500 / 0 |320| H1 | 3.25rem / 1.2 / 500 / 0 |321| H2 | 2rem / 1.1 / 500 / 0 |322| Body | 1.0625rem / 1.6 / 400 / 0 |323 324### Radius325 326- sm: `8px`327- md: `12px`328- lg: `16px`329- pill: `9999px`330 331### Shadows332 333- **card:** `rgba(141,103,72,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 4px 24px`334- **button:** `rgba(201,100,66,0.15) 0 0 0 1px, rgba(201,100,66,0.18) 0 6px 18px -8px`335 336### Borders337 338- **card:** `1px solid #f0eee6`339- **divider:** `#e8e6dc`340 341### Buttons342 343Four variants, each fully tokenized. The preview renders from these exact values.344 345#### Primary346 347| Property | Value |348|----------|-------|349| shape | `rounded` |350| background | `#CC785C` |351| color | `#FFFFFF` |352| border | `none` |353| padding | `11px 20px` |354| fontFamily | `display` |355| fontWeight | `500` |356 357#### Secondary358 359| Property | Value |360|----------|-------|361| shape | `rounded` |362| background | `#F4EFE6` |363| color | `#3D3929` |364| border | `none` |365| padding | `11px 20px` |366| fontFamily | `display` |367| fontWeight | `500` |368 369#### Outline370 371| Property | Value |372|----------|-------|373| shape | `rounded` |374| background | `transparent` |375| color | `#3D3929` |376| border | `1px solid #DDD6C7` |377| padding | `11px 20px` |378| fontFamily | `display` |379| fontWeight | `500` |380 381#### Ghost382 383| Property | Value |384|----------|-------|385| shape | `rounded` |386| background | `transparent` |387| color | `#CC785C` |388| border | `none` |389| padding | `11px 12px` |390| fontFamily | `display` |391| fontWeight | `500` |392| hoverHint | `underline` |393 394### Charts395 396| Property | Value |397|----------|-------|398| variant | `rounded-bars` |399| strokeWidth | `2.5` |400| fillOpacity | `0.18` |401| gridlines | `false` |402| barGap | `10px` |403| highlight | `gradient` |404| dotMarker | `true` |405 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Fraunces"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#141413', secondary: '#5e5d59', accent: '#c96442', neutral: '#f5f4ed', surface: '#faf9f5', }, borderRadius: { sm: '8px', md: '12px', lg: '16px', }, }, },};Pure black void canvas, geometric medium-weight display with extreme negative tracking, frosted glass pills, and a single electric blue accent.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Minimal canvas with a single restrained gesture — a deep indigo-to-steel gradient on the primary CTA and one accent word. Everything else is whitespace and quiet type.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.