Home Assistant Inspired — Design Blueprint & Brand Book

01

Foundations

Identity

Home Assistant

House-circle logomark · Nunito 800

Stylised house silhouette containing a circle — the HA icon. Rendered in HA Blue on dark or white backgrounds. The logomark communicates home, community, and openness at a glance.

Voice & Tone

"Privacy-first home automation."

Community-first, jargon-acknowledged. Capabilities over promises — show the config, not the dream. Empowering, never gatekeeping. The audience knows YAML.

Community-first Privacy-first Open Source Local Control

Design Principles

🃏

Card-first

Every state lives in a tile. The dashboard grid is the primary UI metaphor.

🔵

HA Blue anchor

HA Blue is the single brand anchor. Everything else defers to it.

⬡

Rounded corners

12px+ everywhere. This is a home, not a terminal. Warmth matters.

🌙

Dark-first

Dark mode is primary. Light mode equally supported. Both feel native.

02

Color

Primary — HA Blue

100

200

300

400

500 ★

600

700

800

#18BCF2 — HA Blue. The definitive Home Assistant brand color. Used on logo, primary buttons, active entity states, and interactive UI elements.

Neutrals — Dark Theme

Canvas #111111

Card #1C1C1E

Elevated #2C2C2E

Border #38383A

Semantic Colors

Success

#23D160

Warning

#FFDD57

Danger

#FF3860

Unavailable

#9CA3AF

Domain Category Accents

Climate

#FF6B35

Energy

#F59E0B

Security

#EF4444

Media

#8B5CF6

03

Typography

Nunito — Marketing

Awaken
your home.

Nunito 800 · Marketing headlines, dashboard titles, brand voice. Rounded letterforms convey warmth and community.

Roboto Mono — Code

# automation.yaml automation: - alias: "Sunset lights" trigger: platform: sun event: sunset

Type Scale

display · 56px · 800

Awaken your home.

h1 · 40px · 700

Your data, your rules.

h2 · 28px · 700

3,000+ integrations and counting.

h3 · 20px · 600

Living Room Dashboard

body · 16px · 400

Powered by a worldwide community of tinkerers and professionals, all building in the open.

mono · 13px · 400

platform: sun · event: sunset · area_id: living_room

04

Tokens

Border Radius — Rounded Always

4px

sm

8px

md

12px

lg

16px

card

20px

xl

pill

Shadows

shadow-card

0 2px 8px rgba(0,0,0,0.35)

shadow-elevated

0 8px 24px rgba(0,0,0,0.45)

shadow-glow-blue

0 0 16px rgba(24,188,242,0.25)

05

Components

Buttons

Badges

● Active On Away Alarm Unavailable Climate Media

Entity State Cards — The HA UI Primitive

💡

Living Room

On · 72%

💡

Bedroom

Off

🌡️

Thermostat

68°F · Heat

🔒

Front Door

Locked

🔌

Coffee Maker

Off

🎵

Sonos Kitchen

Playing

Form Controls

Enable notifications

Dashboard Card — Area Overview

Living Room

4 devices active

● Active

💡

Ceiling

On · 80%

🌡️

Temperature

72°F

Automation YAML

# Turn on lights at sunset with smooth fade-in automation: - alias: "Turn on lights at sunset" description: "Fade living room lights in at dusk" trigger: platform: sun event: sunset offset: "-00:20:00" action: - service: light.turn_on target: area_id: living_room data: brightness_pct: 60 transition: 120

06

Patterns · Dashboard Shell

Navigation

🏠 Home

⚡ Energy

📊 History

🤖 Automations

⚙️ Settings

Overview

💡

Lights

4 on

🔒

Security

Armed

🌡️

Climate

71°F

07

Usage · Do & Don't

✓ Do

Use rounded cards for every data point or control — that's the HA visual language.

HA Blue for all active/on states; muted gray for off/unavailable states.

Show real data: sensor readings, device counts, automation triggers.

Expose YAML and config — the audience expects to see it.

✕ Don't

Don't use sharp corners — the brand is warm and rounded.

Don't add heavy gradients to the dashboard surface — let card colors do the work.

Don't hide YAML or config complexity — that's what the audience trusts.

Don't use enterprise buzzwords or subscription pressure language.

Your home, your rules,your data.