No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand.
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: "Quartz Monochrome"3description: "No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand."4tags: [minimal, monochrome, light, premium, modern]5colors:6 primary: "#0F0F11"7 secondary: "#6F6F75"8 tertiary: "#A8A8AE"9 neutral: "#FAFAF8"10 surface: "#FFFFFF"11typography:12 display: Geist13 body: Geist14 mono: "Geist Mono"15 scale:16 hero: "4.75rem / 1.05 / 500 / -0.04em"17 h1: "2.75rem / 1.08 / 500 / -0.032em"18 h2: "1.5rem / 1.3 / 500 / -0.018em"19 body: "1.0625rem / 1.65 / 400 / -0.005em"20radius:21 sm: 10px22 md: 14px23 lg: 16px24 pill: 9999px25shadows:26 card: "0 1px 2px rgba(15, 15, 17, 0.04), 0 8px 24px -12px rgba(15, 15, 17, 0.08)"27 button: "0 1px 2px rgba(15, 15, 17, 0.06)"28borders:29 card: "1px solid rgba(15, 15, 17, 0.06)"30 divider: "rgba(15, 15, 17, 0.08)"31buttons:32 primary:33 background: #0F0F1134 color: #FAFAF835 border: 1px solid #0F0F1136 shape: pill37 padding: 12px 24px38 font: 500 / 0.9375rem / -0.005em39 shadow: 0 1px 2px rgba(15, 15, 17, 0.06)40 secondary:41 background: #FFFFFF42 color: #0F0F1143 border: 1px solid rgba(15, 15, 17, 0.10)44 shape: pill45 padding: 12px 24px46 font: 500 / 0.9375rem / -0.005em47 outline:48 background: transparent49 color: #0F0F1150 border: 1px solid rgba(15, 15, 17, 0.16)51 shape: pill52 padding: 11px 23px53 font: 500 / 0.9375rem / -0.005em54 ghost:55 background: transparent56 color: #6F6F7557 border: none58 shape: pill59 padding: 11px 6px60 font: 500 / 0.9375rem / -0.005em61 hover: underline62charts:63 variant: line64 stroke_width: 265 gridlines: false66 highlight: last67 dot_marker: true68 axis_color: "#A8A8AE"69 palette: ["#0F0F11"]70fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"71dependencies: ["lucide-react"]72---73 74# Quartz Monochrome75 76## AI Build Instructions77 78> **Read this section before writing any code.** The rules below79> are non-negotiable. Every value used in the UI must come from this80> file's frontmatter — never substitute, approximate, or invent new81> colors, fonts, radii, or shadows. If a value is missing, ask the82> user before adding one.83 84### 1 · Your role85 86You are building UI for a project that has adopted **Quartz Monochrome** as its87design system. Treat `DESIGN.md` as the single source of truth.88Your job is to translate the user's product requirements into89components and pages that look like they were designed by the same90person who authored this file.91 92### 2 · Token compliance93 94- Pull every color, font family, radius, shadow, and spacing value95 from the frontmatter at the top of this file.96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never97 hard-code hex values that bypass the system.98- When a token can be expressed as a CSS variable, declare it once99 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 recipes104 105Use these recipes verbatim when building the corresponding component.106 107#### Buttons108 109Four variants are defined. Pick one — never blend variants or invent a fifth.110 111- **Primary** — pill shape, bg `#0F0F11`, text `#FAFAF8`, border `1px solid #0F0F11`, padding `12px 24px`, weight `500`, shadow `0 1px 2px rgba(15, 15, 17, 0.06)`.112- **Secondary** — pill shape, bg `#FFFFFF`, text `#0F0F11`, border `1px solid rgba(15, 15, 17, 0.10)`, padding `12px 24px`, weight `500`.113- **Outline** — pill shape, text `#0F0F11`, border `1px solid rgba(15, 15, 17, 0.16)`, padding `11px 23px`, weight `500`.114- **Ghost** — pill shape, text `#6F6F75`, padding `11px 6px`, weight `500`.115 116Reach for **primary** as the single dominant CTA per screen.117**Secondary** for the supporting action. **Outline** for tertiary118actions in toolbars. **Ghost** for inline links and table actions.119 120#### Cards121 122- Background: `#FFFFFF`123- Border: `1px solid rgba(15, 15, 17, 0.06)`124- Shadow: `0 1px 2px rgba(15, 15, 17, 0.04), 0 8px 24px -12px rgba(15, 15, 17, 0.08)`125- Radius: `radius.lg` (`16px`)126- Internal padding: `20px` for compact cards, `24–28px` for content cards.127 128#### Charts129 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: `#0F0F11`.134 135#### Typography pairings136 137- **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks.138- **Body (`Geist`)** — paragraphs, labels, button text, form inputs.139- **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables.140 141### 4 · Hard constraints142 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 — verify152 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## Overview165Quartz Monochrome is the discipline of removing color until only structure remains. The entire system is five steps of grey on a paper-white canvas — no blue, no accent, no warm tertiary. One humanist sans (Geist) is used for everything. Corner radii are generous (16px). Whitespace is the loudest element on the page.166 167The system disappears so the content can speak. For writing platforms, design portfolios, premium reading apps, design libraries, anything where the page should feel like a glass case around the work.168 169## Color170A five-step greyscale. No chroma anywhere.171 172| Token | Hex | Use |173|-------|-----|-----|174| Ink | #0F0F11 | Primary text, primary CTA fill |175| Mid | #6F6F75 | Secondary text |176| Light | #A8A8AE | Tertiary text, axis labels |177| Canvas | #FAFAF8 | Page background |178| Surface | #FFFFFF | Card surface |179 180The canvas is **#FAFAF8** — paper-white with the faintest warm bias so the page doesn't feel sterile. The surface is pure white, one notch up.181 182## Typography183**One family: Geist.** Display, body, mono variant — all Geist. The single-family decision is itself the system.184 185| Role | Size | Weight | Tracking |186|------|------|--------|----------|187| Hero | 4.75rem | 500 | -0.04em |188| H1 | 2.75rem | 500 | -0.032em |189| H2 | 1.5rem | 500 | -0.018em |190| Body | 1.0625rem | 400 | -0.005em / 1.65 |191 192Display weight is **500, never 700**. The system is quiet — bold type would break the discipline.193 194## Geometry195- **Radii: 10 / 14 / 16, plus pill.** Generous and soft. Never sharp.196- **Section gap: 128px** desktop, 80px mobile. Whitespace is the design.197- **12-column grid** with 32px gutters. Wide gutters reinforce the calm.198 199## Buttons200All pills. Four variants share the same vertical rhythm.201 202- **Primary** — solid ink pill, canvas-tone label. The single loud element on the page.203- **Secondary** — surface white pill, ink label, hairline border.204- **Outline** — bare hairline pill.205- **Ghost** — bare mid-grey label, hover underline.206 207There is no danger / success / warning button. The system has no semantic color.208 209## Cards210Surface white on canvas, 1px ink hairline at 6% opacity, 14px corner radius, single soft layered shadow. Padding 32px minimum. Cards have generous internal whitespace — the same discipline as the page.211 212## Charts & Data213Single ink line at 2px stroke, no gridlines, end-of-line dot marker. Axis labels in light grey at 11px. The chart is a hairline drawing, not a marketing visualization.214 215## Do's and Don'ts216- ✅ One family for everything — Geist. The single-family decision IS the brand.217- ✅ Display weight 500. Never go up to 700.218- ✅ Whitespace is the loudest element. Section gaps of 128px are not optional.219- ✅ Generous 14-16px radii. Soft modern, never sharp.220- ❌ No chromatic color. No blue link, no green checkmark, no red error. The system is monochrome.221- ❌ No second font. The discipline of one family is the entire identity.222- ❌ No display weight above 500. Bold breaks the calm.223- ❌ No drop shadow heavier than the spec. The shadow is a whisper.224 225---226 227## Tokens228 229> Generated from the same source the live preview renders from.230> Treat the values below as the contract — never substitute approximations.231 232### Colors233 234| Role | Value |235|-----------|-------|236| primary | `#0F0F11` |237| secondary | `#6F6F75` |238| tertiary | `#A8A8AE` |239| neutral | `#FAFAF8` |240| surface | `#FFFFFF` |241 242### Typography243 244- **Display:** Geist245- **Body:** Geist246- **Mono:** Geist Mono247 248| Role | size / leading / weight / tracking |249|------|------------------------------------|250| Hero | 4.75rem / 1.05 / 500 / -0.04em |251| H1 | 2.75rem / 1.08 / 500 / -0.032em |252| H2 | 1.5rem / 1.3 / 500 / -0.018em |253| Body | 1.0625rem / 1.65 / 400 / -0.005em |254 255### Radius256 257- sm: `10px`258- md: `14px`259- lg: `16px`260- pill: `9999px`261 262### Shadows263 264- **card:** `0 1px 2px rgba(15, 15, 17, 0.04), 0 8px 24px -12px rgba(15, 15, 17, 0.08)`265- **button:** `0 1px 2px rgba(15, 15, 17, 0.06)`266 267### Borders268 269- **card:** `1px solid rgba(15, 15, 17, 0.06)`270- **divider:** `rgba(15, 15, 17, 0.08)`271 272### Buttons273 274Four variants, each fully tokenized. The preview renders from these exact values.275 276#### Primary277 278| Property | Value |279|----------|-------|280| shape | `pill` |281| background | `#0F0F11` |282| color | `#FAFAF8` |283| border | `1px solid #0F0F11` |284| padding | `12px 24px` |285| fontWeight | `500` |286| fontSize | `0.9375rem` |287| tracking | `-0.005em` |288| shadow | `0 1px 2px rgba(15, 15, 17, 0.06)` |289 290#### Secondary291 292| Property | Value |293|----------|-------|294| shape | `pill` |295| background | `#FFFFFF` |296| color | `#0F0F11` |297| border | `1px solid rgba(15, 15, 17, 0.10)` |298| padding | `12px 24px` |299| fontWeight | `500` |300| fontSize | `0.9375rem` |301| tracking | `-0.005em` |302 303#### Outline304 305| Property | Value |306|----------|-------|307| shape | `pill` |308| background | `transparent` |309| color | `#0F0F11` |310| border | `1px solid rgba(15, 15, 17, 0.16)` |311| padding | `11px 23px` |312| fontWeight | `500` |313| fontSize | `0.9375rem` |314| tracking | `-0.005em` |315 316#### Ghost317 318| Property | Value |319|----------|-------|320| shape | `pill` |321| background | `transparent` |322| color | `#6F6F75` |323| border | `none` |324| padding | `11px 6px` |325| fontWeight | `500` |326| fontSize | `0.9375rem` |327| tracking | `-0.005em` |328| hoverHint | `underline` |329 330### Charts331 332| Property | Value |333|----------|-------|334| variant | `line` |335| strokeWidth | `2` |336| gridlines | `false` |337| highlight | `last` |338| dotMarker | `true` |339| axisColor | `#A8A8AE` |340| palette | `#0F0F11` |341 # 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=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Geist"', 'serif'], sans: ['"Geist"', 'sans-serif'], mono: ['"Geist Mono"', 'monospace'], }, colors: { primary: '#0F0F11', secondary: '#6F6F75', accent: '#A8A8AE', neutral: '#FAFAF8', surface: '#FFFFFF', }, borderRadius: { sm: '10px', md: '14px', lg: '16px', }, }, },};Literary salon as product page. Parchment canvas, serif headlines at weight 500, terracotta brand, exclusively warm neutrals, and ring-shadow depth.
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.
Clinical software that doesn't feel clinical. Cool pearl off-white surfaces with hairline-only chrome, Manrope for prose, IBM Plex Mono with tabular numerals for vital signs and dosages, a single deep teal accent reserved for the active patient pane. Built for healthcare platforms, clinical SaaS, and any product where calm authority matters more than 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.