Foundations
Color, typography, spacing, motion, and accessibility. The design tokens and rules behind everything in Home Assistant.
The foundations are the smallest decisions in the design: which colors exist, which sizes text can have, how much space goes between things, how fast things move. They are defined as design tokens in the Home Assistant frontend, and every component is built from them.
The color, typography, and spacing pages read the tokens directly. What you see there is what the frontend uses.
- Color: the palettes, and the semantic colors built on them.
- Typography: the type scale and font weights.
- Spacing: the spacing scale and corner radius.
- Accessibility: contrast, focus, keyboard, labels, target size, and screen readers. What WCAG asks, and how the frontend does it.
- Motion: the animation durations, and how reduced motion works.
Tip
Designing something new? Stay on the tokens. A custom color or spacing value is a sign that something is missing in the foundations, and that is worth a discussion in the Design system category of the UX design discussions.