Skip to content

Define visual design language for OHF products #29

@jlpouffier

Description

@jlpouffier

Problem statement

Home Assistant has a high perceived barrier to entry. We have a goal of making Home Assistant more approachable by reducing early use friction and shifting the perception away from being a technical product.

Part of this perception is driven by how the product looks and feels. The current UI does not align with the brand and experience presented in marketing, creating a disconnect that reinforces the perception of a technical product.

This inconsistency is caused by the absence of a defined visual design direction for Open Home Foundation products. Visual decisions today are driven by existing frameworks and personal choices rather than a shared standard.

As a result, the product lacks visual coherence, and contributors do not have clear guidance on how the product should look.

Scope & Boundaries

In scope

  • Color palette
  • Typography
  • Imagery and iconography direction
  • Shapes and forms (for example border radius, elevation, density)
  • Layout and spacing rules

Out of scope

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

Foreseen solution

This bet follows a two-step approach.

1. Define visual direction

  • Create a moodboard based on the existing brand identity
  • Explore a small number of visual directions if needed
  • Align on a single, clear direction

2. Translate into visual foundations

  • Define color roles and palette
  • Define typography system and hierarchy
  • Define rules for shapes, density, and visual style
  • Define layout and spacing principles

Deliverables

  • Moodboard capturing the visual direction
  • Visual direction document
  • Defined color and typography systems with usage examples
  • 3–5 UI mockups showing the direction applied (before/after where useful)

Community signals

  • Designers are interested in contributing but lack clear visual direction
  • UI contributions vary in visual style and quality
  • Repeated discussions about colors, spacing, and styling without shared standards
  • Feedback pointing out mismatch between marketing and product visuals

Risks & open questions

  • Risk of being too abstract and not actionable
  • Open question how this evolves into a broader system later

Appetite

No response

Execution issues

No response

Decision log

Date Decision Outcome

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

Status

Building

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions