Design system
The tokens behind every component
17 color styles, 17 text styles, one spacing scale and a short list of rules. Every component reads from them, so a change here reaches every page, in light and dark.
Color
Seventeen color styles, each with a dark value
Use the style, never the hex. Pages switch to dark mode on their own because every style carries both values.
Surface
Backgrounds and containers
Page
Page background
#FCFBF7 / #141311
Platter
Alternate sections, insets, input fills
#F3F0E8 / #1B1A17
Card
Raised cards
#FFFFFF / #211F1C
Deep
Always dark: CTA band, code, mockup chrome
#1D1C19 / #0C0C0B
Text
Type and icons
Text Primary
Headings and labels
#1D1C19 / #F2EFE7
Text Secondary
Body copy
#5E5B53 / #AAA699
Text Tertiary
Captions, meta, placeholders
#8C887D / #7A766C
On Accent
Text and icons on Accent fills
#FFFFFF / #0F1B17
On Deep
Text on Deep surfaces
#F2EFE7 / #F2EFE7
Line
Borders and dividers
Line
Card borders, hairline dividers
#E6E1D6 / #2C2A26
Line Strong
Inputs, hover borders
#D3CCBD / #3A3732
Accent
One brand color, used sparingly
Accent
Primary buttons, links, active, success
#2E6B5A / #63B097
Accent Hover
Hover state of Accent
#245647 / #7CC3AB
Accent Soft
Tinted badges, highlight rows
#E3EEE9 / #1B2D27
Signal
Status and warmth
Sand
Warm highlights, featured tints
#ECE3CF / #3A3326
Ochre
Running, pending, warning
#B07A2A / #DDA757
Brick
Errors and failed runs
#B4553D / #E2806A
Type
Two families, seventeen text styles
Host Grotesk for everything you read: headlines at 500 with tight tracking, body at 400, labels at 500. JetBrains Mono only for code and tool names. Each style steps down on tablet and phone by itself.
Display
Host Grotesk 500 · 76/60/44 · lh 1 · tracking −0.04em · home hero only
Agents that finish the job
Heading 1
Host Grotesk 500 · 56/46/36 · lh 1.04 · tracking −0.035em · interior page titles
Pricing that follows your runs
Heading 2
Host Grotesk 500 · 42/36/30 · lh 1.08 · tracking −0.03em · section titles
Every run is logged, step by step
Heading 3
Host Grotesk 500 · 28/26/23 · lh 1.18 · sub-sections
Review gates for refunds over $500
Heading 4
Host Grotesk 500 · 20/19/18 · lh 1.3 · card titles
Approval rules by role
Heading 5
Host Grotesk 600 · 16 · lh 1.4 · small titles, FAQ questions
What happens when an agent isn’t sure?
Lead
Host Grotesk 400 · 20/19/18 · lh 1.5 · intro paragraphs
Agents carry a task from intake to done and stop for a person when a step needs one.
Body
Host Grotesk 400 · 16 · lh 1.6 · paragraphs
Inputs, tool calls and decisions are kept for 90 days, so you can replay any run and see why the agent acted.
Body Small
Host Grotesk 400 · 14 · lh 1.55 · card text
Refunds above a limit you set now pause for approval.
Label
Host Grotesk 500 · 14 · lh 1.3 · UI labels
Run #4,281 · 12 steps
Caption
Host Grotesk 400 · 13 · lh 1.4 · meta and sources
Juniper Freight, first 90 days
Kicker
Host Grotesk 500 · 13 · sentence case · accent · eyebrows above headings
How it works
Mono
JetBrains Mono 400 · 14/14/13 · lh 1.6 · code and tool names only
search_tickets(status: open, limit: 5)
Mono Small
JetBrains Mono 400 · 12 · lh 1.5 · status labels, versions and run IDs
Nov 4, 2026 · v2.6 · run_4821
Quote
Host Grotesk 400 · 28/25/22 · lh 1.3 · pull quotes
“The queue is sorted before we log on.”
Numeral
Host Grotesk 500 · 56/48/40 · lh 1 · big numbers
38%
Button
Host Grotesk 500 · 15 · lh 1.2 · button labels
Start a free run
Link · Link Quiet
Accent, underlined · Text Secondary to Primary on hover
Spacing
Twelve spacing steps, from 4 to 128
Gaps and padding come from this scale. Cards use 24 (20 when compact). Section padding is the one exception: 120, 96 and 72.
4
Icon to text nudges, dot to label
8
Chip gaps, label to input
12
Card title to body, swatch grid on phone
16
Compact padding, card grid gap on phone
20
Compact card padding
24
Card padding, card grid gap
32
Section side padding on desktop
40
Heading to content on phone
48
Compact section padding on phone
64
Compact section padding on desktop
96
Section padding on tablet
128
Largest step: hero breathing room
Radius
Six corner radii, smaller inside larger
Chips 6, buttons and inputs 10, small cards 14, cards and panels 18, large panels and mockup frames 24. The pill radius is only for status dots and avatars.
6px
Chips and badges
10px
Buttons and inputs
14px
Small cards, swatches
18px
Cards and panels
24px
Feature panels, mockups
999px
Status dots, avatars, pills
Elevation
Borders first, shadows rarely
Most surfaces sit flat with a 1px Line border. Two shadows are allowed: a faint one for raised cards and a soft one for floating panels.
Flat
Default for cards, panels and tables
1px solid Line · no shadow
Raised
Cards that sit on Platter or need lift
0 1px 2px 0 rgba(29,28,25,0.06)
Floating
Menus, popovers, hero mockup frames
0 12px 32px -12px rgba(29,28,25,0.18)
Motion
Motion that confirms, never decorates
Animation answers an action or reveals content once. Everything else stays still.
Appear once, in view
Opacity 0 → 1 with a 12px rise, spring 0.5s, no bounce. Grid children stagger by 0.06s.
States are variants
Hover and Pressed are component variants: tween 0.2s, ease 0.44, 0, 0.56, 1. Pressed scales to 0.98.
Cards stay put
On hover a card’s border moves to Line Strong. No lifts, no glows.
Loops only for live status
Status dots and the streaming cursor may loop. Nothing else repeats.
No parallax or scroll-jacking
Scrolling stays native. At most two animated code visuals per page.
Flow effect on accordions
FAQ stacks animate height with a flow effect, so the rows below move instead of jumping.
Layout
Sections, widths and grids
Every page is a stack of full-width sections, each with one centered content wrapper.
Section padding
120/32 on desktop, 96/24 on tablet, 72/20 on phone. Compact bands use 64, 56 and 48.
One content wrapper
Fill width with a 1200px max (760px for reading pages). 56px between heading and content, 40px on phone.
Grids collapse 3 → 2 → 1
Card grids use 24px gaps, 16px on phone. Feature lists run in 2 columns, then 1.
Alternate backgrounds
Page and Platter take turns. Deep appears once, usually the closing CTA.
Three breakpoints
Desktop 1200, Tablet 810, Phone 390. Build desktop first, then override only what breaks.
One accent button per view
Primary for the main action, with Secondary or Ghost beside it.
Rules
Do this, not that
Five habits that keep a Cairn site consistent after the tenth page and the first rebrand.