Design system
The parts this site is built from.
Colour styles, text styles, components and motion. Change a style here and every page follows. The agent reads this page before it builds anything.
Colour styles.
Ten tokens, one accent.
Void
#08090B · Page background
Raised
#111317 · Cards, windows
Surface
white 4 % · Fields, bubbles
Line
white 8 % · Borders, rules
Ink
#F3F4F2 · Headings, key text
Muted
#8E9196 · Body, second lines
Faint
#5C5F65 · Large text only
Phosphor
#5BE49B · Accent, one per view
Phosphor Ink
#062612 · Text on Phosphor
Glow
phosphor 18 % · Hero glow only
Text styles.
Instrument Sans for reading, JetBrains Mono for keys and labels.
Display
Every deploy, one keystroke away.
H1
Page title, once per page.
H2
Large sentence, used for statements.
H3
Card and feature titles
Section
Two-tone section title.
Lead
The sentence under a page title.
Body
Paragraphs and card text, in Muted.
Small
Captions, names, fine print.
Mono
kiln deploy api-gateway --to production
Label
Eyebrows, tags, columns
Key
⌘ K
Article H2
Headings inside CMS rich text
Components.
Reuse them. Never rebuild them from frames.
⌘
K
Esc
Keycap
The signature. Default and Pressed. Use it for every shortcut shown in text.
Button
Primary once per section, Secondary for the second action. The shortcut keycap is optional.
Logo
Navigation and footer only. Swap the mark and the word for the buyer’s brand.
Submit button
Forms only. Default, Pending, Success and Error are switched by the form.
Answer
FAQ item
Opens and closes with a click, Enter or Space. Question and Answer are text controls.
Product Pricing Changelog Blog Contact
Navigation
Lives in the Site layout. Desktop on wide screens, Phone with a menu below 810 px.
Motion.
Quiet, quick, once.
Ease
cubic-bezier(0.19, 1, 0.22, 1)
Durations
150 ms for hovers, 300 ms for menus, 700 ms for entrances
Entrances
Fade and rise of 24 px when a block scrolls into view, once, threshold 0.2
Loops
Only the caret in the search field blinks. Nothing else loops.
Reduced motion
On. Visitors who ask for less motion see a still page.