System
Everything is built on the same four things.
Type, materials, motion and shape. Every component follows them, so 37 pieces read as one set.
Type
Eight sizes in every component, and no others. Set in Geist. Big type stays regular and tight: the step in size is the emphasis.
Display
40 / 44 · Regular · −4%
$48,213
Large
28 / 32 · Regular · −3.2%
Ship the Q3 refund rules
Title
20 / 26 · Medium · −2.2%
Payment methods
Headline
15 / 20 · Medium · −1%
Detent Pro is thinking about your question
Body
15 / 23 · Regular · −1%
Refunds for damaged items no longer need a return, and annual plans get 45 days.
Callout
14 / 20 · Regular
Controls, menu items and anything you press.
Footnote
13 / 18 · Regular
Secondary lines under a title, and details.
Caption
12 / 16 · Regular
Timestamps, counts and the smallest labels.
Materials
Four depths, and one light. Raised surfaces catch light at their top edge; floating ones are glass; pressed ones sink; and Intelligence glows only while AI works.
Base
The page, and the cards that sit on it.
Raised
Components. A hairline, a tight shadow, and light on the top edge in dark.
Floating
Over whatever is below
Floating
Menus and popovers. Glass: what's beneath stays faintly there.
Pressed
Press it: surfaces sink under your finger, and click if sound is on.
Intelligence
The one material with colour of its own, worn only while AI is thinking, listening, streaming or working. Light runs round the edge, a halo breathes behind, text flows through the spectrum, and when the work is done it cools back to ink. It speaks up once: each surface wears the colour the first time it comes alive, then does the same work quietly in ink, and is loud again only after two minutes of rest.
Motion
Things move and reshape rather than fade. Text and numbers roll through their slot. Springs, not timers.
Move
The plate travels to its new place; nothing fades out and back.
$1,280
Roll
Numbers and labels roll through a fixed slot, digit by digit.
Reshape
A control springs to its new measured size; the words never squash.
Shape
Radii are concentric, spacing sits on a 4pt grid, and anything you can press is at least 32 points.
Concentric radii
An inner radius is the outer one minus the padding between: 28 − 8 = 20, 20 − 4 = 16, 16 − 4 = 12.
4pt grid, 32pt targets
Every size and gap is a multiple of four; nothing you press is smaller than 32 points.