Wallet：记账理财 App 设计系统
App · 浅色 · 极简 · 金融Wallet
清楚的余额、安心的绿色和值得信赖的数字。
Wallet 让人觉得钱都在掌控之中：浅灰绿背景、翡翠绿表示积极操作、带柔和阴影的白色卡片，余额用等宽数字，上下对得整整齐齐。记一笔账永远只要点一下标签栏中间的按钮。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Wallet 设计系统，规范在 https://codexdesign.io/zh/design-systems/wallet.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#F5F7F6oklch(0.974 0.002 165.076)
- foreground#0F1A16oklch(0.206 0.018 169.92)
- card#FFFFFFoklch(1 0 0)
- card-foreground#0F1A16oklch(0.206 0.018 169.92)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#0F1A16oklch(0.206 0.018 169.92)
- primary#0E7C5Aoklch(0.521 0.106 165.168)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#E3F0EAoklch(0.944 0.016 166.716)
- secondary-foreground#0B4D38oklch(0.375 0.073 165.96)
- muted#EDF1EFoklch(0.955 0.005 165.005)
- muted-foreground#55625Coklch(0.483 0.019 166.087)
- accent#E6EFEAoklch(0.944 0.012 162.042)
- accent-foreground#0F1A16oklch(0.206 0.018 169.92)
- destructive#C02A2Aoklch(0.529 0.186 26.391)
- border#DCE4E0oklch(0.912 0.01 164.85)
- input#CDD7D2oklch(0.87 0.013 164.753)
- ring#0E7C5Aoklch(0.521 0.106 165.168)
- chart-1#0E7C5Aoklch(0.521 0.106 165.168)
- chart-2#2F6FD6oklch(0.557 0.172 259.651)
- chart-3#E09A2Doklch(0.738 0.143 72.977)
- chart-4#C2457Foklch(0.579 0.169 354.99)
- chart-5#7A6FD6oklch(0.6 0.152 285.71)
深色主题
- background#0C1210oklch(0.175 0.01 172.763)
- foreground#E7EEEAoklch(0.943 0.009 161.345)
- card#131B18oklch(0.213 0.013 170.148)
- card-foreground#E7EEEAoklch(0.943 0.009 161.345)
- popover#131B18oklch(0.213 0.013 170.148)
- popover-foreground#E7EEEAoklch(0.943 0.009 161.345)
- primary#4CD3A0oklch(0.78 0.139 164.374)
- primary-foreground#0C1210oklch(0.175 0.01 172.763)
- secondary#1B2622oklch(0.257 0.017 170.647)
- secondary-foreground#E7EEEAoklch(0.943 0.009 161.345)
- muted#17201Doklch(0.234 0.014 172.676)
- muted-foreground#8FA199oklch(0.692 0.023 167.148)
- accent#1F2B27oklch(0.276 0.018 172.515)
- accent-foreground#E7EEEAoklch(0.943 0.009 161.345)
- destructive#FF7A7Aoklch(0.735 0.163 21.864)
- border#25312Coklch(0.3 0.019 167.781)
- input#2E3B36oklch(0.339 0.019 169.764)
- ring#4CD3A0oklch(0.78 0.139 164.374)
- chart-1#4CD3A0oklch(0.78 0.139 164.374)
- chart-2#7DA8F0oklch(0.73 0.115 260.366)
- chart-3#F2BE6Aoklch(0.831 0.118 77.962)
- chart-4#EE8AB6oklch(0.752 0.131 352.876)
- chart-5#ADA6F2oklch(0.759 0.108 287.753)
字体
- 标题
- Manrope · 700
- 正文
- Manrope · 500
- 等宽
- 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 14pxmd 16pxlg 18pxxl 22px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影柔和、低而宽的阴影，只用在卡片和面板上。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 64px，4 项，icons with labels; center add button
- 屏幕边距
- 20px
- 导航
- bottom tab bar with a center add button
- 数字
- tabular for balances
适合
- 记账和支出追踪
- 银行和信用卡 App
- 个人理财和储蓄目标
- AA 分账和支付
要做和不要做
- 所有金额右对齐，使用等宽数字。
- 支出要带负号，不能只靠颜色区分。
- 不要把所有支出都标红，红色只留给超支和错误。
- 不要让用户多点一下才能看到余额。