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, measured

#316981 sits at HSL(198°, 45%, 35%) — firescale, the blue-grey stain copper leaves on karat gold or sterling when it's heated for soldering; a real bench colour, not a mood-board pick. Contrast: 5.55:1 on the ground, 6.05:1 on white surface — both clear WCAG AA (4.5:1) with margin. No shipped template in this library sits in the 190–200° saturated band; the nearest hue neighbour is ux-designer-portfolio's #2E3238 (hue ≈216°, only ≈9% saturation) — a near-neutral dark ink, not an accent at all. This accent is 45% saturated: a genuine accent hue.

The ground, against this batch's other two

#F4F5F6 sits at HSL(210°, 10%, 96%) — bench-steel white, cool and near-neutral. Against day 130's painter-portfolio ground #E8DCC0 (42°, 47%, 83%L) and day 131's ceramicist ground #EFEDE8 (43°, 18%, 92%L), the separation isn't subtle on any axis: this ground is 168° away in hue (a cool blue-grey against two warm creams), 13 points lighter than day 130 and 4 points lighter than day 131, and 8–37 points lower in saturation than both. Where day 130 and day 131 differ from each other mostly by saturation within one warm family, this ground is a different family outright.

One module, read by three surfaces

src/data/pricing.ts holds every input a quote needs — the spot prices and the date they were read, the fineness table, this studio's labour rate, the wastage rate and the hallmarking fee. src/lib/quote.ts's computeQuote() is the only place those inputs become a total, and the hero calculator's client script, the worked-presets table, and the Pro Commission Quote Sheet all call it directly — none of them re-derive the arithmetic by hand. Change the gold spot on line one of pricing.ts and every number on the page moves together, because there is exactly one function that turns weight into money.

The markup asserts less than the page

Every store Product carries a real Offer with a settled price — that piece's metal was already weighed and bought against a spot price already paid, so the price doesn't move after casting. The custom-commission Service carries no price or priceRange at all — the exact opposite reason from day 128's tattoo template but the same underlying rule: the spot price a commission's formula depends on hasn't been read yet on the day an order is placed, so asserting a fixed price there would be the schema lying about a number that is, by definition, not fixed yet. aggregateRating is withheld everywhere (no reviews exist to aggregate), gtin/mpn are withheld on every piece (a small workshop's output was never barcoded), and no priceValidUntil is ever emitted on the formula section, because there is no price there to expire.

The configurator degrades to the same numbers

With JavaScript disabled, the hero <form> still renders every input, and the output box still shows a real total — computed server-side at build time from DEFAULT_CONFIGURATOR_INPUT, the exact same default the JS-enabled version hydrates from. A <noscript> note explains that changing the inputs needs script, and points at the Worked Presets table, which is the same computeQuote() call rendered for three fixed configurations instead of one. Nothing on this page is ever blank or broken without script — only static instead of live.

Tokens

TokenValueNote
--color-bg #F4F5F6 Bench-steel white — HSL 210°,10%,96%
--color-bg-alt #EAEDEE Banding
--color-surface #FFFFFF Cards, tables, figures
--color-surface-2 #EEF1F2 Elevated surfaces, quote output
--color-text #14181B 16.36:1 on ground · AAA
--color-text-muted #585D62 6.09:1 on ground
--color-border #D7DADC Non-text only
--color-accent #316981 Firescale steel-blue — 5.55 / 6.05:1 · AA
--color-band #14181B The footer inverts
--color-on-band #F4F5F6 16.36:1 on band · AAA
--color-on-band-muted #A9ACAF 7.83:1 on band · AAA
--color-accent-on-band #81BFDA 8.84:1 on band · AAA