Voyage：旅行预订 App 设计系统
App · 浅色 · 暖色 · 衬线 · 旅行Voyage
通栏大图、海洋蓝和一款像明信片的衬线字。
Voyage 先把目的地卖出去：通栏照片页头、像明信片一样的衬线字写地名，预订用海洋蓝，优惠用落日橙。照片下面转为实用：日期、价格和行程在暖沙白底上清清楚楚。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Voyage 设计系统，规范在 https://codexdesign.io/zh/design-systems/voyage.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#FAF7F2oklch(0.977 0.007 80.721)
- foreground#0F2A33oklch(0.268 0.037 222.627)
- card#FFFFFFoklch(1 0 0)
- card-foreground#0F2A33oklch(0.268 0.037 222.627)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#0F2A33oklch(0.268 0.037 222.627)
- primary#0B5D7Aoklch(0.448 0.085 229.04)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#E5F0F2oklch(0.947 0.012 209.805)
- secondary-foreground#0B4458oklch(0.362 0.065 227.324)
- muted#F1ECE4oklch(0.945 0.012 79.784)
- muted-foreground#5A6A70oklch(0.513 0.022 222.453)
- accent#EAE4DAoklch(0.921 0.015 80.706)
- accent-foreground#0F2A33oklch(0.268 0.037 222.627)
- destructive#B3261Eoklch(0.501 0.178 28.705)
- border#E3DCD0oklch(0.897 0.018 81.329)
- input#D6CDBEoklch(0.851 0.023 80.676)
- ring#0B5D7Aoklch(0.448 0.085 229.04)
- chart-1#0B5D7Aoklch(0.448 0.085 229.04)
- chart-2#E2884Aoklch(0.711 0.134 53.267)
- chart-3#3E8E6Aoklch(0.586 0.097 161.695)
- chart-4#C9A227oklch(0.728 0.138 89.726)
- chart-5#B45A7Boklch(0.585 0.122 358.323)
深色主题
- background#0C181Doklch(0.2 0.02 226.179)
- foreground#ECF1F2oklch(0.955 0.006 211.039)
- card#122229oklch(0.241 0.025 227.57)
- card-foreground#ECF1F2oklch(0.955 0.006 211.039)
- popover#122229oklch(0.241 0.025 227.57)
- popover-foreground#ECF1F2oklch(0.955 0.006 211.039)
- primary#6CC3E0oklch(0.773 0.093 221.874)
- primary-foreground#0C181Doklch(0.2 0.02 226.179)
- secondary#1A2C33oklch(0.281 0.027 224.452)
- secondary-foreground#ECF1F2oklch(0.955 0.006 211.039)
- muted#16262Coklch(0.257 0.024 223.568)
- muted-foreground#93A6ACoklch(0.712 0.023 218.708)
- accent#1D3038oklch(0.296 0.029 226.355)
- accent-foreground#ECF1F2oklch(0.955 0.006 211.039)
- destructive#F08A7Eoklch(0.74 0.126 27.61)
- border#233840oklch(0.327 0.03 223.875)
- input#2C434Coklch(0.368 0.032 224.38)
- ring#6CC3E0oklch(0.773 0.093 221.874)
- chart-1#6CC3E0oklch(0.773 0.093 221.874)
- chart-2#F2AA75oklch(0.796 0.109 56.768)
- chart-3#76C29Eoklch(0.754 0.093 162.572)
- chart-4#E6C65Aoklch(0.833 0.131 92.827)
- chart-5#E091AEoklch(0.745 0.102 356.24)
字体
- 标题
- DM Serif Display · 400
- 正文
- Manrope · 500
- 等宽
- JetBrains Mono
字号阶梯
- display · 44/1.05 · -0.01em设计让界面更好用
- h1 · 32/1.1设计让界面更好用
- h2 · 24/1.2设计让界面更好用
- 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
- 屏幕边距
- 20px
- 导航
- bottom tab bar; full-bleed photo headers
- 数字
- proportional
适合
- 旅行预订和行程规划
- 酒店和民宿 App
- 城市指南和跟团游
- 航旅和火车出行助手
要做和不要做
- 目的地页面用通栏照片开场。
- 预订按钮前先显示含税总价。
- 不要用衬线字排大段正文，它只留给地名和标题。
- 不要把文字直接压在杂乱的照片上，要垫一层深色遮罩。