Chatter：聊天社交 App 设计系统
App · 浅色 · 柔和 · 社交Chatter
圆润的气泡、亲切的青色，让对话始终居中。
Chatter 让人和消息始终处在中心：白色屏幕，自己发的是青色气泡，对方回复是浅灰气泡，圆形头像配 22px 大圆角。未读角标和正在输入的状态一目了然，又不会让屏幕像老虎机一样闪个不停。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Chatter 设计系统，规范在 https://codexdesign.io/zh/design-systems/chatter.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#FFFFFFoklch(1 0 0)
- foreground#14201Foklch(0.232 0.017 189.589)
- card#F4F7F7oklch(0.974 0.003 197.104)
- card-foreground#14201Foklch(0.232 0.017 189.589)
- popover#F4F7F7oklch(0.974 0.003 197.104)
- popover-foreground#14201Foklch(0.232 0.017 189.589)
- primary#0F7F81oklch(0.542 0.089 196.842)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#E3F2F2oklch(0.95 0.016 196.89)
- secondary-foreground#0B5455oklch(0.406 0.065 196.352)
- muted#F1F5F5oklch(0.967 0.004 197.086)
- muted-foreground#56676Aoklch(0.501 0.021 209.449)
- accent#E8F2F2oklch(0.954 0.011 196.978)
- accent-foreground#14201Foklch(0.232 0.017 189.589)
- destructive#C4302Boklch(0.542 0.186 27.429)
- border#E1E8E8oklch(0.926 0.008 197.027)
- input#D2DCDCoklch(0.887 0.011 196.961)
- ring#0F7F81oklch(0.542 0.089 196.842)
- chart-1#0F7F81oklch(0.542 0.089 196.842)
- chart-2#F08A4Boklch(0.732 0.146 50.375)
- chart-3#5B7BE0oklch(0.608 0.157 268.254)
- chart-4#D9568Coklch(0.638 0.172 357.485)
- chart-5#3FA34Doklch(0.637 0.155 146.028)
深色主题
- background#0E1414oklch(0.185 0.009 196.382)
- foreground#E6EEEEoklch(0.943 0.009 197.011)
- card#162020oklch(0.234 0.014 196.218)
- card-foreground#E6EEEEoklch(0.943 0.009 197.011)
- popover#162020oklch(0.234 0.014 196.218)
- popover-foreground#E6EEEEoklch(0.943 0.009 197.011)
- primary#4FC9CBoklch(0.769 0.107 196.682)
- primary-foreground#0E1414oklch(0.185 0.009 196.382)
- secondary#1C2828oklch(0.266 0.017 196.199)
- secondary-foreground#E6EEEEoklch(0.943 0.009 197.011)
- muted#182222oklch(0.242 0.014 196.254)
- muted-foreground#8EA2A3oklch(0.697 0.023 200.326)
- accent#1F2C2Coklch(0.281 0.018 196.192)
- accent-foreground#E6EEEEoklch(0.943 0.009 197.011)
- destructive#FF7A73oklch(0.733 0.164 24.948)
- border#253232oklch(0.305 0.017 196.275)
- input#2E3C3Coklch(0.344 0.018 196.33)
- ring#4FC9CBoklch(0.769 0.107 196.682)
- chart-1#4FC9CBoklch(0.769 0.107 196.682)
- chart-2#F5A56Eoklch(0.789 0.118 54.63)
- chart-3#8CA3F0oklch(0.729 0.115 270.659)
- chart-4#EE8BB3oklch(0.753 0.128 354.922)
- chart-5#74C982oklch(0.764 0.131 148.054)
字体
- 标题
- Plus Jakarta Sans · 700
- 正文
- Plus Jakarta 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 18pxmd 20pxlg 22pxxl 26px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影不用阴影，层次靠边框和颜色。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 60px，4 项，icons with labels; unread badges
- 屏幕边距
- 16px
- 导航
- bottom tab bar; chat list to thread
- 数字
- proportional
适合
- 即时通讯和聊天 App
- 社区和群组 App
- 交友和社交 App
- 客服聊天
要做和不要做
- 同一个人连续发的消息归为一组。
- 键盘弹出时输入框始终可见。
- 不要把青色用在自己的消息和关键操作以外的地方。
- 不要给气泡加阴影或渐变。