Hearth：智能家居 App 设计系统
App · 深色 · 暖色 · 智能家居Hearth
深色安静的主屏上，亮着一盏暖琥珀色的灯。
Hearth 像在昏暗房间里打开的一盏灯：暖调炭黑背景，所有开着的东西都是琥珀色，大圆角设备卡片隔着房间也看得清。房间用横向标签切换，温度是又大又稳的数字。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Hearth 设计系统，规范在 https://codexdesign.io/zh/design-systems/hearth.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- 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)
深色主题
- 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)
字体
- 标题
- Outfit · 600
- 正文
- Outfit · 400
- 等宽
- JetBrains Mono
字号阶梯
- display · 56/1 · -0.02em设计让界面更好用
- h1 · 30/1.1 · -0.01em设计让界面更好用
- h2 · 22/1.2设计让界面更好用
- h3 · 17/1.3设计让界面更好用
- body · 16/1.5设计让界面更好用
- small · 13/1.4 · 0.01em设计让界面更好用
圆角、间距和阴影
圆角sm 18pxmd 20pxlg 22pxxl 26px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影不用阴影，层次靠边框和颜色。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 64px，4 项，icons with labels
- 屏幕边距
- 20px
- 导航
- bottom tab bar; rooms as horizontal tabs
- 数字
- tabular for temperatures
适合
- 智能家居和 IoT 控制 App
- 温控和能耗 App
- 灯光和安防 App
- 家电配套 App
要做和不要做
- 开和关要让人隔着房间也一眼看出来。
- 轻点切换开关，长按打开详细控制。
- 不要把琥珀色用在未开启或非活动的东西上。
- 不要把设备的主要控制藏进菜单里。