Translate visual direction into foundations for Home Assistant

[matthiasdebaat]

Problem statement

Following the definition of a visual direction for Home Assistant, the direction needs to be translated into concrete foundations that contributors can apply consistently. Without this step, the visual direction remains aspirational and does not result in actionable guidance.

Community signals

• UI contributions vary in visual style and quality
• Repeated discussions about colors, spacing, and styling without shared standards

Scope & Boundaries

In scope

• Color roles and palette
• Typography system and hierarchy
• Rules for shapes, density, and visual style
• Layout and spacing principles

Not in scope

• Frontend implementation or refactoring
• Product redesign
• Text writing guidelines or terminology
• Full design system website
• UI pattern or component library
• Other OHF products

Foreseen solution

• Define color roles and palette
• Define typography system and hierarchy
• Define rules for shapes, density, and visual style
• Define layout and spacing principles
• 3-5 UI mockups showing the direction applied (before/after where useful)

Risks & open questions

• Risk of defining visual design direction for Home Assistant taking longer.
• Can we use Claude Design to help us translate it into foundations?

Appetite

Medium - 1 cycle

Execution issues

No response

Decision log

Date	Decision	Outcome

[matthiasdebaat]

We can also do an experiment with Claude Design, and use the learnings we get from the Device Database experiment.