--- 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 | Role | Value | Where | |------|-------|-------| | Brand cyan | `#1abcf2` | home-assistant.io | | Brand ramp 50 | `#1fbcf1` | Android design system | | Primary loud fill (Android light) | `#009ac7` (hover `#006787`) | Android | | Primary normal fill | `#dff3fc` | Android | | Primary quiet fill | `#eff9fe` | Android | | Normal and quiet text on primary | `#009ac7`, `#18bcf2` | Android | | Web link blue | `#007fa8` | home-assistant.io | | Blue 50 | `#0071ec` | Android ramp | | Indigo 50, Cyan 60, Green 60 | `#6163f2`, `#00a3c0`, `#00ac49` | Android ramp | | Orange 60, Pink 60, Purple 50 | `#f36d00`, `#e66ba3`, `#9951db` | Android ramp | | Neutral 05 (text primary light) | `#141414` | Android | | Neutral 90, 95 | `#e6e6e6`, `#f3f3f3` | Android ramp | | Danger | `#d01040` | home-assistant.io | | Web text | `#222222`, `#555555`, `#999999` | home-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.