Calm：冥想健康 App 设计系统
App · 浅色 · 柔和 · 衬线 · 医疗健康Calm
柔和的鼠尾草绿、温柔的衬线字和充足的呼吸感。
Calm 让屏幕慢下来：鼠尾草绿背景、深绿色操作、温柔的衬线标题和元素之间充足的留白。每屏一次只请用户做一件事。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Calm 设计系统，规范在 https://codexdesign.io/zh/design-systems/calm.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#F1F3EEoklch(0.961 0.007 124.448)
- foreground#1E2A24oklch(0.272 0.02 163.043)
- card#FAFBF8oklch(0.986 0.004 121.559)
- card-foreground#1E2A24oklch(0.272 0.02 163.043)
- popover#FAFBF8oklch(0.986 0.004 121.559)
- popover-foreground#1E2A24oklch(0.272 0.02 163.043)
- primary#2F5446oklch(0.413 0.049 167.738)
- primary-foreground#F1F3EEoklch(0.961 0.007 124.448)
- secondary#DCE5DCoklch(0.913 0.015 145.447)
- secondary-foreground#1E2A24oklch(0.272 0.02 163.043)
- muted#E6EBE4oklch(0.934 0.011 136.561)
- muted-foreground#56655Coklch(0.491 0.023 159.104)
- accent#E3EADFoklch(0.929 0.016 133.827)
- accent-foreground#1E2A24oklch(0.272 0.02 163.043)
- destructive#A8392Aoklch(0.502 0.149 30.61)
- border#D3DCD1oklch(0.885 0.018 140.021)
- input#C9D3C6oklch(0.856 0.021 138.44)
- ring#2F5446oklch(0.413 0.049 167.738)
- chart-1#2F5446oklch(0.413 0.049 167.738)
- chart-2#B5784Aoklch(0.626 0.098 56.778)
- chart-3#5F86B8oklch(0.612 0.088 255.035)
- chart-4#9C6A8Foklch(0.589 0.082 336.495)
- chart-5#7A9A55oklch(0.645 0.102 129.249)
深色主题
- background#121815oklch(0.202 0.011 163.644)
- foreground#E6ECE6oklch(0.937 0.01 145.493)
- card#18201Coklch(0.234 0.014 163.477)
- card-foreground#E6ECE6oklch(0.937 0.01 145.493)
- popover#18201Coklch(0.234 0.014 163.477)
- popover-foreground#E6ECE6oklch(0.937 0.01 145.493)
- primary#9CC5AEoklch(0.787 0.054 160.274)
- primary-foreground#121815oklch(0.202 0.011 163.644)
- secondary#1F2924oklch(0.27 0.017 163.393)
- secondary-foreground#E6ECE6oklch(0.937 0.01 145.493)
- muted#1C2420oklch(0.251 0.014 163.622)
- muted-foreground#93A39Aoklch(0.7 0.022 161.216)
- accent#222C27oklch(0.282 0.017 163.492)
- accent-foreground#E6ECE6oklch(0.937 0.01 145.493)
- destructive#E07A68oklch(0.689 0.13 31.169)
- border#2A352Foklch(0.317 0.018 161.322)
- input#33403Aoklch(0.358 0.02 165.566)
- ring#9CC5AEoklch(0.787 0.054 160.274)
- chart-1#9CC5AEoklch(0.787 0.054 160.274)
- chart-2#E0A577oklch(0.767 0.093 58.756)
- chart-3#93B4E0oklch(0.761 0.073 255.745)
- chart-4#D3A2C6oklch(0.769 0.075 336.085)
- chart-5#B4CF8Eoklch(0.818 0.092 126.655)
字体
- 标题
- Newsreader · 500
- 正文
- Figtree · 400
- 等宽
- Figtree
字号阶梯
- display · 44/1.1 · -0.015em设计让界面更好用
- h1 · 32/1.15 · -0.01em设计让界面更好用
- h2 · 24/1.25设计让界面更好用
- h3 · 19/1.3设计让界面更好用
- body · 17/1.6设计让界面更好用
- small · 14/1.45设计让界面更好用
圆角、间距和阴影
圆角sm 20pxmd 22pxlg 24pxxl 28px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影柔和、低而宽的阴影，只用在卡片和面板上。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 68px，3 项，icons with labels, no badges
- 屏幕边距
- 24px
- 导航
- bottom tab bar; one primary action per screen
- 数字
- proportional
适合
- 冥想和睡眠 App
- 日记和情绪记录
- 心理和健康类 App
- 语气温和的习惯 App
要做和不要做
- 每屏只请用户做一件事。
- 衬线字只用在标题和引语上。
- 不要用红色和催促性的角标。
- 不要把空白填满，留白也是设计的一部分。