Boutique：时尚电商 App 设计系统
App · 浅色 · 奢华 · 衬线 · 电商Boutique
通屏商品图、Bodoni 衬线字和黑白配色，像一扇橱窗。
Boutique 把橱窗搬进手机：商品图铺满屏幕宽度，Bodoni Moda 让商品名和专题文章带上时尚杂志的味道，界面本身退到黑、白和暖中性色之后。价格很低调，用正文字重而不是粗体。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Boutique 设计系统，规范在 https://codexdesign.io/zh/design-systems/boutique.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#FFFFFFoklch(1 0 0)
- foreground#111111oklch(0.178 0 0)
- card#F7F4F0oklch(0.968 0.006 75.407)
- card-foreground#111111oklch(0.178 0 0)
- popover#F7F4F0oklch(0.968 0.006 75.407)
- popover-foreground#111111oklch(0.178 0 0)
- primary#111111oklch(0.178 0 0)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#EFEAE4oklch(0.939 0.01 72.659)
- secondary-foreground#111111oklch(0.178 0 0)
- muted#F3F0ECoklch(0.956 0.006 75.406)
- muted-foreground#615C57oklch(0.478 0.01 67.58)
- accent#EEE9E3oklch(0.936 0.01 72.659)
- accent-foreground#111111oklch(0.178 0 0)
- destructive#A3261Doklch(0.472 0.163 28.986)
- border#E2DDD6oklch(0.9 0.011 76.593)
- input#D1CBC2oklch(0.844 0.014 78.252)
- ring#111111oklch(0.178 0 0)
- chart-1#111111oklch(0.178 0 0)
- chart-2#B79E84oklch(0.715 0.047 68.066)
- chart-3#7A6555oklch(0.523 0.036 59.165)
- chart-4#5E6B5Coklch(0.512 0.028 141.437)
- chart-5#A3261Doklch(0.472 0.163 28.986)
深色主题
- background#0F0F0Foklch(0.168 0 0)
- foreground#F2EEE9oklch(0.951 0.008 73.743)
- card#181716oklch(0.205 0.003 67.686)
- card-foreground#F2EEE9oklch(0.951 0.008 73.743)
- popover#181716oklch(0.205 0.003 67.686)
- popover-foreground#F2EEE9oklch(0.951 0.008 73.743)
- primary#F2EEE9oklch(0.951 0.008 73.743)
- primary-foreground#0F0F0Foklch(0.168 0 0)
- secondary#22201Eoklch(0.245 0.005 67.6)
- secondary-foreground#F2EEE9oklch(0.951 0.008 73.743)
- muted#1C1B19oklch(0.222 0.004 84.588)
- muted-foreground#A09A93oklch(0.689 0.012 71.844)
- accent#262422oklch(0.262 0.005 67.618)
- accent-foreground#F2EEE9oklch(0.951 0.008 73.743)
- destructive#F07167oklch(0.697 0.159 26.504)
- border#2E2C29oklch(0.294 0.006 78.234)
- input#383532oklch(0.331 0.007 67.593)
- ring#F2EEE9oklch(0.951 0.008 73.743)
- chart-1#F2EEE9oklch(0.951 0.008 73.743)
- chart-2#C4A68Aoklch(0.745 0.052 64.916)
- chart-3#9C8574oklch(0.633 0.038 58.478)
- chart-4#9DAA9Aoklch(0.723 0.027 139.828)
- chart-5#F07167oklch(0.697 0.159 26.504)
字体
- 标题
- Bodoni Moda · 500
- 正文
- Jost · 400
- 等宽
- JetBrains Mono
字号阶梯
- display · 48/1 · -0.01em设计让界面更好用
- h1 · 32/1.05设计让界面更好用
- h2 · 24/1.15设计让界面更好用
- h3 · 17/1.3 · 0.04em设计让界面更好用
- body · 15/1.55 · 0.01em设计让界面更好用
- small · 12/1.4 · 0.1em设计让界面更好用
圆角、间距和阴影
圆角sm 0pxmd 2pxlg 4pxxl 8px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影不用阴影，层次靠边框和颜色。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 60px，5 项，icons only; bag badge
- 屏幕边距
- 16px
- 导航
- bottom tab bar; edge-to-edge product photos
- 数字
- proportional; prices in body weight
适合
- 时装和服饰商店
- 奢侈品和设计师二手
- 美妆和珠宝购物
- 品牌发售和画册
要做和不要做
- 商品图占满整个屏幕宽度。
- 品牌名和标签用小号全大写，加宽字距。
- 除了折扣价，价格不要加粗或上色。
- 不要在商品网格上堆满促销角标和贴纸。