Focus：待办任务 App 设计系统
App · 浅色 · 极简 · 效率工具Focus
一张白纸和一个蓝色，你和任务之间再无其他。
Focus 拿掉一切与任务无关的东西：白色屏幕、Instrument Sans、用细分隔线代替卡片，亮蓝色只留给添加按钮和今天。纯图标的标签栏让底部保持安静，悬浮添加按钮让记录随手可得。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Focus 设计系统，规范在 https://codexdesign.io/zh/design-systems/focus.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#FFFFFFoklch(1 0 0)
- foreground#16181Doklch(0.209 0.01 268.187)
- card#FFFFFFoklch(1 0 0)
- card-foreground#16181Doklch(0.209 0.01 268.187)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#16181Doklch(0.209 0.01 268.187)
- primary#2F5BEAoklch(0.533 0.221 265.795)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#F0F2F7oklch(0.961 0.007 268.547)
- secondary-foreground#16181Doklch(0.209 0.01 268.187)
- muted#F3F4F6oklch(0.967 0.003 264.542)
- muted-foreground#5B616Eoklch(0.492 0.022 265.817)
- accent#EEF1F7oklch(0.958 0.009 264.522)
- accent-foreground#16181Doklch(0.209 0.01 268.187)
- destructive#C8322Boklch(0.551 0.188 27.911)
- border#E4E6EBoklch(0.925 0.007 268.545)
- input#D5D8DFoklch(0.882 0.01 267.351)
- ring#2F5BEAoklch(0.533 0.221 265.795)
- chart-1#2F5BEAoklch(0.533 0.221 265.795)
- chart-2#E8743Boklch(0.685 0.16 44.716)
- chart-3#19A974oklch(0.652 0.139 161.399)
- chart-4#B455C8oklch(0.612 0.189 320.372)
- chart-5#D4A017oklch(0.735 0.146 84.267)
深色主题
- background#101114oklch(0.178 0.006 271.042)
- foreground#EDEEF1oklch(0.949 0.004 271.368)
- card#16181Coklch(0.209 0.009 264.373)
- card-foreground#EDEEF1oklch(0.949 0.004 271.368)
- popover#16181Coklch(0.209 0.009 264.373)
- popover-foreground#EDEEF1oklch(0.949 0.004 271.368)
- primary#7D9BFFoklch(0.711 0.15 269.685)
- primary-foreground#101114oklch(0.178 0.006 271.042)
- secondary#1E2026oklch(0.244 0.012 270.896)
- secondary-foreground#EDEEF1oklch(0.949 0.004 271.368)
- muted#1A1C21oklch(0.227 0.01 268.232)
- muted-foreground#9298A5oklch(0.679 0.02 265.92)
- accent#22252Coklch(0.264 0.014 267.038)
- accent-foreground#EDEEF1oklch(0.949 0.004 271.368)
- destructive#FF7B72oklch(0.734 0.163 25.784)
- border#272A31oklch(0.285 0.014 267.079)
- input#30343Coklch(0.324 0.015 264.337)
- ring#7D9BFFoklch(0.711 0.15 269.685)
- chart-1#7D9BFFoklch(0.711 0.15 269.685)
- chart-2#FF9F6Boklch(0.79 0.133 48.496)
- chart-3#4ADE9Coklch(0.806 0.157 160.001)
- chart-4#D88BE6oklch(0.747 0.15 321.263)
- chart-5#F2CC5Boklch(0.857 0.137 90.603)
字体
- 标题
- Instrument Sans · 600
- 正文
- Instrument Sans · 400
- 等宽
- JetBrains Mono
字号阶梯
- 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 8pxmd 10pxlg 12pxxl 16px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影不用阴影，层次靠边框和颜色。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 60px，4 项，icons only with active label
- 屏幕边距
- 16px
- 导航
- bottom tab bar; floating add button
- 数字
- proportional
适合
- 待办和任务管理
- 日程和日历
- 笔记和快速记录
- 团队任务和项目管理
要做和不要做
- 添加一条任务只需点一下、写一行。
- 已完成的任务先变灰，不要立刻消失。
- 不要给每条任务都套上卡片和阴影。
- 每个项目不要用超过一种颜色。