Foundations are the core design language of our system: tokens, behaviors, and layout rules that everything else builds on. These aren’t “components” per se, but the raw building blocks every component should reference.
Why foundations matter
They help us stay consistent and scalable. By defining our color palette, elevation, radii, spacing, and typography in one central place, we make it possible to work from the same source of truth, and for new UI to fit seamlessly into the system.
Key building blocks
Design tokens
Note that all of these are in a state of flux, as legacy color and spacing tokens are being modernized into a more powerful system.
- Color. The core palette, semantic colors, neutrals.
- Spacing. A consistent scale for margins, padding, and layout.
- Typography. Font families, sizes, line-heights.
- Elevation. Tokens that define visual depth and layering.
- Radius. Semantic levels of rounding.
Layout & behavior
- Layout. Layout defines the arrangement and structure of admin pages, content sections, and other visual elements.
- Breakpoints and responsive layout. How the grid adapts.
- Interactive states. Hover, focus, active, press, etc.
- Motion. Easing and duration rules for transitions and animations.
- Accessibility. Keyboard support, focus rings, semantic structure.
Design principles
Decisions around tokens and behavior are guided by principles like clarity (every token has a purpose), modularity (tokens combine to build components), and inclusivity (we design for all users).
The design system is a living language meant to be the collaborative culmination of our shared work, not the property of just a few. So please share feedback or suggest improvements, or contribute if you have time.