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

Blanc Minimal.

Endless whitespace. Bold Inter headlines at -3% tracking. A single black accent. Soft 6px corners. Nothing else.

01 · Preview

The kitchen sink.

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

Build with Blanc Minimal.

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
#0A0A0A
secondary
#737373
tertiary
#0A0A0A
neutral
#FAFAFA
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
4px
md
6px
lg
8px
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.

ArchetypeEditorial

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

Tab

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

DESIGN.md

markdown
1---
2name: "Blanc Minimal"
3description: "Endless whitespace. Bold Inter headlines at -3% tracking. A single black accent. Soft 6px corners. Nothing else."
4tags: [minimal, light, saas, editorial, modern]
5colors:
6  primary:   "#0A0A0A"
7  secondary: "#737373"
8  tertiary:  "#0A0A0A"
9  neutral:   "#FAFAFA"
10  surface:   "#FFFFFF"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5rem / 1.02 / 700 / -0.03em"
17    h1:   "3.25rem / 1.05 / 700 / -0.03em"
18    h2:   "2rem / 1.15 / 600 / -0.02em"
19    body: "1rem / 1.6 / 400 / 0"
20radius:
21  sm: 4px
22  md: 6px
23  lg: 8px
24  pill: 9999px
25shadows:
26  card:   "rgba(10,10,10,0.06) 0 0 0 1px"
27  button: "rgba(10,10,10,0.08) 0 1px 2px"
28borders:
29  card:    "1px solid rgba(10,10,10,0.06)"
30  divider: "1px solid rgba(10,10,10,0.06)"
31buttons:
32  primary:
33    background: #0A0A0A
34    color: #FFFFFF
35    border: none
36    shape: rounded
37    padding: 12px 22px
38    font: 600 / 0.9375rem / -0.01em
39    shadow: rgba(10,10,10,0.08) 0 1px 2px
40  secondary:
41    background: #FFFFFF
42    color: #0A0A0A
43    border: 1px solid rgba(10,10,10,0.10)
44    shape: rounded
45    padding: 12px 22px
46    font: 600 / 0.9375rem / -0.01em
47  outline:
48    background: transparent
49    color: #0A0A0A
50    border: 1px solid #0A0A0A
51    shape: rounded
52    padding: 11px 22px
53    font: 600 / 0.9375rem / -0.01em
54  ghost:
55    background: transparent
56    color: #0A0A0A
57    border: none
58    shape: rounded
59    padding: 12px 14px
60    font: 600 / 0.9375rem / -0.01em
61    hover: underline
62charts:
63  variant: bars
64  gridlines: false
65  bar_radius: 3px
66  bar_gap: 12px
67  highlight: single
68  axis_color: "#A3A3A3"
69fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Blanc Minimal
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 **Blanc Minimal** 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 `#0A0A0A`, text `#FFFFFF`, padding `12px 22px`, weight `600`, shadow `rgba(10,10,10,0.08) 0 1px 2px`.
111- **Secondary** — rounded shape, bg `#FFFFFF`, text `#0A0A0A`, border `1px solid rgba(10,10,10,0.10)`, padding `12px 22px`, weight `600`.
112- **Outline** — rounded shape, text `#0A0A0A`, border `1px solid #0A0A0A`, padding `11px 22px`, weight `600`.
113- **Ghost** — rounded shape, text `#0A0A0A`, padding `12px 14px`, weight `600`.
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(10,10,10,0.06)`
123- Shadow: `rgba(10,10,10,0.06) 0 0 0 1px`
124- Radius: `radius.lg` (`8px`)
125- Internal padding: `20px` for compact cards, `24–28px` for content cards.
126 
127#### Charts
128 
129- Bar/line variant: `bars`
130- Bar radius: `3px`
131- No gridlines — let the bars/lines carry the data.
132- Highlight strategy: `single` — emphasize a single bar/point per chart.
133 
134#### Typography pairings
135 
136- **Display (`Inter`)** — 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
164A design system stripped to its essentials. Endless whitespace carries the eye; a single black accent does all the work. Bold Inter headlines at **-3% letter-spacing** create density precisely where the layout is otherwise quiet. Corners are softly rounded at 6px — never sharp, never pill.
165 
166This is not minimalism for fashion. It is restraint as a feature: every element earns its place.
167 
168## Colors
169- **Ink #0A0A0A** — text, the only accent, the only fill. Use it sparingly and it stays loud.
170- **Mid #737373** — captions, timestamps, meta. Never for body copy.
171- **Surface #FFFFFF** — cards, panels.
172- **Background #FAFAFA** — page canvas. Slightly warm so #FFF surfaces lift off it.
173- **Border rgba(10,10,10,0.06)** — hairline only. If you can clearly see the border, it's too strong.
174 
175> Rule: there is no second accent color. Don't add one.
176 
177## Typography
178**Inter** at every level. Hierarchy comes from weight and size, never color.
179 
180| Role  | Size      | Weight | Leading | Tracking  |
181|-------|-----------|--------|---------|-----------|
182| Hero  | 5rem      | 700    | 1.02    | **-0.03em** |
183| H1    | 3.25rem   | 700    | 1.05    | **-0.03em** |
184| H2    | 2rem      | 600    | 1.15    | -0.02em   |
185| Body  | 1rem      | 400    | 1.6     | 0         |
186| Small | 0.8125rem | 500    | 1.5     | 0         |
187 
188The -3% tracking on display sizes is non-negotiable — it is the visual signature of the system.
189 
190## Spacing
191Built on an **8px grid**. Section padding starts at **120px** vertical. The whitespace is the design; do not fight it with dense compositions.
192 
193- Container max: 1120px
194- Section: 120px
195- Block: 64px
196- Element: 16–24px
197 
198## Components
199 
200### Buttons
201Four variants, all 6px radius, all Inter 600 at 0.9375rem with -0.01em tracking.
202 
203- **Primary** — black fill, white ink, subtle 1px ink halo shadow. The only filled button.
204- **Secondary** — white fill, hairline 10%-ink border.
205- **Outline** — transparent fill, solid 1px ink border. Confident, not loud.
206- **Ghost** — bare label with hover underline. Tertiary actions only.
207 
208### Cards
209White surface, no drop-shadow. A 1px border at 6% ink (rendered as box-shadow) provides the only edge. Corners 8px. Padding 32px minimum.
210 
211### Dividers
212Hairline at 6% ink. Felt, not seen.
213 
214## Charts & Data
215Single-accent thin bars. **No gridlines**. Bar radius 3px, bar gap 12px. The chart sits in whitespace; the whitespace is the gridline. Axis labels in mid-grey #A3A3A3.
216 
217## Icons
218`lucide-react` at stroke-width **1.5**. Always ink. Never colored.
219 
220## Do's and Don'ts
221- ✅ Use whitespace generously. If it feels too empty, add more.
222- ✅ Hold the -3% tracking on every display headline.
223- ✅ Keep all corners at 6px — never sharp, never pill on buttons.
224- ✅ Reach for ink before reaching for a second color.
225- ❌ No drop-shadows. Borders-as-shadow only.
226- ❌ No second accent color, ever.
227- ❌ No bold body copy. Weight 400 for body, always.
228- ❌ No gridlines on charts.
229 
230---
231 
232## Tokens
233 
234> Generated from the same source the live preview renders from.
235> Treat the values below as the contract — never substitute approximations.
236 
237### Colors
238 
239| Role      | Value |
240|-----------|-------|
241| primary   | `#0A0A0A` |
242| secondary | `#737373` |
243| tertiary  | `#0A0A0A` |
244| neutral   | `#FAFAFA` |
245| surface   | `#FFFFFF` |
246 
247### Typography
248 
249- **Display:** Inter
250- **Body:** Inter
251- **Mono:** JetBrains Mono
252 
253| Role | size / leading / weight / tracking |
254|------|------------------------------------|
255| Hero | 5rem / 1.02 / 700 / -0.03em |
256| H1   | 3.25rem / 1.05 / 700 / -0.03em |
257| H2   | 2rem / 1.15 / 600 / -0.02em |
258| Body | 1rem / 1.6 / 400 / 0 |
259 
260### Radius
261 
262- sm: `4px`
263- md: `6px`
264- lg: `8px`
265- pill: `9999px`
266 
267### Shadows
268 
269- **card:** `rgba(10,10,10,0.06) 0 0 0 1px`
270- **button:** `rgba(10,10,10,0.08) 0 1px 2px`
271 
272### Borders
273 
274- **card:** `1px solid rgba(10,10,10,0.06)`
275- **divider:** `1px solid rgba(10,10,10,0.06)`
276 
277### Buttons
278 
279Four variants, each fully tokenized. The preview renders from these exact values.
280 
281#### Primary
282 
283| Property | Value |
284|----------|-------|
285| shape | `rounded` |
286| background | `#0A0A0A` |
287| color | `#FFFFFF` |
288| border | `none` |
289| padding | `12px 22px` |
290| fontWeight | `600` |
291| fontSize | `0.9375rem` |
292| tracking | `-0.01em` |
293| shadow | `rgba(10,10,10,0.08) 0 1px 2px` |
294 
295#### Secondary
296 
297| Property | Value |
298|----------|-------|
299| shape | `rounded` |
300| background | `#FFFFFF` |
301| color | `#0A0A0A` |
302| border | `1px solid rgba(10,10,10,0.10)` |
303| padding | `12px 22px` |
304| fontWeight | `600` |
305| fontSize | `0.9375rem` |
306| tracking | `-0.01em` |
307 
308#### Outline
309 
310| Property | Value |
311|----------|-------|
312| shape | `rounded` |
313| background | `transparent` |
314| color | `#0A0A0A` |
315| border | `1px solid #0A0A0A` |
316| padding | `11px 22px` |
317| fontWeight | `600` |
318| fontSize | `0.9375rem` |
319| tracking | `-0.01em` |
320 
321#### Ghost
322 
323| Property | Value |
324|----------|-------|
325| shape | `rounded` |
326| background | `transparent` |
327| color | `#0A0A0A` |
328| border | `none` |
329| padding | `12px 14px` |
330| fontWeight | `600` |
331| fontSize | `0.9375rem` |
332| tracking | `-0.01em` |
333| hoverHint | `underline` |
334 
335### Charts
336 
337| Property | Value |
338|----------|-------|
339| variant | `bars` |
340| gridlines | `false` |
341| barRadius | `3px` |
342| barGap | `12px` |
343| highlight | `single` |
344| axisColor | `#A3A3A3` |
345 
346---
347 
348## Pro tokens
349 
350> Production-fidelity tokens. States, density, motion, elevation,
351> content rules and a measured WCAG contract — derived from the
352> resting tokens unless explicitly authored.
353 
354### States
355 
356#### Button
357 
358- **hover** — bg: `rgba(10, 10, 10, 0.92)`, shadow: `0 4px 20px -8px rgba(10, 10, 10, 0.4)`
359- **focus** — outline: `1.5px solid #0A0A0A`, outline-offset: `4px`
360- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
361- **disabled** — opacity: `0.45`
362- **loading** — opacity: `0.7`
363- **selected** — bg: `#0A0A0A`, color: `#FFFFFF`
364 
365#### Input
366 
367- **hover** — border: `1px solid #0A0A0A`
368- **focus** — border: `1px solid #0A0A0A`, shadow: `0 1px 0 0 #0A0A0A`
369- **disabled** — opacity: `0.45`
370- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
371 
372#### Card
373 
374- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
375- **selected** — border: `1px solid #0A0A0A`
376 
377#### Tab
378 
379- **hover** — color: `#0A0A0A`
380- **focus** — outline: `1.5px solid #0A0A0A`, outline-offset: `3px`
381- **selected** — color: `#0A0A0A`, border: `0 0 2px 0 solid #0A0A0A`
382 
383### Density
384 
385| Mode | padding × | row × | body | radius × | Use for |
386|------|-----------|-------|------|----------|---------|
387| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
388| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
389| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
390 
391### Motion
392 
393**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
394 
395```css
396transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
397```
398 
399| Token | Value |
400|-------|-------|
401| duration.instant | `80ms` |
402| duration.fast | `180ms` |
403| duration.base | `320ms` |
404| duration.slow | `500ms` |
405| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
406| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
407| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
408| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
409 
410### Elevation
411 
412Five-level scale, system-specific recipe.
413 
414| Level | Shadow | Recipe |
415|-------|--------|--------|
416| level0 | `none` | Hairline only — typical editorial resting state. |
417| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
418| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
419| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
420| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
421 
422### Content
423 
424- **measure:** `60ch` (max line length for body prose)
425- **paragraph spacing:** `1.5em`
426- **list indent:** `1.75em`
427- **list gap:** `0.55em`
428- **link:** color `#0A0A0A`, underline `always`
429- **blockquote:** border `4px solid #0A0A0A`, padding `0.4em 0 0.4em 1.5em`
430- **code:** background `rgba(10, 10, 10, 0.06)`, color `#0A0A0A`
431 
432### Accessibility (WCAG 2.1)
433 
434**Overall:** AA
435 
436| Pair | Ratio | Required | Grade | Suggested fix |
437|------|-------|----------|-------|---------------|
438| Body text on surface | 19.8:1 | AA | AAA | — |
439| Body text on canvas | 18.97:1 | AA | AAA | — |
440| Muted text on surface | 4.74:1 | AA | AA | — |
441| Accent on surface | 19.8:1 | AA-Large | AAA | — |
442| Accent on canvas | 18.97:1 | AA-Large | AAA | — |
443
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=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Inter"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0A0A0A',
        secondary: '#737373',
        accent:    '#0A0A0A',
        neutral:   '#FAFAFA',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '8px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Peony Zine

A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness.

editorialsoftwarmminimalpremium
Peony.app
ProductPricingDocsAbout
Sign inGet started
editorial · soft · warm

Build with Peony Zine.

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

Argent Machined

Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined.

metallicpremiumcoolminimalhardware
Argent.app
ProductPricingDocsAbout
Sign inGet started
metallic · premium · cool

Build with Argent Machined.

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