A quote is set larger on the ink, opened by a mark in the accent, with no rule.
Design system
Brand
The palette, type, shapes, diagram recipe and imagery rules: the north star for anything drawn or written for the site.
Principles
Five rules, and everything below is one of them applied
Paper and ink.
An off-white ground, black text, one primary for anything that acts, one accent for anything that highlights. Nothing else is coloured.
Tokens only.
Every colour, radius and family is a token from the brand. A drawing that hard-codes a hex will not follow the site that shows it.
One family, and its mono.
Google Sans Flex at every size, Google Sans Code for kickers, numbers, values and code. Weight and tracking do the work.
Generous space.
Long leading, a 38rem reading measure, wide page padding. Whitespace is the layout; rules and shadows are not.
Flat, cut-paper shapes.
Solid fills, multiplied where they overlap, edged in the ground colour. No gradients, no drop shadows, no 3D.
Palette
Nineteen tokens paint everything
The page is light. The chrome, the rail and the phone bars, is the same palette inverted. Swatches are painted from the live variables; the values beneath are the same colour as data.
Page
background
#f7f7f7
oklch(0.975 0 0)The ground. Paper on the page, near-black in the chrome.
foreground
#000000
oklch(0 0 0)Ink: body text, headings, icons at rest.
primary
#008889
oklch(0.55 0.13 195)The brand colour: links, buttons, focus rings, diagram shapes.
primary-foreground
#ffffff
oklch(1 0 0)Text and marks placed on the primary.
accent
#e18528
oklch(0.7 0.15 60)The second colour: text selection, the quote mark, notices. Never a button.
accent-foreground
#ffffff
oklch(1 0 0)Text placed on the accent.
secondary
#000000
oklch(0 0 0)The inverse button: ink on paper, paper on chrome.
secondary-foreground
#ffffff
oklch(1 0 0)Text on the secondary.
muted
#eeeeee
oklch(0.95 0 0)A quiet fill: chips, hover, skeletons, embed backgrounds.
muted-foreground
#555555
oklch(0.45 0 0)Secondary text: standfirsts, captions, eyebrows, metadata.
card
#ffffff
oklch(1 0 0)A raised surface: every card in every shelf.
card-foreground
#000000
oklch(0 0 0)Text on a card.
popover
#ffffff
oklch(1 0 0)Floating surfaces: menus, dialogs, tooltips.
popover-foreground
#000000
oklch(0 0 0)Text on a popover.
border
#e1e1e1
oklch(0.91 0 0)Every rule and outline. The only line colour.
input
#ffffff
oklch(1 0 0)The field control's fill.
ring
#008889
oklch(0.55 0.13 195)The focus ring. Follows the primary.
destructive
#e7000b
oklch(0.577 0.245 27.325)Errors and irreversible actions, tinted, never solid.
destructive-foreground
#ffffff
oklch(1 0 0)Text on a solid destructive fill (rare).
Chrome
background
#070707
oklch(0.13 0 0)The ground. Paper on the page, near-black in the chrome.
foreground
#ffffff
oklch(1 0 0)Ink: body text, headings, icons at rest.
primary
#1ad1d1
oklch(0.78 0.13 195)The brand colour: links, buttons, focus rings, diagram shapes.
primary-foreground
#070707
oklch(0.13 0 0)Text and marks placed on the primary.
accent
#6498ff
oklch(0.7 0.18 264)The second colour: text selection, the quote mark, notices. Never a button.
accent-foreground
#ffffff
oklch(1 0 0)Text placed on the accent.
secondary
#ffffff
oklch(1 0 0)The inverse button: ink on paper, paper on chrome.
secondary-foreground
#000000
oklch(0 0 0)Text on the secondary.
muted
#161616
oklch(0.2 0 0)A quiet fill: chips, hover, skeletons, embed backgrounds.
muted-foreground
#ffffff 60%
oklch(1 0 0 / 0.6)Secondary text: standfirsts, captions, eyebrows, metadata.
card
#1b1b1b
oklch(0.22 0 0)A raised surface: every card in every shelf.
card-foreground
#ffffff
oklch(1 0 0)Text on a card.
popover
#090909
oklch(0.14 0 0)Floating surfaces: menus, dialogs, tooltips.
popover-foreground
#ffffff
oklch(1 0 0)Text on a popover.
border
#1d1d1d
oklch(0.23 0 0)Every rule and outline. The only line colour.
input
#292929
oklch(0.28 0 0)The field control's fill.
ring
#1ad1d1
oklch(0.78 0.13 195)The focus ring. Follows the primary.
destructive
#e7000b
oklch(0.577 0.245 27.325)Errors and irreversible actions, tinted, never solid.
destructive-foreground
#ffffff
oklch(1 0 0)Text on a solid destructive fill (rare).
Type
One family and its mono
Every heading is the Heading component with a level and a variant. Every hero and section opens with the Header trio: a kicker, a heading, a subheading. Body leading is 1.7, 1.8 in an article.
Heading hero
2.25rem/3rem, 600, 1.15, tight tracking, balanced
The page's H1, in a hero
The quick brown fox jumps over the lazy dog.
Heading statement
1.5rem/1.875rem, 600, snug, tight tracking
A claim or a number: the splash, the CV stat, sign-in
The quick brown fox jumps over the lazy dog.
Heading title
1.25rem, 600, tight tracking
A block's title: the newsletter, a CV era
The quick brown fox jumps over the lazy dog.
Heading item
1.125rem, 600
A list or card title, an admin section
The quick brown fox jumps over the lazy dog.
Heading entry
1rem, 600
A row inside a list: a CV entry
The quick brown fox jumps over the lazy dog.
Heading small
0.875rem, 600
A group of fields, a sub-exhibit
The quick brown fox jumps over the lazy dog.
Kicker
Mono, 0.875rem, 500, uppercase, wide tracking, muted, a primary stroke
The eyebrow above a heading, one to four words
The quick brown fox jumps over the lazy dog.
Number
Mono, 0.875rem, 500, primary, two digits
The lead of a numbered list
01 02 03
Value
Mono, 0.75rem, muted
A colour value, a key, a size
The quick brown fox jumps over the lazy dog.
Subheading
1.25rem, relaxed, muted, 38rem measure
The standfirst under a heading
The quick brown fox jumps over the lazy dog.
Body
1.125rem, 1.8, 38rem measure
Article text
The quick brown fox jumps over the lazy dog.
UI
0.875rem, 500
Buttons, the rail, forms
The quick brown fox jumps over the lazy dog.
Caption
0.875rem, muted
Figure captions, metadata
The quick brown fox jumps over the lazy dog.
Shape and space
One radius, and every corner derives from it
Pages are 64rem wide, padded 1.5rem on phones and 2.5rem beyond. The reading measure is 38rem.
sm
8px
Small inline chips
md
10px
Menus, small controls
lg
12px
Images, embeds, focus outlines
xl
16px
ArticleBox, swatches
2xl
20px
Cards, panels
full
9999px
Buttons, chips, the brand mark
Components
The primitives, as shipped
Buttons are pills: the primary acts, the secondary is ink, the outline is quiet. Cards are one recipe, chips are one recipe, lists are one recipe.
Buttons
Badges and chips
- Published
- Draft
- Soon
- Next.js
- Convex
Cards
A card
Raised on the card token, bordered, 2xl corners, 1.5rem padding. The only box on the site.
A card that is a link
The whole card is the target: border darkens, ground tints, focus ring on keyboard.
Article blocks
Someone quotable, with their portrait when there is one
Diagrams
Cut-paper shapes on the primary
A diagram is code on the recipe, so it follows whichever site shows it.
A viewBox, no width or height: the figure sizes it. An image role with a title and a desc that say what the picture says.
Shapes are the primary at 0.6 to 0.7 opacity with multiply, so overlaps darken by themselves. Then the same shapes again, unfilled, stroked 3 in the ground colour.
Labels are the primary’s foreground, bold, uppercase, tracked 0.1em, centred, in the page’s family. Nothing is coloured that is not primary, ground or its foreground.
Draw it as a component in the diagrams folder on the DIAGRAM recipe, register it, and the editor can place it. The two below are the ones the perfect-job article uses.
perfect-job · The perfect job: love, skill, money ikigai · Ikigai, the viral four-circle diagram
Icons
Two sets and no others
Single-path brand marks for the networks, Lucide for the interface. Both take the current colour.
Writing
Plain British English, typeset properly
The same rules for a person and for an AI writing copy, code strings or alt text.
Curly quotes and apostrophes: ’ “ ”. Never the straight ones. Writers may type straight quotes in the editor; the site curls them.
No em dash and no en dash. Use a comma, a full stop or a colon. A hyphen joins words only.
British spelling, sentence case everywhere, no full stop at the end of a heading, kicker, label or button.
Kickers are one to four words. Numbers in a list are two digits, 01 to 99, in the mono face.
No exclamation marks, no ellipsis, no emoji. Second person, short sentences, one idea each. Alt text says what the picture shows, never “image of”.
Imagery
Photos are photos, everything else is drawn
Both follow the five principles.
Photos are WebP, long edge at most 2000px, uploaded through the media library; the mugshot is a 512px square. Never store a URL.
Alt text is never empty: the logo is “<site> logo”, an icon “<site> icon”, a mugshot the person’s name, a body image what it shows.
Body images take the lg radius and the full measure. No captions baked into pixels; the caption is the ArticleMedia figure’s figcaption, small and muted, closed by a rule.
Anything drawn, whether a diagram, an illustration or a social card, is an SVG on the tokens. Hex values here are for tools that cannot read a variable, and are the light palette.
Brand marks are single-path icons filled with the current colour, always icon-only with an aria-label on the link. UI icons are Lucide, size-4, and aria-hidden beside their own text.