Light dev-tool. Bone canvas with a 1px graphite hairline grid, mono-forward labels, one signal-violet accent. The aesthetic of an API console — built for developer-facing platforms that ship a light theme.
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: "Hairline Light"3description: "Light dev-tool. Bone canvas with a 1px graphite hairline grid, mono-forward labels, one signal-violet accent. The aesthetic of an API console — built for developer-facing platforms that ship a light theme."4tags: ["dev-tool", light, minimal, developer, modern]5colors:6 primary: "#0E0F12"7 secondary: "#5A6068"8 tertiary: "#9097A0"9 neutral: "#F7F7F4"10 surface: "#FFFFFF"11typography:12 display: "Geist Mono"13 body: Geist14 mono: "Geist Mono"15 scale:16 hero: "4rem / 1 / 500 / -0.035em"17 h1: "2.375rem / 1.05 / 500 / -0.03em"18 h2: "1.25rem / 1.3 / 500 / -0.012em"19 body: "0.9375rem / 1.6 / 400 / -0.003em"20radius:21 sm: 4px22 md: 6px23 lg: 8px24shadows:25 card: "0 0 0 1px rgba(14, 15, 18, 0.08)"26 button: "0 1px 2px rgba(14, 15, 18, 0.06)"27borders:28 card: "1px solid rgba(14, 15, 18, 0.08)"29 divider: "rgba(14, 15, 18, 0.10)"30buttons:31 primary:32 background: #0E0F1233 color: #F7F7F434 border: 1px solid #0E0F1235 shape: rounded36 padding: 10px 18px37 font: mono / 500 / 0.8125rem / -0.005em38 shadow: 0 1px 2px rgba(14, 15, 18, 0.06)39 secondary:40 background: #FFFFFF41 color: #0E0F1242 border: 1px solid rgba(14, 15, 18, 0.14)43 shape: rounded44 padding: 10px 18px45 font: mono / 500 / 0.8125rem / -0.005em46 outline:47 background: transparent48 color: #0E0F1249 border: 1px dashed rgba(14, 15, 18, 0.30)50 shape: rounded51 padding: 10px 18px52 font: mono / 500 / 0.8125rem / -0.005em53 ghost:54 background: transparent55 color: #7C5CFA56 border: none57 shape: rounded58 padding: 10px 4px59 font: mono / 500 / 0.8125rem / -0.005em60 hover: underline61charts:62 variant: "thin-bars"63 stroke_width: 164 gridlines: true65 bar_radius: 0px66 bar_gap: 6px67 highlight: single68 axis_color: "#5A6068"69 palette: ["#7C5CFA"]70fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"71dependencies: ["lucide-react"]72---73 74# Hairline Light75 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 **Hairline Light** 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** — rounded shape, bg `#0E0F12`, text `#F7F7F4`, border `1px solid #0E0F12`, padding `10px 18px`, weight `500`, shadow `0 1px 2px rgba(14, 15, 18, 0.06)`.112- **Secondary** — rounded shape, bg `#FFFFFF`, text `#0E0F12`, border `1px solid rgba(14, 15, 18, 0.14)`, padding `10px 18px`, weight `500`.113- **Outline** — rounded shape, text `#0E0F12`, border `1px dashed rgba(14, 15, 18, 0.30)`, padding `10px 18px`, weight `500`.114- **Ghost** — rounded shape, text `#7C5CFA`, padding `10px 4px`, 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(14, 15, 18, 0.08)`124- Shadow: `0 0 0 1px rgba(14, 15, 18, 0.08)`125- Radius: `radius.lg` (`8px`)126- Internal padding: `20px` for compact cards, `24–28px` for content cards.127 128#### Charts129 130- Bar/line variant: `thin-bars`131- Bar radius: `0px`132- Highlight strategy: `single` — emphasize a single bar/point per chart.133- Use the declared palette in order: `#7C5CFA`.134 135#### Typography pairings136 137- **Display (`Geist Mono`)** — 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## Overview165Hairline Light is the light counterpart to dev-tool dark systems. The page sits on a bone canvas with a 1px graphite hairline grid; type is mono-forward (Geist Mono for display + labels, Geist Sans for body); every pixel lands on a 4px subgrid. There is exactly one chromatic accent — a signal violet — and it appears only on links, ghost buttons, and the primary chart bar.166 167The system is built for developer-facing platforms that ship a light theme: API consoles, docs sites, infra dashboards, log viewers, anything where the aesthetic is "documentation, not marketing."168 169## Color170- **Graphite #0E0F12** — primary text, primary fills, hairline borders.171- **Mid Graphite #5A6068** — secondary text, axis labels.172- **Soft Graphite #9097A0** — tertiary text, dividers at low opacity.173- **Bone #F7F7F4** — page canvas. Slightly warm so it doesn't feel sterile.174- **Paper #FFFFFF** — card surface.175- **Signal Violet #7C5CFA** — the only chromatic accent. Links, ghost button label, primary chart bar.176 177Color is rationed. The page is mostly bone and graphite with a single stroke of violet.178 179## Typography180The system runs on **Geist + Geist Mono**. Display and labels are mono — that single decision is the whole tonal voice.181 182| Role | Font | Size | Weight | Tracking |183|------|------|------|--------|----------|184| Hero | Geist Mono | 4rem | 500 | -0.035em |185| H1 | Geist Mono | 2.375rem | 500 | -0.03em |186| H2 | Geist Mono | 1.25rem | 500 | -0.012em |187| Body | Geist | 0.9375rem | 400 | -0.003em / 1.6 |188| Button | Geist Mono | 0.8125rem | 500 | -0.005em |189 190Body copy uses the proportional Geist; everything structural (display, button, label, table header) uses Geist Mono. The contrast between proportional body and mono structure is the entire texture.191 192## Geometry193- **Radii: 4 / 6 / 8.** Precise instrument geometry. Never pill, never soft.194- **4px subgrid.** Every spacing value is a multiple of 4.195- **Hairlines everywhere.** 1px graphite at 8-14% opacity divides every section. The page is a wireframe.196- **Section gap: 96px** desktop, 64px mobile.197 198## Buttons199- **Primary** — solid graphite, bone label, mono caps. The single dark element on the page.200- **Secondary** — surface paper with a 14% graphite hairline. Mono label.201- **Outline** — **dashed** hairline at 30%. Dashed = "secondary action" semantics — distinct from secondary's solid border.202- **Ghost** — bare signal-violet label, hover underline.203 204## Cards205Surface paper on bone, 1px graphite hairline at 8% opacity, sharp 6px corners, **no drop shadow**. Padding 24px. Cards are wireframes filled with content — the hairline is the entire structure.206 207## Charts & Data208Single-color thin bars in signal violet, **gridlines on** (this is a developer tool — readability beats minimalism), 6px gap, 0 corner radius. Axis labels in mid graphite at 11px Geist Mono.209 210## Do's and Don'ts211- ✅ Mono for display and structure. Proportional only for body.212- ✅ Hairline borders, never drop shadows. The system is a wireframe.213- ✅ One chromatic accent — signal violet. Used sparingly (link, ghost, primary chart bar).214- ✅ 4px subgrid. Every spacing value is a multiple of 4.215- ❌ No pill buttons. No soft corners. No drop shadows.216- ❌ No second chromatic color. The page is bone + graphite + violet.217- ❌ No proportional display type. Mono carries the identity.218- ❌ No icons inside body text. Use mono labels.219 220---221 222## Tokens223 224> Generated from the same source the live preview renders from.225> Treat the values below as the contract — never substitute approximations.226 227### Colors228 229| Role | Value |230|-----------|-------|231| primary | `#0E0F12` |232| secondary | `#5A6068` |233| tertiary | `#9097A0` |234| neutral | `#F7F7F4` |235| surface | `#FFFFFF` |236 237### Typography238 239- **Display:** Geist Mono240- **Body:** Geist241- **Mono:** Geist Mono242 243| Role | size / leading / weight / tracking |244|------|------------------------------------|245| Hero | 4rem / 1 / 500 / -0.035em |246| H1 | 2.375rem / 1.05 / 500 / -0.03em |247| H2 | 1.25rem / 1.3 / 500 / -0.012em |248| Body | 0.9375rem / 1.6 / 400 / -0.003em |249 250### Radius251 252- sm: `4px`253- md: `6px`254- lg: `8px`255 256### Shadows257 258- **card:** `0 0 0 1px rgba(14, 15, 18, 0.08)`259- **button:** `0 1px 2px rgba(14, 15, 18, 0.06)`260 261### Borders262 263- **card:** `1px solid rgba(14, 15, 18, 0.08)`264- **divider:** `rgba(14, 15, 18, 0.10)`265 266### Buttons267 268Four variants, each fully tokenized. The preview renders from these exact values.269 270#### Primary271 272| Property | Value |273|----------|-------|274| shape | `rounded` |275| background | `#0E0F12` |276| color | `#F7F7F4` |277| border | `1px solid #0E0F12` |278| padding | `10px 18px` |279| fontFamily | `mono` |280| fontWeight | `500` |281| fontSize | `0.8125rem` |282| tracking | `-0.005em` |283| shadow | `0 1px 2px rgba(14, 15, 18, 0.06)` |284 285#### Secondary286 287| Property | Value |288|----------|-------|289| shape | `rounded` |290| background | `#FFFFFF` |291| color | `#0E0F12` |292| border | `1px solid rgba(14, 15, 18, 0.14)` |293| padding | `10px 18px` |294| fontFamily | `mono` |295| fontWeight | `500` |296| fontSize | `0.8125rem` |297| tracking | `-0.005em` |298 299#### Outline300 301| Property | Value |302|----------|-------|303| shape | `rounded` |304| background | `transparent` |305| color | `#0E0F12` |306| border | `1px dashed rgba(14, 15, 18, 0.30)` |307| padding | `10px 18px` |308| fontFamily | `mono` |309| fontWeight | `500` |310| fontSize | `0.8125rem` |311| tracking | `-0.005em` |312 313#### Ghost314 315| Property | Value |316|----------|-------|317| shape | `rounded` |318| background | `transparent` |319| color | `#7C5CFA` |320| border | `none` |321| padding | `10px 4px` |322| fontFamily | `mono` |323| fontWeight | `500` |324| fontSize | `0.8125rem` |325| tracking | `-0.005em` |326| hoverHint | `underline` |327 328### Charts329 330| Property | Value |331|----------|-------|332| variant | `thin-bars` |333| strokeWidth | `1` |334| gridlines | `true` |335| barRadius | `0px` |336| barGap | `6px` |337| highlight | `single` |338| axisColor | `#5A6068` |339| palette | `#7C5CFA` |340 # 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;600&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Geist Mono"', 'serif'], sans: ['"Geist"', 'sans-serif'], mono: ['"Geist Mono"', 'monospace'], }, colors: { primary: '#0E0F12', secondary: '#5A6068', accent: '#9097A0', neutral: '#F7F7F4', surface: '#FFFFFF', }, borderRadius: { sm: '4px', md: '6px', lg: '8px', }, }, },};Dark brushed metallic. Anthracite canvas with cool brushed-steel CTAs catching a polished top-edge highlight under directional light. Premium hardware in dark theme — pro tools, audio, automotive.
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.
Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows.
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.