Hearth: Smart Home App Design System

App · Dark · Warm · Smart home

Hearth

Warm amber light on a dark, quiet home screen.

Hearth feels like a lamp switched on in a dark room: a warm charcoal background, amber for anything that is on, and large rounded device tiles you can read from across the room. Rooms sit in horizontal tabs, and temperatures are big, steady numbers.

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

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use 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/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

Hearth: Smart Home App Design System

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps