Design system

The system this site is built from, documented from the live stylesheet rather than written next to it. Foundations set the raw material. The rest shows how it comes together.

Principles

Quiet

One accent, used with intent. Green means interaction or emphasis and nothing else, so anything green on the page either invites a tap or marks what matters. Everything around it is black, white and grey.

Editorial

Content leads. Space comes before chrome and type before decoration. The layout stays out of the way so the writing and the work can be read.

Technical

Every value is a CSS variable, and these pages read from that same source when the site builds. The documentation cannot drift from the site because it is generated from it.

Foundations

Colour One brand green, a neutral scale, and the token that keeps green readable. Typography One typeface, a role-based scale that steps down per screen. Layout Three columns, honest breakpoints, a four-pixel spacing ramp. Shape & elevation The radius scale, the themed shadows, the hairline rule. Iconography Feather-style line icons and solid brand marks. Motion Short, quiet transitions, and the reduced-motion switch.

Components

Buttons Two tiers, real states, and what to write on them. Tags & chips Badges that state a fact, tags that go somewhere. Cards From the base card to the blog's lead and series cards. Navigation One chrome set reshaping across three viewports. Sheets & overlays The bottom-sheet primitive behind every picker. Article patterns Callouts, code, tables, contents — the long-form kit. Timeline The work-experience rail, logo dots and all. Media Post heroes, the photo carousel, the device frame, and placeholders.

Content

Writing British English, sentence case, dates, links, brand names. Translation Four locales; what translates, what stays English, and the voice each language keeps. Newsletter One email per language: the site’s design in the inbox, copy from the post itself.

Accessibility

Accessibility The standards the site holds itself to, and the honest green-contrast trade.

A living document

The colour, type and spacing tables on these pages are generated from the site's stylesheet at build time. Change a token in the CSS and the tables here change with it. If the parser can no longer read the stylesheet, the build fails rather than showing an empty table.