Kaloyan DanchevandClaude Opus 4.6
86191ba5f3
Panel fixes: tall card row_span, room tab styling, vacuum card image+value, AC airflow labels, AC fan speed sections (auto 3-btn + manual 5-step slider), light subtitle fallback, curtain pane dividers, dimmable light presets, LED panel brightness + reorder. New assets: 34 ui-icons (climate modes, cover, effects, battery, led-strip, switch states), 3 logos, 90 app surface PNGs, design system specs (components, ux-mechanics, tokens). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
59 lines
3.9 KiB
Markdown
59 lines
3.9 KiB
Markdown
# Luma Home design system
|
||
|
||
The design for the Home Assistant tab of Luma: a 10-foot UI driven only by the remote's
|
||
arrows, OK and Back, viewed from 5–6 m on a 65" TV.
|
||
|
||
Exported 2026-10-27 from the "Luma — 10-foot redesign" design canvas and the "Luma Home"
|
||
design system on claude.ai. Those stay the place to change the design; re-export this folder
|
||
after changes.
|
||
|
||
## Read in this order
|
||
|
||
| File | What it is | When to use it |
|
||
|---|---|---|
|
||
| `ux-mechanics.md` | **The behaviour contract.** Global rules (tap vs hold, focus, grid, panels, errors) and every card's keys, panel, states, hint bar and HA calls. | Before writing any input or state logic. Numbers here are the spec. |
|
||
| `components.md` | Layout and look of the shell, each card type and each panel. | When drawing a card or panel. |
|
||
| `tokens.json` | Colours, type sizes, spacing, radii, timings — at logical 1920 × 1080. | Source of every constant. Don't hard-code values that exist here. |
|
||
| `tokens.css` | The same tokens as CSS variables. | Lovelace cards in `cards/` and web previews. |
|
||
| `screens/` | PNG renders of every design board. | Visual reference; compare desktop screenshots against these. |
|
||
| `icons/` | 58 single-colour SVG icons + name map and attribution. | Compile to `.lvec` like other vector assets. |
|
||
| `assets/roborock-s7.png` | Transparent vacuum photo for the vacuum card. | Vacuum card middle band. |
|
||
|
||
**Room photos come from Home Assistant, not from this folder or the app.** The room card shows the picture set on each Home Assistant area, loaded over the existing HA connection (rules: `ux-mechanics.md` §B11, *Room photos*). The blurred room photos in `screens/` are mock-up placeholders: never add them, or any room photo, to the repository or the IPK.
|
||
|
||
## Screens
|
||
|
||
| Render | Shows |
|
||
|---|---|
|
||
| `Main.png` / `Main3.png` | A room (Living Area) on the 4-column and 3-column grid, hint bar for the focused card |
|
||
| `Home.png` | Home overview: weather 1×2, media 1×2, vacuum, pinned devices, a row of room cards |
|
||
| `CardSizes.png` | Allowed card sizes on the grid |
|
||
| `Interactions.png` | Tap vs hold, media keys, every card at a glance |
|
||
| `LightOnOffStates.png` | On/off light — states (no panel) |
|
||
| `LightStates.png` | Dimmable light — states + panel |
|
||
| `LightColorStates.png` | Colour light — states + panel |
|
||
| `LedStates.png` | LED strip / TV lights — states, colour panel, white panel, All effects |
|
||
| `ClimateStates.png` | Air conditioner — states + panel |
|
||
| `HeatingStates.png` | Heating — radiator valve and wall thermostat: states + both panels |
|
||
| `CurtainStates.png` | Curtain — states + panel |
|
||
| `SwitchStates.png` | Switch / plug / lock — states (no panel) |
|
||
| `WeatherStates.png` | Weather 1×1 and 1×2 + panel |
|
||
| `MediaStates.png` | Media 1×1 / 1×2, seeking and volume states + panel |
|
||
| `MediaSpec.png` | Media interaction spec (same content as ux-mechanics §B9) |
|
||
| `RoomStates.png` | Room card (Home overview) — photo, dark, warning, no-photo states + quick panel |
|
||
| `VacuumStates.png` | Vacuum — docked, dock needs attention, cleaning + panel |
|
||
|
||
Sample names, rooms and track titles in the renders are placeholders; real data comes from Home Assistant.
|
||
|
||
## Implementation notes for this repo
|
||
|
||
- The native app is Rust/SDL2/OpenGL ES (see `agents.md`); there is no browser UI. Treat CSS-like
|
||
values in `tokens.json` (gradients, shadows) as descriptions to reproduce in the renderer.
|
||
- Keep the logical 1920 × 1080 layout; `textScale` (1.0–1.6) multiplies type sizes only.
|
||
- Tap vs hold must be timed from SDL key-down to key-up, acting on release for taps
|
||
(`ux-mechanics.md` §A1). The existing `hold` action in `src/state.rs` is the place to wire it.
|
||
- Verify behaviour on the TV; desktop smoke tests don't prove remote timing.
|
||
- Where the current code differs from this design (e.g. the media card's transport buttons
|
||
or icon set), the design wins unless a change is agreed.
|
||
- Icons require the visible credit "Uicons by Flaticon" (Settings → About).
|