Design System

Four colours, one value each. Red carries emphasis, links and the signature fields. White is the light ground, off-white rather than stark white so pages read as editorial. Black is the dark ground, the logo, the nav and the icons. Text black is the copy on the light ground, softer than the black for reading. There is no accent beyond these, no gradient, and no second shade of any of them.

The stylesheet does not yet hold to this. 8 values are in use where there should be 4, and the audit at the end of this page lists every one.

There is no global scheme. A section declares three custom properties, and everything inside and around it takes its colour from them.

theme/script.js reads those three off whichever section is crossing the middle of the viewport and applies them to the page, the header, the nav and the footer. The section owns the colour and the page borrows it, so the chrome recolours as the reader scrolls.

That is why the chrome is written in currentColor and inherit. The focus ring, the icons and the section menu’s marker have to work on red and on off-white without a second set of rules for each. The change runs over 0.5s.

A case study is painted in its client’s own brand for as long as it is on screen, so the work sits in the client’s world. Those colours belong to the client. They are content the work pages carry, 135 of them, and they are no part of this brand.

The system owns the mechanism. A new case study declares the same three properties rather than introducing styling of its own.

One family. The stack starts at ui-sans-serif and falls through the platform’s own faces, so the page renders as San Francisco on a Mac with no font file to load and no third party to contact.

Pull quotes alone are set in the system serif, ui-serif, 'Iowan Old Style', Charter, Georgia, serif: New York in Safari and Iowan Old Style in other browsers on a Mac, with no font file either.

Eight roles, and no other content size. Each role is a class on the element, so it looks the same on every page. Desktop is the base; a phone takes body copy up to 25px and the display roles down to fit.

A ninth role, a condensed feature heading, is reserved and not set: the site carries no condensed face, and one is a new dependency waiting on a choice.

Where every part of a page sits, drawn to scale from the stylesheet: a 1440 by 900 desktop window and a 390 by 844 phone. The header, the nav, Digiguru, the back link and the footer bar are the same on every page; the content column is what a page fills.

Five steps. Things that belong together sit close; groups stand apart. Every page takes its vertical rhythm from them.

--measure: 47rem. Every paragraph and list wraps at it, on every page: about 75 to 85 characters of 28px copy. Titles and headings are not held to it.

Every long page starts its title at the same height on desktop, padding-top: 16rem, a group’s gap under the back link.

1.5rem below the desktop breakpoint and 7rem above it. Lists indent to 0 1.5rem 0 9rem, so their markers hang outside the text column.

A full-bleed section is min-height: 100vh with scroll-snap-align: start, so the page advances one screen at a time. Every section-* class must also carry section, or it loses both and script.js cannot find it for the background fade.

Long-form pages carry snap-scroll-disabled on the body, which turns the snapping off so they scroll as one continuous read: this one, /blog/, /books/ and /career/.

A media query’s rem is 16px, not the 20px this site sets on :root. Media queries are measured against the browser’s initial font size and are unaffected by that declaration, so 56rem is 896px and not 1120px. The pixel column below is the real width.

Hover is filter: brightness(1.2) rather than a second colour, so a link brightens against whatever field it is sitting in and needs no hover value per section.

Anything travelling with the Digiguru panel animates transform. The panel slides on the compositor, while right, margin and width are recalculated on the main thread and fall behind it as the page reflows, even at an identical duration and curve.

Section imagery is driven by GSAP rather than CSS. theme/script.js holds the page at zero on load and staggers it in, then fades each section’s media as it reaches the middle of the viewport, writing opacity inline. Several rules therefore carry no transition of their own on purpose, because a CSS transition on top would chase values GSAP is already tweening frame by frame.

prefers-reduced-motion: reduce keeps the fades and drops the travel.

One ring for the whole site: outline: 2px solid currentColor at outline-offset: 2px, on :focus-visible, so it appears for the keyboard and never on a mouse click. currentColor is what lets it track the field behind it. It is never removed, only redrawn.

The site has one raised surface and it is a picture frame. figure.media-surface takes a border, a radius and a shadow. Nothing else is lifted off the page, and there are no cards, pills or containers with fills of their own.

Content is never divided by a line. Space divides it, and a line is kept only where it outlines something you use. Form controls take 1px solid rgba(27, 27, 39, 0.18) at 0.25rem, and the Digiguru panel marks its edge with a 1px column of rgba(29, 29, 31, 0.12). There is no elevation scale and no second border weight.

One <nav>, one implementation, on every route. What changes across the breakpoint is where it sits. Its metrics never change.

Hovering any link dims every link in the row to 0.4 and holds the hovered one at 1. The row fades back rather than the target lighting up, which is why the transition is on opacity and runs at 0.45s rather than the site’s 0.5s.

Home is in the markup at every width and hidden above the breakpoint, where the logo already goes home. Every label reads in full rather than abbreviating:Newsletter is the longest, and the row below 896px sets its type a step smaller than the theme's, which holds five links and the sparkle from 333px up without changing the row's spacing. Narrower than that the row runs past the edge, which is accepted rather than squashed.

The nav and the social row never change width or spacing. Not when the panel opens, not at any breakpoint. What moves is their position, translated by the panel’s width. If a layout needs a wider minimum to hold them at full size, it gets one. Neither row is ever squashed to make something else fit.

The second level of navigation, inside one page. It is the rail on the left of this page, and it appears at 1360px, where there is room for it beside the copy. Below that width it is not shown, and the page is complete without it.

The current entry is the one whose section is crossing the middle of the viewport, not the nearest by centre. A section taller than the window has its centre off screen, so comparing centres would mark a neighbour a screen away. theme/script.jsresolves the section behind the chrome the same way.

Clicking an entry slides to it over 620ms on an ease-out curve rather than jumping, and lifts scroll-snap-type for the duration, because mandatory snapping would otherwise arrive at the destination before the animation could run. A reader who has asked for reduced motion gets a jump instead.

A group heading opens its own drawer and shuts the others. The first heading on a page goes to the top rather than to a section of its own, because everything above it is the way in. Clicking a heading never shuts it, since the reader asked to go somewhere.

When the reader is on a screen the menu does not name, nothing is marked and every group closes, rather than a drawer standing open claiming otherwise.

A link takes --link-color from the section it is in, drops its underline, and brightens on hover. There is no button component in the visual sense and nothing is boxed.

An icon with no visible label carries an aria-label for its accessible name and the site’s data-tooltip for sighted users. That pair is used by the social row, the back-to-top arrow and the Digiguru sparkle. Icons are 1.5rem square and filled with var(--text-color), which is what lets one SVG work on every field.

One shape for every control: the same height, hairline, radius and type. The specimens below carry the real classes from /books/, where the pattern is defined.

Safari colours a select’s options from the control’s own background, so a transparent background produces unreadable options in dark UI. The option colours are therefore named explicitly rather than inherited.

The newsletter form is Kit’s embed rather than the site’s markup, the one place the site styles someone else’s HTML. Its field and button are reshaped to these same values rather than to a second pattern.

figure.media-surface is how work imagery is presented: contained rather than cropped, so the whole frame is visible at any viewport shape.

The border steps up at the desktop breakpoint, from 0.15rem solid #1b1b27 to 0.3rem solid #1b1b27, because the frame is bigger and a hairline stops holding it. Its colour is #1b1b27 rather than currentColor, because it frames the picture and should not change with the section.

Nothing autoplays from a third party. Videos and X embeds are click-to-load facades with locally served posters, so opening a page contacts nobody.

Digiguru opens from the sparkle in the navigation. It is on this page, so open it and the rest of this section is happening beside you.

The panel pushes the page. It never overlays it. The body narrows by exactly the panel’s width and the page reflows into the remaining column, so the site stays wholly visible and usable. The two regions scroll independently, and the page’s scrollbar sits beside the panel rather than at the window edge. Below 1200px the panel becomes its own full-screen page instead. This is the standing rule for any panel, drawer or sidebar on this site.

The panel holds one fixed palette rather than tracking the section beside it, because text you are part-way through reading should not change colour underneath you. Those values are .section-light verbatim.

Width rather than padding on the body: a padding-right would keep the body the full width of the window and its scrollbar with it. Narrowing the box is what brings the scrollbar inside.

One full screen, at the bottom of every route. It is at the bottom of this page.

The footer is painted in whichever section is on screen rather than in a colour of its own, which is why the copyright link takes color: inherit. A fixed colour cannot work there, and the link colour cannot be used either, for the reason in the audit below.

Hidden, the back-to-top control takes no width and no margin at all, so the social icons keep exactly the spacing they have everywhere else. It clips itself while it animates up from zero width.

Nothing on the left edge moves when the panel opens. The logo and the copyright are anchored to the page gutter.

Decisions, taken once and binding on everything after. They are what make the site behave as one thing rather than a set of pages that resemble each other.