Application
Components
The building blocks - borders over shadows, subtle elevation, pill CTAs on dark and the violet glow reserved for primary actions. Light and dark variants throughout.
Buttons
Primary actions are violet; pill-shaped on dark surfaces. Hover darkens to violet-700 with a 1px lift; pressed translates 2px down.
On light
On deep space
Badges & tags
Sharp 2px corners foreground the geometric brand feel. Use sparingly to label status or category.
On light
On deep space
Cards
White surface, 12px corners, 1px border, no shadow by default. A violet 2px top rule is the only emphasis - used sparingly, not on every card.
On light
Layer 1 - Data
Meaningful data for prediction
Measured in free-living conditions, not after the fact or in narrow clinical settings.
Featured
Accent top rule
The pull-out treatment - reserve the violet rule for one card in a set.
Elevated
Shadow level 2
Subtle elevation when a card must lift off the page - shadows stay soft.
On deep space
Layer 2 - AI
Models of human response
On dark, cards sit on Space 700 with a hairline border and no shadow.
Featured
Accent top rule
The violet rule brightens to violet-400 so it reads against deep space.
Layer 3 - Systems
District-scale operating systems
Body text holds at ~74% white for comfortable contrast.
Stat tiles
Big Jost Light numerals in violet (or cyan on dark). The brand’s structural beat is the stack of three.
Form inputs
Quiet by default; violet focus ring at 3px. Always show a visible focus state.
On light
On deep space
Dividers
Hairline · sections
Gradient · dark feature edges
Violet rule · headline accent
Radii & elevation
Spacing scale
A 4px base. Section vertical rhythm runs 96–128px (s-9–s-10).