Small details. A shared language.
A collection of surfaces, typography, and everyday controls.
One consistent foundation, ready to compose.
Typography
Clear hierarchy.
Comfortable proportions.
A place to begin.
Body text brings the details together. Keep it simple, clear, and useful.
Secondary text gives a little more context.
Surfaces
Quiet layers.
Subtle boundaries.
Everything in its place
A contained space for related content, with a gentle edge and a clear hierarchy.
Actions
Different emphasis.
The same proportions.
Form controls
A label, a field,
a little guidance.
Status & feedback
Color with meaning.
Always paired with text.
An informational message with a little context.
Everything is ready for the next step.
Disclosure
Extra detail,
when it is needed.
A little more context
Related details live here. Open and close this section with the keyboard or a pointer.
Another useful detail
Each section opens independently, keeping the surrounding content in place.