Design system

The two themes

The page, the ink and the accent. Light is the default. Dark switches on with the sun and moon in the header.

Roles

Every colour in a component is one of these. Contrast is measured against the page of each theme.

--color-bg-page

Light #ffffff

Dark #0a0a0a

Used forPage background

--color-bg-subtle

Light #f8f8f8

Dark #141414

Used forSoft sections, nav pill, inputs

--color-bg-muted

Light #f1f1f1

Dark #262626

Used forImage placeholders, hover fills

--color-bg-stage

Light #eeeeee

Dark #141414

Used forHome first screen behind the name

--color-bg-inverse

Light #0a0a0a

Dark #ffffff

Used forActive nav bubble, primary buttons, cursor

--color-bg-accent

Light #ff5233

DarkSame

Used forBrand moments: process diagram, selection, highlights

--color-bg-accent-soft

Light #ffe9e4

Dark rgb(255 82 51 / 0.16)

--color-bg-inverse-hover

Light #262626

Dark #e4e4e4

Used forPrimary button on hover

--color-text-primary

Light #0a0a0a · 19.8:1

Dark #f8f8f8 · 18.6:1

Used forBody and headings, 19.8:1 on white

--color-text-secondary

Light #525252 · 7.8:1

Dark #cfcfcf · 12.7:1

Used forSupporting text, 7.8:1 on white

--color-text-tertiary

Light #6b6b6b · 5.3:1

Dark #8f8f8f · 6.1:1

Used forCaptions and meta, 5.3:1 on white, 4.9:1 on subtle

--color-text-inverse

Light #ffffff

Dark #0a0a0a

--color-text-highlight

Light #6b6b6b · 5.3:1

Dark #8f8f8f · 6.1:1

Used forHighlighted words in the home statements: grey, 5.3:1 on white

--color-text-unfilled

Light #a6a6a6 · 2.4:1

Dark #525252 · 2.5:1

Used forGrey start of the About type fill

--color-text-accent

Light #c2361b · 5.5:1

Dark #ff9a85 · 9.6:1

Used forOrange text on white

--color-text-on-accent

Light #0a0a0a · 19.8:1

DarkSame

Used forText on brand orange, 6.1:1

--color-text-success

Light #14743c · 5.8:1

Dark #4ade80 · 11.4:1

--color-text-danger

Light #ff686b · 2.8:1

DarkSame

--color-border-subtle

Light #e4e4e4 · 1.3:1

Dark #262626 · 1.3:1

--color-border-default

Light #cfcfcf · 1.6:1

Dark #3a3a3a · 1.7:1

Used forDividers and card outlines

--color-border-input

Light #8f8f8f · 3.2:1

Dark #6b6b6b · 3.7:1

Used forForm field outline, 3.3:1 on white

--color-border-strong

Light #0a0a0a · 19.8:1

Dark #ffffff · 19.8:1

--color-border-inverse

Light #3a3a3a

DarkSame

Used forDividers on black surfaces, like the footer

--color-surface-panel

Light #0a0a0a

Dark #141414

Used forBlack panels: footer and phone menu. A raised black in the dark theme

--color-surface-on-panel

Light #ffffff

DarkSame

Used forText on black panels

--color-surface-menu

Light #ffffff

Dark #141414

Used forPhone menu: white in the light theme, a raised black in the dark theme

--color-surface-menu-button

Light #f1f1f1

Dark #ffffff

Used forGet in touch button inside the phone menu: light grey on the white menu, white on the dark one

--color-surface-on-menu

Light #0a0a0a

Dark #ffffff

Used forText and icons on the phone menu

--color-surface-panel-line

Light #3a3a3a

DarkSame

Used forDividers on black panels

Scale

Weights and line height

regular

Value400

medium

Value500

semibold

Value600

bold

Value700

Line height display

Value0.88

Line height tight

Value1.08

Line height snug

Value1.25

Line height normal

Value1.55

Line height relaxed

Value1.7

Anatomy

Rules

1. 01Lines are hairlines, 1px in the border colour. Never a filled box around a card.
2. 02A star marks the start of every column, centred on its corner.
3. 03On How I work the lines and stars are black (white in the dark theme), everywhere else grey.
4. 04As an item scrolls from the bottom of the screen to its middle, the end of its top line fades in.
5. 05Form fields borrow the star: it appears at the start of a field’s line while the field is selected.

Values

Line

Value1px · --color-border-default

Star

Value1.25rem · 5:6

Soft end

Value1.5rem

Used forSoft leading end of a star line while it draws

Strong line

Value--color-border-strong

Used forProcess steps on How I work

Spacing

gutter

Valueclamp(1rem, 4vw, 4rem)

Used forPage side padding

section

Valueclamp(4rem, 10vw, 10rem)

Used forVertical rhythm between page sections

stack

Valueclamp(1.5rem, 3vw, 2.5rem)

Used forGap between blocks inside a section

container

Value90rem

Used for1440px content width

prose

Value42rem

Used forComfortable line length for running text

narrow

Value48rem

Used forLine length of narrow text sections

tap

Value2.75rem

Used forMinimum touch target, 44px

Scale

• 14px
• 28px
• 312px
• 416px
• 520px
• 624px
• 832px
• 1040px
• 1248px
• 1664px
• 2080px
• 2496px
• 32128px
• 40160px

Layers

From the top down. Dialogs sit above everything, the navigation above the page so the way out is always there.

1. 300dialog
2. 200cursor
3. 100nav
4. 90Colour that fills the screen when a case opens, below the nav
5. 50rail
6. 1base

Breakpoints

sm

When640px and wider

What changesName and email side by side in forms

md

When768px and wider

What changesTablets on their side get the navigation pill; held upright up to 1024px they keep the phone menu

lg

When1024px and wider

What changesDots on the left for case study sections, two column layouts, the pill in any orientation

xl

When1280px and wider

What changesThe process opens up into the wide diagram

Touch

WhenTouch screens

What changesThe header slides away while you scroll down, larger tap areas

Mouse or trackpad

WhenFine pointers

What changesThe custom cursor

Radius

• xs6px
• sm12px
• md20px
• lg32px
• xl48px
• pillpill
• card-rest0
• card-hover12px

Shadows

nav

Value0 1px 2px rgb(0 0 0 / 0.06)

Used forNav pill and Get in touch: a short, tight shadow under the bottom edge, no outline, like the old site

raised

Value0 1px 2px rgb(0 0 0 / 0.06), 0 12px 40px -12px rgb(0 0 0 / 0.18)

Used forDialogs and popovers. In the dark theme a faint light edge and glow, so panels lift off black

sheet

Value0 -12px 40px -16px rgb(0 0 0 / 0.12)

Used forSoft edge on a sheet sliding over the section before. In the dark theme a faint light edge and glow instead, so the sheet still reads while it scrolls over black

hairline

Valueinset 0 0 0 1px rgb(0 0 0 / 0.1)

Used forEdge around design images, so white screens do not melt into the white page

Rules

1. 01Thin black geometry, reduced to a few lines. Corners stay open, like the frame of Product Design.
2. 02Each icon has one dashed guide and one dot. The dot rides the guide and tells the story of the area.
3. 03The scroll drives the dot. It starts when the icon enters at the bottom of the screen and arrives when the icon reaches the upper third. Scrolling back runs it back.
4. 04At rest the dot is hidden, so the icon reads clean. Without JavaScript it stays at the end of its track.
5. 05Icons use the text colour, so they turn white in the dark theme.

Values

Size

Value112 to 160px

Used forLine icon above each service area

Line

Value1.5 · guide 0.75, dashed 2 3

Dot

Valuer 2.5 · text colour

Used forFades in with the fast duration when it leaves the start

Rules

1. 01One system, no exceptions. Every value is a token. Components use roles like text primary or surface subtle, never raw colour values.
2. 02Quiet surface, loud type. White space and two typefaces carry the brand, Flicker for the big moments and Manrope for everything you read. Orange is used sparingly.
3. 03Motion explains. Movement shows where something comes from and where it goes, like the bubble in the navigation. It always respects reduced motion.

Easing

• standard

  cubic-bezier(0.2, 0, 0, 1)

  Colour, opacity and small moves

• emphasized

  cubic-bezier(0.22, 1, 0.36, 1)

  Nav bubble, reveals, shape shift

• header

  cubic-bezier(0.45, 0, 0.25, 1)

  Even slide for the header, visible from start to end

Durations

fast

Time150ms

Used forColour and borders on hover and focus

base

Time300ms

Used forButtons, the menu icon and small moves

slow

Time550ms

Used forNav bubble, fade up, dialogs and process steps

slower

Time800ms

Used forCase card shape shift and mockup, title reveals

linger

Time500ms

Used forHover panels stay open this long after the pointer leaves

stagger

Time25ms

Used forDelay between items that appear one after another

reel

Time4500ms

Used forHow long each case stays in the hero show reel

cue

Time1600ms

Used forOne loop of the scroll cue arrow

logo-strip

Time40s

Used forOne full pass of the logo film strip

header

Time450ms

Used forHeader sliding out of the frame and back on phones and tablets

fade-step

Time80ms

Used forGap between text blocks that fade in together on case pages

type-fill

Time250ms

Used forDelay between lines when About text fills from grey to its colour

type-fill-line

Time1200ms

Used forHow long one line takes to fill from left to right

chapter-leave

Time180ms

Used forCase study chapter title: letters sinking back into the baseline

chapter-rise

Time450ms

Used forCase study chapter title: one letter rising out of the baseline

chapter-stagger

Time14ms

Used forCase study chapter title: delay from one letter to the next, so they rise as a wave

pulse

Time2000ms

Used forOne beat of the pulsing availability dot