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
| Token | Value | Note |
|---|---|---|
| --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 |