Design

Home Assistant runs in millions of homes, used by everyone from someone who just plugged in their first smart plug to someone running hundreds of automations. Design is how we make one product work for all of them. That covers more than visuals: how a setting is named, what a dialog asks, and what happens when something goes wrong are all design decisions.

This area is the open design resource of Home Assistant, and the reference for how the interface looks and behaves: usage, specs, and accessibility. Together with the Brand area, it replaces design.home-assistant.io. It is for everyone who shapes the interface: designers who propose a better flow, developers who build a screen, writers who choose the words, and anyone who wants to understand why the interface works the way it does. Every page is written for designers and developers alike.

You do not need to be a professional designer to help. If you notice what makes something confusing, and you can sketch or describe a better way, you have a lot to give.

• Your first design contribution: find something to work on and share your first proposal.
• How we design: where design happens, how to write a proposal, who decides, and how research shapes it.
• Principles: the values behind every design decision.
• Who we design for: the three types of users we keep in mind.

• Foundations: color, typography, spacing, motion, and accessibility. The design tokens and rules behind everything.
• Components: the building blocks of the interface, with guidelines, specs, accessibility, and code.
• Patterns: how components work together in recurring situations, like forms, loading, empty states, errors, and confirmations.
• Dashboards: the cards people put on their dashboards, and how to pick the right one.
• More info: the dialog that opens when you select an entity, and the view each type of entity gets in it.
• UI text: how the interface talks.
• Brand: the personality, voice, name, and logo of Home Assistant. It has its own area, because it belongs to everyone who contributes.

Component, card, and more-info pages put design first and code last. Skip to the In code section at the end of a page for the element, its attributes, and how to use it. The examples on these pages are the real frontend components, running live.

How to set up the frontend, build a panel or a custom card, and get your pull request reviewed lives in the Frontend area.

• The #designers channel on the Home Assistant Discord is where designers meet. Product and UX discussions happen in #product-and-ux. Can't see the channels? Pick the right role under Channels & Roles.
• Proposals, feedback, and research are shared in the UX design discussions of the Open Home Foundation. The project board lists the design tasks that are active and planned.
• Concrete problems in the interface are issues in the frontend repository, with the UX label.
• A page in this area that is wrong or missing? Open an issue or a pull request on this site.