Phase 2

The design system, on one page

Everything below is drawn from seven brand colours, an eight-step type scale and a nine-step spacing scale. If a value here is not one of those, it is a defect.

The page is cream, never white. Pure white next to #FDF9F3 reads as a rendering bug, so the surface token resolves to cream in the light scheme and to ink in the dark one. Body text is ink on cream at 12.9:1, which clears AAA with room to spare, and the column is capped at 720px so a line lands between 68 and 72 characters at the desktop body size.

Links, rules and the one orange thing

Body links use the darkened signal blue at 5.4:1, never the raw brand blue, which measures 4.1:1 and fails. They are underlined as well as coloured, because colour alone is not an affordance. Raw orange is a fill, never text on cream — the button below is the only orange thing on this screen, which is the entire point of it.

Open the styleguideRead the blog

Rhythm

Vertical space comes from one scale: 4, 8, 12, 16, 24, 32, 48, 64, 96. Paragraphs are separated by 24px, a heading opens with 64px above it, and the footer sits 96px below the last block. Nothing is nudged by an odd pixel.

• Two families: Inter for everything, the platform mono for code.
• Body 18px on mobile, 20px from 768px up.
• Line height 1.65 for body, 1.2 for headings.
• One breakpoint, declared in em so it survives page zoom.

Editorial layout, generous whitespace, one column of readable text. No cards-in-cards, no gradients, no shadow deeper than a hairline.

Code

Inline code such as --space-24 sits on a sunken surface at 11.6:1. A block runs to the gutter edges below the breakpoint rather than squeezing an already narrow column, and scrolls horizontally when it has to.

.wrap {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

Tables

Placeholder content. Phase 3 replaces the body of this page with the home layout and leaves the shell intact.