Design System

Three 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 and the text on the light one. There is no fourth accent, no gradient, and no second shade of any of the three.

The stylesheet does not yet hold to this. Four values are in use where there should be three, 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 and two weights. 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. Designed work uses Suisse BP Int’l; this is a web decision only.

h1 to h3 are 300. h4, h5, h6 and the nav are 400. The weight rises as the type gets smaller, and nothing on the site is bold.

:root sets font-size: 20px, so every rem in the page is that number. Media queries are the exception: they are measured against the browser’s initial 16px and are unaffected by that declaration.

Each specimen is the real element. Only its padding and margin are removed, so the type sits against the column edge rather than at the page gutter. The h1specimen is the page title above, because there is one per page.

Four of the six headings use clamp(), so they scale with the viewport rather than stepping at a breakpoint. What the desktop breakpoint changes is the gutter, 1.5rem to 7rem, and the size of body copy and lists, which go from 1rem to 1.4rem.

There is no spacing scale in the token sense. There is a gutter, a measure, and a small set of values that recur.

1.5rem below the desktop breakpoint and 7rem above it. The two are not a scaled pair. On a phone the screen is the column; on a laptop the type is set into a full-bleed field rather than filling it.

Lists indent further, to 0 1.5rem 0 9rem, so their markers hang outside the text column instead of pushing it.

48rem. Body copy, h2, h4 and lists are capped at it, so a line never runs the width of a wide screen.

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.

Everywhere else a division is a hairline in the ink colour at low opacity, never a border box or a fill. 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. Newsletter is the one label that changes: below 396px it reads Letters, because the row had no slack left and was clipping the sparkle. Both spans are aria-hidden and the link carries its own aria-label, so the accessible name is Newsletter at every width.

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.

What the stylesheet actually contains, generated rather than remembered. The counts move when the sheet does.