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