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

Quiet Cobalt.

Crystalline ice-white canvas, abundant whitespace, gently rounded corners, and a single deep cobalt accent. Ultra-clean modern SaaS with quiet confidence.

01 · Preview

The kitchen sink.

Quiet.app
ProductPricingDocsAbout
Sign inGet started
minimal · saas · light

Build with Quiet Cobalt.

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
#0F1115
secondary
#6B7280
tertiary
#2956E8
neutral
#F7F9FC
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
10px
lg
14px
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 · Pro tokens

The states behind the resting style.

ArchetypeMaterial

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Quiet Cobalt"
3description: "Crystalline ice-white canvas, abundant whitespace, gently rounded corners, and a single deep cobalt accent. Ultra-clean modern SaaS with quiet confidence."
4tags: [minimal, saas, light, premium, modern]
5colors:
6  primary:   "#0F1115"
7  secondary: "#6B7280"
8  tertiary:  "#2956E8"
9  neutral:   "#F7F9FC"
10  surface:   "#FFFFFF"
11typography:
12  display: "Inter Tight"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 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.6 / 400 / -0.005em"
20radius:
21  sm: 8px
22  md: 10px
23  lg: 14px
24  pill: 9999px
25shadows:
26  card:   "0 1px 2px rgba(15, 17, 21, 0.04)"
27  button: none
28borders:
29  card:    "1px solid rgba(15, 17, 21, 0.06)"
30  divider: "rgba(15, 17, 21, 0.05)"
31buttons:
32  primary:
33    background: #2956E8
34    color: #FFFFFF
35    border: 1px solid #2956E8
36    shape: rounded
37    padding: 12px 22px
38    font: 500 / 0.9375rem / -0.005em
39  secondary:
40    background: #FFFFFF
41    color: #0F1115
42    border: 1px solid rgba(15, 17, 21, 0.10)
43    shape: rounded
44    padding: 12px 22px
45    font: 500 / 0.9375rem / -0.005em
46  outline:
47    background: transparent
48    color: #2956E8
49    border: 1px solid #2956E8
50    shape: rounded
51    padding: 11px 20px
52    font: 500 / 0.9375rem / -0.005em
53  ghost:
54    background: transparent
55    color: #2956E8
56    border: none
57    shape: rounded
58    padding: 10px 6px
59    font: 500 / 0.9375rem / -0.005em
60    hover: underline
61charts:
62  variant: line
63  stroke_width: 2
64  gridlines: false
65  highlight: last
66  dot_marker: true
67  axis_color: "#6B7280"
68  palette: ["#2956E8", "#0F1115", "#6B7280"]
69fonts_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"
70dependencies: ["lucide-react"]
71---
72 
73# Quiet Cobalt
74 
75## AI Build Instructions
76 
77> **Read this section before writing any code.** The rules below
78> are non-negotiable. Every value used in the UI must come from this
79> file's frontmatter — never substitute, approximate, or invent new
80> colors, fonts, radii, or shadows. If a value is missing, ask the
81> user before adding one.
82 
83### 1 · Your role
84 
85You are building UI for a project that has adopted **Quiet Cobalt** as its
86design system. Treat `DESIGN.md` as the single source of truth.
87Your job is to translate the user's product requirements into
88components and pages that look like they were designed by the same
89person who authored this file.
90 
91### 2 · Token compliance
92 
93- Pull every color, font family, radius, shadow, and spacing value
94  from the frontmatter at the top of this file.
95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
96  hard-code hex values that bypass the system.
97- When a token can be expressed as a CSS variable, declare it once
98  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 recipes
103 
104Use these recipes verbatim when building the corresponding component.
105 
106#### Buttons
107 
108Four variants are defined. Pick one — never blend variants or invent a fifth.
109 
110- **Primary** — rounded shape, bg `#2956E8`, text `#FFFFFF`, border `1px solid #2956E8`, padding `12px 22px`, weight `500`.
111- **Secondary** — rounded shape, bg `#FFFFFF`, text `#0F1115`, border `1px solid rgba(15, 17, 21, 0.10)`, padding `12px 22px`, weight `500`.
112- **Outline** — rounded shape, text `#2956E8`, border `1px solid #2956E8`, padding `11px 20px`, weight `500`.
113- **Ghost** — rounded shape, text `#2956E8`, padding `10px 6px`, weight `500`.
114 
115Reach for **primary** as the single dominant CTA per screen.
116**Secondary** for the supporting action. **Outline** for tertiary
117actions in toolbars. **Ghost** for inline links and table actions.
118 
119#### Cards
120 
121- Background: `#FFFFFF`
122- Border: `1px solid rgba(15, 17, 21, 0.06)`
123- Shadow: `0 1px 2px rgba(15, 17, 21, 0.04)`
124- Radius: `radius.lg` (`14px`)
125- Internal padding: `20px` for compact cards, `24–28px` for content cards.
126 
127#### Charts
128 
129- Bar/line variant: `line`
130- No gridlines — let the bars/lines carry the data.
131- Highlight strategy: `last` — emphasize a single bar/point per chart.
132- Use the declared palette in order: `#2956E8`, `#0F1115`, `#6B7280`.
133 
134#### Typography pairings
135 
136- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.
137- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
138- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
139 
140### 4 · Hard constraints
141 
142Never do any of the following without explicit instruction from the user:
143 
144- Introduce a new color, font, radius, or shadow that isn't declared above.
145- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
146- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
147- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
148- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
149 
150### 5 · Before you finish — verify
151 
152Run through this checklist for every screen you produce:
153 
154- [ ] Every color used appears in the Colors table above.
155- [ ] Headlines use the display font; body copy uses the body font.
156- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
157- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
158- [ ] Cards and dividers use the declared border + shadow tokens.
159- [ ] No values were invented; if you needed something missing, you stopped and asked.
160 
161---
162 
163## Overview
164Quiet Cobalt is modern SaaS pared back to its quietest expression — crystalline ice canvas, abundant whitespace, gently rounded corners, and **one** deep cobalt accent. There are no gradients, no gloss, no decoration. The whole system runs on confidence in a single chromatic moment.
165 
166This is for product marketing, B2B SaaS, dashboards, developer tools, and any modern brand whose value lives in clarity rather than spectacle.
167 
168## Color
169- **Near-Black #0F1115** — primary text. Slightly cool to harmonize with the cobalt accent.
170- **Slate #6B7280** — captions, meta, axis labels.
171- **Cobalt #2956E8** — the single accent. Primary CTA, outline buttons, ghost links, chart lines.
172- **Ice #F7F9FC** — page canvas. Pure cool off-white.
173- **Paper #FFFFFF** — card surface, brighter than the page so cards lift quietly.
174 
175**No second accent.** Cobalt is alone.
176 
177## Typography
178- **Display: Inter Tight** at 4.5rem / 600, -3.5% tracking. The tight tracking is what gives it the modern-SaaS edge.
179- **Body: Inter** at 1.0625rem with **1.6 leading**.
180 
181| Role | Font | Size | Weight | Tracking |
182|------|------|------|--------|----------|
183| Hero | Inter Tight | 4.5rem | 600 | -0.035em |
184| H1 | Inter Tight | 2.75rem | 600 | -0.03em |
185| H2 | Inter Tight | 1.5rem | 600 | -0.015em |
186| Body | Inter | 1.0625rem | 400 | -0.005em / 1.6 |
187 
188## Whitespace Rhythm
189- **Section gap: 140px** desktop, 80px mobile.
190- **Card padding: 32px**. Never below 24px.
191- **Heading-to-body gap: 20px**.
192- **Inter-paragraph: 14px**.
193 
194When in doubt, add more vertical air.
195 
196## Buttons
197All four are gently rounded at 10px — the SaaS sweet spot. Never pill, never sharp.
198 
199- **Primary** — cobalt fill, white label, no shadow. The single chromatic moment.
200- **Secondary** — white surface, 10% slate hairline.
201- **Outline** — transparent with 1px cobalt border.
202- **Ghost** — bare cobalt label, hover underline.
203 
204**No drop shadows on buttons.** Form carries the gesture.
205 
206## Cards
207White surface, **1px slate border at 6%**, a 1px shadow at 4%. Radius is **14px**. Cards lift quietly — never with a halo.
208 
209## Charts & Data
210A single 2px cobalt line over ice. **No gridlines, no fills.** Small cobalt dot at the latest reading. Axis labels in slate.
211 
212## Do's and Don'ts
213- ✅ Whitespace is the material — over-space, never crowd.
214- ✅ Inter Tight 600 with -3.5% tracking on display. The tracking is the voice.
215- ✅ Cobalt earns its loudness by being alone.
216- ✅ Ice canvas (#F7F9FC), never pure white. The cool cast harmonizes with cobalt.
217- ❌ No gradients anywhere. Quiet Cobalt is flat by design.
218- ❌ No drop shadows beyond a 4% hairline.
219- ❌ No second accent. Sage, mint, amber — all forbidden.
220- ❌ No pill buttons. The 10px radius IS the system.
221 
222---
223 
224## Tokens
225 
226> Generated from the same source the live preview renders from.
227> Treat the values below as the contract — never substitute approximations.
228 
229### Colors
230 
231| Role      | Value |
232|-----------|-------|
233| primary   | `#0F1115` |
234| secondary | `#6B7280` |
235| tertiary  | `#2956E8` |
236| neutral   | `#F7F9FC` |
237| surface   | `#FFFFFF` |
238 
239### Typography
240 
241- **Display:** Inter Tight
242- **Body:** Inter
243- **Mono:** JetBrains Mono
244 
245| Role | size / leading / weight / tracking |
246|------|------------------------------------|
247| Hero | 4.5rem / 1.05 / 600 / -0.035em |
248| H1   | 2.75rem / 1.1 / 600 / -0.03em |
249| H2   | 1.5rem / 1.3 / 600 / -0.015em |
250| Body | 1.0625rem / 1.6 / 400 / -0.005em |
251 
252### Radius
253 
254- sm: `8px`
255- md: `10px`
256- lg: `14px`
257- pill: `9999px`
258 
259### Shadows
260 
261- **card:** `0 1px 2px rgba(15, 17, 21, 0.04)`
262- **button:** `none`
263 
264### Borders
265 
266- **card:** `1px solid rgba(15, 17, 21, 0.06)`
267- **divider:** `rgba(15, 17, 21, 0.05)`
268 
269### Buttons
270 
271Four variants, each fully tokenized. The preview renders from these exact values.
272 
273#### Primary
274 
275| Property | Value |
276|----------|-------|
277| shape | `rounded` |
278| background | `#2956E8` |
279| color | `#FFFFFF` |
280| border | `1px solid #2956E8` |
281| padding | `12px 22px` |
282| fontWeight | `500` |
283| fontSize | `0.9375rem` |
284| tracking | `-0.005em` |
285 
286#### Secondary
287 
288| Property | Value |
289|----------|-------|
290| shape | `rounded` |
291| background | `#FFFFFF` |
292| color | `#0F1115` |
293| border | `1px solid rgba(15, 17, 21, 0.10)` |
294| padding | `12px 22px` |
295| fontWeight | `500` |
296| fontSize | `0.9375rem` |
297| tracking | `-0.005em` |
298 
299#### Outline
300 
301| Property | Value |
302|----------|-------|
303| shape | `rounded` |
304| background | `transparent` |
305| color | `#2956E8` |
306| border | `1px solid #2956E8` |
307| padding | `11px 20px` |
308| fontWeight | `500` |
309| fontSize | `0.9375rem` |
310| tracking | `-0.005em` |
311 
312#### Ghost
313 
314| Property | Value |
315|----------|-------|
316| shape | `rounded` |
317| background | `transparent` |
318| color | `#2956E8` |
319| border | `none` |
320| padding | `10px 6px` |
321| fontWeight | `500` |
322| fontSize | `0.9375rem` |
323| tracking | `-0.005em` |
324| hoverHint | `underline` |
325 
326### Charts
327 
328| Property | Value |
329|----------|-------|
330| variant | `line` |
331| strokeWidth | `2` |
332| gridlines | `false` |
333| highlight | `last` |
334| dotMarker | `true` |
335| axisColor | `#6B7280` |
336| palette | `#2956E8`, `#0F1115`, `#6B7280` |
337 
338---
339 
340## Pro tokens
341 
342> Production-fidelity tokens. States, density, motion, elevation,
343> content rules and a measured WCAG contract — derived from the
344> resting tokens unless explicitly authored.
345 
346### States
347 
348#### Button
349 
350- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`
351- **focus** — outline: `2px solid rgba(41, 86, 232, 0.5)`, outline-offset: `2px`
352- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`
353- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
354- **loading** — opacity: `0.7`
355- **selected** — bg: `#2956E8`, color: `#FFFFFF`
356 
357#### Input
358 
359- **hover** — border: `1px solid rgba(41, 86, 232, 0.5)`
360- **focus** — border: `1.5px solid #2956E8`, shadow: `0 0 0 4px rgba(41, 86, 232, 0.15)`
361- **disabled** — bg: `rgba(15, 17, 21, 0.04)`, opacity: `0.4`
362- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`
363 
364#### Card
365 
366- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`
367- **selected** — bg: `rgba(41, 86, 232, 0.04)`, border: `1.5px solid #2956E8`
368- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`
369 
370#### Tab
371 
372- **hover** — bg: `rgba(41, 86, 232, 0.06)`, color: `#2956E8`
373- **focus** — outline: `2px solid rgba(41, 86, 232, 0.5)`, outline-offset: `2px`
374- **selected** — color: `#2956E8`, border: `0 0 2px 0 solid #2956E8`
375 
376### Density
377 
378| Mode | padding × | row × | body | radius × | Use for |
379|------|-----------|-------|------|----------|---------|
380| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
381| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
382| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
383 
384### Motion
385 
386**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.
387 
388```css
389transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
390```
391 
392| Token | Value |
393|-------|-------|
394| duration.instant | `80ms` |
395| duration.fast | `160ms` |
396| duration.base | `240ms` |
397| duration.slow | `380ms` |
398| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |
399| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
400| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
401| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |
402 
403### Elevation
404 
405Five-level scale, system-specific recipe.
406 
407| Level | Shadow | Recipe |
408|-------|--------|--------|
409| level0 | `none` | Flat — hairline border separates. |
410| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |
411| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |
412| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |
413| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |
414 
415### Content
416 
417- **measure:** `68ch` (max line length for body prose)
418- **paragraph spacing:** `1.2em`
419- **list indent:** `1.5em`
420- **list gap:** `0.5em`
421- **link:** color `#2956E8`, underline `hover`
422- **blockquote:** border `3px solid rgba(41, 86, 232, 0.6)`, padding `0.5em 0 0.5em 1.25em`
423- **code:** background `rgba(15, 17, 21, 0.06)`, color `#0F1115`
424 
425### Accessibility (WCAG 2.1)
426 
427**Overall:** AA
428 
429| Pair | Ratio | Required | Grade | Suggested fix |
430|------|-------|----------|-------|---------------|
431| Body text on surface | 18.9:1 | AA | AAA | — |
432| Body text on canvas | 17.92:1 | AA | AAA | — |
433| Muted text on surface | 4.83:1 | AA | AA | — |
434| Accent on surface | 5.85:1 | AA-Large | AA | — |
435| Accent on canvas | 5.55:1 | AA-Large | AA | — |
436
04 · 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.
05 · 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:   '#0F1115',
        secondary: '#6B7280',
        accent:    '#2956E8',
        neutral:   '#F7F9FC',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '8px',
        md: '10px',
        lg: '14px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Dawn Quartz

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.

gradientwarmminimalpremiummodern
Dawn.app
ProductPricingDocsAbout
Sign inGet started
gradient · warm · minimal

Build with Dawn Quartz.

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