Style guide.
Color, type, components, and motion. Every token lives in src/styles/global.css — change it there and the whole site follows.
Color
Tokens become Tailwind utilities (bg-ink, text-muted, border-line…). Dark mode only swaps the values, so components keep their classes. Toggle the theme in the navbar to see each swatch change.
Surfaces
Background
--color-bg
- Light
- #FAF8F4
- Dark
- #121110
Background 2
--color-bg-2
- Light
- #F2EFE8
- Dark
- #1A1816
Background 3
--color-bg-3
- Light
- #EAE6DC
- Dark
- #24211E
Card
--color-card
- Light
- #FFFFFF
- Dark
- #1C1A17
Warm
--color-warm
- Light
- #E8DFC9
- Dark
- #2E2922
Ink
Ink
--color-ink
- Light
- #141210
- Dark
- #F2EEE6
Ink 2
--color-ink-2
- Light
- #3A3732
- Dark
- #CFC9BE
Muted
--color-muted
- Light
- #76716A
- Dark
- #9A958C
Ink Soft
--color-ink-soft
- Light
- #8A857C
- Dark
- #8A857C
Accent
Lime
--color-accent
- Light
- #D8F651
- Dark
- #D8F651
Lime Press
--color-accent-2
- Light
- #C5E03A
- Dark
- #C5E03A
On Lime
--color-accent-ink
- Light
- #1A1F00
- Dark
- #1A1F00
Live
--color-live
- Light
- #25B34E
- Dark
- #25B34E
Band & lines
Band
--color-band
- Light
- #141210
- Dark
- #0B0A09
On Band
--color-on-band
- Light
- #FAF8F4
- Dark
- #FAF8F4
On Band 2
--color-on-band-2
- Light
- #C9C4BA
- Dark
- #C9C4BA
Line
--color-line
- Light
- #1F1D1A · 8%
- Dark
- #F2EEE6 · 8%
Line Strong
--color-line-strong
- Light
- #1F1D1A · 13%
- Dark
- #F2EEE6 · 15%
Typography
Instrument Serif for headings, Inter for everything you read, JetBrains Mono for labels, and Caveat for the hand-written notes. Headings scale fluidly with clamp().
Aa
Instrument Serif
Headings
--font-serif
Aa
Inter
Body & UI
--font-sans
Aa
JetBrains Mono
Labels
--font-mono
Aa
Caveat
Notes
--font-script
Page title
Serif · 56 → 140 · 0.95 · −2%
Page heroes
Our services.
Hero
Serif · 48 → 120 · 0.95 · −2.5%
Home hero
Websites that work as hard as your team does.
Section
Serif · 44 → 84 · 1.0 · −2%
Home section headings
Services built around outcomes.
Display
Serif · 40 → 72 · 1.02 · −2%
Newsletter
Get new essays in your inbox.
Subsection
Serif · 32 → 52 · 1.05 · −1.5%
About, FAQ, related posts
Started in 2018 with one laptop and one client.
Card title
Sans 500 · 22 · 1.25 · −1.8%
Service & contact cards
Web Design
Lead
Sans · 19 · 1.55 · Ink 2
Page hero intros
Strategy, design, and engineering for digital products that need to perform.
Body
Sans · 17 · 1.7 · Ink 2
Articles, legal pages
We design and build fast, accessible, SEO-friendly websites for ambitious teams that want to grow without wrestling with their tools.
Small
Sans · 13 · 1.5 · Muted
Meta, captions, footer
Booking 4–6 weeks out · Remote-first · SF + EU
Labels & accents
Small shared classes that give the site its editorial voice.
- Digital agency · Est. 2018
Pill tag
.pill-tag
- What we do
Eyebrow
.eyebrow
- 01 / Design practice
Mono meta
font-mono · 11 · 18%
- work as hard
Highlight
.mark-hl
- yep, click right here
Note
.note
Buttons & chips
Pill-shaped, with a hover that swaps to the accent. Hover each one to see its state.
.btn .btn-accent
.chip · .chip.is-active
Surfaces
Cards, image placeholders, and the always-dark band used by testimonials, the process, the newsletter, and the footer.
Card
bg-card · rounded-3xl · border-line
Service grids, testimonials, and form panels sit on white cards with a hairline border.
Band
bg-band · text-on-band
Always dark, in both themes — testimonials, process, newsletter, and footer.
.ph
Dark · for missing images
.ph-light
Light variant
Motion
Hover a row to play its easing curve. Everything is turned off for visitors who prefer reduced motion.
Fade up
Hero and page-title entrance (.animate-fade-up)0.7s · cubic-bezier(.2, .65, .25, 1)
Hover
Buttons, cards, chips, and links0.2–0.3s · ease
Theme switch
Color cross-fade when toggling dark mode180ms · cubic-bezier(0, 0, .2, 1)
Spring
The compass needle on the 404 page1.4s · cubic-bezier(.34, 1.56, .64, 1)
Arrow nudge
Hand-drawn annotation arrows beside a .note3.2s loop · ease-in-out