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.
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 Gradient"3description: "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."4tags: [minimal, light, premium, saas, modern]5colors:6 primary: "#0B0D12"7 secondary: "#6B7280"8 tertiary: "#3B4BD8"9 neutral: "#FAFAFB"10 surface: "#FFFFFF"11typography:12 display: "Inter Tight"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "4.75rem / 1.05 / 600 / -0.035em"17 h1: "2.75rem / 1.1 / 600 / -0.03em"18 h2: "1.5rem / 1.3 / 600 / -0.015em"19 body: "1.0625rem / 1.65 / 400 / -0.005em"20radius:21 sm: 8px22 md: 12px23 lg: 16px24 pill: 9999px25shadows:26 card: "0 1px 2px rgba(11, 13, 18, 0.04)"27 button: "0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18)"28borders:29 card: "1px solid rgba(11, 13, 18, 0.06)"30 divider: "rgba(11, 13, 18, 0.05)"31buttons:32 primary:33 background: linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%)34 color: #FFFFFF35 border: 1px solid rgba(255, 255, 255, 0.08)36 shape: rounded37 padding: 13px 26px38 font: 600 / 0.9375rem / -0.005em39 shadow: 0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18)40 secondary:41 background: #FFFFFF42 color: #0B0D1243 border: 1px solid rgba(11, 13, 18, 0.10)44 shape: rounded45 padding: 13px 26px46 font: 500 / 0.9375rem / -0.005em47 outline:48 background: transparent49 color: #2A3AC850 border: 1px solid #BFC6F051 shape: rounded52 padding: 12px 24px53 font: 500 / 0.9375rem / -0.005em54 ghost:55 background: transparent56 color: #2A3AC857 border: none58 shape: rounded59 padding: 11px 6px60 font: 500 / 0.9375rem / -0.005em61 hover: underline62charts:63 variant: line64 stroke_width: 265 gridlines: false66 highlight: last67 dot_marker: true68 axis_color: "#6B7280"69 palette: ["#2A3AC8", "#5C6FE8", "#8FA0F2"]70fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400&display=swap"71dependencies: ["lucide-react"]72---73 74# Dawn Gradient75 76## AI Build Instructions77 78> **Read this section before writing any code.** The rules below79> are non-negotiable. Every value used in the UI must come from this80> file's frontmatter — never substitute, approximate, or invent new81> colors, fonts, radii, or shadows. If a value is missing, ask the82> user before adding one.83 84### 1 · Your role85 86You are building UI for a project that has adopted **Dawn Gradient** as its87design system. Treat `DESIGN.md` as the single source of truth.88Your job is to translate the user's product requirements into89components and pages that look like they were designed by the same90person who authored this file.91 92### 2 · Token compliance93 94- Pull every color, font family, radius, shadow, and spacing value95 from the frontmatter at the top of this file.96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never97 hard-code hex values that bypass the system.98- When a token can be expressed as a CSS variable, declare it once99 in your global stylesheet and reference it everywhere downstream.100- The Google Fonts `<link>` is provided in the Typography section.101 Add it to `<head>` before any component renders.102 103### 3 · Component recipes104 105Use these recipes verbatim when building the corresponding component.106 107#### Buttons108 109Four variants are defined. Pick one — never blend variants or invent a fifth.110 111- **Primary** — rounded shape, bg `linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%)`, text `#FFFFFF`, border `1px solid rgba(255, 255, 255, 0.08)`, padding `13px 26px`, weight `600`, shadow `0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18)`.112- **Secondary** — rounded shape, bg `#FFFFFF`, text `#0B0D12`, border `1px solid rgba(11, 13, 18, 0.10)`, padding `13px 26px`, weight `500`.113- **Outline** — rounded shape, text `#2A3AC8`, border `1px solid #BFC6F0`, padding `12px 24px`, weight `500`.114- **Ghost** — rounded shape, text `#2A3AC8`, padding `11px 6px`, weight `500`.115 116Reach for **primary** as the single dominant CTA per screen.117**Secondary** for the supporting action. **Outline** for tertiary118actions in toolbars. **Ghost** for inline links and table actions.119 120#### Cards121 122- Background: `#FFFFFF`123- Border: `1px solid rgba(11, 13, 18, 0.06)`124- Shadow: `0 1px 2px rgba(11, 13, 18, 0.04)`125- Radius: `radius.lg` (`16px`)126- Internal padding: `20px` for compact cards, `24–28px` for content cards.127 128#### Charts129 130- Bar/line variant: `line`131- No gridlines — let the bars/lines carry the data.132- Highlight strategy: `last` — emphasize a single bar/point per chart.133- Use the declared palette in order: `#2A3AC8`, `#5C6FE8`, `#8FA0F2`.134 135#### Typography pairings136 137- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.138- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.139- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.140 141### 4 · Hard constraints142 143Never do any of the following without explicit instruction from the user:144 145- Introduce a new color, font, radius, or shadow that isn't declared above.146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.150 151### 5 · Before you finish — verify152 153Run through this checklist for every screen you produce:154 155- [ ] Every color used appears in the Colors table above.156- [ ] Headlines use the display font; body copy uses the body font.157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.159- [ ] Cards and dividers use the declared border + shadow tokens.160- [ ] No values were invented; if you needed something missing, you stopped and asked.161 162---163 164## Overview165Dawn Gradient is a near-pure minimal system with one signature gesture: a **deep vertical indigo gradient** — saturated indigo at the top resolving into a darker slate-blue at the bottom — that appears in two places, and two places only:1661. The **primary CTA**.1672. **One accent word** in the hero headline (applied with `background-clip: text`).168 169Everything else is whitespace, quiet type, and hairline borders. The gradient earns its presence by being rare. When it appears, it should feel like polished steel under directional light — restrained, precise, premium.170 171This is for product launches, modern SaaS, AI tools, fintech, premium content brands — anything that wants depth and authority without warmth or noise.172 173## The Signature Gradient174Always vertical (180°), always the same two stops:175 176```css177background: linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%);178```179 180Pair it with an inner top-edge highlight to give the surface a subtle machined gloss:181 182```css183box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);184```185 186**Where it appears:**187- The primary CTA fill.188- A hero accent word via `-webkit-background-clip: text` (use the brighter palette stop `#5C6FE8` to keep contrast legible on white).189- The chart line (single stroke, no fill).190 191**Where it never appears:**192- Body text. Card fills. Borders (except the primary button hairline). Backgrounds. Section dividers.193 194```css195.dawn-text {196 background: linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%);197 -webkit-background-clip: text;198 background-clip: text;199 color: transparent;200}201```202 203Apply `.dawn-text` to **one accent word per hero**, never more.204 205## Color206- **Near-Black #0B0D12** — primary text.207- **Mist #6B7280** — captions, meta, axis labels.208- **Indigo #2A3AC8** — outline buttons, ghost links, the gradient's top stop.209- **Mist Canvas #FAFAFB** — page background.210- **Paper #FFFFFF** — card surface.211 212The gradient stops (#2A3AC8 indigo → #1A237A deep slate-blue) are reserved for the signature gesture only.213 214## Typography215- **Display: Inter Tight** at 4.75rem / 600, -3.5% tracking.216- **Body: Inter** at 1.0625rem with **1.65 leading**.217 218| Role | Font | Size | Weight | Tracking |219|------|------|------|--------|----------|220| Hero | Inter Tight | 4.75rem | 600 | -0.035em |221| H1 | Inter Tight | 2.75rem | 600 | -0.03em |222| H2 | Inter Tight | 1.5rem | 600 | -0.015em |223| Body | Inter | 1.0625rem | 400 | -0.005em / 1.65 |224 225## Whitespace Rhythm226- **Section gap: 140px** desktop, 80px mobile.227- **Card padding: 32px** minimum.228- **Heading-to-body gap: 24px**.229 230The gradient's depth depends on the air around it. Crowd it and it reads as a heavy block instead of a precise gesture.231 232## Buttons233- **Primary** — vertical indigo gradient with an inner top-edge gloss and a deep indigo underglow shadow. White label at 600 weight. The single most authoritative element on the page.234- **Secondary** — white surface, 10% near-black hairline.235- **Outline** — transparent with a soft indigo (#BFC6F0) hairline.236- **Ghost** — bare indigo label, hover underline.237 238All four are gently rounded at 12px. No pills.239 240## Cards241Paper surface, **1px near-black border at 6%**, a 1px shadow at 4%. Radius is **16px**. Cards never lift more than the hairline.242 243## Charts & Data244A single 2px indigo line over the mist canvas. **No gridlines, no fills.** An indigo dot at the latest reading.245 246## Do's and Don'ts247- ✅ The gradient appears in **at most two places per page**: the primary CTA and one hero accent word.248- ✅ Always vertical (180°), always the same two stops. Never re-arrange or rotate.249- ✅ Always pair the primary CTA with the inner top-edge highlight — that gloss is what reads as premium.250- ✅ Whitespace around the gradient is what makes it sing — over-space the hero.251- ✅ Inter Tight 600 with tight -3.5% tracking on display.252- ❌ No warm-tone gradients (no peach, no rose, no sunset). The system's character is cool, restrained, machined.253- ❌ No gradient on body text, card fills, borders, or backgrounds.254- ❌ No second gradient direction. Always 180°.255- ❌ No drop shadows beyond the deep indigo underglow on the primary CTA.256- ❌ No pill buttons. 12px radius is the system.257 258---259 260## Tokens261 262> Generated from the same source the live preview renders from.263> Treat the values below as the contract — never substitute approximations.264 265### Colors266 267| Role | Value |268|-----------|-------|269| primary | `#0B0D12` |270| secondary | `#6B7280` |271| tertiary | `#3B4BD8` |272| neutral | `#FAFAFB` |273| surface | `#FFFFFF` |274 275### Typography276 277- **Display:** Inter Tight278- **Body:** Inter279- **Mono:** JetBrains Mono280 281| Role | size / leading / weight / tracking |282|------|------------------------------------|283| Hero | 4.75rem / 1.05 / 600 / -0.035em |284| H1 | 2.75rem / 1.1 / 600 / -0.03em |285| H2 | 1.5rem / 1.3 / 600 / -0.015em |286| Body | 1.0625rem / 1.65 / 400 / -0.005em |287 288### Radius289 290- sm: `8px`291- md: `12px`292- lg: `16px`293- pill: `9999px`294 295### Shadows296 297- **card:** `0 1px 2px rgba(11, 13, 18, 0.04)`298- **button:** `0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18)`299 300### Borders301 302- **card:** `1px solid rgba(11, 13, 18, 0.06)`303- **divider:** `rgba(11, 13, 18, 0.05)`304 305### Buttons306 307Four variants, each fully tokenized. The preview renders from these exact values.308 309#### Primary310 311| Property | Value |312|----------|-------|313| shape | `rounded` |314| background | `linear-gradient(180deg, #2A3AC8 0%, #1A237A 100%)` |315| color | `#FFFFFF` |316| border | `1px solid rgba(255, 255, 255, 0.08)` |317| padding | `13px 26px` |318| fontWeight | `600` |319| fontSize | `0.9375rem` |320| tracking | `-0.005em` |321| shadow | `0 10px 24px -12px rgba(20, 28, 90, 0.45), 0 2px 6px -2px rgba(20, 28, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18)` |322 323#### Secondary324 325| Property | Value |326|----------|-------|327| shape | `rounded` |328| background | `#FFFFFF` |329| color | `#0B0D12` |330| border | `1px solid rgba(11, 13, 18, 0.10)` |331| padding | `13px 26px` |332| fontWeight | `500` |333| fontSize | `0.9375rem` |334| tracking | `-0.005em` |335 336#### Outline337 338| Property | Value |339|----------|-------|340| shape | `rounded` |341| background | `transparent` |342| color | `#2A3AC8` |343| border | `1px solid #BFC6F0` |344| padding | `12px 24px` |345| fontWeight | `500` |346| fontSize | `0.9375rem` |347| tracking | `-0.005em` |348 349#### Ghost350 351| Property | Value |352|----------|-------|353| shape | `rounded` |354| background | `transparent` |355| color | `#2A3AC8` |356| border | `none` |357| padding | `11px 6px` |358| fontWeight | `500` |359| fontSize | `0.9375rem` |360| tracking | `-0.005em` |361| hoverHint | `underline` |362 363### Charts364 365| Property | Value |366|----------|-------|367| variant | `line` |368| strokeWidth | `2` |369| gridlines | `false` |370| highlight | `last` |371| dotMarker | `true` |372| axisColor | `#6B7280` |373| palette | `#2A3AC8`, `#5C6FE8`, `#8FA0F2` |374 # 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=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter Tight"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#0B0D12', secondary: '#6B7280', accent: '#3B4BD8', neutral: '#FAFAFB', surface: '#FFFFFF', }, 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.
A single beautifully calibrated diagonal gradient runs across the page — cool slate into dusty mauve into champagne mist — while every other element stays restrained ink and hairlines. The gradient is the room.
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.