Wer Home Assistant schon eine Weile nutzt, kennt das Gefühl: Das Dashboard funktioniert. Es schaltet. Es zeigt an. Aber es sieht aus wie ein Flickenteppich. Hier ein Standard-Button, dort eine custom:button-card mit zufälliger Farbe, und drüben eine Tile-Card, die sich nicht ganz einordnen lässt. Alles selbst gebaut, alles irgendwie gewachsen – und wenn man nach drei Wochen etwas ändert, hat man schon vergessen, warum damals welche Farbe gewählt wurde.
Ich kenne dieses Problem gut. Mein Dashboard hat sich über Monate entwickelt: Mähroboter, Bewässerung, Jacuzzi, Saugroboter, Lichtsteuerung – überall eigene Karten, eigene Stile, eigene Logiken. Bis mir irgendwann aufgefallen ist: Ich selbst weiß manchmal nicht auf den ersten Blick, ob ein Button gerade aktiv oder deaktiviert ist – und ob Grün hier „läuft“ oder „Automatik an“ bedeutet.
Das war der Moment, in dem ich beschlossen habe, einen Dashboard Button Style Guide für mein gesamtes Home Assistant zu entwickeln. Nicht als akademische Übung – sondern weil ein konsequentes visuelles System das Bedienen meines Smart Homes jeden Tag einfacher macht. In diesem Beitrag zeige ich dir, wie mein Style Guide aufgebaut ist, welche Typen ich definiert habe und warum das auch für dich Sinn ergibt.
🎨 Warum ein Style Guide in Home Assistant Sinn macht
🔧 Das Problem ohne Styleguide
Home Assistant ist unglaublich flexibel. Genau das ist Stärke und Schwäche zugleich. Man kann jeden Button individuell gestalten – und tut es auch, weil jede Karte aus einem anderen Kontext, einer anderen Anforderung oder einfach einer anderen Laune entstanden ist.
👉 Das Ergebnis nach 3 Jahr aktivem Dashboard-Basteln:
- ❌ Gleiche Funktion, fünf verschiedene Optiken je nach Bereich
- ❌ Farben ohne Bedeutung – Grün ist manchmal „an“, manchmal „Automatik aktiv“, manchmal einfach „schön“
- ❌ Neue Karten passen nie wirklich zum Rest
- ❌ Gäste (oder die Familie) verstehen das Dashboard nicht intuitiv
🎯 Was ein Style Guide löst
Ein Style Guide ist im Kern eine einfache Vereinbarung mit sich selbst: Gleiche Bedeutung = gleiche Optik. Nichts mehr, nichts weniger.
Konkret bedeutet das:
- ✅ Grün bedeutet immer: Gerät ist aktiv / läuft
- ✅ Rot bedeutet immer: Automatisierung ist deaktiviert – Achtung!
- ✅ Violett bedeutet immer: Anzeigewert, nicht steuerbar
- ✅ Blau bedeutet immer: einstellbarer Wert oder Uhrzeit
- ✅ Neue Karten bauen sich schneller, weil das Rezept schon existiert
Das ist kein Perfektionismus. Es ist einfach weniger Denken zur Laufzeit – für dich und für alle anderen, die das Dashboard nutzen.
🧩 Die fünf Button-Typen
Mein Style Guide basiert auf custom:button-card und kennt fünf reguläre Typen plus drei Sonderfälle. Jeder Typ hat eine feste Farbbedeutung und ein klares Einsatzgebiet.
🟢 Typ A – Schaltbutton (Gerät an/aus)
Das ist der häufigste Button im Dashboard. Er schaltet ein Gerät oder eine Funktion ein und aus – und zeigt den Zustand klar über die Hintergrundfarbe an.
- ⬛ Aus / Inaktiv: Dunkelgrau (#3a3a3a), graues Icon, grauer Text
- 🟢 An / Aktiv: Dunkelgrün (#2e7d32), weißes Icon, weißer Text
Einsatzbeispiele: Dusche, Filterpumpe, Rasensprenger, Heizautomatik – also alles, was ein einfaches Ein/Aus hat.
type: custom:button-card
entity: switch.dusche
name: Dusche
icon: mdi:shower
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- padding: 6px 10px
- border-radius: 10px
- cursor: pointer
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: 32px auto
- align-items: center
- column-gap: 8px
icon:
- width: 22px
- height: 22px
state:
- value: "on"
styles:
card:
- background: "#2e7d32"
- border: 2px solid #ffffff
icon:
- color: "#ffffff"
name:
- color: "#ffffff"
- value: "off"
styles:
card:
- background: "#3a3a3a"
- border: 1px solid #666
icon:
- color: "#9e9e9e"
name:
- color: "#cccccc"⚠️ Wichtiger Hinweis bei Gardena-Ventilen: Valves nutzen value: open / value: closed – nicht on/off! Das ist ein klassischer Fehler beim Übertragen der Vorlage.
🔴 Typ B – Automatisierungs-Schalter
Dieser Typ ist speziell für das Aktivieren und Deaktivieren von Home Assistant-Automationen gedacht. Hier ist Rot kein Fehler – Rot bedeutet: Automatik ist aus, du musst selbst eingreifen.
- 🟢 Aktiv: Grün (#2e7d32) – Automatisierung läuft
- 🔴 Deaktiviert: Rot (#c62828) – Automatisierung ist bewusst ausgeschaltet
Der Unterschied zu Typ A ist wichtig: Ein normaler Gerät-Button (Typ A) ist im Aus-Zustand grau – das ist neutral. Eine deaktivierte Automatisierung ist rot – das ist ein Signal, weil das System dann unbeaufsichtigt läuft.
Einsatzbeispiele: PV-Automatisierung, Jacuzzi-Filterautomatik, Bewässerungsfreigabe.
type: custom:button-card
entity: automation.bewaesserung_freigabe
name: Bewässerung Automatik
show_icon: false
tap_action:
action: call-service
service: automation.toggle
service_data:
entity_id: automation.bewaesserung_freigabe
hold_action:
action: more-info
state_display: >
[[[ return entity.state === 'on' ? 'aktiv' : 'inaktiv' ]]]
styles:
card:
- height: 60px
- padding: 6px 10px
- border-radius: 10px
- border: 1px solid
- cursor: pointer
grid:
- grid-template-areas: '"n" "s"'
- grid-template-rows: auto auto
- justify-items: start
name:
- font-size: 14px
- font-weight: 600
state:
- font-size: 13px
- font-weight: bold
state:
- value: "on"
styles:
card:
- background: "#2e7d32"
name:
- color: "#e8f5e9"
state:
- color: "#e8f5e9"
- value: "off"
styles:
card:
- background: "#c62828"
name:
- color: "#ffebee"
state:
- color: "#ffebee"🔵 Typ C – Einstellungs-Button (Wert / Dauer)
Überall dort, wo man einen Wert sehen und per Tipp verändern will, kommt Typ C zum Einsatz. Der Hintergrund wechselt dynamisch in Abhängigkeit vom Wert – von Blau über Gelb bis Rot.
- ⬛ Wert = 0: Dunkelgrau – deaktiviert
- 🔵 Niedriger Wert: Blau (#1565c0) – normal / sicher
- 🟡 Mittlerer Wert: Gelb (#f9a825) – erhöht / Achtung
- 🔴 Hoher Wert: Rot (#c62828) – kritisch / hoch
Einsatzbeispiele: Bewässerungsdauer in Minuten, PV-Schwellwert in kW, Temperaturziel in Grad.
👉 Die Schwellwerte für die Farbskala sind bewusst kontextabhängig: 15 Minuten Bewässerung ist „normal“, 15 kW Leistung wäre „kritisch“. Der Style ist gleich – die Logik dahinter passt sich dem Kontext an.
type: custom:button-card
entity: input_number.bewaesserung_dauer
name: Dauer
icon: mdi:timer-outline
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.bewaesserung_dauer
hold_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: input_number.bewaesserung_dauer
double_tap_action:
action: more-info
styles:
card:
- height: 60px
- padding: 6px 10px
- border-radius: 10px
- border: 1px solid rgba(255,255,255,0.2)
- background: >
[[[
const v = parseFloat(entity.state);
if (v === 0) return '#424242';
if (v <= 15) return '#1565c0';
if (v <= 20) return '#f9a825';
return '#c62828';
]]]
icon:
- width: 22px
- height: 22px
- color: "#ffffff"
name:
- font-size: 14px
- font-weight: 600
- color: "#ffffff"
state:
- font-size: 14px
- font-weight: bold
- color: "#ffffff"🟣 Typ D – Anzeigebutton (read-only)
Manchmal will man nur einen Sensorwert anzeigen – ohne dass der Benutzer etwas tun kann oder soll. Typ D ist immer dunkelviolett (#4a148c) und hat keinen Pointer-Cursor.
Das Violett ist bewusst gewählt: Es taucht nirgendwo sonst im Dashboard auf und signalisiert damit eindeutig: Hier ist nichts zu drücken.
Einsatzbeispiele: Jacuzzi Heizungs-Laufzeit, PV-Überschuss aktuell, Laufzeit-Sensor.
type: custom:button-card
entity: sensor.jacuzzi_heizung_laufzeit
name: Heizung Laufzeit
icon: mdi:timer-outline
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
styles:
card:
- height: 60px
- padding: 6px 10px
- border-radius: 10px
- border: 1px solid rgba(255,255,255,0.2)
- background: "#4a148c"
- cursor: default
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: 32px auto
- grid-template-rows: auto auto
- align-items: center
- justify-items: start
icon:
- width: 22px
- height: 22px
- color: "#ffffff"
name:
- font-size: 14px
- font-weight: 600
- color: "#ffffff"
- justify-self: start
- text-align: left
state:
- font-size: 14px
- font-weight: bold
- color: "#ffffff"
- justify-self: start
- text-align: left🕐 Typ E – Zeit-Button (input_datetime)
Der Zeit-Button zeigt eine konfigurierbare Uhrzeit an. Ein Tipp öffnet den nativen HA-Picker zur Änderung. Er ist immer blau (#1565c0) – derselbe Blauton wie Typ C – und damit als „einstellbar“ erkennbar.
Einsatzbeispiele: Bewässerungs-Startzeit, Jacuzzi-Filterzeiten, Nacht-Absenkung.
type: custom:button-card
entity: input_datetime.bewaesserung_startzeit
name: Startzeit
icon: mdi:clock-outline
tap_action:
action: more-info
layout: vertical
aspect_ratio: 3/1
styles:
card:
- height: 60px
- padding: 4px
- border-radius: 10px
- border: 1px solid rgba(255,255,255,0.2)
- background: "#1565c0"
grid:
- grid-template-areas: '"i" "s"'
- grid-template-rows: 1fr auto
- justify-items: center
icon:
- width: 24px
- height: 24px
- color: "#90caf9"
state:
- font-size: 14px
- font-weight: bold
- color: "#ffffff"⚡ Die Sonderfälle
🔑 Master-Switch (kritisch)
Jedes größere System – Jacuzzi, Bewässerung, Heizung – hat genau einen zentralen Hauptschalter. Der Master-Switch weicht absichtlich von Typ A ab: Im Aus-Zustand ist er nicht grau, sondern rot.
Das ist eine bewusste Designentscheidung: Wenn das gesamte System ausgeschaltet ist, soll das sichtbar sein – nicht in eine neutrale Graufläche verschwinden.
type: custom:button-card
entity: switch.jacuzzi_master
name: SPA Master
icon: mdi:power
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- padding: 6px 10px
- border-radius: 10px
- cursor: pointer
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: 32px auto
- align-items: center
- column-gap: 8px
icon:
- width: 22px
- height: 22px
state:
- value: "on"
styles:
card:
- background: "#2e7d32"
- border: 2px solid #ffffff
icon:
- color: "#ffffff"
name:
- color: "#ffffff"
- value: "off"
styles:
card:
- background: "#c62828" # Rot statt Grau – Abweichung von Typ A!
- border: 2px solid #c62828
icon:
- color: "#ffffff"
name:
- color: "#ffffff"▶️ Momentary-Button (einmaliger Befehl)
Manche Aktionen haben keinen Zustand – sie werden einfach ausgeführt. Mähroboter starten, Saugroboter zurück zur Station schicken, eine Szene aktivieren. Diese Buttons sehen immer gleich aus, unabhängig davon was danach passiert.
Das Grundprinzip: Grauer Hintergrund (wie Typ A inaktiv), aber das Icon trägt die Bedeutungsfarbe.
- 🟢 Grünes Icon → Start / Vorwärts / Beginnen
- 🔴 Rotes Icon → Stopp / Zurück / Abbruch
- 🟡 Bernsteinfarbenes Icon → Pause / Warten
type: custom:button-card
entity: button.maehroboter_start_work
name: Start Work
icon: mdi:play
tap_action:
action: call-service
service: button.press
service_data:
entity_id: button.maehroboter_start_work
styles:
card:
- height: 60px
- padding: 6px 10px
- border-radius: 10px
- background: "#3a3a3a"
- border: 1px solid #666
- cursor: pointer
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 32px auto
- align-items: center
- column-gap: 8px
icon:
- width: 22px
- height: 22px
- color: "#66bb6a" # Grün = Start/Vorwärts
name:
- font-size: 14px
- font-weight: 600
- color: "#cccccc"💡 Licht-Status (semantisches Gelb)
Außenbeleuchtung bekommt eine eigene Farbbehandlung. Aktives Licht ist gelb (#ffd54f) – nicht grün. Das ist eine bewusste semantische Entscheidung: Gelb erinnert an Licht, an Helligkeit. Grün würde hier keine zusätzliche Information liefern und wäre verwechselbar mit einem normalen Schalter.
Diese kleine Abweichung zeigt, dass ein Style Guide kein starres Korsett ist – er hat Regeln, und er hat begründete Ausnahmen.
type: custom:button-card
entity: light.garten_garage
name: Garage
icon: mdi:outdoor-lamp
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
styles:
card:
- height: 60px
- padding: 6px 10px
- border-radius: 10px
- cursor: default
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: 32px auto
- align-items: center
- column-gap: 8px
icon:
- width: 22px
- height: 22px
state:
- value: "on"
styles:
card:
- background: "#ffd54f" # Gelb = Licht an (bewusste Abweichung von Typ A)
- border: 2px solid #ffffff
icon:
- color: "#4c3c00" # Dunkelbraun für Kontrast auf Gelb
name:
- color: "#4c3c00"
- value: "off"
styles:
card:
- background: "#3a3a3a"
- border: 1px solid #666
icon:
- color: "#9e9e9e"
name:
- color: "#cccccc"🎨 Die Farbpalette auf einen Blick
| Farbe | Hex-Code | Bedeutung |
|---|---|---|
| ⬛ Dunkelgrau | #3a3a3a | Inaktiv / Aus (Typ A) |
| 🟢 Dunkelgrün | #2e7d32 | Aktiv / An (Typ A + B) |
| 🔴 Dunkelrot | #c62828 | Automation deaktiviert (Typ B), kritisch (Typ C) |
| 🔵 Dunkelblau | #1565c0 | Einstellbar / Zeit (Typ C + E) |
| 🟡 Dunkelgelb | #f9a825 | Warnstufe (Typ C), Pause (Momentary) |
| 🟣 Dunkelviolett | #4a148c | Read-only Anzeige (Typ D) |
| 💛 Gelb | #ffd54f | Licht aktiv (Licht-Status) |
💡 Tipps für die Umsetzung
1. Mit einer View beginnen
Nicht alles auf einmal umbauen. Ich habe mit dem Jacuzzi-Dashboard angefangen – das war quasi die Referenz-Implementierung. Erst als ich sicher war, dass der Style funktioniert, habe ich ihn auf andere Views übertragen.
2. Den Styleguide als Dokument führen
Klingt nach Overkill, ist es aber nicht. Ein einfaches Markdown-Dokument mit den Typ-Definitionen, Farb-Codes und YAML-Vorlagen spart enorm viel Zeit – besonders wenn man drei Monate später eine neue Karte baut und sich nicht mehr an die genauen Hex-Codes erinnert.
3. Abweichungen begründen, nicht einfach machen
Das Gelb für Licht ist eine begründete Ausnahme – Gelb kommuniziert etwas, das Grün nicht könnte. Eine Ausnahme ohne Begründung ist hingegen einfach Inkonsistenz. Wenn du abweichst: Frage dich warum. Wenn die Antwort „weil es hier besser aussieht“ ist, ist das kein guter Grund.
🎨 Ergebnis
Hier einmal eine Daschboard wie es bisher ausgeschaut hat und dann das Ergebnis nach der Umsetzung vom Style Guide:
Alt:
Neu:
✅ Fazit
Ein Style Guide für Home Assistant klingt nach mehr Arbeit. In Wirklichkeit ist er weniger Arbeit – verteilt auf die Zukunft. Jede neue Karte entsteht schneller, weil das Rezept schon steht. Jeder Blick aufs Dashboard braucht weniger Interpretation, weil die Farben sprechen.
Das Wichtigste ist nicht Perfektion – sondern Konsistenz. Ein einfaches System, das überall gleich funktioniert, schlägt jeden aufwändigen Individualstil.
Hast du einen eigenen Style Guide für dein Dashboard entwickelt? Oder kämpfst du noch mit dem Flickenteppich? Schreib es gerne in die Kommentare – ich bin gespannt, welche Ansätze andere verfolgen.