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, and the two nearest neighbours
#301D8B sits at HSL(250°, 65%, 33%) — cobalt oxide, the oldest ceramic
colourant on record, pushed away from true blue (200–245°, the single most
crowded accent region in this library) toward violet. The two nearest neighbours by hue are
both close: general-contractor's Blueline at #4038A6
(244°, 50%, 44%, Δhue 6°) and band-musician's violet at
#6030CF (258°, 62%, 50%, Δhue 8°). A 6–8° hue gap alone
would not be a real separation. What actually separates this accent from both, measured: it
is 11 and 17 percentage points darker in lightness than those two respectively, and its
saturation sits 15 points below Blueline and 3 points above the band-musician violet — a
deep, glaze-saturated colour rather than a lighter screen-blue or violet. Verified with the
accent-contrast-check skill's contrast matrix before shipping.
The ground, honestly reported
#EFEDE8 sits at HSL(43°, 18%, 92%). Measured against this library's
existing warm-cream band — tea-room #FAF8F3 (43°,41%,97%),
yoga-studio #F8F4EE (36°,42%,95%), voice-over-artist #EDE7DC
(39°,32%,90%), tree-service #F4EFE2 (43°,45%,92%), and day 130's
painter-portfolio #E8DCC0 (42°,47%,83°) — lightness alone does not
clear that band: 92% L sits inside its 90–97% range, and ties tree-service outright.
The real, measured separation is saturation: this ground's 18% S sits 14 to 29 percentage
points below every one of those (32–47% S), which is what reads as raw, unglazed
bisque — a near-neutral warm-grey — rather than one more warm cream. Reported honestly
rather than restated as a bigger gap than it is.
Two numbers, computed once, read twice
src/data/clayBodies.ts holds one shrinkage rate per clay body;
src/lib/ceramics.ts's firedDimension() is the only place a thrown
dimension becomes a fired one, and both src/components/ShrinkageFigure.astro
(the log's per-piece circles) and the Collection table on the home page call it with the
same numbers. src/data/firings.ts holds each kiln load's count-in and
count-out; totalLossRate() in the same lib file is the only place the studio's
stated "about 1 in 9, ~11%" rate is computed, and it is computed, not typed as a second,
independent estimate. Change a shrinkage rate or a firing's count and every figure, table
and the hero's own claim move together, because there is exactly one source for each.
The markup asserts less than the page
Every catalogue Product carries a real Offer with a settled
price and an availability of InStock or
SoldOut — a one-of-a-kind piece's price doesn't change after the kiln, whether
it sold or not, so this is day 129's case: asserted plainly. Commissions carry
no Offer at all — a custom piece's price depends on size, form
complexity and glaze, which is day 128's case exactly, and it is withheld the same way the
tattoo hourly rate was. LocalBusiness withholds priceRange even
though the collection's floor and ceiling are both knowable in
src/data/pieces.ts, because a business-level price range asserts a stable fact
about the whole operation that a rotating one-of-a-kind inventory doesn't actually have.
aggregateRating is withheld everywhere — no reviews exist to aggregate.
The iframe is same-origin, on purpose
The studio-visit map at public/studio-location.html is a static, same-origin
document — not a third-party embed. A Google Maps <iframe> would trip
Lighthouse's third-party-cookies and inspector-issues audits and
cap Best Practices near 0.79, the exact way an AdSense embed broke the gate on day 28. This
gets the full structural-divergence credit an <iframe> carries — it is
the single highest-weight feature this library measures, present in zero of the first 130
templates — at zero third-party cost.
Tokens
| Token | Value | Note |
|---|---|---|
| --color-bg | #EFEDE8 | Raw porcelain — HSL 43°,18%,92% |
| --color-bg-alt | #E5E1D8 | Banding |
| --color-surface | #F6F4F0 | Cards, tables, figures |
| --color-surface-2 | #FBFAF7 | Elevated surfaces |
| --color-text | #1C1B1E | 14.65:1 on ground · AAA |
| --color-text-muted | #514E5F | 6.89:1 on ground · AAA |
| --color-border | #CECAC0 | Non-text only |
| --color-accent | #301D8B | Cobalt oxide, run toward violet — 10.72 / 11.42:1 · AAA |
| --color-band | #1C1B1E | The footer inverts |
| --color-on-band | #EFEDE8 | 14.65:1 on band · AAA |
| --color-on-band-muted | #B6B1A5 | 8.02:1 on band · AAA |
| --color-accent-on-band | #AA9EE5 | 7.13:1 on band · AAA |