/
design.md
Back to directory
minimal · light · premium · saas · modern

Dawn Gradient.

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.

01 · Preview

The kitchen sink.

Dawn.app
ProductPricingDocsAbout
Sign inGet started
minimal · light · premium

Build with Dawn Gradient.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#0B0D12
secondary
#6B7280
tertiary
#3B4BD8
neutral
#FAFAFB
surface
#FFFFFF
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
8px
md
12px
lg
16px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · The file

DESIGN.md

markdown
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:    Inter
14  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: 8px
22  md: 12px
23  lg: 16px
24  pill: 9999px
25shadows:
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: #FFFFFF
35    border: 1px solid rgba(255, 255, 255, 0.08)
36    shape: rounded
37    padding: 13px 26px
38    font: 600 / 0.9375rem / -0.005em
39    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: #FFFFFF
42    color: #0B0D12
43    border: 1px solid rgba(11, 13, 18, 0.10)
44    shape: rounded
45    padding: 13px 26px
46    font: 500 / 0.9375rem / -0.005em
47  outline:
48    background: transparent
49    color: #2A3AC8
50    border: 1px solid #BFC6F0
51    shape: rounded
52    padding: 12px 24px
53    font: 500 / 0.9375rem / -0.005em
54  ghost:
55    background: transparent
56    color: #2A3AC8
57    border: none
58    shape: rounded
59    padding: 11px 6px
60    font: 500 / 0.9375rem / -0.005em
61    hover: underline
62charts:
63  variant: line
64  stroke_width: 2
65  gridlines: false
66  highlight: last
67  dot_marker: true
68  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 Gradient
75 
76## AI Build Instructions
77 
78> **Read this section before writing any code.** The rules below
79> are non-negotiable. Every value used in the UI must come from this
80> file's frontmatter — never substitute, approximate, or invent new
81> colors, fonts, radii, or shadows. If a value is missing, ask the
82> user before adding one.
83 
84### 1 · Your role
85 
86You are building UI for a project that has adopted **Dawn Gradient** as its
87design system. Treat `DESIGN.md` as the single source of truth.
88Your job is to translate the user's product requirements into
89components and pages that look like they were designed by the same
90person who authored this file.
91 
92### 2 · Token compliance
93 
94- Pull every color, font family, radius, shadow, and spacing value
95  from the frontmatter at the top of this file.
96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
97  hard-code hex values that bypass the system.
98- When a token can be expressed as a CSS variable, declare it once
99  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 recipes
104 
105Use these recipes verbatim when building the corresponding component.
106 
107#### Buttons
108 
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 tertiary
118actions in toolbars. **Ghost** for inline links and table actions.
119 
120#### Cards
121 
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#### Charts
129 
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 pairings
136 
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 constraints
142 
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 — verify
152 
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## Overview
165Dawn 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 Gradient
174Always vertical (180°), always the same two stops:
175 
176```css
177background: 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```css
183box-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```css
195.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## Color
206- **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## Typography
215- **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 Rhythm
226- **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## Buttons
233- **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## Cards
241Paper 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 & Data
244A 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'ts
247- ✅ 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## Tokens
261 
262> Generated from the same source the live preview renders from.
263> Treat the values below as the contract — never substitute approximations.
264 
265### Colors
266 
267| Role      | Value |
268|-----------|-------|
269| primary   | `#0B0D12` |
270| secondary | `#6B7280` |
271| tertiary  | `#3B4BD8` |
272| neutral   | `#FAFAFB` |
273| surface   | `#FFFFFF` |
274 
275### Typography
276 
277- **Display:** Inter Tight
278- **Body:** Inter
279- **Mono:** JetBrains Mono
280 
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### Radius
289 
290- sm: `8px`
291- md: `12px`
292- lg: `16px`
293- pill: `9999px`
294 
295### Shadows
296 
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### Borders
301 
302- **card:** `1px solid rgba(11, 13, 18, 0.06)`
303- **divider:** `rgba(11, 13, 18, 0.05)`
304 
305### Buttons
306 
307Four variants, each fully tokenized. The preview renders from these exact values.
308 
309#### Primary
310 
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#### Secondary
324 
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#### Outline
337 
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#### Ghost
350 
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### Charts
364 
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
03 · How to use it

Wire it into your agent.

markdown
# 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.
04 · Required setup

Three snippets.

Google Fonts link

html
<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" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export 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',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Atelier AI

Literary salon as product page. Parchment canvas, serif headlines at weight 500, terracotta brand, exclusively warm neutrals, and ring-shadow depth.

warmeditorialaipremium
Atelier.app
ProductPricingDocsAbout
Sign inGet started
warm · editorial · ai

Build with Atelier AI.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Pace Athletic

A training platform with the discipline of a stopwatch. Near-black surfaces with a single chartreuse PB indicator, Archivo Black for split times at oversized scale, Inter for prose, JetBrains Mono with tabular-nums for every pace and heart-rate. Built for endurance training apps, gym programming, and athlete-facing dashboards where the only thing that matters is the next interval.

fitnessdarkmodernminimalsaas
Pace.app
ProductPricingDocsAbout
Sign inGet started
fitness · dark · modern

Build with Pace Athletic.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational