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

Two constraints decided this palette and neither was stylistic. The warm band is taken — four trades already own rust, amber and brick — and days 73 and 74 are both green, so a teal or forest accent here would make three consecutive trade thumbnails read as one template in three shades. That leaves indigo, and indigo is right for a second reason: this is the only trade template in the sprint not sold to a homeowner. It is a document, read at a desk by somebody comparing three bidders. Cool drafting grey, white sheets, graphite ink, one blueline. Every ratio below was computed with tools/a11y/contrast.py, not eyeballed.

Ground

--color-bg Page ground — drafting grey
--color-bg-alt Alternating band — deeper drafting grey
--color-surface Cards, ledgers and tables — sheet white
--color-border Hairlines — decorative only, 1.46:1
--color-border-strong Interactive borders 3.20:1 AA

Ink

--color-text Body and headings — graphite 15.23:1 AAA
--color-text-faint Labels and eyebrows 8.99:1 AAA
--color-text-muted Secondary prose — pencil 5.47:1 AA

Accent

--color-accent Buttons, rules and text — blueline 7.87:1 AAA
--color-accent-hover Pressed state 12.00:1 AAA
--color-accent-text Accent-coloured text 7.24:1 AAA
--color-capacity Capacity bar ground 9.00:1 AAA
--color-required Required-field mark only 8.11:1 AAA

Ledger flags

--color-flag-over Ledger: late or over 8.11:1 AAA
--color-flag-under Ledger: early or under 7.92:1 AAA
--color-flag-even Ledger: on the number 10.28:1 AAA

Dark sections

--color-dark-bg Hero, schedule band, footer
--color-dark-surface Cards inside dark bands
--color-dark-text Text on dark 15.23:1 AAA
--color-dark-faint Maker strip and callouts 10.79:1 AAA
--color-dark-muted Secondary on dark 7.97:1 AAA
--color-dark-accent Accent on dark — blueline light 7.69: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 drafting grey and graphite, 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 that changes nothing and looks like a repair in the diff.

The three ledger flags are deliberately not a traffic light. Two of the six projects on the home page are late and that is the point of the section, so "late" is set at the same weight and the same legibility as "early". A flag that shouts would turn a ledger back into an advert.

Type

Overpass for display, Libre Franklin for body, Overpass Mono for the figure columns. Overpass is drawn from the US Federal Highway Administration’s Highway Gothic — the lettering on interstate signage — which is the correct voice for a company whose product is permits, inspections, occupancy and dates. Libre Franklin is the American institutional workhorse, with a large x-height and a narrow set width, which is exactly what a five-line block of dates and dollar figures needs at 13px. Two grotesks from opposite traditions, signage and print, so they do not collapse into each other the way two neo-grotesks would. Overpass Mono is one weight, latin subset, loaded only for the ledger columns, because the hook of this template is a table of numbers that has to align down the column.

Display clamp(2.75rem, 7vw, 4.75rem) · heading · 700

Your rent starts whether we finish or not.
Section clamp(1.75rem, 4vw, 2.625rem) · heading · 700

How the number is built.
Ledger title 1.25rem · heading · 700

The one that ran twenty-six days late, and why
Body 1rem · body · 400

A photograph of a finished restaurant proves a restaurant was built. It does not tell you apart from the architect, the millworker, or the tenant’s own designer.
Ledger line 0.8125rem · body · 400

11 Apr to 27 Jun. 77 calendar days against a 73-day schedule.
Figures 0.8125rem · mono · 500

CO-2 +$9,400 $412,000 → $431,600 +4.8%
Eyebrow 0.6875rem · heading · 700

PROJECT LEDGERS

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

Decorative marks

Every decorative mark in this template is an inline SVG, and none of them is a character. Day 74 shipped a Geometric Shapes glyph with a variation selector and it rendered as a tofu box on machines whose fonts did not cover it; five sibling templates were converted to inline SVG for the same reason. A glyph is a font-coverage bet, an SVG is not.

Spacing and radii

Sections are separated by --section-gap. Everything uses a 4px radius and nothing uses a pill, because a drawing set has square corners and a page that is pretending to be a document should not look like an app. Nothing else invents a value.

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