House Style
The house style — the
typographic, chromatic, and verbal system this site is built from. This page is rendered
with the very stylesheet it documents, so it always shows the live system. Toggle
Light / Dark (top right) to watch the palette invert. The full written
reference lives in docs/house-style.md.
Principles
- Simple, complete, powerful. Everything the page needs and nothing it doesn't. Restraint is the feature.
- One voice, one face. A single typeface — Routed Gothic — carries body, headings, and interface alike.
- Black and white, one blue. Two values, three greys, and a single light blue for wayfinding — arrows, the current-page mark, selection. It never carries text; the work supplies the colour.
- Flat and square. No shadows, no rounded corners, no gradients. Structure is drawn with hairlines and whitespace.
- The arrow and the asterisk. Links go somewhere — they wear a →. Sections are parted by a quiet * * *.
- Quiet motion. Colour and opacity only, 0.15s linear. Nothing slides, bounces, or fades in on scroll.
Typeface
Routed Gothic — Darren Embry’s digitisation of the Leroy lettering-set
alphabet, the monoline hand of mid-century technical drawings. Self-hosted from
/assets/fonts/ (SIL Open Font License) as a trial in place of the House
Style’s iA Writer Quattro, which stays in the stack as the fallback. The face
ships at a single weight, and as with a Leroy set the hierarchy comes from size alone:
headings and interface labels are the same cut, larger or smaller. Nothing in the
system asks for a bold.
Regular 400 — The quick brown fox.
Italic 400 — The quick brown fox.
Scale
Colour
Black, white, three greys, and one accent. The palette is defined once as raw tokens, then mapped to semantic roles; dark mode swaps the five raw values and everything downstream follows. The accent is the same value in both themes. (Light values shown — toggle the theme to compare.)
Semantic roles
--text-color | → --black | body & headings |
--bg-color | → --white | page background |
--border-color | → --gray-20 | hairline rules |
--text-light | → --gray-50 | captions, breadcrumbs, dividers |
--accent | → #9cd2ec | link arrows, current-page underline, ::selection — never text |
Canvas demos mirror the same palette under shorter names —
--bg / --fg / --line / --muted — so an embedded sketch sits seamlessly in
either theme. (Demo --muted equals --gray-50 exactly.)
One functional carve-out: --danger
(#c0362c light / #e0554b dark) exists for destructive,
irreversible actions only — it is not the accent. This site has no destructive
actions, so the token ships unused.
Space & measure
The page caps at 880px and the reading column at ~680px (about 56–68 characters). Containers pad 1.5rem at the edges; galleries breathe at 4rem between sections.
Shape & motion
Corners are square (radius 0) and surfaces are flat (no shadow). Depth is implied only by 1px hairlines and space. The one curve in the whole system is the circular thumb on a demo slider. Transitions touch colour and opacity only, at 0.15s linear: hover dims content links to 50% opacity, while controls answer by darkening their border.
Signature motifs
Section divider — centred, 0.5em tracking, muted grey. Drawn with ::before between sections and above the footer.
Trailing → on links, nav, and buttons — muted when decorative.
Interface text is uppercase with positive tracking (0.05–0.08em). Prose never is.
Hairline — 1px solid --border-color. The only rule besides whitespace and the asterisk.
Components
Everything below is rendered with the site's own classes — the live system, not a mock-up.
Text-arrow buttons
Gallery rows (list view)
Within-gallery navigation
Demo control panel
The chrome shared by every canvas demo: a 190px hairline panel, terse uppercase tracked labels, bold values, 1px-track sliders, border-on-hover buttons.
Voice
First person. Literate but plain. Lead with the concrete — a tool, a line, a project — then draw the idea out of it. Em-dashes and small asides are welcome. The recurring creed: things should be simple, complete, and powerful, and the best of them “just work.”
Do “At the beginning of every sketch, there is a line.”
Don't “Leveraging synergistic toolchains to optimise design throughput.”
This page codifies the live design/maeda language — the
sole lineage. Full written reference: docs/house-style.md.