Coding-vibe on warm paper. Mono everywhere — display, body, captions — with a single muted terracotta accent. Hairlines instead of shadows, strict 4px subgrid. Developer discipline without the dark canvas.
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: "Console Paper"3description: "Coding-vibe on warm paper. Mono everywhere — display, body, captions — with a single muted terracotta accent. Hairlines instead of shadows, strict 4px subgrid. Developer discipline without the dark canvas."4tags: [developer, minimal, light, paper, technical]5colors:6 primary: "#1F1A14"7 secondary: "#7A7468"8 tertiary: "#B8553A"9 neutral: "#F5F1E8"10 surface: "#FAF7F0"11typography:12 display: "IBM Plex Mono"13 body: "IBM Plex Mono"14 mono: "IBM Plex Mono"15 scale:16 hero: "3.5rem / 1.05 / 500 / -0.035em"17 h1: "2.125rem / 1.1 / 500 / -0.025em"18 h2: "1.25rem / 1.35 / 500 / -0.012em"19 body: "0.9375rem / 1.65 / 400 / -0.005em"20radius:21 sm: 0px22 md: 2px23 lg: 4px24shadows:25 card: "0 0 0 1px rgba(31, 26, 20, 0.08)"26 button: none27borders:28 card: "1px solid rgba(31, 26, 20, 0.08)"29 divider: "rgba(31, 26, 20, 0.08)"30buttons:31 primary:32 background: #FAF7F033 color: #B8553A34 border: 1.5px solid #B8553A35 shape: sharp36 padding: 11px 22px37 font: mono / 500 / 0.8125rem / 0.01em38 suffix: arrow39 secondary:40 background: #FAF7F041 color: #1F1A1442 border: 1.5px solid rgba(31, 26, 20, 0.20)43 shape: sharp44 padding: 11px 22px45 font: mono / 500 / 0.8125rem / 0.01em46 outline:47 background: transparent48 color: #7A746849 border: 1px dashed rgba(31, 26, 20, 0.25)50 shape: sharp51 padding: 10px 20px52 font: mono / 500 / 0.8125rem / 0.01em53 ghost:54 background: transparent55 color: #B8553A56 border: none57 shape: sharp58 padding: 10px 4px59 font: mono / 500 / 0.8125rem / 0.01em60 hover: underline61charts:62 variant: stepped63 stroke_width: 1.564 gridlines: true65 highlight: last66 dot_marker: true67 axis_color: "#7A7468"68 palette: ["#B8553A", "#7A7468", "#1F1A14"]69fonts_url: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap"70dependencies: ["lucide-react"]71---72 73# Console Paper74 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 **Console Paper** 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** — sharp shape, bg `#FAF7F0`, text `#B8553A`, border `1.5px solid #B8553A`, padding `11px 22px`, weight `500`.111- **Secondary** — sharp shape, bg `#FAF7F0`, text `#1F1A14`, border `1.5px solid rgba(31, 26, 20, 0.20)`, padding `11px 22px`, weight `500`.112- **Outline** — sharp shape, text `#7A7468`, border `1px dashed rgba(31, 26, 20, 0.25)`, padding `10px 20px`, weight `500`.113- **Ghost** — sharp shape, text `#B8553A`, padding `10px 4px`, weight `500`.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: `#FAF7F0`122- Border: `1px solid rgba(31, 26, 20, 0.08)`123- Shadow: `0 0 0 1px rgba(31, 26, 20, 0.08)`124- Radius: `radius.lg` (`4px`)125- Internal padding: `20px` for compact cards, `24–28px` for content cards.126 127#### Charts128 129- Bar/line variant: `stepped`130- Highlight strategy: `last` — emphasize a single bar/point per chart.131- Use the declared palette in order: `#B8553A`, `#7A7468`, `#1F1A14`.132 133#### Typography pairings134 135- **Display (`IBM Plex Mono`)** — h1, h2, hero headlines, brand wordmarks.136- **Body (`IBM Plex Mono`)** — paragraphs, labels, button text, form inputs.137- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.138 139### 4 · Hard constraints140 141Never do any of the following without explicit instruction from the user:142 143- Introduce a new color, font, radius, or shadow that isn't declared above.144- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).145- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.146- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.147- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.148 149### 5 · Before you finish — verify150 151Run through this checklist for every screen you produce:152 153- [ ] Every color used appears in the Colors table above.154- [ ] Headlines use the display font; body copy uses the body font.155- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).156- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.157- [ ] Cards and dividers use the declared border + shadow tokens.158- [ ] No values were invented; if you needed something missing, you stopped and asked.159 160---161 162## Overview163Console Paper is the discipline of a developer console rendered on warm paper. Mono everywhere — display, body, captions — at carefully tuned sizes. A single muted terracotta accent for active states. Hairlines, no shadows. Strict 4px subgrid.164 165For documentation sites, technical blogs, indie dev tools, paper-feel developer products that want warmth without losing precision.166 167## The Conceit168The page reads as printed terminal output. The mono face does the heavy lifting — there is no second typeface anywhere. The terracotta hairline on the primary button is the closest the system gets to "color"; it stands in for the cursor.169 170```171┌─────────────────────────────┐172│ console.paper $ run │173│ │174│ Build precision into the │175│ paper, not the screen. │176└─────────────────────────────┘177```178 179## Color180- **Coffee Ink #1F1A14** — primary text.181- **Graphite #7A7468** — secondary text, captions.182- **Terracotta #B8553A** — the only chromatic accent. Primary CTA hairline, active links, the chart line.183- **Warm Paper #F5F1E8** — page canvas.184- **Cream Card #FAF7F0** — card surface.185 186The terracotta must remain rare — apply it to one element per region.187 188## Typography189- **Display: IBM Plex Mono 500** at 3.5rem with -3.5% tracking.190- **Body: IBM Plex Mono 400** at 0.9375rem with 1.65 leading.191- Mono is the entire system. No sans, no serif anywhere.192 193| Role | Font | Size | Weight | Tracking |194|------|------|------|--------|----------|195| Hero | IBM Plex Mono | 3.5rem | 500 | -0.035em |196| H1 | IBM Plex Mono | 2.125rem | 500 | -0.025em |197| H2 | IBM Plex Mono | 1.25rem | 500 | -0.012em |198| Body | IBM Plex Mono | 0.9375rem | 400 | -0.005em / 1.65 |199 200## Geometry201- **Radii: 0 / 2 / 4.** Almost-sharp. Mono on paper looks crafted at small radii.202- **Borders: 1px hairlines** at 8% coffee-ink. Replace shadows with hairlines.203- **Spacing: strict 4px subgrid.** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.204 205## Buttons206- **Primary** — cream paper surface, 1.5px terracotta hairline, terracotta mono label. Reads as a command in a prompt.207- **Secondary** — cream paper, 1.5px coffee-ink hairline (20%).208- **Outline** — bare 1px dashed hairline.209- **Ghost** — bare terracotta label, hover underline.210 211All four use the mono face for labels at 0.8125rem with +1% tracking.212 213## Cards214Cream surface (#FAF7F0) over warm paper canvas, 1px coffee-ink hairline at 8%, no shadow. Radius 4px. Cards never lift; depth is communicated by the hairline alone.215 216## Charts & Data217Stepped terracotta line over the cream card, 1.5px stroke, faint graphite gridlines. End-of-line terracotta dot. The chart should read like ASCII output, not a marketing graphic.218 219## Do's and Don'ts220- ✅ Mono everywhere — display, body, captions, buttons. No exceptions.221- ✅ Terracotta appears once per region — primary CTA, active link, chart line.222- ✅ All structure is hairlines. Replace every shadow you'd reach for with a 1px line.223- ✅ Stick to the 4px subgrid. Off-grid spacing reads as careless.224- ❌ No sans or serif type. The system is mono-only.225- ❌ No drop shadows. No gradients. No glass.226- ❌ No second chromatic accent. Mono + terracotta, period.227- ❌ No radii above 4px. Mono on paper at large radii reads soft and loses the "console" voice.228 229---230 231## Tokens232 233> Generated from the same source the live preview renders from.234> Treat the values below as the contract — never substitute approximations.235 236### Colors237 238| Role | Value |239|-----------|-------|240| primary | `#1F1A14` |241| secondary | `#7A7468` |242| tertiary | `#B8553A` |243| neutral | `#F5F1E8` |244| surface | `#FAF7F0` |245 246### Typography247 248- **Display:** IBM Plex Mono249- **Body:** IBM Plex Mono250- **Mono:** IBM Plex Mono251 252| Role | size / leading / weight / tracking |253|------|------------------------------------|254| Hero | 3.5rem / 1.05 / 500 / -0.035em |255| H1 | 2.125rem / 1.1 / 500 / -0.025em |256| H2 | 1.25rem / 1.35 / 500 / -0.012em |257| Body | 0.9375rem / 1.65 / 400 / -0.005em |258 259### Radius260 261- sm: `0px`262- md: `2px`263- lg: `4px`264 265### Shadows266 267- **card:** `0 0 0 1px rgba(31, 26, 20, 0.08)`268- **button:** `none`269 270### Borders271 272- **card:** `1px solid rgba(31, 26, 20, 0.08)`273- **divider:** `rgba(31, 26, 20, 0.08)`274 275### Buttons276 277Four variants, each fully tokenized. The preview renders from these exact values.278 279#### Primary280 281| Property | Value |282|----------|-------|283| shape | `sharp` |284| background | `#FAF7F0` |285| color | `#B8553A` |286| border | `1.5px solid #B8553A` |287| padding | `11px 22px` |288| fontFamily | `mono` |289| fontWeight | `500` |290| fontSize | `0.8125rem` |291| tracking | `0.01em` |292| suffix | `arrow` |293 294#### Secondary295 296| Property | Value |297|----------|-------|298| shape | `sharp` |299| background | `#FAF7F0` |300| color | `#1F1A14` |301| border | `1.5px solid rgba(31, 26, 20, 0.20)` |302| padding | `11px 22px` |303| fontFamily | `mono` |304| fontWeight | `500` |305| fontSize | `0.8125rem` |306| tracking | `0.01em` |307 308#### Outline309 310| Property | Value |311|----------|-------|312| shape | `sharp` |313| background | `transparent` |314| color | `#7A7468` |315| border | `1px dashed rgba(31, 26, 20, 0.25)` |316| padding | `10px 20px` |317| fontFamily | `mono` |318| fontWeight | `500` |319| fontSize | `0.8125rem` |320| tracking | `0.01em` |321 322#### Ghost323 324| Property | Value |325|----------|-------|326| shape | `sharp` |327| background | `transparent` |328| color | `#B8553A` |329| border | `none` |330| padding | `10px 4px` |331| fontFamily | `mono` |332| fontWeight | `500` |333| fontSize | `0.8125rem` |334| tracking | `0.01em` |335| hoverHint | `underline` |336 337### Charts338 339| Property | Value |340|----------|-------|341| variant | `stepped` |342| strokeWidth | `1.5` |343| gridlines | `true` |344| highlight | `last` |345| dotMarker | `true` |346| axisColor | `#7A7468` |347| palette | `#B8553A`, `#7A7468`, `#1F1A14` |348 # 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=IBM+Plex+Mono:wght@300;400;500;600&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"IBM Plex Mono"', 'serif'], sans: ['"IBM Plex Mono"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, colors: { primary: '#1F1A14', secondary: '#7A7468', accent: '#B8553A', neutral: '#F5F1E8', surface: '#FAF7F0', }, borderRadius: { sm: '0px', md: '2px', lg: '4px', }, }, },};Design-agency editorial: a single oversized Bodoni Moda display at 7rem, a single ink, an off-white canvas. The signature is the radical scale gap — hero 7rem, body 1rem, nothing in between except a mono eyebrow.
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.
A soft single-hue tonal gradient that stays in pale steel-blue. Page background runs from a faint mist top to bone-white bottom, Inter for display, IBM Plex Mono for figures with tabular-nums, a single graphite accent reserved for the primary CTA and the active step indicator. Built for product pages, technical hubs, and infrastructure marketing where calm depth carries the surface.
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.