设计规范总览
以温润砖红为锚点的中文知识型产品系统：米白底色 + 衬线标题，沉稳克制、信息优先。
颜色令牌
中性灰阶 + 砖红品牌（含分档）+ 四组语义状态色Background
#f9f9f7
--bg 页面底色
Surface
#ffffff
--surface 卡片 / 浮层
Search Background
#eeedeb
--search-bg 搜索框底
Foreground
#141413
--fg / --text-primary 主文字
Muted
#6b6a64
--muted / --text-secondary 次级
Tertiary
#9c9a90
--text-tertiary 三级 / 占位符
Border
#e3e6ea
--border-line 描边 / 分隔线
Hover
rgba(31,30,27,.05)
--hover 通用悬浮蒙层
Border Control
rgba(31,30,27,.07)
--border-control 控件描边
Accent
#c6613f
--accent 品牌强调色（砖红）
语义状态色 · 品牌分档
低饱和暖调，与砖红同一家族；每个状态含主色 + 浅底Success 成功
#6b8f56 · #e9f1dc
--success / -soft 完成 / 推荐 / 正确示范
Warning 警告
#b8863c · #f5ecd8
--warning / -soft 注意 / 待办 / 慎用
Danger 危险
#b1544a · #f5e6e1
--danger / -soft 错误 / 废弃 / 反例
Info 信息
#4d7a94 · #e6edf0
--info / -soft 普通提示 / 补充说明
Accent Strong
#a94f31
--accent-strong hover / 按下
Accent Soft
#f4e7e1
--accent-soft 选中背景 / 标签底
信息
普通提示、补充说明用信息蓝——冷色让它在暖底上安静地跳出来。
成功 / 推荐
正确示范、推荐做法、已完成状态。
注意
需要留心的坑、待办、慎用的做法。
错误 / 反例
不要这样做、已废弃、错误示范。
深色模式 — Dark Mode Tokens
Background
#1c1a18
--bg 页面底色
Surface
#252320
--surface 卡片 / 浮层
Search Background
#2d2b28
--search-bg 搜索框底
Foreground
#eeece6
--text-primary 主文字
Muted
#948f86
--text-secondary 次级
Tertiary
#5f5c56
--text-tertiary 三级 / 占位符
Border
rgba(255,255,255,.09)
--border-line 描边 / 分隔线
Hover
rgba(255,255,255,.06)
--hover 悬浮蒙层
Accent
#d4724f
--accent 品牌强调色（砖红 +亮度）
字体系统
衬线标题 × 无衬线正文，6 级字号刻度字体家族
Noto Serif SC — 标题 / 展示
--font-serif 'Noto Serif SC', Georgia, serif weight 600
Noto Sans SC — 正文 / 界面
--font-sans 'Noto Sans SC', -apple-system, system-ui, sans-serif weight 400 / 500
ui-monospace — 数字 / 代码标注
mono ui-monospace, 'SF Mono', monospace
设计知识库
分区标题 Section Title
视频组的设计规范、经验沉淀、好文与工具——新人上手、老手查阅，都从这里开始。
卡片标题文字，主要信息展示层级，也用于侧栏导航项和工具栏按钮。
目录标签 / 元信息标注 / 辅助说明文字
间距 & 圆角
基于 8pt 网格，圆角按层级递减间距刻度
4px
侧栏项间距
8px
卡片内行间距
16px
卡片间距 / 标题间距
24px
卡片内边距 / 容器小间隔
48px
分区之间间距
64px
Hero → Body / 侧栏间距
80px
Hero 顶部内边距
圆角刻度
4px
令牌标签 chip
8px
侧栏项 / 切换按钮
12px
搜索框 / 列表卡片
24px
网格卡片（主规格）
组件库
所有可交互态均有 hover / active / focus-visible卡片 — 网格视图
设计规范总览
颜色 / 字体 / 间距 / 圆角令牌
组件库用法
如何引用、绑定、贡献组件
命名规范
变量、组件、图层的命名约定
卡片 — 列表视图
团队介绍
视频组是谁、做什么、协作方式
环境与账号
Figma、走查插件、需要申请的账号
第一周指引
入职第一周该看什么、做什么
搜索框 + 视图切换器
侧栏导航
移动端分区胶囊 + 焦点态
焦点轮廓：2px solid var(--accent) offset 2px
空状态
没有找到匹配的内容
换个关键词试试设计姿态规则
5 条约束，维持系统的克制与一致01
克制单色强调
--accent 仅用于焦点轮廓与主操作，每屏不超过 2 处。强调色越少，价值越高。
02
衬线标题 × 无衬线正文
大标题（Hero / 分区）用 --font-serif；导航、卡片、标签、工具栏全用 --font-sans。
03
米白底色是基调
背景保持 --bg 暖灰白（#f9f9f7），不使用纯白或高饱和色背景——除非是卡片 surface。
04
hover 靠阴影 + 微位移
卡片 hover 用
translateY(-1px) + box-shadow，不改变色相，保持低调。05
信息密度适中
卡片宽度固定 316px（移动端自适应），内边距 24px，文字留白充分。拒绝信息堆叠，让用户呼吸。