Utilities / iOS / Android / Web

Home Assistant

Home Assistant looks like a clean control panel: one cyan brand in quiet, normal and loud intensities, strict 4dp spacing, and mobile apps that wrap the same web frontend.

Download
  • #1ABCF2
  • #009AC7
  • #DFF3FC
  • #141414
  • #F3F3F3
  • #00AC49

Color

Every color token in the file, grouped by role.

Brand

  • brand#1ABCF2
  • brand android#1FBCF1
  • primary loud#009AC7
  • primary loud hover#006787
  • primary normal#DFF3FC
  • primary quiet#EFF9FE
  • primary text normal#009AC7
  • primary text quiet#18BCF2
  • ink secondary web#555555
  • on primary#FFFFFF

Surfaces

  • paper#FFFFFF

Text

  • link web#007FA8
  • pink#E66BA3
  • ink#141414
  • ink web#222222

Status

  • danger web#D01040

More

  • blue#0071EC
  • indigo#6163F2
  • cyan#00A3C0
  • green#00AC49
  • green deep#00883C
  • orange#F36D00
  • purple#9951DB
  • neutral 90#E6E6E6
  • neutral 95#F3F3F3
  • neutral 70#B1B1B1
  • neutral 50#7A7A7A
  • neutral 05#141414
  • neutral 10#202020

Typography

Each style is set with the file's own family, size, weight and spacing.

  • sans-serifSystem font, drawn with the default on your device.
  • headline32px / 500 / 40sp

    Home Assistant

  • headline medium28px / 500 / 40sp

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24sp

    The quick brown fox jumps over the lazy dog

  • body medium14px / 400 / 20sp

    The quick brown fox jumps over the lazy dog

  • button14px / 500 / 24sp

    Continue to checkout

  • caption12px / 400 / 16sp

    Continue to checkout

  • micro10px / 400 / 14sp

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • square0px
  • s4px
  • m8px
  • l12px
  • xl16px
  • x2l20px
  • x3l24px
  • sheet28px
  • pill1000px

Spacing

The spacing scale, drawn to size.

  • space14px
  • space28px
  • space312px
  • space416px
  • space624px
  • space832px
  • space1248px
  • space1664px
  • space2080px

Components

Component tokens drawn with the colors, type and corners they name.

  • button loud
    button-loud
  • button normal
    button-normal
  • button quiet
    button-quiet
  • card
    card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 123 lines
version: alpha
name: Home-Assistant-design-analysis
description: "A friendly, open-source smart home product with a bright cyan brand (#1abcf2 on the web, #1fbcf1 and a deeper #009ac7 loud fill on Android) on neutral surfaces. The Android app has a fully tokenized design system (4dp spacing grid, graded radii, quiet, normal and loud fills), and much of the iOS and Android UI shares the web look."
status: Draft
appVersion: "source snapshot of the public repositories, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  brand: "#1abcf2"
  brand-android: "#1fbcf1"
  primary-loud: "#009ac7"
  primary-loud-hover: "#006787"
  primary-normal: "#dff3fc"
  primary-quiet: "#eff9fe"
  primary-text-normal: "#009ac7"
  primary-text-quiet: "#18bcf2"
  link-web: "#007fa8"
  blue: "#0071ec"
  indigo: "#6163f2"
  cyan: "#00a3c0"
  green: "#00ac49"
  green-deep: "#00883c"
  orange: "#f36d00"
  pink: "#e66ba3"
  purple: "#9951db"
  danger-web: "#d01040"
  ink: "#141414"
  ink-secondary-web: "#555555"
  ink-web: "#222222"
  neutral-90: "#e6e6e6"
  neutral-95: "#f3f3f3"
  neutral-70: "#b1b1b1"
  neutral-50: "#7a7a7a"
  neutral-05: "#141414"
  neutral-10: "#202020"
  paper: "#ffffff"
  on-primary: "#ffffff"

typography:
  headline:
    fontFamily: "sans-serif"
    fontSize: 32sp
    fontWeight: 500
    lineHeight: 40sp
  headline-medium:
    fontFamily: "sans-serif"
    fontSize: 28sp
    fontWeight: 500
    lineHeight: 40sp
  body:
    fontFamily: "sans-serif"
    fontSize: 16sp
    fontWeight: 400
    lineHeight: 24sp
  body-medium:
    fontFamily: "sans-serif"
    fontSize: 14sp
    fontWeight: 400
    lineHeight: 20sp
  button:
    fontFamily: "sans-serif"
    fontSize: 14sp
    fontWeight: 500
    lineHeight: 24sp
  caption:
    fontFamily: "sans-serif"
    fontSize: 12sp
    fontWeight: 400
    lineHeight: 16sp
  micro:
    fontFamily: "sans-serif"
    fontSize: 10sp
    fontWeight: 400
    lineHeight: 14sp

rounded:
  square: 0px
  s: 4px
  m: 8px
  l: 12px
  xl: 16px
  x2l: 20px
  x3l: 24px
  sheet: 28px
  pill: 1000px

spacing:
  space1: 4px
  space2: 8px
  space3: 12px
  space4: 16px
  space6: 24px
  space8: 32px
  space12: 48px
  space16: 64px
  space20: 80px

components:
  button-loud:
    backgroundColor: "{colors.primary-loud}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
  button-normal:
    backgroundColor: "{colors.primary-normal}"
    textColor: "{colors.primary-text-normal}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
  button-quiet:
    backgroundColor: "{colors.primary-quiet}"
    textColor: "{colors.primary-text-normal}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.m}"
    padding: 16px

Overview

Home Assistant looks like a clean, bright control panel. The brand is a vivid cyan, surfaces are neutral, and the mobile apps are largely a native shell around the Home Assistant web frontend. That last fact shapes everything: a lot of what users see in the apps is the same web UI across iOS, Android and a browser, with native screens for onboarding, settings, widgets and sensors. [Measured]

Three decisions define the look:

  1. A cyan brand with three intensities. The Android design system names fills Loud, Normal and Quiet for each color. For the primary cyan these are #009ac7, #dff3fc and #eff9fe, with matching text colors. This quiet, normal and loud model is the heart of the system. [Measured]
  2. A strict, tokenized scale. Spacing runs in 4dp steps from 0 to 80dp, radii step through 4, 8, 12, 16, 20 and 24dp plus pill, and font sizes are named from extra small (10sp) to large. [Measured]
  3. Eleven-step color ramps. Every hue (primary, brand, blue, cyan, green, indigo, neutral, orange, pink, purple, and more) has a ramp from 05 to 95, so tints are chosen by step rather than invented. [Measured]

Source for this file: the public Android and iOS repositories and home-assistant.io, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleValueWhere
Brand cyan#1abcf2home-assistant.io
Brand ramp 50#1fbcf1Android design system
Primary loud fill (Android light)#009ac7 (hover #006787)Android
Primary normal fill#dff3fcAndroid
Primary quiet fill#eff9feAndroid
Normal and quiet text on primary#009ac7, #18bcf2Android
Web link blue#007fa8home-assistant.io
Blue 50#0071ecAndroid ramp
Indigo 50, Cyan 60, Green 60#6163f2, #00a3c0, #00ac49Android ramp
Orange 60, Pink 60, Purple 50#f36d00, #e66ba3, #9951dbAndroid ramp
Neutral 05 (text primary light)#141414Android
Neutral 90, 95#e6e6e6, #f3f3f3Android ramp
Danger#d01040home-assistant.io
Web text#222222, #555555, #999999home-assistant.io

Ramp for primary: 05 #001721, 10 #002e3e, 20 #004156, 30 #006787, 40 #009ac7, 50 #18bcf2, 60 #37c8fd, 70 #7bd4fb, 80 #b9e6fc, 90 #dff3fc, 95 #eff9fe. All [Measured].

Typography

System sans on mobile. [Inferred] The Android scale is 10sp, 12sp, 14sp, 16sp and larger named sizes up to a 32sp headline. Headline text is weight 500, body is regular, and buttons are weight 500 at 14sp. Body text uses a secondary text color and headlines the primary text color. [Measured] The website uses a standard sans stack at #222222. [Measured]

Shape and spacing

  • Spacing: 4dp steps: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80. [Measured]
  • Radius: square 0, 4, 8, 12, 16, 20, 24dp, circle and pill. Widgets use 8dp, bottom sheets 28dp. iOS uses a single 8 corner radius token. [Measured]
  • Borders: 1dp and 2dp. [Measured]
  • Layout: iOS limits content width to 600 on larger screens. [Measured]

Iconography and motion

Icons are the Material Design Icons set used throughout Home Assistant, tinted by role. [Inferred]

Themes

Light and dark color schemes, plus the web frontend's own themes. The iOS app captures the active web theme and applies it natively (FrontendThemeMode). [Measured]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

Expected on iOS: chevron plus previous title, swipe from the left edge.

Native screens use standard navigation. Inside the web view, navigation follows the web app's own back and menu controls. [Inferred]

Primary navigation

Expected on iOS: bottom tab bar, about five items.

The main experience is the web frontend with its own sidebar and dashboards, not a native tab bar. [Inferred]

Main action

Expected on iOS: nav bar or bottom bar button.

Actions are inside the web frontend. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Standard sheets for native settings. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

A custom HSV color picker component exists. Other native settings use standard controls. [Measured]

Text sizing

Expected on iOS: Dynamic Type.

Not verified. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: safe areas, status bar.

The web theme is captured and applied to native chrome so bars match the dashboard. [Measured]

Icons

Expected on iOS: SF Symbols or custom.

Material Design Icons inside the web view, system symbols in native screens. [Inferred]

Account and sign-in rules

Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Sign-in is to the user's own Home Assistant server, with no third-party social login. Account deletion is handled on the user's server. [Inferred] Checked: 2026-10-06 against source and general knowledge only.

Platform conformance

Expected on iOS: system components.

A hybrid. Native for onboarding, settings and widgets, web for the product itself. This is a deliberate deviation that trades platform fidelity for one shared UI. [Measured]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

Expected on Android: system back and gesture, up arrow in the top bar.

System back navigates the web frontend history and native screens. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

The web frontend provides sidebar and dashboard navigation. [Inferred]

Main action

Expected on Android: floating action button.

Actions are inside the web frontend. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Bottom sheets with 28dp top corners. [Measured]

Controls

Expected on Android: Material switches, pickers, chips.

Components themed with the HA color scheme and a shared ripple. [Measured]

Text sizing

Expected on Android: font scale.

Sizes are in sp, so system font scale applies. [Measured]

Touch and pointer targets

Expected on Android: 48dp minimum.

Buttons use a 48dp step in the spacing scale. Not otherwise verified. [Inferred]

Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Material Design Icons, as on the web. [Inferred]

Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

Own-server sign-in. Account deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

Uses a custom color scheme and its own token set for colors, dimensions, radii and text styles instead of Material roles. Widgets and settings follow Android conventions. [Measured]

Platform: Web

The home-assistant.io site and the frontend that both apps wrap.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back and a persistent header. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

Top navigation on the marketing site. The product frontend uses a sidebar. [Inferred]

Main action

Expected on Web: page-level button.

A cyan call to action. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

A documentation search modal 560px wide and 600px tall, with a 56px search box. [Measured]

Controls

Expected on Web: native or custom.

Standard form controls. [Inferred]

Text sizing

Expected on Web: browser zoom.

Not verified. [Inferred]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive. [Inferred]

Icons

Expected on Web: any.

Material Design Icons. [Inferred]

Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

Informational site. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms with a cyan brand #1abcf2 and a darker link blue #007fa8. [Measured]

Cross-platform consistency

The same cyan, the same ramp idea, and the same Material Design Icons appear everywhere, because the apps largely show the web frontend. The native shells differ in scale tokens: Android has a full token set while iOS has only a corner radius and a width cap. [Measured]

Do's and Don'ts

Do

  • Choose fills from the quiet, normal and loud intensities, not custom tints.
  • Pick colors by ramp step (05 to 95) instead of inventing values.
  • Space everything on the 4dp grid.
  • Use pill buttons, 8dp cards and 28dp bottom sheets.
  • Match native chrome to the active web theme.

Don't

  • Don't build a separate native UI for what the web frontend already provides.
  • Don't use more than one brand hue for primary actions.
  • Don't use off-grid spacing values.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • Most of the in-app UI is the web frontend, which was not measured directly. Only the marketing site was.
  • Larger Android font sizes and the dark color scheme values were not fully read.
  • iOS has no extracted type scale or spacing set.
  • Navigation structure is inferred from product knowledge.
  • Account deletion and store policy rules were not verified.
  • Contrast: white text on the primary loud fill (#009ac7) measures about 3.3 to 1, and the normal and quiet fills with #009ac7 text measure about 2.9 to 1 and 3.1 to 1. All are below the 4.5 to 1 target for normal text.