(05) Blueprint · v0
The colours, type and motion behind every page.
Every value here is read live from the site. Switch the theme and watch them change, or hover a curve to feel it.
Principles
- Quiet by default. One ink, one accent, pastel only where work lives.
- Always know where you are. Breadcrumbs, URL state, one obvious next step.
- The work is the interface. Live components, not screenshots.
- Details carry the voice. Every primitive has hover, focus, press, disabled.
Preferences
Theme, accent, corners and motion are tokens too. Change them here and the whole site follows, live projects included.
Theme
Accent
Corners
Motion
Smooth scrollingEased wheel scrolling on desktop
Colour
- bg…
- surface…
- ink…
- muted…
- faint…
- accent…
- positive…
Project tones
- peach…
- lilac…
- sage…
- sky…
- butter…
- graphite…
Type
Geist for text · Geist Mono for labels
- Display…Getting there isn’t
- Title…Say it. See it. Send it.
- Heading…Selected work
- Lead…Recline is a setting
- Body…Play first. Read after.
- Small…Role, stack, year
- Label…(01) Nest · Sleeper seat
Space & radius
- s-1…
- s-2…
- s-3…
- s-4…
- s-5…
- s-6…
- s-7…
- s-8…
- s-9…
- chip…
- shape…
- panel…
- card…
Motion
- ease-outEnters, hovers
- ease-inoutToggles, thumbs
- ease-expandCard → full screen
- d-1…Press feedback
- d-2…Colour, opacity
- d-3…Panels, toggles
- d-4…The expand
Reduced motion sets every duration to 0. Everything still works, it just stops moving.
Components
Button · states
defaulthoverfocuspresseddisabledloading · try it
Button · ghost & small
Filter chips
Segmented control
Keys & status
⌘Kesc↵ Available
Breadcrumb
Jeel / Work / Nest ▾
The last crumb opens its neighbours, so you can switch without going back.