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, checked and left alone

RESEARCH.md names #A3435C — HSL(344°, 42%, 45%) — "carbon-copy pink": the pink third ply of a white/canary/pink NCR carbonless triplicate form, the convention still used for duplicate paperwork like a pull letter. Unlike day 133's rust accent, which measured under the 4.5:1 WCAG AA floor and needed a same-hue darken, this literal value already clears it: 5.54:1 on this ground, 5.97:1 on white surface. So --color-accent and --color-accent-swatch are the same value here — one number serves text, buttons and decorative fills, with no divergent "swatch-only" colour needed. No shipped template in this library sits in the 340–348° band; the nearest accents are jewelry's steel-blue 198° and tattoo's stencil purple 270–285°, both far away on the wheel.

The ground, against this batch's neighbours

#F8F6F4 sits at a warm, very-low-saturation off-white — "tearsheet white" — distinct from fashion-designer's cooler, lower-lightness #F3F1ED "spec-sheet paper" ground one day earlier in the same adjacent batch.

One module, read by three surfaces

src/data/looks.ts holds every look's credit block. src/data/pullLedger.ts names the same garments pulled for those looks, by item name, so the rail and the ledger can never quietly disagree with each other. public/pull-letter.html is a hand-authored static document matching the ledger's first row exactly, by design — see RESEARCH.md, "Static-only fit".

Fonts

Instrument Serif (display — thin, high-contrast, italic-capable, the register fashion mastheads set headlines in) · Work Sans (UI/body, unused in the adjacent 128–133 batch) · Courier Prime (documents & data — every credit <dl> value, pull-ledger row and the pull letter's own line items, marking borrowed, accountable facts, not computed ones — distinct from fashion-designer's Space Mono in this same adjacent batch).

Tokens

TokenValueNote
--color-bg #F8F6F4 Tearsheet white — HSL 30°,15%,96%
--color-bg-alt #EFEAE7 Banding
--color-surface #FFFFFF Cards, tables, look figures
--color-surface-2 #F1E7EA Faint carbon-copy pink tint, decorative bands only
--color-text #18171A 16.56:1 on ground · AAA
--color-text-muted #6E6A6D 4.94:1 on ground — ledger stamp grey
--color-border #DED6D3 Non-text only
--color-accent #A3435C 5.54 / 5.97:1 · AA, literal value, text-safe
--color-accent-swatch #A3435C Same as --color-accent — no darken was needed
--color-band #18171A The footer inverts
--color-on-band #F8F6F4 16.56:1 on band · AAA
--color-on-band-muted #A38F94 5.88:1 on band · AA
--color-accent-on-band #DD889F 6.88:1 on band · AA