Design System · 单一 Token 权威源
wlili.top 设计系统规范
本规范依据作品集前台（portfolio/cases）实时 CSS 盘点生成，全部取值与
portfolio/cases/_shared/design-tokens.css 完全一致。文档外壳即采用本套 Token 的镜像值排版，正反验证系统可用。
00
现状总览
经方案 A（全局 token 迁收）+ 盲区 A–L 补漏 + px→rem 迁移三轮收口后，体系已成「单一可发现源」。 全部 21 个维度已 Token 化并接线；仅余「字面硬编码未替换」这类纯度问题（零视觉风险）。
21
已落地的 Token 维度
0
完全未覆盖的盲区（v1 的 11 项已全部收口）
1
已落地但仍有字面硬编码（纯度问题）
~120+
前台页已接线的 CSS 变量引用
版本沿革： v1（2026-09-28）声明权威源路径
_shared/design-tokens.css 已失效、仍显示 px 取值、并把已完成的 11 项盲区标为「🔴 未覆盖」；
v2（2026-10-09）修正取值与路径但版式单调、且动效演示区 CSS 缺失；
v3（本版）改用 specimen 版式（真实渲染的字阶 / 圆角 / 间距标本 + 色阶砖 + 深色实时预览），并补齐动效演示样式。
01
颜色 Color
品牌 / 中性 / 文本 / 边框 / 状态色已收口为单一源，并配套深色 [data-theme="dark"] 反转。
中性 · 文本 · 语义（浅色）✅ 已落地
#000
--color-primary主强调·按钮/关键线
#0a0a0a
--color-black正文/标题主色
#ffffff
--color-white卡底/反白
#f5f5f5
--color-background浅色页面底
#0a0a0a
--color-background-dark深色页面底
rgba(10,10,10,.6)
--color-text-secondary次级文本
rgba(255,255,255,.6)
--color-text-tertiary深色底三级文本
rgba(10,10,10,.04)
--color-gray-ultra-light极淡边框/底纹
rgba(255,255,255,.16)
--color-gray-border深色分割线
强调色板
--pd-accent-*✅ 已落地#006fff
--pd-accent-blue蓝
#ff9300
--pd-accent-orange橙
#eb0000
--pd-accent-red红
#26ee00
--pd-accent-green绿
状态色 & 深色反转（实时预览）✅ 已落地
#40a53c
--color-green成功/已保存态
语义：深色模式只反转「页面背景 / 文字 / 卡片底」；顶部导航 / 移动菜单 / 底部 footer / hero / services / testimonials / 轮播等经
site-shell.css 的豁免区保持浅色逻辑（用户要求）。[data-theme="dark"] 实时样例
深色卡片样例
背景 #0a0a0a · 文字 #f5f5f5 · 卡底 #1a1a1a · 次级 rgba(245,245,245,.72)
| Token | 浅色 | 深色 [data-theme="dark"] | 说明 |
|---|---|---|---|
--color-background | #f5f5f5 | #0a0a0a | 页面底 |
--color-text | #0a0a0a | #f5f5f5 | 主文本 |
--color-text-secondary | rgba(10,10,10,.6) | rgba(245,245,245,.72) | 次级文本 |
--color-text-tertiary | rgba(255,255,255,.6) | rgba(245,245,245,.5) | 三级文本 |
--color-black | #0a0a0a | #f5f5f5 | 主文字/深填充 → 浅 |
--color-white | #fff | #1a1a1a | 白卡底 → 深卡 |
--color-gray-ultra-light | rgba(10,10,10,.04) | rgba(255,255,255,.06) | 极淡边框/底纹 |
--color-primary | #000 | #f5f5f5 | 主强调 |
02
字体排印 Typography
字体族 + 字号阶梯 + 行高 + 字距 + 字重全部 Token 化并接线（含 v1 的盲区 A/B/C/D）。字号已是 rem（16px → 1rem）。
字体族
--font-family✅ 已落地Aa1
Regular
Medium
Semibold
Bold
'Inter', -apple-system,
'PingFang SC', 'Microsoft YaHei',
'Noto Sans SC', sans-serif
无本地字体文件，Inter 缺失时按栈回退到系统无衬线（不引 CDN，符合零构建约束）。
字号阶梯
--fs-*（真实渲染）✅ 已落地·已接线--fs-120.75rem · 12px
设计系统 Aa 0123
--fs-140.875rem · 14px
设计系统 Aa 0123
--fs-161rem · 16px
设计系统 Aa 0123
--fs-181.125rem · 18px
设计系统 Aa 0123
--fs-201.25rem · 20px
设计系统 Aa 0123
--fs-241.5rem · 24px
设计系统 Aa 0123
--fs-301.875rem · 30px
设计系统 Aa 0123
--fs-362.25rem · 36px
设计系统 Aa
--fs-483rem · 48px
设计 Aa
--fs-563.5rem · 56px
设计 Aa
--fs-805rem · 80px
设计 Aa
--fs-966rem · 96px
Aa
--fs-1449rem · 144px
Aa
--fs-20012.5rem · 200px
Aa
响应式
clamp() 流体字号属设计意图，故意保留裸写（见 §13）。行高
--lh-* ✅ 已落地·已接线--lh-110（1.1）
设计系统把散落取值收口为单一源，标题用紧行高。
设计系统把散落取值收口为单一源，标题用紧行高。
--lh-150（1.5）
设计系统把散落取值收口为单一源，正文用中等行高。
设计系统把散落取值收口为单一源，正文用中等行高。
--lh-180（1.8）
设计系统把散落取值收口为单一源，长文用宽松行高。
设计系统把散落取值收口为单一源，长文用宽松行高。
--lh-090:0.9 --lh-095:0.95 --lh-100:1 --lh-105:1.05 --lh-110:1.1 --lh-115:1.15 --lh-120:1.2
--lh-130:1.3 --lh-140:1.4 --lh-145:1.45 --lh-150:1.5 --lh-155:1.55 --lh-160:1.6 --lh-170:1.7 --lh-180:1.8
（仅无量纲行高；精确 px 行高如 162.8px 为垂直居中专用，保留裸写）
字距
--ls-* ✅ 已落地·已接线相对 em（12）：--ls-005 / -01 / -02 / -03 / -045 / -05 / -04 / 04 / 06 / 08 / 12 / -040
高频 px（20+，已折算 rem）：--ls-1px(-0.0625rem) … --ls-74px(-0.4625rem)，含正距 --ls-02px_pos / --ls-04px_pos
美术字距（如 -7.4px 巨标题）一并纳入便于统一调
字重
--fw-* ✅ 已落地·已接线Aa1--fw-300
Aa1--fw-400
Aa1--fw-500
Aa1--fw-600
Aa1--fw-700
Aa1--fw-800
Aa1--fw-900
--fw-normal:400（normal → 400，统一字重语义）
03
间距 Spacing
区块留白四档 + 组件 gap 尺度 + 容器宽度，全部已落地·已接线。已是 rem（v1 显示 px，现已迁移）。下方条形长度即真实取值。
区块留白
--padding-* ✅ 已落地组件内间距
--gap-*（4px 基准）✅ 已落地·已接线全谱：--gap-4/6/8/10/12/14/16/20/24/32/36/40/48/64/96（0.25rem → 6rem）
容器宽度
--container-* ✅ 已落地·已接线| Token | rem | px | 用途 |
|---|---|---|---|
--container-page | 95rem | 1520 | 全站通栏上限 |
--container-read | 42.5rem | 680 | 阅读栏（正文/副标题限宽） |
--container-card | 32.5rem | 520 | 卡片/焦点预览面板 |
--container-mock | 33.75rem | 540 | mockup 副标题限宽 |
--container-mock2 | 35rem | 560 | mockup 副标题限宽（变体） |
04
圆角 Radius
已落地并接线（带 fallback）。全站圆角一处改全局生效。已是 rem。下方方块即真实圆角。
--radius-pill6.25rem (100px)
--radius-circle50%
--radius-xl1.5625rem (25px)
--radius-lg1.125rem (18px)
--radius-sm0.375rem (6px)
05
阴影 Shadow
已落地并接线。一次性定制阴影仍保留硬编码（ROI 低，不强制收口）。已是 rem。
--shadow-card
0 0.75rem 2rem rgba(0,0,0,.12)
通用卡片浮起（= 0 12px 32px）
--shadow-sm
0 0.0625rem 0.1875rem rgba(0,0,0,.06)
极淡描边感（= 0 1px 3px）
06
表面色 & 透明度
深色表面色（盲区 H）与透明度层级（盲区 G）均已收口。
深色表面色
--surface-* ✅ 已落地·已接线--surface-d1#0f0f11 · 最深
--surface-d2#14161a
--surface-d3#1c1c22
--surface-d4#2a2a2a · 装饰面
透明度层级
--opacity-* ✅ 已落地·已接线--opacity-hide0 · 入场前
--opacity-dim0.5 · 占位/蒙层
--opacity-dim20.55
--opacity-dim30.6
--opacity-0850.85
--opacity-040.4
--opacity-show1 · 完全显示
07
宽高比 & 渐变
可复用的通用比例与可复用渐变已收口；精确像素比例与美术渐变刻意保留裸写。
宽高比
--ratio-* ✅ 已落地·已接线--ratio-4-34 / 3
--ratio-4-54 / 5
--ratio-5-35 / 3
--ratio-16-916 / 9
渐变
--gradient-*（仅可复用项）✅ 已落地·已接线--gradient-scrim图片蒙层
--gradient-scrim-strong强蒙层
--gradient-shimmer骨架屏
3D mockup 的美术渐变（金属/玻璃/屏幕）为逐件设计，刻意不抽，保留裸写。
08
响应式断点 & 交互态
盲区 J / L。断点已统一，消除 767/768 同时使用的 off-by-one 隐患。
断点
--bp-* ✅ 已落地·已接线0全站通栏上限 1520px
统一以
max-width:767px 表示「平板及以下」、max-width:560px 表示「手机」。文档自身断点采用 980 / 820 / 560。交互态
--state-* ✅ 已落地·已接线--state-hover-bg
rgba(0,0,0,.04)
hover 态底纹样例
--state-focus-ring
rgba(0,0,0,.12)
focus 环样例
09
动效 Motion
时长与缓动曲线已 Token 化。下方为缓动曲线可视化（点「重播动效」或顶部按钮）。
--motion-easing-enter
cubic-bezier(0,0,.2,1)
cubic-bezier(0,0,.2,1)
--motion-easing-emphasized
cubic-bezier(.4,0,.2,1)
cubic-bezier(.4,0,.2,1)
--motion-easing-exit
cubic-bezier(.4,0,1,1)
cubic-bezier(.4,0,1,1)
--motion-duration-fast
150ms
--motion-duration-normal
300ms
--motion-duration-slow
500ms
--transition-base: 0.3s ease-in-out --transition-fast: 0.15s ease-in-out --transition-slow: 0.5s ease-in-out
注： 后台拖拽 FLIP 用临界阻尼曲线
cubic-bezier(0.22,1,0.36,1) / 380ms（无过冲），与上方「强调缓动」不同——前者是交互手感专项，未纳入通用 Token，属合理例外。10
层级 z-index
已落地，命名清晰，覆盖下拉到 tooltip 全谱。
| 值 | Token | 用途 |
|---|---|---|
1000 | --z-dropdown | 下拉菜单 |
1020 | --z-sticky | 吸顶元素 |
1030 | --z-fixed | 固定层 |
1040 | --z-modal-backdrop | 弹窗遮罩 |
1050 | --z-modal | 弹窗 |
1060 | --z-popover | 浮层 |
1070 | --z-tooltip | 气泡提示 |
11
块级 Token · --pd-* 家族
24 个板块局部 token 已从各 .pd-* 选择器收口为单一源（✅ 已落地·本文件权威源）。组件内只「消费」不「定义」。
eyebrow / intro / split
--pd-eyebrow-color:#888888
--pd-intro-fg / fg2
--pd-split-accent / fg / fg2
hero（12 个）
--pd-hero-accent:#888888 / bg / bg2 / card-bg / img-bg
--pd-hero-fg / fg2 / fg3 / border / border-strong
--pd-hero-divider / divider2
scene-grid（6 个）
--pd-grid-accent:#888888 / fg / fg2 / fg3
--pd-grid-card-bg / border
语义说明
fg=主前景 · fg2/fg3=次级前景 · accent=强调（默认 #888）· border/divider=分割。完整性提示（🟡）： 仍有
#ffffff×23、#0a0a0a×13、#888888×5 等字面硬编码散布在组件里，与现有 token 值完全一致却未走变量——属「已落地但未接线」，不改视觉，只影响单一源纯度。建议全量替换为 var(--color-white) 等（可用脚本安全替换，带 fallback）。12
原盲区 A–L（已全部收口）
v1 快照中标记为「🔴 未覆盖」的 11 个维度，现均已在 design-tokens.css 落地并接线（§10–§21）。下表为当前真实状态。
| 原盲区 | 维度 | 落地 Token | 状态 |
|---|---|---|---|
| A | 字号阶梯 | --fs-12 … --fs-200（14 档，rem） | ✅ 已落地·已接线 |
| B | 行高 | --lh-090 … --lh-180（14 档） | ✅ 已落地·已接线 |
| C | 字距 | --ls-*（em 12 + px 20+） | ✅ 已落地·已接线 |
| D | 字重 | --fw-300 … --fw-900 / --fw-normal | ✅ 已落地·已接线 |
| E | 统一间距体系 | --gap-4 … --gap-96（4px 基准） | ✅ 已落地·已接线 |
| F | 容器宽度 | --container-*（page/read/card/mock/mock2） | ✅ 已落地·已接线 |
| G | 透明度层级 | --opacity-hide/dim/dim2/dim3/show/085/04 | ✅ 已落地·已接线 |
| H | 深色组件表面色 | --surface-d1 … d4 | ✅ 已落地·已接线 |
| I | 渐变 | --gradient-scrim / scrim-strong / shimmer | ✅ 已落地·已接线 |
| J | 响应式断点 | --bp-tablet:767px / --bp-mobile:560px | ✅ 已落地·已接线 |
| K | 宽高比 | --ratio-4-3 / 4-5 / 5-3 / 16-9 | ✅ 已落地·已接线 |
| L | 交互态色彩 | --state-hover-bg / --state-focus-ring | ✅ 已落地·已接线 |
13
故意保留裸写（非遗漏）
以下属「设计意图」，抽成 token 无收益且易误改，刻意保留裸写：
· 流体字号
· 精确 px 行高（如 162.8px）：特定标题垂直居中专用。
· 精确像素宽高比（如 1136/608）：图片原始比例，必须原样。
· 美术渐变（mockup 金属/玻璃/屏幕）：逐件设计，抽 token 破坏表现。
clamp(...)：响应式设计意图，抽 token 反增噪音。· 精确 px 行高（如 162.8px）：特定标题垂直居中专用。
· 精确像素宽高比（如 1136/608）：图片原始比例，必须原样。
· 美术渐变（mockup 金属/玻璃/屏幕）：逐件设计，抽 token 破坏表现。
14
应用示意
用本套 Token 组合出的示意件，验证「改一处 token → 全局生效」。 说明：wlili 无通用 UI 组件库（components.css 为内容板块库），此处仅演示 Token 组合效果，非现成组件。
--gradient · --ratio-*
已上线
案例封面卡
圆角 --radius-xl · 浮起 --shadow-card · 文字 --fs-24/--fs-14 · 间距 --gap-12/--gap-24。
.demo-card{
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
background: var(--color-white);
}
.demo-btn{
border-radius: var(--radius-pill);
background: var(--color-black);
color: var(--color-white);
}
.demo-input:focus{
box-shadow: 0 0 0 3px var(--state-focus-ring);
}
上排为渲染结果，下排为对应 token 写法——直接对照，改 token 即改外观。