---
version: alpha
name: "Hearth"
description: "Warmes Bernsteinlicht auf einem dunklen, ruhigen Startscreen. Hearth fühlt sich an wie eine Lampe in einem dunklen Raum: ein warmer Anthrazit-Hintergrund, Bernstein für alles, was an ist, und große abgerundete Gerätekacheln, die du quer durch den Raum lesen kannst. Räume sitzen in horizontalen Tabs, und Temperaturen sind große, ruhige Zahlen."
colors:
  primary: "#B85C00"
  on-primary: "#FFFFFF"
  secondary: "#2F7FA8"
  tertiary: "#4E9A5F"
  neutral: "#5F5A53"
  surface: "#F4F2EF"
  on-surface: "#1A1816"
typography:
  display-lg:
    fontFamily: "Outfit"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Outfit"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Outfit"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Outfit"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Outfit"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Outfit"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.01em
rounded:
  sm: 18px
  md: 20px
  lg: 22px
  xl: 26px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Hearth fühlt sich an wie eine Lampe in einem dunklen Raum: ein warmer Anthrazit-Hintergrund, Bernstein für alles, was an ist, und große abgerundete Gerätekacheln, die du quer durch den Raum lesen kannst. Räume sitzen in horizontalen Tabs, und Temperaturen sind große, ruhige Zahlen.

## Colors

- **primary (#B85C00):** Gebranntes Bernstein im Hellmodus und leuchtendes Bernstein im Dunkelmodus, für eingeschaltete Geräte, Regler und den aktiven Tab.
- **on-primary (#FFFFFF)**
- **secondary (#2F7FA8):** Kühles Blau für Kühlung, Luftfeuchtigkeit und die zweite Diagrammreihe.
- **tertiary (#4E9A5F):** Blattgrün für Energieeinsparung, Solar und eine dritte Reihe.
- **neutral (#5F5A53):** Warmes Grau für Gerätestatus, Raumnamen und Einheiten.
- **surface (#F4F2EF):** Warmer Anthrazit im Dunkelmodus mit Kacheln eine Stufe heller; der Hellmodus ist ein warmes Steingrau mit weißen Kacheln.
- **on-surface (#1A1816)**

## Typography

Durchgehend Outfit: Semibold 600 für Titel und die große Temperaturanzeige (bis 56px, mit Tabellenziffern, damit sie nicht springt), Regular 400 in 16px für Labels und Fließtext.

## Layout

Smartphone-Screens mit 20px Seitenrand und einer 64px hohen Tab-Leiste mit vier beschrifteten Tabs. Räume sind horizontale Tabs unter dem Titel; Geräte füllen ein zweispaltiges Kachelraster.

## Shapes

22px-Ecken an Gerätekacheln und Sheets; runde Drehregler und Schalter mit Touch-Flächen von 48px oder mehr. Keine Schatten oder Leuchteffekte; ein eingeschaltetes Gerät füllt sich einfach mit Bernstein.

## Components

Gerätekacheln mit Icon, Name, Zustand und einer Fläche zum Umschalten per Tipp, ein großer runder Thermostat-Regler, Helligkeitsregler, Szenen-Buttons wie „Gute Nacht“ und ein wöchentliches Energiediagramm.

## Do's and Don'ts

- Mach An und Aus quer durch den Raum erkennbar.
- Schalte ein Gerät per Tipp um und öffne seine Steuerung per langem Druck.
- Verwende Bernstein nur für Eingeschaltetes oder Aktives.
- Verstecke die Hauptsteuerung eines Geräts nicht hinter Menüs.