Design system
Precision with warmth
Paper, ink, and a single ocre accent. Components for shipping fast without looking generic.
Card
Surface containers for interactive content — default, outlined, elevated.
Default
Quiet border, no elevation.
Use for grouped content that sits flush with the page.
Outlined
Stronger edge definition.
Good when you need structure without shadow.
Elevated
Soft depth for focus.
Prefer for primary interactive panels.
Input
Clear focus ring in ocre. Error state uses semantic destructive color.
Forms
FormField, Label, Textarea, Switch, Checkbox, Radio, Select, and Tabs.
Work address preferred
A sentence or two
First panel
Spinner · Avatar
Loading feedback and user identity primitives.
Navigation · chrome
Link, Breadcrumb, Pagination, Skeleton, Progress, and Alert.
See the token swatches or an external page (opens in a new tab).
Chrome wave
Overlays
Modal, Tooltip, and Toast — Radix for behavior where noted; toast is custom.
Text
Display sizes use Space Grotesk. Body sizes use Geist.
Display 5xl
Display 4xl
Display 3xl
Display 2xl
Title xl
Large body for supporting copy.
Base body for interface reading.
Small for captions and metadata.
Extra small for dense UI chrome.
Mono kickers
Icon · Divider · Grid
Icon wraps SVG children. Divider marks sections. Grid complements Stack.
Or continue with
Cell A
Tokenized gap, paper surface.
Cell B
Tokenized gap, paper surface.
Cell C
Tokenized gap, paper surface.
Badge
Compact labels. Ocre is punctuation — use sparingly.
Color tokens
Foundation palette — paper, ink scale, one warm accent.