design.md
Back to directory
developer · minimal · light · paper · technical

Console Paper.

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.

01 · Preview

The kitchen sink.

Console.app
ProductPricingDocsAbout
Sign inGet started→
developer · minimal · light

Build with Console Paper.

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
#1F1A14
secondary
#7A7468
tertiary
#B8553A
neutral
#F5F1E8
surface
#FAF7F0
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

Primary→SecondaryOutlineGhostText 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
0px
md
2px
lg
4px
pill
999px
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.

ArchetypeTerminal

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
Account
sam@studio.com
dragging

Tab

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

DESIGN.md

markdown
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: 0px
22  md: 2px
23  lg: 4px
24shadows:
25  card:   "0 0 0 1px rgba(31, 26, 20, 0.08)"
26  button: none
27borders:
28  card:    "1px solid rgba(31, 26, 20, 0.08)"
29  divider: "rgba(31, 26, 20, 0.08)"
30buttons:
31  primary:
32    background: #FAF7F0
33    color: #B8553A
34    border: 1.5px solid #B8553A
35    shape: sharp
36    padding: 11px 22px
37    font: mono / 500 / 0.8125rem / 0.01em
38    suffix: arrow
39  secondary:
40    background: #FAF7F0
41    color: #1F1A14
42    border: 1.5px solid rgba(31, 26, 20, 0.20)
43    shape: sharp
44    padding: 11px 22px
45    font: mono / 500 / 0.8125rem / 0.01em
46  outline:
47    background: transparent
48    color: #7A7468
49    border: 1px dashed rgba(31, 26, 20, 0.25)
50    shape: sharp
51    padding: 10px 20px
52    font: mono / 500 / 0.8125rem / 0.01em
53  ghost:
54    background: transparent
55    color: #B8553A
56    border: none
57    shape: sharp
58    padding: 10px 4px
59    font: mono / 500 / 0.8125rem / 0.01em
60    hover: underline
61charts:
62  variant: stepped
63  stroke_width: 1.5
64  gridlines: true
65  highlight: last
66  dot_marker: true
67  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 Paper
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 **Console Paper** 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** — 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 tertiary
117actions in toolbars. **Ghost** for inline links and table actions.
118 
119#### Cards
120 
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#### Charts
128 
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 pairings
134 
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 constraints
140 
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 — verify
150 
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## Overview
163Console 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 Conceit
168The 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## Color
180- **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## Typography
189- **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## Geometry
201- **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## Buttons
206- **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## Cards
214Cream 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 & Data
217Stepped 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'ts
220- ✅ 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## Tokens
232 
233> Generated from the same source the live preview renders from.
234> Treat the values below as the contract — never substitute approximations.
235 
236### Colors
237 
238| Role      | Value |
239|-----------|-------|
240| primary   | `#1F1A14` |
241| secondary | `#7A7468` |
242| tertiary  | `#B8553A` |
243| neutral   | `#F5F1E8` |
244| surface   | `#FAF7F0` |
245 
246### Typography
247 
248- **Display:** IBM Plex Mono
249- **Body:** IBM Plex Mono
250- **Mono:** IBM Plex Mono
251 
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### Radius
260 
261- sm: `0px`
262- md: `2px`
263- lg: `4px`
264 
265### Shadows
266 
267- **card:** `0 0 0 1px rgba(31, 26, 20, 0.08)`
268- **button:** `none`
269 
270### Borders
271 
272- **card:** `1px solid rgba(31, 26, 20, 0.08)`
273- **divider:** `rgba(31, 26, 20, 0.08)`
274 
275### Buttons
276 
277Four variants, each fully tokenized. The preview renders from these exact values.
278 
279#### Primary
280 
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#### Secondary
295 
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#### Outline
309 
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#### Ghost
323 
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### Charts
338 
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 
349---
350 
351## Pro tokens
352 
353> Production-fidelity tokens. States, density, motion, elevation,
354> content rules and a measured WCAG contract — derived from the
355> resting tokens unless explicitly authored.
356 
357### States
358 
359#### Button
360 
361- **hover** — bg: `rgba(184, 85, 58, 0.15)`, color: `#B8553A`, border: `1px solid #B8553A`
362- **focus** — outline: `1px dashed #B8553A`, outline-offset: `2px`
363- **active** — bg: `#B8553A`, color: `#FAF7F0`
364- **disabled** — opacity: `0.35`
365- **loading** — opacity: `0.6`
366- **selected** — bg: `#B8553A`, color: `#FAF7F0`
367 
368#### Input
369 
370- **hover** — border: `1px solid rgba(184, 85, 58, 0.5)`
371- **focus** — bg: `rgba(184, 85, 58, 0.05)`, border: `1px solid #B8553A`
372- **disabled** — opacity: `0.35`
373- **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444`
374 
375#### Card
376 
377- **hover** — border: `1px solid #B8553A`
378- **selected** — bg: `rgba(184, 85, 58, 0.05)`, border: `1px solid #B8553A`
379- **dragging** — opacity: `0.7`
380 
381#### Tab
382 
383- **hover** — color: `#B8553A`
384- **focus** — outline: `1px dashed #B8553A`, outline-offset: `1px`
385- **selected** — bg: `rgba(184, 85, 58, 0.1)`, color: `#B8553A`
386 
387### Density
388 
389| Mode | padding × | row × | body | radius × | Use for |
390|------|-----------|-------|------|----------|---------|
391| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
392| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
393| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
394 
395### Motion
396 
397**Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms.
398 
399```css
400transition: all 120ms linear;
401```
402 
403| Token | Value |
404|-------|-------|
405| duration.instant | `0ms` |
406| duration.fast | `60ms` |
407| duration.base | `120ms` |
408| duration.slow | `200ms` |
409| easing.standard | `linear` |
410| easing.decelerate | `linear` |
411| easing.accelerate | `linear` |
412| easing.spring | `steps(2, end)` |
413 
414### Elevation
415 
416Five-level scale, system-specific recipe.
417 
418| Level | Shadow | Recipe |
419|-------|--------|--------|
420| level0 | `none` | Flat — the stroke carries the hierarchy. |
421| level1 | `none` | Border tone lifts the surface. |
422| level2 | `0 0 0 1px rgba(184, 85, 58, 0.5)` | Ring outline — popover. |
423| level3 | `0 0 0 1px #B8553A, 0 12px 32px -16px rgba(184, 85, 58, 0.4)` | Sheet with accent ring + glow. |
424| level4 | `0 0 0 1px #B8553A, 0 24px 64px -20px rgba(184, 85, 58, 0.5)` | Modal with accent ring + glow. |
425 
426### Content
427 
428- **measure:** `78ch` (max line length for body prose)
429- **paragraph spacing:** `1em`
430- **list indent:** `1.25em`
431- **list gap:** `0.35em`
432- **link:** color `#B8553A`, underline `always`
433- **blockquote:** border `1px solid rgba(184, 85, 58, 0.5)`, padding `0.7em 1em`
434- **code:** background `rgba(184, 85, 58, 0.12)`, color `#B8553A`
435 
436### Accessibility (WCAG 2.1)
437 
438**Overall:** AA-Large
439 
440| Pair | Ratio | Required | Grade | Suggested fix |
441|------|-------|----------|-------|---------------|
442| Body text on surface | 16.14:1 | AA | AAA | — |
443| Body text on canvas | 15.32:1 | AA | AAA | — |
444| Muted text on surface | 4.34:1 | AA | AA-Large | `#746f63` → 4.68:1 (AA) |
445| Accent on surface | 4.46:1 | AA-Large | AA-Large | — |
446| Accent on canvas | 4.24:1 | AA-Large | AA-Large | — |
447
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=IBM+Plex+Mono:wght@300;400;500;600&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export 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',
      },
    },
  },
};
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

Botanical Press

Pressed-herbarium editorial — deep forest ink and oxidized terracotta on bone paper. Italic Cormorant display, generous leading, hairline rules, and a single warm spot color used like a botanist's annotation stamp.

editorialnaturalwarmserif
Botanical.app
ProductPricingDocsAbout
Sign inGet started
editorial · natural · warm

Build with Botanical Press.

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