设计规范站

行课Demo设计系统

本页整理色彩、排版、按钮、卡片、表单、间距、圆角与阴影等设计令牌,便于产品与前端对齐视觉语言。

调色板

展示模式

品牌色、中性色与线性渐变,用于主按钮、强调、分割与氛围背景;展示模式仅浏览,编辑模式可改色/渐变并保存到本地。

页面布局

相同颜色区域为同一层级,层级由高到低为:红色>蓝色>白色。画板尺寸:693 × 390 px(一倍图16:9)。

题干区

高度随内容自适应,最小 78px · 距离内容区右侧 109px

老师总结区

高度固定 56px · 宽度固定 572px

讲解区

内容宽度充满教学区

高度依据内容自适应

题图区

高度 220px

宽度 220~330px(当前 220px)

头像区
功能区
答题区

字体比例

展示模式

标题与正文的字号、行高、字重阶梯,便于组件复用。

按钮变体

主按钮、次按钮、图标按钮与搜索圆形按钮。

卡片示例

上图下文,圆角约 12px,用于列表与推荐位。

伊斯坦布尔,土耳其

整套公寓 · 两周可订

$78 / 晚

京都,日本

独立房间 · 含早餐

$92 / 晚

巴塞罗那,西班牙

海景露台 · 即时确认

$120 / 晚

表单元素

标签上置、占位符与焦点态示例。

间距比例

以 4 为基准递增,组件内边距与栅格对齐。

4
8
16
24
32
48

单位:px。可与 Tailwind 的 spacing 刻度对齐(如 1=4px)。

圆角

从小到大与全圆,用于输入框、卡片与头像。

小 4px

中 8px

大 12px

加大 20px

圆形

深度与阴影

平面、卡片、悬停与焦点环,避免阴影过重干扰阅读。

平面

无阴影

卡片

轻阴影

悬停

略加深、略抬起

焦点

粗边框 / 焦点环