Ink
#1C1C1C
Text, hairlines and ink panels.
Paper
#F4F5F7
The page.
Light
#F4F4F2
Text on ink.
Light Muted
#F4F4F2 at 50%
Quieter text and lines on ink, shown here over Ink.
Signal
#FE7141
Panel fills and hover wipes only, never text or a line. One exception: the form’s required “*”.
Text pairs
Contrast against the surface
Every text pair reaches 4.5:1. Light only: there is no dark mode.
Ink on Paper · 15.6:1
Ink on Signal · 6.2:1
Light on Ink · 15.5:1
Light Muted on Ink · 4.8:1
Heading/3XL
h1 · Funnel Display 500 · 160 / 120 / 88 · line 80% · track -0.06em
The hero title, h1, one to four words.
Work
Heading/2XL
p · Geist 400 · 120 / 96 / 64 · line 100% · track -0.06em
The closing ticker’s label only.
Start
Heading/XL
p · Geist 500 · 80 / 72 / 56 · line 100% · track -0.06em
Figures on panels, the quote mark, office clocks, a one-word hero title too wide for 3XL.
71%
Heading/L
h2 · Geist 500 · 64 / 56 / 40 · line 100% · track -0.06em
Section headings (h2); CMS and legal page titles (h1).
One way of doing it.
Heading/M
p · Geist 500 · 32 / 28 / 24 · line 112% · track -0.06em
Statements and office cities.
We work where the cost sits, on the depot floor.
Heading/S
h3 · Geist 500 · 24 / 24 / 20 · line 100% · track -0.06em
Card and row titles, names, the hero byline.
Operating Model Review
Body/L
p · Geist 400 · 32 / 28 / 24 · line 112% · track -0.06em
Quotes and the form band’s heading.
They worked from the depot floor up, not from a slide.
Body/M
p · Geist 400 · 20 / 18 / 18 · line 120% · track -0.02em
Hero text, list text, answers, legal and article paragraphs.
Every engagement is scoped, priced and dated before it starts.
Body/S
p · Geist 400 · 16 · line 120% · track -0.04em
Card descriptions, roles, sectors, summaries, intros.
We map who decides what, where the work crosses teams and what it costs.
Body/S Tight
p · Geist 400 · 16 · line 100% · track -0.04em
One-line labels under figures, footer headings, attributions, link labels.
Clients that return
Body/S Medium
p · Geist 500 · 16 · line 100% · track -0.04em
Button labels only.
Start a Conversation
Mono/M
p · Geist Mono 500 · 16 · line 100% · track 0em · uppercase
“■ Label” section labels and figure numbers.
■ Services
Mono/S
p · Geist Mono 500 · 12 · line 100% · track 0em · uppercase
Dates, topics, sectors in rows, hero labels, list labels, clocks.
LDN 09:41 · Logistics
Article/H1
h1 · Geist 500 · 32 / 28 / 24 · line 112% · track -0.06em · paragraph 64
Heading 1 inside an article body; the page title is already the h1, so prefer H2.
Cost to serve, line by line
Article/H2
h2 · Geist 500 · 32 / 28 / 24 · line 112% · track -0.06em · paragraph 64
Section headings in articles and on the legal pages.
What the network was built for
Article/H4
h4 · Geist 500 · 24 / 24 / 20 · line 100% · track -0.06em
Heading 4 inside an article body.
Four depots, one hub
Article/H5
h5 · Geist 500 · 20 / 18 / 18 · line 120% · track -0.02em
Heading 5 inside an article body.
The night shift’s numbers
Article/H6
h6 · Geist 500 · 16 · line 100% · track -0.04em
Heading 6 inside an article body.
A note on the figures
Article/Quote
blockquote · Geist 400 · 24 at every width · line 112% · track -0.06em · 0.5 Ink line, 24 inset
A quote in an article body, at Body/L’s phone size on every screen (quote styles take one size).
The answer is rarely the one the board expects.
Article/Body
p · Geist 400 · 20 / 18 / 18 · line 120% · track -0.02em · pretty wrap
Article paragraphs on Tablet and Phone, where it adds pretty wrap; Body/M on Desktop.
Most of the depot networks we see were designed around a customer map that no longer exists.
Link/Ink
Ink · no underline
Short links on paper: no line at rest, drawn on hover by withUnderlineDraw.
Link/Light
Light · no underline
The same on ink.
Link/Inline Ink
Ink · underline 1 at 0.2em, none on hover
Links inside long text: a line at rest that redraws on hover (withUnderlineRedraw).
Link/Inline Light
Light · underline 1 at 0.2em, none on hover
The same on ink.
Section heads
Columns 5 to 10; 5 to 12 on Tablet; full width with a 16 inset on Phone.
Statements
Columns 5 to 10 on Desktop and Tablet; full width on Phone.
Lists
Columns 2 to 11, rows ruled in 0.5 hairlines; full width on Phone.
Cards
Three across, 4 + 4 + 4, sharing their hairlines; one per row on Phone.
8
Pairs that belong together: name and role, city and clock.
16
A heading and its group; a label and its value inside a cell.
24 / 24 / 16
Padding inside every cell, card and panel.
32 / 32 / 24
Rows in a ruled list.
64 / 48 / 32
Label to heading in a section head.
80 / 64 / 48
Section head to its content.
240 / 160 / 96
Between sections: Main’s gap and bottom padding.
Button
Variants: Light · Signal · Nav · Hover · Controls: Label, Link
Light on ink panels, Signal on paper, Nav in the nav. On hover a wipe crosses it and the arrow slides through.
Text Link
Variants: Ink · Light · Hover · Tablet and Phone: Light · Controls: Label, Link
Every nav and footer link; the line draws on hover. Ink on paper, Light on ink.
Arrow Button
Variants: Next · Previous · Hover
Previous and next in the testimonial; it fires On Click.
Submit Button
Variants: Default · Sent · Hover · Controls: Label, Sent Label
Every form’s submit, with its Sent state.
Menu Button
Variants: Menu · Close
The phone nav’s Menu and Close, which open and shut the full-screen menu.
Service Card
Desktop, Tablet and Phone · Variants: Default · Right Edge · Hover · Controls: Title, Description, Illustration
A service with its Illustration. Right Edge last in a row; on Phone the card on the centre line wipes.
Person
Desktop, Tablet and Phone · Variants: Default · Right Edge · Controls: Photo, Name, Role
A team card: photo, name and role. Right Edge last in a row.
Engagement Row
Desktop, Tablet and Phone · Hover · Controls: Client, Sector, Brief, Value, Label, Photo
A Work item in a list, with its figure and photo; wipes Signal on hover.
Insight Row
Desktop, Tablet and Phone · Hover · Controls: Topic, Title, Summary, Author, Date, Photo
An Insights item in a list; wipes Signal on hover.
FAQ Item
Desktop, Tablet and Phone · Variants: Open · Closed · Hover · Controls: Question, Answer
One question; it sits inside FAQ, which keeps one open at a time.
Illustration Tile
Desktop, Tablet and Phone · Variants: Default, Hover · Controls: Number, Name, Illustration
A numbered figure tile; on hover it wipes Signal and the figure moves.
Live in Illustrations below
Page Hero
Desktop, Tablet and Phone · Variants: Page · Page XL · Detail · Home · Not Found · Contact · Controls: Title, Byline, Byline 2, Text, Label, Label Role, Label 2, Photo, Button Label, Link
Opens every page but the legal two: Page, Page XL, Detail, Contact, Not Found, Home.
Live: this page’s hero (Page)
Section Head
Desktop, Tablet and Phone · Variants: Offset · Left · Controls: Label, Heading, Intro, Show Intro
Every “■ Label” and section heading. Offset from column 5, Left from column 1; Show Intro adds a paragraph.
Live: the head of every section on this page
Statement Row
Desktop, Tablet and Phone · Controls: Label, Text
A label and a large statement, on columns 5 to 10.
List Row
Desktop, Tablet and Phone · Controls: Label, Text
A label and a line in a ruled list: steps, deliverables, roles.
Live in the Skills ledger above
Stat Panel
Desktop, Tablet and Phone · Variants: Ink 320 · Signal 320 · Ink 400 with Name · Signal 400 with Name · Ink 160 · Ink 480 · Controls: Value, Label, Name
One figure on an Ink or Signal panel, at the heights its variants name. Wipes in; figures can count up.
Selected Engagement
Desktop, Tablet and Phone · Controls: Client, Sector, Value, Label, Brief, Outcome
The featured Work record: client, figure, brief and outcome in three boxes.
Quote Card
Desktop, Tablet and Phone · Variants: Reveal · Static · Controls: Quote, Client, Name, Role
One quote on its own, as on a Work item’s page.
Testimonial
Desktop, Tablet and Phone · Variants: Quote 1 to 3 · Controls: Quote, Client, Name, Role and Photo, ×3
Three quotes with arrows; staged like the hero when it comes into view.
Client Index
Variants: Default · Client 1 to 6 · Tablet and Phone: Default · Controls: Client and Sector, ×6
Six clients; a row’s hover slides its logo into the ink box.
FAQ
Desktop, Tablet and Phone · Variants: All Closed · Open 1 to 4 · Controls: Question and Answer, ×4
Four questions, one open at a time. Hover opens one; on Phone, a tap.
Ticker Band
Variants: Default · Tablet · Phone · Hover · Controls: Link, Label
The closing band above the footer, in the Site layout behind its Show CTA switch.
Live at the foot of every page but Contact and this one
Contact Form
Variants: Default · Sent · Controls: Sent Title, Sent Text
The scoping form; on success its Sent variant shows Sent Title and Sent Text.
DitherSplash
Code component
The dithered wave background; it answers the cursor. In the Site layout only.
GridDistortion
Code component
The footer photo that breaks into blocks under the pointer. In the Site layout only.
Illustration
Code component
Sixty line figures in one component: pick a Figure; Animate When Active inside a card.
TestimonialPhoto
Code component
The testimonial’s sliding photos, inside Testimonial.
Wipe
Overrides
Entrance overrides: boxes wipe, text rises. Which one does what: Motion, below.
On load: withWipePanel, withWipePhoto
Boxes: withWipeIn, withPanelWipe1, withPanelWipe2, withPanelWipe3, withStatWipe3, withRecordWipe1, withRecordWipe2, withRecordWipe3
Text: withRise, withRiseInBox, withRiseBlock, withRiseStill, withHeadingLines
Rows and cards: withRowCascade, withCascade, withTeamCard, withQuoteCardWipe
Replays: withWipeInReplay, withWipeCard, withWipeCardPhoto, withWipeCardArrows
CountUp
Overrides
Figures that count up from zero as their panel wipes.
On sight: withCountUp
In a Stat Grid: withCountUpWipe, withCountUpWipe2, withCountUpWipe3, withCountUpStat3
ScrollActive
Overrides
On Phone, the Service Card on the screen’s centre line takes its hover.
withCenterActive, withRiseStillCenter
TitleLines
Overrides
Hero titles of two to four words on two balanced lines.
withTitleLines
UnderlineDraw
Overrides
Lines under links inside text: drawn on hover, or redrawn in long text.
withUnderlineDraw, withUnderlineRedraw
LiveClock
Overrides
Office clocks: the city comes from the text, like LDN 09:41.
withLiveTime, withLiveZone
LDN 09:41
FooterHeight
Overrides
The footer fills the screen under the nav on Desktop and Tablet.
withScreenBelowNav
MenuFocus
Overrides
On Phone, keyboard focus moves into the open menu, stays inside it, and returns to the Menu button when it closes.
withMenuFocus
Home · Stats
The stepped stat grid: Stat Panels and the 120+ panel with its logo ticker. The panels wipe and count up in 0.4 s steps (the Stat Grid group).
120+
Engagements since 2012
Home · Services
A Section Head over six Service Cards, two CMS rows of three from Services; a card wipes Signal on hover, and on Phone the card on the centre line does.
Home · Clients
A Section Head over the Client Index: six clients; a row’s hover slides its logo into the ink box.
Home · Testimonial
Three quotes with arrows, staged like the hero when it comes into view (withWipeInReplay on the frame).
About · How We Work
Three Service Cards that link nowhere (withRiseStill), each with its illustration.
About · The Team
Six Person cards, three per row and two on Phone; portraits wipe, names and roles rise.
Work · Selected Engagement
The Featured Work item as a record: client, figure, brief and outcome in three boxes that wipe in steps.
Work · All Engagements
Every Work item as an Engagement Row, newest year first; rows rise 0.06 s apart.
Engagements · Three Ways
Three fee panels stepped across two rows; they wipe in 0.4 s steps (the Stepped Panels group).
Engagements · Questions
The FAQ: four questions, one fills Signal while hovered (a tap on Phone).
Contact · Scoping Form
The ink form band: a heading cell and the Contact Form, which shows its Sent variant on success. Set the form’s destination.
Five questions,
and we’ll call you.
Contact · Offices
Two offices with addresses, phones and live clocks that read their city from the text.
09:41
London · GMT
10:41
Rotterdam · CET
Privacy and Terms · Legal
The document layout of Privacy and Terms: title, updated line and Article/H2 sections, links redrawn on hover.
Privacy
Last updated · 1 October 2026
This notice explains what Whitlock collects when you use this site or write to us, and what we do with it. We are the controller of that data.
What we collect
When you send the contact form we receive your name, company, email address, the service you chose and your message. Our site host records basic technical data, such as the pages visited, to keep the site running and to count visits.
How we use it
We use your details only to reply to you and, if we work together, to run the engagement. We do not sell your data or use it for advertising.
How long we keep it
We keep enquiries for two years and client records for six years after an engagement ends, as UK law requires. After that we delete them.
Your rights
You can ask to see, correct or delete the personal data we hold about you, or object to how we use it. Write to privacy@whitlockops.com and we will reply within a month. You can also complain to the Information Commissioner’s Office.