Design
Design
The basics of the design — principles, colors, type, spacing, shape, motion, the mark, icons and states — each on its own page.
The system in one screen
In this section
Principles
What the design holds to, each with an example of doing it and of not doing it.
Colors
The color scheme and every color token, light and dark, with contrast computed from the tokens.
Typography
The typefaces and the text styles with the classes that write them.
Spacing and layout
The spacing scale, the grid, the breakpoints and the sizes of controls and the shell.
Radius and shadows
The radii and the elevations.
Motion
Durations and easings, replayed on demand; what never moves.
Logo
Marks for the product, each from an idea in it, at every size it will be used at.
Loaders
The logo set in motion: what the product shows while it waits, in a button, a panel and at start.
Icons
Two groups only — the base icons the components and screens use, and the icons of the product’s domain — on their grid, with the names used in code, in both themes.
States
What a screen shows when it has nothing, is loading, failed, is closed to a role, is offline or has just succeeded — the picture, the words and the action.