温暖小麦色调的设计令牌体系 — 金色主色调搭配暖棕底色，营造学习型产品的亲和力与专注感。
以小麦金色为核心的品牌色彩，搭配暖棕底色和深色模式适配。
Inter 字体族，7 级尺寸，从页面标题到辅助文字。
暗色表面上的按钮 — 金麦色主操作按钮为视觉锚点。
暗色表面卡片，小麦金边框强调。
暗色表面 + 细边框，适合内容分组和信息展示。
bg: #2a2420 / border: 1px #3d3630 / r: 8px
较亮的表面色，用于二级内容区域或嵌套内容。
bg: #332e28 / border: 1px #3d3630 / r: 8px
带阴影的浮层卡片，适合弹窗和下拉菜单。
shadow: 0 8px 24px rgba(0,0,0,0.29)
左侧金麦色竖线强调，用于重要通知和推荐内容。
border-left: 3px #f5c547
暗色输入框，金麦色焦点环。
基于 4px 基础单位的 8 级间距。
4 级圆角，从功能性的小元素到药丸形状。
三级阴影 — 卡片悬浮、下拉菜单、全局弹窗。
轻阴影 — 卡片、按钮悬浮态。
0 2px 8px rgba(0,0,0,0.10)
中阴影 — 下拉菜单、输入框焦点。
0 4px 16px rgba(0,0,0,0.12)
深阴影 — 全局弹窗、抽屉面板。
0 8px 24px rgba(0,0,0,0.16)
所有设计令牌的 CSS 变量映射。
| 令牌名称 | 变量 | 值 | 用途 |
|---|---|---|---|
| Primary | --primary | #f5c547 | 主色调 |
| Primary Dark | --primary-dark | #e6b841 | hover 态 |
| Secondary | --secondary | #f5ede1 | 亮色背景 |
| Decorative | --decorative | #3b1701 | 正文/深色 |
| Dark BG | --dk-bg | #1a1614 | 暗色页面背景 |
| Dark Surface | --dk-surface | #2a2420 | 暗色卡片 |
| Dark Elevated | --dk-surface-elevated | #332e28 | 提升层 |
| Dark Border | --dk-border | #3d3630 | 暗色边框 |
| Dark Text 1 | --dk-text-primary | #f5ede1 | 主要文本 |
| Dark Text 2 | --dk-text-secondary | #c4b8a8 | 次要文本 |
| Success | --success | #52c41a | 成功 |
| Warning | --warning | #ff6700 | 警告 |
| Error | --error | #f82834 | 错误 |
| Radius SM | --radius-sm | 4px | 小元素 |
| Radius MD | --radius-md | 8px | 标准元素 |
| Radius LG | --radius-lg | 16px | 大容器 |
| Radius Full | --radius-full | 9999px | 药丸形 |