Design System

Every token this template uses, and what it is for.

Re-skinning this template means changing the values in the :root block of src/styles/global.css and nothing else. This page renders whatever is in there right now, so it stays true after you have changed it.

Colour

The trap in a carpenter template is obvious and worth naming: it wants to be brown, and brown is gone — three trades in a row already own the wood-tone band. So the chrome is not the material. The wood is warm; the furniture is paper, ink and a green that belongs to the shop rather than the board. Every ratio below was computed with tools/a11y/contrast.py, not eyeballed.

Ground

--color-bg Page ground — shop paper
--color-bg-alt Alternating band — oak tint
--color-surface Cards and panels
--color-border Hairlines
--color-border-strong Interactive borders 3.20:1 AA

Ink

--color-text Body and headings — walnut ink 15.20:1 AAA
--color-text-faint Labels and eyebrows 10.26:1 AAA
--color-text-muted Secondary prose — pencil grey 5.14:1 AA

Accent

--color-accent Buttons, rules and text — moss 6.01:1 AA
--color-accent-hover Pressed state 9.65:1 AAA
--color-accent-text Accent-coloured text 5.30:1 AA
--color-leadtime Lead-time bar ground 6.84:1 AA
--color-required Required-field mark only 9.30:1 AAA

Dark sections

--color-dark-bg Hero, process band, footer
--color-dark-surface Cards inside dark bands
--color-dark-text Text on dark 15.20:1 AAA
--color-dark-faint Maker strip and callouts 10.40:1 AAA
--color-dark-muted Secondary on dark 8.21:1 AAA
--color-dark-accent Accent on dark — moss light 7.93:1 AAA

Two tokens carry the same idea on two grounds, which is the correct answer rather than a duplication: no single value clears 4.5:1 against both warm paper and walnut ink, so the accent is --color-accent on light and --color-dark-accent on dark. The maker strip and the download bar are written as literal hex rather than as var() fallback chains, because a fallback chain that resolves to currentColor is not a fix — it is a silent no-op.

Type

Familjen Grotesk for display, Commissioner for body — two sans, deliberately, because days 72 and 73 both led with a serif and a third in a row makes three adjacent gallery thumbnails look like one template in three colours. Familjen Grotesk is squared-off and slightly narrow: it looks set out with a try square, and the narrowness keeps a long specific headline off a third line on mobile. Commissioner is a low-contrast humanist with a generous x-height, chosen for the spec blocks — four short labelled lines carrying fractions and species names is cut-list typography and it needs a body face that stays legible at 13px rather than one with personality.

Display clamp(2.75rem, 7.5vw, 5rem) · heading · 700

That is the job
Section clamp(1.75rem, 4vw, 2.75rem) · heading · 700

Built-in, or bought-in.
Card title 1.3125rem · heading · 700

A window seat over a floor that fell away an inch to the bay
Body 1rem · body · 400

A factory carcase is a rectangular prism. Your 1918 alcove is not, and that gap is the entire commercial reason this trade exists.
Spec line 0.8125rem · body · 400

East wall out of plumb 5⁄8" top to bottom; face frames dominoed and built 3⁄8" narrow.
Eyebrow 0.6875rem · body · 700

RECENT BUILT-INS

Interaction states

Every interactive element carries a themed hover and a visible keyboard focus ring. Tab through the row below rather than clicking it — the focus ring is the part most templates leave as the browser default, and it is the one a keyboard user depends on. Nothing here is muted with opacity: opacity composites text toward its background, which is exactly what contrast measures.

Primary action Secondary action A text link

Spacing and radii

Sections are separated by --section-gap. Cards use an 8px radius, pills use 999px, and the credential chips use 4px because a joinery site should look machined rather than rounded over. Nothing else invents a value.

0.5rem tight stacks
1rem inside cards
1.5rem between cards
--section-gap between sections