Style guide
Everything this template is made of
Colours, type, components and motion, in one place. Change a style in Framer and every page follows.
Paper
Day rgb(246, 247, 244) · Lamp rgb(16, 17, 20)
Page background
Paper Deep
Day rgb(236, 238, 233) · Lamp rgb(24, 26, 30)
Bands and alternate sections
Grid
Day rgb(222, 225, 219) · Lamp rgb(40, 43, 49)
Hairlines and graph paper
Ink
Day rgb(22, 24, 29) · Lamp rgb(232, 234, 238)
Headlines and body
Ink Muted
Day rgb(94, 99, 108) · Lamp rgb(152, 158, 168)
Secondary text
Pencil
Day color(display-p3 0.2 0.36 0.9 / 1) · Lamp color(display-p3 0.52 0.64 1 / 1)
Links, numbers, accents
Marker
Day rgba(255, 230, 128, 0.62) · Lamp rgba(255, 214, 102, 0.24)
Highlights and selection
On Pencil
Day rgb(246, 247, 244) · Lamp rgb(16, 17, 20)
Text on Pencil
Lamp
Day rgba(255, 214, 150, 0) · Lamp rgba(255, 214, 150, 0.1)
Lamp glow in the dark theme
Image Veil
Day rgba(16, 17, 20, 0) · Lamp rgba(16, 17, 20, 0.28)
Dims photos in Lamp
Display · 96px · page titles (h1)
Essay Title · 68px · page titles (h1)
Heading 2 · 34px · h2
Quiet software, written slowly
Heading 3 · 20px · h3
Quiet software, written slowly
Dek · 24px · p
Quiet software, written slowly
Body Long · 21px · p
Quiet software, written slowly
Index Title · 24px · p
Quiet software, written slowly
Body · 16px · p
Quiet software, written slowly
UI · 15px · p
Quiet software, written slowly
Note · 13px · p
Quiet software, written slowly
Label · 12px · p
Quiet software, written slowly
Numeral · 56px · p
Quiet software, written slowly
Wordmark · 16px · p
Quiet software, written slowly
Feature Title · 56px · h2
Quiet software, written slowly
Filter chips
Magnetic link
Subscribe form
Sidenote marker
Hover or tap the number and its note lights up in the margin. The marker is a real button.
An 8 px square with a stronger line every five. Pure CSS, tinted by the Grid colour, so Day and Lamp switch with the theme.
1. Reveal once: rows and cards fade up as they enter, then stay.
2. Scroll ink: a pull quote inks in word by word with the scroll.
3. Pinned story: a paragraph stays put while its margin notes arrive.
4. Count-up: reading stats count while the section scrolls into view.
5. Draw-on: a pencil line draws between the Start here essays.
6. Tickers: Now strip, Notes and the colophon drift slowly and pause on hover.
7. Sideways shelf: Series slide across while the section is pinned.
8. Drag pile: topic chips drop in, then can be dragged around.
9. Magnetic links: pills lean toward the cursor, then settle.
10. Hover kinds: lift, nudge, tilt, shadow and background fills.
11. Grid ink: the hero grid fills with pencil under the cursor.
12. Smooth scroll: gentle inertia on desktop, switched off for touch.
Visitors who ask for reduced motion get the finished state of every effect: no tickers, no scroll scrubbing, no drops.
Eight pixel grid, forty pixel gutters, 1200 pixel maximum width.
Newsreader for reading, Geist for interface, Geist Mono for annotations.
Colour only from the colour styles; every style has a Day and a Lamp value.
Text only from the text styles; headings take their tag from the style.
One h1 per page, set by the page title style.
Tap targets are at least 44 px on phones.
Nothing above the fold waits for an animation.