Generated from canon/DESIGN.md by bun run web:previews. Token preview only, not a screen mock.
77 of 87 cells are anchored to a source. The other 10 carry ? verify, so nothing anchors them yet.
Warm neutrals under one rust accent, set in Geist. The page reads as prose, and monospace appears only where a surface shows what a shell printed. One accent carries every count, link, and primary action.
| Role | Intent | Value |
|---|---|---|
| background | page canvas | #0f0e0c |
| surface | cards, panels, raised blocks | #151412 |
| chrome | the window titlebar, one step above the canvas | #1b1a18 |
| border | every rule and panel edge | #2a2926 |
| text | headings, counts, emphasized runs | #d9d7d4 |
| text-body | default body copy | #aeada9 |
| text-secondary | labels, captions, supporting copy | #8c8b86 |
| muted | the faintest step, trailing notes | #7f7f7c |
| accent | install command, primary action | #c76b5f |
| success | confirmations, rendered and in the terminal | #61c454 |
| warning | terminal cautions | ANSI 33 |
| error | terminal failures | ANSI 31 |
| light-background | page canvas on a light ground | #fbfaf8 |
| light-surface | cards and panels on a light ground | #f1f1ee |
| light-chrome | the window titlebar, one step above the canvas | #e9e8e5 |
| light-text | primary text on a light ground | #2c2c29 |
| light-text-body | default body copy on a light ground | #4b4947 |
| light-text-secondary | labels, captions, supporting copy on a light ground | #666561 |
| light-muted | secondary text on a light ground | #6e6d6c |
| light-accent | links and primary action on light | #ad4a4b |
| light-success | confirmations, rendered and in the terminal, on light | #2d6b22 |
| light-border | rules and panel edges on light | #d5d4d1 ? verify |
| Role | Family | Weight | Size | Line height | Sample |
|---|---|---|---|---|---|
| display | Geist Variable, DejaVu Sans, sans-serif | 700 | 2.375rem | 1.3 | The quick brown fox |
| page-display | Geist Variable, DejaVu Sans, sans-serif | 700 | 3.175rem ? verify | 1.1 ? verify | The quick brown fox |
| heading | Geist Variable, DejaVu Sans, sans-serif | 700 | 1.375rem | 1.3 ? verify | The quick brown fox |
| body | Geist Variable, DejaVu Sans, sans-serif | 400 ? verify | 0.9375rem | 1.65 | The quick brown fox |
| label | Geist Variable, DejaVu Sans, sans-serif | 400 ? verify | 0.8125rem | 1.45 ? verify | The quick brown fox |
| code | Noto Sans Mono, DejaVu Sans Mono, monospace | 700 | 0.8125rem | 1.3 ? verify | The quick brown fox |
| Step | Multiplier | Value | Sample |
|---|---|---|---|
| xs | 1 | 0.25rem | |
| sm | 2 | 0.5rem | |
| md | 3.5 | 0.875rem | |
| lg | 6 | 1.5rem | |
| xl | 10 | 2.5rem | |
| 2xl | 16 | 4rem | |
| 3xl | 24 | 6rem |
| Role | Radius | Width | When used | Sample |
|---|---|---|---|---|
| frame | 12px | none | the outer window, radius only | |
| panel | 10px | 1px | cards and columns | |
| action | 7px | none | the install command block | |
| rule | none | 1px | horizontal dividers between bands | |
| pill | 999px ? verify | none ? verify | tags and status chips, none built | |
| marker | 999px | none | the status dot, sized at 6px |