A soft tonal gradient that stays in one hue. Quartz-pink shading down to bone-white across the page, Manrope for UI, Fraunces for display, graphite ink, a single muted plum accent reserved for the primary CTA and the active step indicator. Built for early-stage product pages, wellness brands, and onboarding flows that need warmth without sweetness.
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: "Dawn Quartz"3description: "A soft tonal gradient that stays in one hue. Quartz-pink shading down to bone-white across the page, Manrope for UI, Fraunces for display, graphite ink, a single muted plum accent reserved for the primary CTA and the active step indicator. Built for early-stage product pages, wellness brands, and onboarding flows that need warmth without sweetness."4tags: [gradient, warm, minimal, premium, modern]5colors:6 primary: "#1f1a22"7 secondary: "#6f6770"8 tertiary: "#1f1a22"9 neutral: "#f0e8eb"10 surface: "#f7eef0"11typography:12 display: Fraunces13 body: Manrope14 mono: "JetBrains Mono"15 scale:16 hero: "5.5rem / 1 / 400 / -0.035em"17 h1: "3.25rem / 1.08 / 400 / -0.025em"18 h2: "1.75rem / 1.22 / 500 / -0.012em"19 body: "1.0625rem / 1.65 / 400 / -0.005em"20radius:21 sm: 6px22 md: 12px23 lg: 18px24 pill: 9999px25shadows:26 card: "rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px"27 button: none28borders:29 card: "1px solid rgba(31,26,34,0.08)"30 divider: rgba(31,26,34,0.10)31buttons:32 primary:33 background: #6b355034 color: #f7eef035 border: none36 shape: rounded37 padding: 12px 24px38 font: 600 / 0.875rem39 secondary:40 background: rgba(255,255,255,0.65)41 color: #1f1a2242 border: 1px solid rgba(31,26,34,0.10)43 shape: rounded44 padding: 12px 24px45 font: 500 / 0.875rem46 outline:47 background: transparent48 color: #1f1a2249 border: 1px solid rgba(31,26,34,0.18)50 shape: rounded51 padding: 12px 24px52 font: 500 / 0.875rem53 ghost:54 background: transparent55 color: #6f677056 border: none57 shape: rounded58 padding: 12px 16px59 font: 500 / 0.875rem60charts:61 variant: "thin-bars"62 stroke_width: 1.563 fill_opacity: 0.0864 gridlines: false65 bar_gap: 5px66 highlight: single67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap"69dependencies: ["lucide-react"]70---71 72# Dawn Quartz73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Dawn Quartz** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — rounded shape, bg `#6b3550`, text `#f7eef0`, padding `12px 24px`, weight `600`.110- **Secondary** — rounded shape, bg `rgba(255,255,255,0.65)`, text `#1f1a22`, border `1px solid rgba(31,26,34,0.10)`, padding `12px 24px`, weight `500`.111- **Outline** — rounded shape, text `#1f1a22`, border `1px solid rgba(31,26,34,0.18)`, padding `12px 24px`, weight `500`.112- **Ghost** — rounded shape, text `#6f6770`, padding `12px 16px`, weight `500`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#f7eef0`121- Border: `1px solid rgba(31,26,34,0.08)`122- Shadow: `rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px`123- Radius: `radius.lg` (`18px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- No gridlines — let the bars/lines carry the data.134- Highlight strategy: `single` — emphasize a single bar/point per chart.135 136#### Typography pairings137 138- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.141 142### 4 · Hard constraints143 144Never do any of the following without explicit instruction from the user:145 146- Introduce a new color, font, radius, or shadow that isn't declared above.147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.151 152### 5 · Before you finish — verify153 154Run through this checklist for every screen you produce:155 156- [ ] Every color used appears in the Colors table above.157- [ ] Headlines use the display font; body copy uses the body font.158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.160- [ ] Cards and dividers use the declared border + shadow tokens.161- [ ] No values were invented; if you needed something missing, you stopped and asked.162 163---164 165## 1. Atmosphere166 167Dawn Quartz is a soft tonal gradient that stays in one hue. The page background runs from quartz-pink `#f7eef0` at the top down to bone-white `#fbf6f7` at the bottom — a 5% lightness shift across 100vh, single-hue, never sunset. Display headlines run in Fraunces 400 at 88px — the soft-modern serif sits warm on the quartz field. Body sits in Manrope at 17px on a 1.65 leading. The single accent is muted plum `#6b3550` — deep enough to read as ink-adjacent on the warm field, never pink, never burgundy. Plum appears only on the primary CTA, the active step indicator, and the focus ring.168 169The discipline is in the gradient: single-hue, low-amplitude, never two-color. The plum is what gives the system its signature — a muted wine-mark on a warm dawn field.170 171**Signature moves**172- Single-hue tonal gradient: quartz `#f7eef0` → bone-white `#fbf6f7` across 100vh173- Fraunces 400 at 88px for display — soft-modern serif, never bold174- Plum `#6b3550` exclusively on primary CTA + active step indicator + focus ring175- Glass secondary buttons (`rgba(255,255,255,0.65)`) — pick up the gradient through the white tint176- Soft 12-18px radius — warm and reachable, never pill, never sharp177 178## 2. Palette179 180### Surfaces181- **Quartz** `#f7eef0` — page top (warm pink-bone)182- **Bone Wash** `#fbf6f7` — page bottom (the gradient endpoint)183- **Quartz Lift** `#f0e8eb` — secondary surfaces184- **Glass** `rgba(255,255,255,0.65)` — secondary button tint185 186### Ink187- **Graphite** `#1f1a22` — text, headings (warm near-black, slight purple undertone)188- **Ink 50** `#6f6770` — secondary text, mono labels189 190### Accent191- **Plum** `#6b3550` — primary CTA, active step indicator, focus ring192- **Plum Soft** `rgba(107,53,80,0.10)` — focus ring background, hovered step193 194## 3. Typography195 196| Role | Font | Size | Weight | Leading | Tracking |197|------|------|------|--------|---------|----------|198| Hero | Fraunces | 88px | 400 | 1.0 | -0.035em |199| H1 | Fraunces | 52px | 400 | 1.08 | -0.025em |200| H2 | Manrope | 28px | 500 | 1.22 | -0.012em |201| Pull Quote | Fraunces (italic) | 24px | 400 | 1.4 | -0.008em |202| Body | Manrope | 17px | 400 | 1.65 | -0.005em |203| UI / Button | Manrope | 14px | 600 | 1.4 | 0 |204| Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |205| Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums |206 207Fraunces 400 only — bold breaks the soft-modern proportion. The optical-size axis lets the glyphs breathe at 88px without ever feeling display-pretentious.208 209## 4. Buttons210 211### Primary (Plum Rounded)212```css213background: #6b3550;214color: #f7eef0;215padding: 12px 24px;216border-radius: 12px;217font-weight: 600;218```219 220The 12px radius is the warm-reachable shape — never pill (too brand-y), never sharp (too cold).221 222### Secondary (Glass)223```css224background: rgba(255,255,255,0.65);225border: 1px solid rgba(31,26,34,0.10);226```227 228The white tint picks up the quartz field underneath — secondary buttons read as soft frosted tiles, not as solid white.229 230### Outline & Ghost231- Outline: transparent, 1px hairline at 18% graphite232- Ghost: no border, ink-50, hover lifts to graphite233 234## 5. Cards235 236```css237background: rgba(255,255,255,0.65);238border: 1px solid rgba(31,26,34,0.08);239border-radius: 18px;240box-shadow: rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px;241```242 243Glass tint on the gradient = the quartz bleeds through. The 24px y-offset shadow at -10px spread is the soft-dawn lift — present, never heavy.244 245## 6. Charts246 247Thin precise bars (4px wide, 5px gap). One bar in plum, others in 22% graphite. Line charts at 1.5px graphite with an 8% plum fill, ending in a plum dot marker. NO gridlines.248 249## 7. Tabs250 251Underline 1.5px in plum for the active state. Inactive tabs are ink-50 in Manrope 600. Hover lifts to graphite.252 253## 8. Spacing254 255- Base 4px256- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128`257- Section padding: 96px desktop, 48px mobile258 259## 9. Do's & don'ts260 261✅ **Do**262- Use the single-hue gradient: quartz → bone-white, 5% lightness shift, never sunset263- Use Fraunces at 400 only — bold breaks the soft-modern proportion264- Reserve plum for primary CTA + active step indicator + focus ring exclusively265- Use glass secondary buttons that pick up the gradient through the white tint266 267❌ **Don't**268- Use a two-hue gradient (peach→pink, purple→blue) — single-hue tonal only269- Use Fraunces at 600+ — the soft-modern proportion needs 400270- Use bright pink or burgundy for plum — `#6b3550` is muted wine, never neon, never red271- Use solid white cards — the white tint that bleeds the gradient is the system's signature272 273---274 275## Tokens276 277> Generated from the same source the live preview renders from.278> Treat the values below as the contract — never substitute approximations.279 280### Colors281 282| Role | Value |283|-----------|-------|284| primary | `#1f1a22` |285| secondary | `#6f6770` |286| tertiary | `#1f1a22` |287| neutral | `#f0e8eb` |288| surface | `#f7eef0` |289 290### Typography291 292- **Display:** Fraunces293- **Body:** Manrope294- **Mono:** JetBrains Mono295 296| Role | size / leading / weight / tracking |297|------|------------------------------------|298| Hero | 5.5rem / 1 / 400 / -0.035em |299| H1 | 3.25rem / 1.08 / 400 / -0.025em |300| H2 | 1.75rem / 1.22 / 500 / -0.012em |301| Body | 1.0625rem / 1.65 / 400 / -0.005em |302 303### Radius304 305- sm: `6px`306- md: `12px`307- lg: `18px`308- pill: `9999px`309 310### Shadows311 312- **card:** `rgba(31,26,34,0.04) 0 1px 2px, rgba(31,26,34,0.04) 0 8px 24px -10px`313- **button:** `none`314 315### Borders316 317- **card:** `1px solid rgba(31,26,34,0.08)`318- **divider:** `rgba(31,26,34,0.10)`319 320### Buttons321 322Four variants, each fully tokenized. The preview renders from these exact values.323 324#### Primary325 326| Property | Value |327|----------|-------|328| shape | `rounded` |329| background | `#6b3550` |330| color | `#f7eef0` |331| border | `none` |332| padding | `12px 24px` |333| fontWeight | `600` |334| fontSize | `0.875rem` |335 336#### Secondary337 338| Property | Value |339|----------|-------|340| shape | `rounded` |341| background | `rgba(255,255,255,0.65)` |342| color | `#1f1a22` |343| border | `1px solid rgba(31,26,34,0.10)` |344| padding | `12px 24px` |345| fontWeight | `500` |346| fontSize | `0.875rem` |347 348#### Outline349 350| Property | Value |351|----------|-------|352| shape | `rounded` |353| background | `transparent` |354| color | `#1f1a22` |355| border | `1px solid rgba(31,26,34,0.18)` |356| padding | `12px 24px` |357| fontWeight | `500` |358| fontSize | `0.875rem` |359 360#### Ghost361 362| Property | Value |363|----------|-------|364| shape | `rounded` |365| background | `transparent` |366| color | `#6f6770` |367| border | `none` |368| padding | `12px 16px` |369| fontWeight | `500` |370| fontSize | `0.875rem` |371 372### Charts373 374| Property | Value |375|----------|-------|376| variant | `thin-bars` |377| strokeWidth | `1.5` |378| fillOpacity | `0.08` |379| gridlines | `false` |380| barGap | `5px` |381| highlight | `single` |382| dotMarker | `true` |383 # 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=Manrope:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Fraunces"', 'serif'], sans: ['"Manrope"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1f1a22', secondary: '#6f6770', accent: '#1f1a22', neutral: '#f0e8eb', surface: '#f7eef0', }, borderRadius: { sm: '6px', md: '12px', lg: '18px', }, }, },};1980s Memphis Group revival — primary red, electric blue, and chrome yellow squiggling across cream paper. Hand-drawn shapes, chunky geometric sans, hard black borders, zero gradients.
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.
Precise dark surface with a faint 32px hairline grid baked into the canvas. Geist-class sans, JetBrains Mono, one desaturated violet accent. The primary CTA carries a 1px violet underline as its only chromatic mark.
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.