Care：医疗预约 App 设计系统
App · 浅色 · 柔和 · 医疗健康Care
每屏只做一件清楚的事，给只想把事办完的患者。
Care 为可能疲惫、焦虑、又在小屏幕上阅读的患者而写：冷调浅色背景，天青蓝指向下一步，标签大而直白。每屏只处理一件事，比如选时间或确认就诊，完成后再进入下一步。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Care 设计系统，规范在 https://codexdesign.io/zh/design-systems/care.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#F7FAFCoklch(0.983 0.004 236.496)
- foreground#0F2533oklch(0.254 0.039 238.734)
- card#FFFFFFoklch(1 0 0)
- card-foreground#0F2533oklch(0.254 0.039 238.734)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#0F2533oklch(0.254 0.039 238.734)
- primary#0A6C8Aoklch(0.496 0.092 226.189)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#E2F0F5oklch(0.946 0.016 221.08)
- secondary-foreground#08485Coklch(0.375 0.068 225.402)
- muted#EDF3F6oklch(0.96 0.008 228.854)
- muted-foreground#4F6573oklch(0.494 0.035 236.328)
- accent#E5F0F5oklch(0.948 0.014 226.562)
- accent-foreground#0F2533oklch(0.254 0.039 238.734)
- destructive#B3261Eoklch(0.501 0.178 28.705)
- border#D8E4EAoklch(0.912 0.015 228.976)
- input#C7D6DEoklch(0.867 0.02 230.733)
- ring#0A6C8Aoklch(0.496 0.092 226.189)
- chart-1#0A6C8Aoklch(0.496 0.092 226.189)
- chart-2#2EA37Aoklch(0.641 0.12 165.003)
- chart-3#E0A43Aoklch(0.758 0.137 77.684)
- chart-4#7C6BC4oklch(0.584 0.133 290.433)
- chart-5#D45D79oklch(0.634 0.152 7.8)
深色主题
- background#0B171Eoklch(0.197 0.022 235.108)
- foreground#E4EEF2oklch(0.943 0.012 223.527)
- card#11212Aoklch(0.238 0.028 234.286)
- card-foreground#E4EEF2oklch(0.943 0.012 223.527)
- popover#11212Aoklch(0.238 0.028 234.286)
- popover-foreground#E4EEF2oklch(0.943 0.012 223.527)
- primary#5EC2E0oklch(0.766 0.102 220.242)
- primary-foreground#0B171Eoklch(0.197 0.022 235.108)
- secondary#192C36oklch(0.282 0.031 232.351)
- secondary-foreground#E4EEF2oklch(0.943 0.012 223.527)
- muted#152730oklch(0.261 0.029 231.106)
- muted-foreground#8DA4AFoklch(0.705 0.03 228.264)
- accent#1C313Coklch(0.301 0.033 232.283)
- accent-foreground#E4EEF2oklch(0.943 0.012 223.527)
- destructive#F28A82oklch(0.743 0.128 25.246)
- border#223844oklch(0.328 0.035 233.179)
- input#2B4350oklch(0.369 0.037 232.814)
- ring#5EC2E0oklch(0.766 0.102 220.242)
- chart-1#5EC2E0oklch(0.766 0.102 220.242)
- chart-2#5FD3A6oklch(0.788 0.125 165.158)
- chart-3#F0C26Eoklch(0.838 0.115 81.184)
- chart-4#A99BEAoklch(0.732 0.113 291.466)
- chart-5#EE93A9oklch(0.763 0.112 4.425)
字体
- 标题
- Source Sans 3 · 700
- 正文
- Source Sans 3 · 400
- 等宽
- Source Code Pro
字号阶梯
- display · 40/1.05 · -0.02em设计让界面更好用
- h1 · 30/1.1 · -0.01em设计让界面更好用
- h2 · 22/1.2设计让界面更好用
- h3 · 18/1.3设计让界面更好用
- body · 16/1.5设计让界面更好用
- small · 13/1.4设计让界面更好用
圆角、间距和阴影
圆角sm 10pxmd 12pxlg 14pxxl 18px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影柔和、低而宽的阴影，只用在卡片和面板上。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 64px，4 项，icons with labels
- 屏幕边距
- 20px
- 导航
- bottom tab bar; one task per screen
- 数字
- proportional
适合
- 挂号预约和在线问诊 App
- 患者门户和健康档案
- 用药和护理提醒
- 药房和检验报告 App
要做和不要做
- 每次预约都用一个摘要页确认。
- 状态颜色一定配上图标和文字。
- 一屏不要放两个主按钮。
- 能用大白话说的，不要用医学术语。