luma-home/design-system/components.md

Luma Home — components

Layout and look of every building block. All sizes are logical px on the 1920 × 1080 canvas; named values are in tokens.json. Behaviour lives in ux-mechanics.md — this file only says what things look like. Each section names the screen render to compare against.

Screen shell

Render: screens/Main.png, screens/Home.png

Part	Spec
Background	Wallpaper photo + scrim color.background.scrim (8,11,18 @ 80%).
Clock	x 84, centred in the 72 px top bar at y 36; 20 px / 500.
Top nav	Centred pill, fill nav.pill, 6 px padding, items 10 × 28 px padding, 20 px. Active item: fill nav.activeTab, ink text.tabActiveInk, 600.
Settings button	56 px circle, right edge at x 1836.
Room tabs	Row at y 124, height 60, gap 8. Tab padding 10 × 22, 17 px. Active: fill nav.activeRoom, 600. Inactive ink nav.inactive.
Grid	x 84, y 206, 1752 × 756; 3 rows of 240, gap 18; 4 columns of 424 or 3 of 572 (grid tokens).
Hint bar	x 84, 30 px from the bottom; items 40 px apart. Key cap: 2 px border white 60%, radius 6, 11 px / 700, padding 2 × 8. Label 14 px / 500, white 80%.

DeviceCard (1×1)

Render: screens/Main.png, screens/*States.png

• Box: fills the cell; radius 22; padding 18; border 2 px; fill/border/shadow from color.card (focus variants when focused).
• Glow (on): radial gradient at (42, 42) of the accent at 38% → transparent at 72%.
• Top row (gap 14): 48 px icon circle (24 px icon) · name 19 px / 600, single line, ellipsis · value 20 px / 700, right-aligned.
• Middle band (flex, margin 12 top / 10 bottom), one of:
  • spark — 64 px tall polyline, 3 px stroke in the accent (grey lineOff when off), labels "24 h" / "now" 12 px below.
  • bar — 12 px track barTrack, radius 6, fill = accent at the level %.
  • swatch — 34 px strip, radius 10: solid colour or the effect gradient.
  • curtain — 5 px rail, three window panes (2 px outline white 22%), two fabric panels each (100 − position) / 2 % wide with a 4 px edge in the accent.
  • image — appliance photo on the right (max 120 px, square, contain), facts on the left: label 12 px white 60%, value 14 px / 700 (highlight = accent, warn = accent.warning).
  • none — empty band (on/off lights, switches).
• Warning subtitle (subWarn): amber #F2B84B, 600 — battery low, window open, dock needs attention.
• Offline: whole card at 50 % opacity, value "Offline".
• Subtitle: 14 px / 500, white 72%, single line, at the bottom.
• 3-column grid: same layout in the 572 px cell.

WeatherCard

Render: screens/WeatherStates.png

• 1×1: weather icon, current temperature (large), condition, humidity, wind, high/low.
• 1×2 (498 tall): the 1×1 content on top, the 5-day forecast below (day, icon, low–high).

MediaCard

Render: screens/MediaStates.png, screens/MediaSpec.png

• Background: card fill + purple radial glow (128, 96, 192 @ 42%) from the top-left.
• 1×1: 84 px artwork (radius 10) · status "Playing · Spotify" 13 px / 600 accent.mediaLabel with the volume readout right-aligned on the same line (15 px volume icon + "24%" 14 px / 700) · title 19 px / 700 · artist 15 px.
• 1×2: 220 px artwork centred (radius 14) · status + volume line (20 px tall) · title 24 px · artist 17 px · elapsed / remaining 13 px under the progress bar.
• Progress: 4 px track white 22%, fill white.
• Buttons (gap 26, centred): Previous 52 px · Play/Pause 62 px filled accent.media with dark icon · Next 52 px; idle buttons white 10%.
• Focus: ring on the focused button (4 px, offset 4, dark gap), never on the card.
• Seeking: the held button turns white with dark icon; 16 px playhead dot with a 4 px purple halo; white bubble 14 px / 700 above it.
• Volume change: readout becomes a white pill (dark ink, padding 0 8, radius 9–10).

VacuumCard

Render: screens/VacuumStates.png

DeviceCard with the image band: photo assets/roborock-s7.png (transparent cut-out, in this folder). Cleaning facts: Mode (highlighted), Now in. Docked facts: Battery, Water · clean / dirty.

RoomCard

Render: screens/RoomStates.png, screens/Home.png

• Box: as DeviceCard. Background: the Home Assistant area photo (fetched from HA, never bundled — ux-mechanics.md §B11), cover-cropped, under a gradient rgba(8,11,18,.78) 0% → 0 at 32% → 0 at 40% → .84 at 66% → .94 at 100%. Lights off: photo brightness(0.45) saturate(0.2). No photo: glass fill + gold glow while any light is on.
• Top row as DeviceCard; text gets a soft shadow 0 1px 6px rgba(0,0,0,.75) over a photo.
• Bottom line (8 px above the subtitle): three stats, gap 22, each a 20 px icon + value 18 px / 700. Colours: lights accent.light, curtains accent.curtain (white 75 % when closed), air aqGood / aqFair / aqPoor.
• Subtitle 14 px, white 78 %; warnings warning 600.

Panel (shared)

Renders: every *States.png (right side)

• 620 × 1080 at the right edge, radius 28, fill panel.fill, shadow shadow.panel, padding 56 / 56 / 48.
• Header: eyebrow (room) 16 px white 72% · 56 px icon circle (accent fill, 30 px icon) · title 34 px / 700 · state line 18 px / 600 in the accent.
• Sections: label 19 px / 600, 44 px below the header, 40 px between sections, control 14 px below its label.
• Slider: 72 px tall, radius 18, track white 12%, fill accent, value 28 px / 700 inside on the left. Help line 15 px white 74% below.
• Buttons / presets: 64 px tall, radius 16, gap 12, 20 px / 600, fill white 10%. Selected: accent at 26% fill + 3 px inset accent edge (or solid accent with dark ink for the primary choice).
• Focus inside panels: 4 px white ring, offset 5, with a 5 px dark gap.
• Hint bar pinned to the bottom of the panel (same style as the screen hint bar).

Panel contents

Panel	Sections (top → bottom)	Render
Dimmable light	Brightness · Presets (Off, 25, 50, 100 %)	LightStates.png
Colour light	Brightness · Light type (White / Colour) · White temperature or Hue · Swatches	LightColorStates.png
LED / TV lights	Brightness · Light · Temperature or Hue · White or Colour presets · Effects (6 pinned + All effects)	LedStates.png (colour, white, all effects)
All effects	Pinned group (numbered, "Not on panel" tag after 6) · All effects A–Z; gold star = pinned	LedStates.png (right)
AC	Target · Mode (5 icons) · Fan speed · auto (Auto, Quiet, Turbo) · Fan speed · manual (5 steps) · Up–down airflow · Left–right airflow (Swing + 5, icon-only)	ClimateStates.png
Heating	Target dial (with room temp) · Mode (Off / Heat) · Preset · Temperature sensor (thermostat) · Settings toggles · battery / info line	HeatingStates.png
Curtain	Window drawing + position · Open / Stop / Close · Presets (Open, 60, 45, 30, Closed)	CurtainStates.png
Weather	Now · Humidity · Wind · Next hours · Next days	WeatherStates.png
Media	Now playing · Play on · Up next · Search	MediaStates.png
Room quick panel	Header (temperature · humidity · air) · Lights with All off + one switch row each · Curtains rows with Open / Stop / Close · Climate rows with switches	RoomStates.png
Vacuum	Rooms (3-column grid, check + green edge when picked) · Mode · Routines + Dock · primary "Clean N rooms" (solid green, 64 px)	VacuumStates.png

Icons

icons/ — 58 single-colour SVGs (Uicons Regular Rounded + two custom), tinted at render time: dark ink #15181E on an accent circle when on, white 80% on a grey circle when off. See icons/README.md for the name map and the required attribution.