Studio Tools · 综合后台设计系统

实时核对自 tools/_shared/admin.html · 主题色 --accent:#84cc16 青柠绿
返回后台
Tokens
设计系统规范 · 2026-10-09 核对版

综合后台 Design System

本页是 tools/_shared/admin.html 设计令牌与组件的可读镜像，全部取值实时抄自源文件 :root 与组件规则（2026-10-09 现场核对）。源文件改动后，本页会漂移——它以源文件为唯一权威。

★概述

综合后台（Studio Tools）是 wlili.top 三条产品线之一，主题色为青柠绿。设计令牌集中在 admin.html 顶部两个 :root 块，含一套 2026-09-27 补全的标尺层（间距 / 字阶 / 圆角 / 阴影 / 动效 / 层级 / 语义色）。深浅主题靠 [data-theme="dark"] 切换。

主色 Accent
--accent
#84cc16
面板 Panel
--panel
#f5f5f7
卡片 Card
--card
#ffffff
文字 Ink
--ink
#14171c

注意：本页与首页 design-system-spec.html 是两套独立设计系统——首页（W. Studio）走 Apple 风浅灰 token，综合后台走青柠绿 token。二者不要混用。

01品牌色 / 中性色

品牌色全部围绕青柠绿，含渐变与深/浅派生；中性色为灰阶表面体系。

品牌色 Brand
Accent
--accent
#84cc16
Accent Deep
--accent-deep
#4d7c0f
Accent Hover
--accent-hover
#65a30d
Accent Soft
--accent-soft
#f1f8e3
Accent Gradient（胶囊类选中 / 主按钮）
--accent-grad
linear-gradient(135deg,#a3e635,#65a30d)
中性表面 Neutrals
Bg
--bg
#e9eaee
Panel
--panel
#f5f5f7
Card
--card
#ffffff
Ink
--ink
#14171c
Muted
--muted
#71767f
Line
--line
#e6e7eb
Cap Bg（深色反转面）
--cap-bg
#14171c
Cap Ink
--cap-ink
#ffffff
Hero Grad（=accent-grad）
--hero-grad
同 accent-grad

02语义状态色

状态反馈色：浅色底 = 14% 混卡面（color-mix），深色主题提高到 26~28% 保对比；描边 = 30% 混透明。

状态色 + 背景 + 描边 Semantic
Success
--success
#16a34a
Warning
--warning
#f59e0b
Info
--info
#2563eb
Danger
--danger
#e5484d
Success Bg
--success-bg
mix 14%
Warning Bg
--warning-bg
mix 14%
Info Bg
--info-bg
mix 14%
Danger Bg
--danger-bg
mix 14%

状态底色在 [data-theme="dark"] 下混合比升至 26~28%（--success-bg 26% / --info-bg 28%），因深底上 14% 不够可辨。

03深色主题令牌

切换顶栏「深色」即可预览。下列为 [data-theme="dark"] 对中性面与部分语义的覆盖值（点上方按钮已在本页生效）。

Bg
--bg
#08090b
Panel
--panel
#0e1114
Card
--card
#161a1f
Ink
--ink
#e8eaee
Muted
--muted
#8b93a1
Line
--line
#232a33
Cap Bg（反转）
--cap-bg
#e8eaee
Cap Ink（反转）
--cap-ink
#14171c

04字阶 Type Scale

字体栈 Inter / PingFang SC / Microsoft YaHei，正文 14px。字阶为非连续命名令牌（含明显跳档，见下注）。

真实渲染 --fs-*
--fs-11授权草稿状态小字 Aa11px
--fs-12次要说明文字 Aa12px
--fs-13正文 / 胶囊标签 Aa13px
--fs-14基础正文 Aa14px
--fs-15卡片标题 Aa15px
--fs-16中间档 Aa16px
--fs-17中间档 Aa17px
--fs-18中间档 Aa18px
--fs-19中间档 Aa19px
--fs-20中间档 Aa20px
--fs-21中间档 Aa21px
--fs-22区块标题 Aa22px
--fs-27页标题 Aa27px
--fs-34大标题 Aa34px

跳档提示：字阶 11–22 已连续（含 2026-10-09 补的 16–21）；仅余 22→27（缺 23–26）、27→34（缺 28–33）两处 legacy 大跳档。这属「 legacy 命名 + 新标尺并存」的过渡态，新代码一律用 --fs-*，避免散写裸值。

05圆角 Radius

两套并存：--r-* 为后台卡片命名，--radius-* 为 legacy 旧页命名，新代码用 --r-* / 单列尺寸令牌。

圆角标本 Radius
--radius-sm
8px
--radius-md
10px
--radius-lg
14px
--radius-xl
16px
--radius-pill
999px
--r-md
14px
--r-lg
20px

06阴影 Shadow

三级阴影标尺，深色主题自动加深。

阴影标本 Shadow
--shadow-sm
--shadow-md
--shadow-lg

07间距 Spacing

以 2px 为最小步进，--sp-0 … --sp-11。现存 3/5/7/9/11 等非标值逐步收敛到最近档。

间距标尺 --sp-*
--sp-12px
--sp-24px
--sp-36px
--sp-48px
--sp-510px
--sp-612px
--sp-714px
--sp-816px
--sp-920px
--sp-1024px
--sp-1132px

08动效 Motion

时长 + 缓动两套令牌。下列小球用 --ease-out 实跑一遍。

时长 / 缓动 Motion
--dur-fast.12s
--dur-base.2s
--dur-slow.3s
--dur-bar.9s（进度条）
--ease-outcubic-bezier(.22,.61,.36,1)
--ease-inoutcubic-bezier(.32,.72,0,1)
演示：--ease-out 缓动idle

09层级 Z-Index

现有裸值集中登记为令牌，避免随意写大数。

层级标尺 --z-*
--z-rail30
--z-drawer80
--z-toast99
--z-tooltip1000

基础层 --z-base:1、吸顶 --z-sticky:3。菜单浮层 tooltip 取最高 1000。

10响应式断点 Breakpoints

源文件实际命中的 @media(max-width) 断点（比记忆里的 1024/767/480 更细）。Desktop-first。

断点 @media
1280pxc3 占 4 列
1024pxopt-viz 单列；c3 占 6 列
900pxstats 2 列
820px顶栏 2 列降级
768pxc3/c4/c6/c8 整行
734pxstats 紧凑
560pxstats 1 列
480pxpattern-grid 1 列

命名令牌（2026-10-09 沉淀）：源文件 :root 已登记命名断点 --bp-mobile:480 / --bp-xs:560 / --bp-phablet:734 / --bp-tablet:768 / --bp-netbook:820 / --bp-md:900 / --bp-laptop:1024 / --bp-lg:1200 / --bp-xl:1280，供人工对照与 JS matchMedia 引用。 ⚠ 纯 CSS 的 @media 条件不能使用 var()——上方各 @media(max-width:…) 仍写裸值，切勿替换为 var(--bp-*)（媒体查询条件里 var() 无效，会整体失效）。真正的令牌化需 JS 驱动 matchMedia 或构建步骤，当前零构建，未做（避免破坏）。

11组件 Components

下列为后台真实组件规则的可视化标本（直接复用源 CSS）。

顶栏圆形钮 .rbtn（你要加的「查看设计规范」即用此样式）
40×40 圆钮 · 1px 描边 · 悬停上浮 1px
左栏圆形钮 .r-item
选中态 = --cap-bg 深墨 + 白字（非绿渐变）
胶囊标签 .cap
概览内容设置当前选中
胶囊 / 分页 .pill .pg-btn
未选已选
主按钮 .btn.primary / .btn-primary
主按钮（渐变胶囊） 主按钮（实色圆角） ⚠ 两个类名并存，见 §12
开关 / 输入框聚焦 .opt-switch input:focus

12一致性待收敛

以下为现场核对发现的、与「主系统青柠绿」不一致的残留。A/B 与下列三项均已收敛（2026-10-09）；本节作为收敛记录留存。

✓
子组件聚焦/选中色写死靛蓝回退 #6366f1 日历(.cal-day)、下拉搜索(.sel-search-input)、取色器(.form-swatch/.form-range)、表单聚焦(.form-input:focus) 等用 var(--accent-color)（无回退 → 失效）与硬编码 rgba(99,102,241,.1) 环。 已收敛（2026-10-09）：:root 补 --accent-color:var(--accent)（实色绿）与 --accent-ring:rgba(132,204,22,.18)；焦点环 rgba(99,102,241,.1) 全量替换为 --accent-ring。子组件聚焦/选中/滑块/取色器统一转绿，靛蓝环清零。状态色 #6366f1（SD 买断 / 收入图表）属语义数据色，保留。
✓
主按钮类名两套并存 .btn.primary 与 .btn-primary 已收敛（2026-10-09）：合并为单一规则 .btn.primary, .btn-primary（绿渐变 + 白字 + 胶囊 999px，padding 10/18、13px，含 hover/active/disabled）；删除 line 890 发散实色圆角定义、.sp-wrap .btn-primary* 覆盖及 11996 区重复定义。SP 模块按钮尺寸（原 8/16、14px）与外壳统一为 10/18、13px。HTML 无需改动（两类名等价）。
✓
次级按钮尺寸分歧 & 小按钮类名错配 已收敛（2026-10-09）：① .btn-secondary 实为两段裸定义——全局 8/16+radius-md（被覆盖的死代码）与文件更后的 10/18+999px 胶囊（生效）。删除死定义，单一来源 = 胶囊 10/18（与 .btn.primary 同形），零视觉变化。② HTML 三处 class="btn sm"（空格，L3849/4142/4914）无对应 CSS → 小号未生效；改为 class="btn btn-sm" 命中既有 .btn-sm（padding 7/14、12px），三个按钮（显示全部 / 看预设 / 清除并重新选择）恢复应有的小尺寸。
✓
字阶跳档（15→22 缺 16–21） 已收敛（2026-10-09）：:root 补 --fs-16~21（16/17/18/19/20/21px），15→22 主缺口闭合、标尺连续（§04 已同步标本）。23–26、28–33 仍属 legacy 大跳档，留待后续；新代码一律用 --fs-*，不散写裸值。
✓
断点集合较碎（1280/1200/1024/900/820/768/734/560/480 共 9 个） 已收敛（2026-10-09）：:root 沉淀命名断点 --bp-mobile:480 / --bp-xs:560 / --bp-phablet:734 / --bp-tablet:768 / --bp-netbook:820 / --bp-md:900 / --bp-laptop:1024 / --bp-lg:1200 / --bp-xl:1280（§10 已列出），供人工对照与 JS matchMedia 引用。 ⚠ 纯 CSS @media 条件不能用 var()——下方各 @media 仍写裸值，未替换为 var(--bp-*)（否则媒体查询整体失效）。真正令牌化需 JS 驱动 matchMedia 或构建步骤，当前零构建，未做（避免破坏）。