/
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 · 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
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:   '#0F1115',
        secondary: '#6B7280',
        accent:    '#2956E8',
        neutral:   '#F7F9FC',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '8px',
        md: '10px',
        lg: '14px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Mineral Dusk

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.

minimalgradientlightpremiumeditorial
Mineral.app
ProductPricingDocsAbout
Sign inGet started
minimal · gradient · light

Build with Mineral Dusk.

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

Wanderstay Rentals

Travel magazine that happens to be an app. Single-family typography, coral-pink accent reserved for primary CTAs, generous photography and 14–20px image radius.

consumereditorialwarmmarketplace
Wanderstay.app
ProductPricingDocsAbout
Sign inGet started
consumer · editorial · warm

Build with Wanderstay Rentals.

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