Generated from .claude/DESIGN.md by canon design render. Token preview only, not a screen mock.
77 of 88 cells are anchored to a source. The other 11 carry ? verify, so nothing anchors them yet.
Warm neutrals carry the frame under a single rust accent, rendered in the same monospace the terminal uses. The subject picks the register rather than taste: a toolkit whose primary surface is a shell has no proportional voice available, so the rendered surfaces match the terminal instead of the reverse. One accent carries every count, link, and primary action. Promoting a second and third into structural roles is what reads as a generated interface, so the palette stays at one. One surface is carved out of the sentence above, and it is the landing page hero. A rendered surface here shows a reader what the terminal did, so matching the terminal is what makes it legible. A public page addresses somebody who has never opened the terminal at all, and the shell has no voice available for that, which is the reverse of the case the rule was written for. The `page-display` role below is the whole of the carve-out. Every other role on that page stays monospace, including its body, its controls, and every frame it embeds, so the page reads as two families rather than as a second design system.
| Role | Intent | Value |
|---|---|---|
| background | page canvas | #191512 |
| surface | cards, panels, raised blocks | #211c19 |
| chrome | the window titlebar, one step above the canvas | #241e1a |
| border | every rule and panel edge | #2f2823 |
| text | headings, counts, emphasized runs | #f4efe9 |
| text-body | default body copy | #c9c0b7 |
| text-secondary | labels, captions, supporting copy | #a79d94 |
| muted | the faintest step, trailing notes | #948a81 |
| accent | install command, mark, primary action | #e0724b |
| 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 | #faf7f2 |
| light-surface | cards and panels on a light ground | #f4efe6 |
| light-chrome | the window titlebar, one step above the canvas | #ede4d6 |
| light-text | primary text on a light ground | #1a1815 |
| light-text-body | default body copy on a light ground | #3d3630 |
| light-text-secondary | labels, captions, supporting copy on a light ground | #5c544b |
| light-muted | secondary text on a light ground | #726b62 |
| light-accent | links and primary action on light | #a4471c |
| light-success | confirmations, rendered and in the terminal, on light | #2d6b22 |
| light-border | rules and panel edges on light | #e4dcd0 ? verify |
| Role | Family | Weight | Size | Line height | Sample |
|---|---|---|---|---|---|
| display | Noto Sans Mono, DejaVu Sans Mono, monospace | 700 | 34px | 1.3 | The quick brown fox |
| page-display | Noto Sans, DejaVu Sans, sans-serif ? verify | 700 | 52px ? verify | 1.1 ? verify | The quick brown fox |
| heading | Noto Sans Mono, DejaVu Sans Mono, monospace | 700 | 19px | 1.3 ? verify | The quick brown fox |
| body | Noto Sans Mono, DejaVu Sans Mono, monospace | 400 ? verify | 16px | 1.65 | The quick brown fox |
| label | Noto Sans Mono, DejaVu Sans Mono, monospace | 400 ? verify | 12px | 1.45 ? verify | The quick brown fox |
| code | Noto Sans Mono, DejaVu Sans Mono, monospace | 700 | 14.5px | 1.3 ? verify | The quick brown fox |
| Step | Multiplier | Value | Sample |
|---|---|---|---|
| xs | 1 | 6px | |
| sm | 2 | 12px | |
| md | 3 | 18px | |
| lg | 4 | 24px | |
| xl | 5 | 30px | |
| frame-top | none | 44px | |
| frame-inline | none | 52px | |
| frame-bottom | none | 38px |
| 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 |
Motion is not used. No transition, animation, or keyframe declaration appears on any rendered surface, and the capture pipeline screenshots a static frame.
No icon library is installed. `assets/brand/mark.svg` is the one authored icon, embedded inline in the hero topbar, and the surfaces otherwise draw literal glyph characters: `│ ├ ✓ ! ✗ + - ◆ ◇ ❯` for the terminal framing. The same mark also ships as a favicon on every rendered surface, as three independently-maintained copies that track different accents by design rather than by drift: `regen-hero.sh` derives one from the live SVG colored with whatever `--color-accent` (`#e0724b`) the fetched token CSS carries, `src/design/render.ts` carries the path data as a hardcoded literal colored via `colorValue('light-accent')` (`#a4471c`), since a data URI has no CSS context and that page renders on light chrome, and `teach-workspace`'s `SKILL.md` names one in prose colored `rgb(224,114,75)`, the same value as the dark accent written as decimal rather than hex to clear the shipped-references gate's commit-sha check. Unifying the three or repairing the one that looks drifted would break the fit each was chosen for.