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

TokenValueNote
--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