Pantry：外卖点餐 App 设计系统
App · 浅色 · 暖色 · 活泼 · 餐饮Pantry
温暖、亲切、有食欲，为外卖和点餐 App 设计。
Pantry 温暖又有食欲：米色背景、下单用番茄红、新鲜感用香草绿，配大圆角的美食卡片和亲切的无衬线标题字。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Pantry 设计系统，规范在 https://codexdesign.io/zh/design-systems/pantry.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#FFFAF3oklch(0.987 0.011 76.6)
- foreground#2A1A12oklch(0.236 0.03 47.408)
- card#FFFFFFoklch(1 0 0)
- card-foreground#2A1A12oklch(0.236 0.03 47.408)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#2A1A12oklch(0.236 0.03 47.408)
- primary#C9381Eoklch(0.557 0.186 32.439)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#FDEBD8oklch(0.949 0.032 68.938)
- secondary-foreground#6E2810oklch(0.376 0.106 38.332)
- muted#F6EEE4oklch(0.953 0.016 73.68)
- muted-foreground#6F5D50oklch(0.492 0.031 57.773)
- accent#FCE6D6oklch(0.938 0.032 58.39)
- accent-foreground#2A1A12oklch(0.236 0.03 47.408)
- destructive#B3202Aoklch(0.498 0.181 24.025)
- border#EFE3D5oklch(0.922 0.023 71.776)
- input#E6D7C6oklch(0.887 0.028 70.916)
- ring#C9381Eoklch(0.557 0.186 32.439)
- chart-1#C9381Eoklch(0.557 0.186 32.439)
- chart-2#2F7A4Foklch(0.521 0.101 155.227)
- chart-3#D99121oklch(0.712 0.144 71.642)
- chart-4#5A4FCFoklch(0.514 0.19 281.211)
- chart-5#C2577Eoklch(0.601 0.143 359.388)
深色主题
- background#1A1310oklch(0.194 0.013 44.427)
- foreground#F8EDE3oklch(0.952 0.018 64.931)
- card#241A15oklch(0.228 0.019 47.887)
- card-foreground#F8EDE3oklch(0.952 0.018 64.931)
- popover#241A15oklch(0.228 0.019 47.887)
- popover-foreground#F8EDE3oklch(0.952 0.018 64.931)
- primary#FF6A4Doklch(0.706 0.188 32.864)
- primary-foreground#1A1310oklch(0.194 0.013 44.427)
- secondary#33241Coklch(0.276 0.027 49.268)
- secondary-foreground#F8EDE3oklch(0.952 0.018 64.931)
- muted#2B201Aoklch(0.255 0.02 50.045)
- muted-foreground#B9A595oklch(0.735 0.033 60.943)
- accent#352720oklch(0.287 0.025 47.844)
- accent-foreground#F8EDE3oklch(0.952 0.018 64.931)
- destructive#FF6B6Boklch(0.712 0.181 22.839)
- border#3B2D25oklch(0.311 0.025 51.22)
- input#47372Eoklch(0.352 0.028 50.844)
- ring#FF6A4Doklch(0.706 0.188 32.864)
- chart-1#FF6A4Doklch(0.706 0.188 32.864)
- chart-2#5BC08Aoklch(0.733 0.124 157.835)
- chart-3#FFB547oklch(0.824 0.149 73.346)
- chart-4#8F86FFoklch(0.683 0.174 284.179)
- chart-5#F08AB0oklch(0.753 0.131 356.937)
字体
- 标题
- Bricolage Grotesque · 700
- 正文
- DM Sans · 400
- 等宽
- DM Mono
字号阶梯
- display · 40/1.05 · -0.02em设计让界面更好用
- h1 · 30/1.1 · -0.015em设计让界面更好用
- h2 · 22/1.2 · -0.01em设计让界面更好用
- h3 · 18/1.3设计让界面更好用
- body · 16/1.5设计让界面更好用
- small · 13/1.4设计让界面更好用
圆角、间距和阴影
圆角sm 16pxmd 18pxlg 20pxxl 24px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影柔和、低而宽的阴影，只用在卡片和面板上。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 64px，4 项，icons with labels; cart badge
- 屏幕边距
- 16px
- 导航
- bottom tab bar; sticky cart button on menu screens
- 数字
- proportional; prices bold
适合
- 外卖和点餐 App
- 餐厅和咖啡馆 App
- 生鲜和菜谱 App
- 本地生活服务
要做和不要做
- 让美食照片占卡片的大部分。
- 每个加购按钮旁边都用粗体写价格。
- 同一屏不要同时用红色表示错误和下单。
- 菜单上不要堆满角标。