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.

One accent, two roles

#3E8E41 (HSL 122°, 39%, 40%) is the literal colour of genuine Sap Green, the fugitive pigment argued about in the disclosure table — the accent colour on this page is the same colour under discussion in the copy, which is the point. That exact value is only ever used as a decorative colour chip (--color-accent-swatch): at 3.00:1 on the linen ground it fails the 4.5:1 AA text minimum outright. Every text and button use of the accent is --color-accent, #255F27 — the same hue, darkened to 24% lightness, at 5.62:1 on ground and 6.27:1 on surface. A colour swatch and a button do not carry the same contrast obligation, so they are two tokens, not one compromise.

The ground, and why it isn't gallery white

#E8DCC0 sits at 83% lightness — 7 to 14 percentage points darker than every other warm-cream ground already shipped in this library (tree-service 92%, vegan-restaurant 96%, landscaping 95%, yoga-studio 95%, tea-room 97%, voice-over-artist 90%, calligrapher 93%). That gap is deliberate and measured, not a coincidence of one more cream palette: raw, unprimed linen reads warmer and deeper than a gallery wall on purpose.

The nearest accent, checked and stated

By hue alone, the closest accent in the corpus is portrait-photographer (#2F6B2A, 115°, Δ8°), then climbing-gym (#1B6E3F, 146°, Δ23°). Those are real gaps, not an empty band, and this page says so rather than overclaiming an empty wheel. What separates the rendered result from portrait-photographer's nearest hue is lightness: their accent sits at 29% lightness, a darker forest tone, against this page's swatch at 40% — an 11-percentage-point value gap that reads as a distinctly brighter, more saturated green on screen, on a ground that is itself darker and deeper than theirs.

Every painting is a computed rectangle

src/data/paintings.ts holds width, height, completion date and a for-sale flag per painting. src/components/RoomCanvas.astro and the Ready-to-ship table both read that same array — the scale drawing and the table cannot disagree, because the table is what the drawing was computed from. There is no photograph anywhere in this template: not in the rooms, not in the pigment table (each swatch pair is a colour mix, computed in mixHex()), and not in the JSON-LD. Every VisualArtwork withholds image for that reason, same as calligrapher and type-designer before it.

The markup asserts less than the page

An original's Offer states a real, settled price in every case, but its availability is computed: PreOrder with an availabilityStarts set to the varnish-ready date below cure, InStock once that date has passed. A painting that is not for sale at any date carries no Offer at all — there is nothing settled to assert. Product is emitted per print SKU (painting × size) at a fixed price and InStock always, because a print is never waiting on an oil cure. Withheld everywhere: aggregateRating (no reviews) and any shipping-weight property — framed weight depends on a frame choice the buyer makes later, not a settled fact about the painting.

Tokens

TokenValueNote
--color-bg #E8DCC0 Raw, unprimed linen — HSL 42°,47%,83%
--color-bg-alt #DED0AE Banding
--color-surface #F1E8D3 Cards, room canvases, pigment swatches
--color-surface-2 #F7F1DE Elevated cards
--color-text #241F19 12.01:1 on ground · AAA
--color-text-muted #5C5340 5.58:1 on ground · AA
--color-border #B7A97F Non-text only
--color-accent #255F27 UI/text derivative of the Sap Green hue — 5.62 / 6.27:1 · AA
--color-accent-swatch #3E8E41 The literal genuine Sap Green pigment colour. Decorative swatch fill only, never behind text.
--color-band #241F19 The footer inverts
--color-on-band #E8DCC0 12.01:1 on band · AAA
--color-on-band-muted #B9AE93 7.42:1 on band · AAA
--color-accent-on-band #6FBE72 7.22:1 on band · AAA