Clear choices. Useful explanations. And the freedom to change your mind.
Label14 / 21
Review activity
Sizes shown are desktop tokens. Display type scales down on smaller screens; body copy remains comfortable at 16px. The native preview currently uses system fonts.
04 / RHYTHM
Space with a purpose.
A small set of repeated decisions makes every screen feel related. The same gaps, shapes, and sense of order.
THE 4PX SPACING SYSTEM
4
8
12
16
24
32
48
64
96
Small gaps connect. Generous gaps separate. 20px mobile gutters. 48px desktop gutters.
A FAMILY OF SHAPES
12pxControls
24pxPanels
FullStatuses
One control shape across every platform.
ELEVATION
Just enough to show the layers.
01
Flat Canvas level
02
Raised Local emphasis
03
Floating Overlaid content
05 / COMPONENTS
Familiar in every state.
A useful system holds together when you hover, press, focus, or make a mistake. These are the details people feel.
State specimens are visual examples. A real action retains keyboard focus and a minimum 48 × 48px target. Unavailable actions need a nearby explanation.
HELP PEOPLE RECOVER
Use at least two characters, such as Personal space.
↗
Explain what happened. Make the next step clear. Keep the label visible.
06 / MOTION
A response, not a performance.
Brief, purposeful feedback helps you follow a change. Nothing loops, competes with reading, or makes you wait.
STANDARD EASING0.2, 0, 0, 1
280ms · deliberate
120ms
Small feedback
180ms
Hover & selection
280ms
Deliberate entry
Reduced motion uses immediate state changes. Your device preference is respected in this sample.
THE FEELING WE'RE BUILDING
“I know what's happening. And I'm still in control.”
Say what you observed. Explain the decision. Make it reversible.
The same principles guide the identity, the interface, and the words. Every detail should make a quieter day feel possible.
