Hearth: sistema de diseño de hogar inteligente
App · Dark · Warm · Smart homeHearth
Luz ámbar cálida sobre una pantalla de inicio oscura y tranquila.
Hearth se siente como una lámpara encendida en una habitación oscura: un fondo carbón cálido, ámbar para todo lo que está encendido y grandes mosaicos de dispositivo redondeados que se leen desde el otro lado de la habitación. Las estancias van en pestañas horizontales y las temperaturas son números grandes y estables.
Preview
Rendered live from the tokens below, in the system's own fonts.
9:41
Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse it in your project
Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.
This project uses the Hearth design system. Its spec is at https://codexdesign.io/es/design-systems/hearth.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.
Tokens
Colors
Light 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)
Dark 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)
Fonts
- Headings
- Outfit · 600
- Body
- Outfit · 400
- Monospace
- JetBrains Mono
Type scale
- display · 56/1 · -0.02emThe quick brown fox
- h1 · 30/1.1 · -0.01emThe quick brown fox
- h2 · 22/1.2The quick brown fox
- h3 · 17/1.3The quick brown fox
- body · 16/1.5The quick brown fox
- small · 13/1.4 · 0.01emThe quick brown fox
Radius, spacing and shadow
Corner radiussm 18pxmd 20pxlg 22pxxl 26px
Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px
ShadowNone: depth comes from borders and color.
Layout
- Touch targets
- 48px
- Tab bar
- 64px, 4 items, icons with labels
- Screen padding
- 20px
- Navigation
- bottom tab bar; rooms as horizontal tabs
- Numerals
- tabular for temperatures
Best for
- Apps de control de hogar inteligente e IoT
- Apps de termostato y energía
- Apps de iluminación y seguridad
- Apps complementarias de electrodomésticos
Do's and don'ts
- Haz que se distinga encendido de apagado desde el otro lado de la habitación.
- Enciende o apaga un dispositivo con un toque y abre sus controles con una pulsación larga.
- No uses el ámbar para nada que no esté encendido o activo.
- No escondas los controles principales de un dispositivo detrás de menús.