Reference
Design system
This page is noindex: it documents the template for whoever builds with it.
Every contrast ratio below was computed against the WCAG relative-luminance formula before
shipping, not eyeballed.
The accent, adjusted and measured
RESEARCH.md names #C1442D — HSL(9°, 62%, 47%) — "redline vermilion": the colour a
shop drawing's own convention supplies, a revision marked in red ink over the original black lines
when a print gets "redlined." Measured against this ground it comes in at 4.45:1 — under the
4.5:1 WCAG AA floor for text (accent-contrast-check skill). Rather than pick a different hue, the
same hue moves to a darker lightness for text/button use: HSL(9°, 62%, 40%) → #A53A27, 5.69:1 on ground and 6.50:1 on white surface, both with real margin. The
literal #C1442D survives as --color-accent-swatch, used only for
non-text decorative fills (the elevation drawing's dimension lines, the Janka chart's bars) where
WCAG's text-contrast rule doesn't apply — so the page still shows the drawing's own convention
colour, just never as body text. No shipped template in this library sits in the 0–25°
red-orange band; the nearest saturated accents are pet-photographer amber at hue 36° and
remodeling-contractor's damson at hue 343°.
The ground, against this batch's neighbours
#F1F0EA sits at HSL(60°, 4%, 94%) — a near-neutral warm-grey chosen to read as
drafting vellum, the paper a shop drawing is actually printed on — distinct from the warm-cream
bucket this library already carries several times over, and distinct from ceramicist's
raw-porcelain grey.
One module, read by three surfaces
src/lib/board-feet.ts's boardFeet() is the only place a part's board
footage is computed, and src/lib/wood-movement.ts's computeMovementIn()
is the only place a seasonal movement figure is derived from a species' shrinkage coefficient. The
cut-list table, its purchase-total row, the wood-movement worked example and the movement diagram
all read the same functions against the same src/data/pieces.ts and
src/data/species.ts — so no two surfaces on this page can quietly disagree about a
number that took real arithmetic to produce.
Tokens
| Token | Value | Note |
|---|---|---|
| --color-bg | #F1F0EA | Drafting vellum — HSL 60°,4%,94% |
| --color-bg-alt | #E7E3D5 | Banding |
| --color-surface | #FFFFFF | Cards, tables, figures |
| --color-surface-2 | #EDEAE0 | Elevated surfaces |
| --color-text | #1C1B18 | 15.08:1 on ground · AAA |
| --color-text-muted | #5C5650 | 6.33:1 on ground |
| --color-border | #DDD6C8 | Non-text only |
| --color-accent | #A53A27 | 5.69 / 6.50:1 · AA, text-safe |
| --color-accent-swatch | #C1442D | Literal redline vermilion — decorative fills only |
| --color-band | #1C1B18 | The footer inverts |
| --color-on-band | #F1F0EA | 15.08:1 on band · AAA |
| --color-on-band-muted | #A8A093 | 6.66:1 on band · AA |
| --color-accent-on-band | #E07D6C | 6.00:1 on band · AA |