伊斯坦布尔，土耳其
整套公寓 · 两周可订
$78 / 晚
行课Demo设计系统
本页整理色彩、排版、按钮、卡片、表单、间距、圆角与阴影等设计令牌，便于产品与前端对齐视觉语言。
调色板
展示模式品牌色、中性色与线性渐变，用于主按钮、强调、分割与氛围背景；展示模式仅浏览，编辑模式可改色/渐变并保存到本地。
页面布局
相同颜色区域为同一层级，层级由高到低为：红色>蓝色>白色。画板尺寸：693 × 390 px（一倍图16:9）。
题干区
高度随内容自适应，最小 78px · 距离内容区右侧 109px
老师总结区
高度固定 56px · 宽度固定 572px
讲解区
内容宽度充满教学区
高度依据内容自适应
题图区
高度 220px
宽度 220～330px（当前 220px）
头像区
功能区
答题区
字体比例
展示模式标题与正文的字号、行高、字重阶梯，便于组件复用。
卡片示例
上图下文，圆角约 12px，用于列表与推荐位。
京都，日本
独立房间 · 含早餐
$92 / 晚
巴塞罗那，西班牙
海景露台 · 即时确认
$120 / 晚
表单元素
标签上置、占位符与焦点态示例。
间距比例
以 4 为基准递增，组件内边距与栅格对齐。
4
8
16
24
32
48
单位：px。可与 Tailwind 的 spacing 刻度对齐（如 1=4px）。
圆角
从小到大与全圆，用于输入框、卡片与头像。
小 4px
中 8px
大 12px
加大 20px
圆形
深度与阴影
平面、卡片、悬停与焦点环，避免阴影过重干扰阅读。
平面
无阴影
卡片
轻阴影
悬停
略加深、略抬起
焦点
粗边框 / 焦点环