Hearth: Smart-Home-App-Designsystem
App · Dunkel · Warm · Smart HomeHearth
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.
Vorschau
Live aus den Tokens unten gerendert, in den Schriften des Systems.
9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIchIn deinem Projekt verwenden
Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.
Dieses Projekt verwendet das Designsystem Hearth. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/hearth.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.
Tokens
Farben
Helles Theme
- background#F4F2EFoklch(0.962 0.005 78.298)
- foreground#1A1816oklch(0.211 0.005 67.551)
- card#FFFFFFoklch(1 0 0)
- card-foreground#1A1816oklch(0.211 0.005 67.551)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#1A1816oklch(0.211 0.005 67.551)
- primary#B85C00oklch(0.575 0.144 53.836)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#ECE6DEoklch(0.927 0.013 75.363)
- secondary-foreground#1A1816oklch(0.211 0.005 67.551)
- muted#EEEAE5oklch(0.939 0.008 73.742)
- muted-foreground#5F5A53oklch(0.47 0.013 76.501)
- accent#E9E3DBoklch(0.918 0.013 75.362)
- accent-foreground#1A1816oklch(0.211 0.005 67.551)
- destructive#B3261Eoklch(0.501 0.178 28.705)
- border#DDD7CFoklch(0.882 0.013 75.357)
- input#CFC8BEoklch(0.836 0.016 77.055)
- ring#B85C00oklch(0.575 0.144 53.836)
- chart-1#B85C00oklch(0.575 0.144 53.836)
- chart-2#2F7FA8oklch(0.566 0.099 234.913)
- chart-3#4E9A5Foklch(0.622 0.117 149.263)
- chart-4#8A63D2oklch(0.591 0.165 297.305)
- chart-5#C2457Foklch(0.579 0.169 354.99)
Dunkles Theme
- background#141312oklch(0.187 0.003 67.669)
- foreground#F1EDE8oklch(0.948 0.008 73.743)
- card#1D1B19oklch(0.224 0.005 67.572)
- card-foreground#F1EDE8oklch(0.948 0.008 73.743)
- popover#1D1B19oklch(0.224 0.005 67.572)
- popover-foreground#F1EDE8oklch(0.948 0.008 73.743)
- primary#FFB547oklch(0.824 0.149 73.346)
- primary-foreground#141312oklch(0.187 0.003 67.669)
- secondary#28251Foklch(0.266 0.012 84.577)
- secondary-foreground#F1EDE8oklch(0.948 0.008 73.743)
- muted#211F1Coklch(0.24 0.006 78.203)
- muted-foreground#A39C93oklch(0.696 0.015 74.37)
- accent#2A2723oklch(0.275 0.008 75.236)
- accent-foreground#F1EDE8oklch(0.948 0.008 73.743)
- destructive#FF7A6Boklch(0.732 0.165 28.31)
- border#302D29oklch(0.299 0.008 75.261)
- input#3A3631oklch(0.335 0.01 73.558)
- ring#FFB547oklch(0.824 0.149 73.346)
- chart-1#FFB547oklch(0.824 0.149 73.346)
- chart-2#6FB8E0oklch(0.75 0.093 233.888)
- chart-3#7CCB8Coklch(0.775 0.119 149.435)
- chart-4#B79BF0oklch(0.746 0.123 298.536)
- chart-5#F08AB0oklch(0.753 0.131 356.937)
Schriften
- Überschriften
- Outfit · 600
- Fließtext
- Outfit · 400
- Monospace
- JetBrains Mono
Schriftgrößen
- display · 56/1 · -0.02emZwölf Boxkämpfer jagen Viktor
- h1 · 30/1.1 · -0.01emZwölf Boxkämpfer jagen Viktor
- h2 · 22/1.2Zwölf Boxkämpfer jagen Viktor
- h3 · 17/1.3Zwölf Boxkämpfer jagen Viktor
- body · 16/1.5Zwölf Boxkämpfer jagen Viktor
- small · 13/1.4 · 0.01emZwölf Boxkämpfer jagen Viktor
Radius, Abstände und Schatten
Eckenradiussm 18pxmd 20pxlg 22pxxl 26px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.
Layout
- Touch-Ziele
- 48px
- Tab-Leiste
- 64px, 4 Einträge, icons with labels
- Bildschirmrand
- 20px
- Navigation
- bottom tab bar; rooms as horizontal tabs
- Ziffern
- tabular for temperatures
Ideal für
- Smart-Home- und IoT-Steuerungs-Apps
- Thermostat- und Energie-Apps
- Beleuchtungs- und Sicherheits-Apps
- Begleiter für Haushaltsgeräte
Dos 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.
Weitere Designsysteme für Apps
- StrideAppGroße kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.Überschriften in Barlow Condensed
- PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque
- CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader