Endless whitespace. Bold Inter headlines at -3% tracking. A single black accent. Soft 6px corners. Nothing else.
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: "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: Inter13 body: Inter14 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: 4px22 md: 6px23 lg: 8px24 pill: 9999px25shadows: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: #0A0A0A34 color: #FFFFFF35 border: none36 shape: rounded37 padding: 12px 22px38 font: 600 / 0.9375rem / -0.01em39 shadow: rgba(10,10,10,0.08) 0 1px 2px40 secondary:41 background: #FFFFFF42 color: #0A0A0A43 border: 1px solid rgba(10,10,10,0.10)44 shape: rounded45 padding: 12px 22px46 font: 600 / 0.9375rem / -0.01em47 outline:48 background: transparent49 color: #0A0A0A50 border: 1px solid #0A0A0A51 shape: rounded52 padding: 11px 22px53 font: 600 / 0.9375rem / -0.01em54 ghost:55 background: transparent56 color: #0A0A0A57 border: none58 shape: rounded59 padding: 12px 14px60 font: 600 / 0.9375rem / -0.01em61 hover: underline62charts:63 variant: bars64 gridlines: false65 bar_radius: 3px66 bar_gap: 12px67 highlight: single68 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 Minimal74 75## AI Build Instructions76 77> **Read this section before writing any code.** The rules below78> are non-negotiable. Every value used in the UI must come from this79> file's frontmatter — never substitute, approximate, or invent new80> colors, fonts, radii, or shadows. If a value is missing, ask the81> user before adding one.82 83### 1 · Your role84 85You are building UI for a project that has adopted **Blanc Minimal** as its86design system. Treat `DESIGN.md` as the single source of truth.87Your job is to translate the user's product requirements into88components and pages that look like they were designed by the same89person who authored this file.90 91### 2 · Token compliance92 93- Pull every color, font family, radius, shadow, and spacing value94 from the frontmatter at the top of this file.95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never96 hard-code hex values that bypass the system.97- When a token can be expressed as a CSS variable, declare it once98 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 recipes103 104Use these recipes verbatim when building the corresponding component.105 106#### Buttons107 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 tertiary117actions in toolbars. **Ghost** for inline links and table actions.118 119#### Cards120 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#### Charts128 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 pairings135 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 constraints141 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 — verify151 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## Overview164A 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## Colors169- **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## Typography178**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## Spacing191Built 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: 1120px194- Section: 120px195- Block: 64px196- Element: 16–24px197 198## Components199 200### Buttons201Four 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### Cards209White 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### Dividers212Hairline at 6% ink. Felt, not seen.213 214## Charts & Data215Single-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## Icons218`lucide-react` at stroke-width **1.5**. Always ink. Never colored.219 220## Do's and Don'ts221- ✅ 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## Tokens233 234> Generated from the same source the live preview renders from.235> Treat the values below as the contract — never substitute approximations.236 237### Colors238 239| Role | Value |240|-----------|-------|241| primary | `#0A0A0A` |242| secondary | `#737373` |243| tertiary | `#0A0A0A` |244| neutral | `#FAFAFA` |245| surface | `#FFFFFF` |246 247### Typography248 249- **Display:** Inter250- **Body:** Inter251- **Mono:** JetBrains Mono252 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### Radius261 262- sm: `4px`263- md: `6px`264- lg: `8px`265- pill: `9999px`266 267### Shadows268 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### Borders273 274- **card:** `1px solid rgba(10,10,10,0.06)`275- **divider:** `1px solid rgba(10,10,10,0.06)`276 277### Buttons278 279Four variants, each fully tokenized. The preview renders from these exact values.280 281#### Primary282 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#### Secondary296 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#### Outline309 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#### Ghost322 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### Charts336 337| Property | Value |338|----------|-------|339| variant | `bars` |340| gridlines | `false` |341| barRadius | `3px` |342| barGap | `12px` |343| highlight | `single` |344| axisColor | `#A3A3A3` |345 # 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=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};Radical 2-color duotone. Deep ink-blue and acid citron, with no third hue. Every surface is one of the two colors or a tint thereof — the constraint is the personality.
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.
Tonal elevation, dynamic-color purple primary, full-rounded buttons, Roboto Flex throughout. Faithful to the modern tonal-surface spec — generous, accessible, dependable for product UI.
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.