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

TokenValueNote
--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