Design

System

About

This site is built from a small set of visual and interaction rules, documented as they’re actually used. Nothing here is aspirational. Every principle, type size, color, and pattern below is in production.

Increasingly, the effectiveness and impact of our content depends on the form we give it. Years of building products at The New York Times, BuzzFeed, and Resy made that hard to ignore.

Materials

Set in Söhne, mostly Leicht, Buch, and Halbfett, with italics reserved for emphasis. Built as a static site: semantic HTML, bespoke CSS, minimal JavaScript.

Principles Typography Links Color Grid Spacing Patterns Tokens

Principles

Editorial first

Pages should read with the confidence of a magazine layout, not a generic template library.

Structure stays visible

Grid, rules, alignment, and spacing do real compositional work. They are not decorative afterthoughts.

Accent with restraint

Red is used to direct attention, separate hierarchy, and signal interaction. It should remain rare.

Warm precision

The site should feel exacting without feeling cold. Human phrasing and tactile surfaces matter.

Typography

Type does most of the personality work. Scale changes can be bold, but weight, spacing, and line length stay disciplined.

Display + heading scale

h1. Large type sets the tone before the copy does.

Söhne halbfett, large display sizing, tight rhythm

H2. Section-level anchor

H3. Strong subsection heading

H4. Supporting subhead

H5. Compact label headline

H6. Quiet metadata heading

Body copy + paragraphs and links

300-400 / 17-24px / 1.35 line-height / measured width

Lead paragraphs open with a little room and a little confidence.

Body copy should stay measured and readable, with enough air to carry longer ideas across the page. Inline links should feel native to the sentence, like this case study link.

Caption or meta copy stays smaller, calmer, and lower contrast.

Meta and labels + lists and quotes

EYEBROW / CAPTION / MICROCOPY

13px / spaced caps / lower contrast / quiet support text

Group supporting points when a paragraph would get muddy.
Keep bullets concise, parallel, and useful out of context.
Let spacing separate ideas before adding more decoration.

The site should feel like authored work, not a theme with content poured into it.

Links

Links do most of the work. Buttons are used sparingly, when an action deserves emphasis.

Prominent links

Large

Medium

View Work

Color

Color is assigned a job before it’s assigned a value. The site is designed in dark mode first. Light mode is an alternate reading environment, not a separate design.

Background

--bg

Foreground

--fg

Accent

--accent

Rule

--line

Muted

--muted

Warm surface

--about-surface

Role

Token

Dark

Light

Page background

--bg

#000000

#ffffff

Primary text

--fg

#ffffff

#121212

Divider / rule

--line

rgba(255,255,255,0.2)

#d6d0c6

Muted text

--muted

#ebebf5

#474a51

Accent

--accent

#ff453a

Warm surface

--about-surface

#111111

#f3eee5

Theme behavior

Changing themes shouldn’t change the hierarchy. Only the materials change.

Grid

The grid keeps the left rail, reading column, and wider editorial blocks in deliberate relation to each other.

3 / 6 / 3 split

Use for resume-style or content + sidebar compositions.

4 / 8 editorial split

Use for section headers with narrative content or media-led story blocks.

Wide specimen row

Use for hero treatments, scale samples, or strong visual punctuation.

Spacing

Spacing is generous by default. Most sections should feel intentionally paced, with strong vertical breaks and clean internal grouping.

8px

Micro offsets, icon nudge, tight text pairings

16px

Compact groups, small insets, and tight control spacing

24px

Default rhythm between heading and copy

40px

Grid gutter and major composition interval

72px+

Section transitions and large editorial pauses

Patterns

Repeated patterns should make the site easier to scan. They carry navigation, hierarchy, and state without adding extra explanation.

Navigation

Rails, local jumps, and section states should describe the same structure.

Use the left rail for persistent page-level navigation. Use local jumps for scanning a long page. Active states should follow scroll position, not just click state.

Responsive behavior

1501px+

Widescreen desktop

The grid opens up, gutters widen, and hero typography scales harder without changing the underlying structure.

960-1500px

Core desktop

Use the 12-column baseline, persistent rail, and composed promo blocks as the default reading layout.

521-959px

Compact desktop / tablet

Keep the editorial structure, but tighten spacing and simplify large horizontal compositions into more static arrangements.

520px and below

Phone

Switch to the mobile treatment: narrower insets, tighter spacing, and horizontal scrollers only where peeking content adds meaning.

Framed objects

Most content should live directly on the page.

Frames are reserved for moments that need separation or emphasis.

Theme state

Dark mode is first; light mode is a controlled remapping.

Do not redesign each component per theme. Preserve hierarchy and only remap token values.

Copy blocks

Paragraph width stays measured even when the layout gets dramatic.

Favor readable line lengths over filling every available column.

Tokens

The same system, exported for humans and machines. Available as both documentation and machine-readable tokens.

design-tokens.json

W3C Design Tokens format: color, type scale, grid, spacing, and radii, with light-theme overrides.

design-system.md

A written version of the system for documentation, portability, and automation.