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 #C55026 — HSL(16°, 68%, 46%) — "grading-ruler rust": the saturated red-orange plastic pattern-grading rulers and French curves are conventionally moulded in. Measured against this ground it comes in at 4.09: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(16°, 68%, 40%) → #AB4521, 5.16:1 on ground and 5.83:1 on white surface, both with real margin. The literal #C55026 survives as --color-accent-swatch, used only for non-text decorative fills (colourway dots, the grading-ruler figure) where WCAG's text- contrast rule doesn't apply — so the page still shows the real object colour, just never as text. No shipped template in this library sits in the 10–20° saturated-rust band; the nearest warm accent is window-cleaning's amber/gold at hue 43°, 25°+ away.

The ground, against this batch's neighbours

#F3F1ED sits at HSL(36°, 12%, 94%) — a cool, low-saturation warm-grey chosen to read as pattern paper, not another cream. The library's cream band is already crowded (day-131 audit); this ground is lower-saturation and cooler than that band on purpose.

One module, read by three surfaces

src/data/lineSheet.ts holds every style's wholesale price, MOQ, colourways, fabric and delivery window. src/lib/pricing.ts's computeSRP() is the only place a retail price is derived from a wholesale price — the line-sheet table, the shop-direct cards, the Product/Offer schema and public/line-sheet.html all read the same numbers, so no two surfaces on this page can quietly disagree.

Tokens