SkillOps 设计系统

原则

功能决定形式，装饰归零

rams 主题主动关掉了 aurora、噪点、光线、粒子四种装饰（display:none）。深色主题保留氛围，品牌主题不留一点。有疑问时删掉它。

纸感的底，一处橙

cream #fbfaf6 是纸，不是白。全站只有一个强调色 #e2522a，用在标题重音、主按钮、S 段。品牌色锁定，不改。

小写做标题，等宽做数据

展示级标题一律 text-transform:lowercase + 负字距——这是本系统最易辨识的签名。分数、段位、命令、ID 一律等宽字体。

发丝线分隔，不用阴影

层次靠 --line / --hairline 两级描边和底色深浅，不用投影。全站零 box-shadow 是有意的。

无障碍是硬约束，不是补丁

已为对比度改过三处 token（见 §07）。品牌橙用于大字和按钮；小号链接文字改用更深的 --link。好看不能压过能读。

色彩

三套主题：rams（默认，品牌）· dark（氛围）· light（中性）。本页此刻正用其中两套——切换你系统的深浅色即可看到。以下色卡随当前主题实时变化。

底与字

--bg

#fbfaf6 / #0b0d0c

页面底色

--bg-soft

#f3f1ea / #131614

凹陷区、表头、演示区

--bg-card

#ffffff / #181b19

卡片、浮起面

--text

#161616 / #ebe6db

正文；也是次按钮描边

强调与语义

--accent

#e2522a / #d4a574

品牌橙 · 重音、主按钮、S 段。锁定

--link

#bf4520

小号链接专用（≥4.5:1）

--green

#2f7d6b

健康 · A 段

--amber

#6b7536

关注 · B 段

--red

#c0492c

退化 · 危险 · D 段

--muted

22,22,22 / .72

次要文字

--field-border

22,22,22 / .30

表单边界（WCAG 1.4.11 ≥3:1）

--line

22,22,22 / .12

常规分隔线

语义色的纪律

强调色 ≠ 语义色。橙只表示"品牌重音 / 最高段位"，绿黄红只表示状态。二者不混用。
状态永远同时用形和色。段位徽章带字母、绩效带文字标签——不靠颜色单独承载信息（色盲可读）。
深色主题不是反转。强调色从橙 #e2522a 换成金 #d4a574——橙在深底上会发闷、对比不足。

排版

三个字族：Space Grotesk（展示+正文）· Noto Sans SC（中文）· JetBrains Mono（数据/命令/标签）。线上从 Google Fonts 加载。注意：本页若在受限环境（如 Artifact 沙箱）打开，字体会静默回落到系统字体，尺度与字重仍准确。

技能人事部

.h-display · clamp(48px, 9vw, 144px) · 500 · ls -0.025em · lh 0.92 · lowercase

把每个技能当员工管

.h-2 · clamp(28px, 3.6vw, 56px) · 500 · ls -0.02em · lh 1.08 · lowercase

盘点 · 落户 · 调度 · 考核

.h-3 · clamp(20px, 1.8vw, 28px) · 500 · ls -0.01em · lh 1.15

技能真身永远是你自己的 SKILL.md 文件夹。索引只是缓存，过期就重扫。

正文 · 15px · 400 · lh 1.65 · 行宽 ≤68ch

SKILL MANAGEMENT STANDARD

.eyebrow · mono 11px · ls 0.18em · uppercase · --muted

skillops scan → 41 技能 / 7 卷 · 分歧 1

.mono · JetBrains Mono · 分数/命令/ID/段位一律等宽

两条规矩

展示级标题小写（h-display / h-1 / h-2），配负字距。中文不受影响，但英文与产品名一律小写——这是签名。
标题字重只到 500。不用 700/800 制造层级，层级靠字号跨度（144px vs 28px）而非加粗。

间距与栅格

本页新提

hub.css 只有 --max 与 --pad 两个布局 token，其余间距全是散值。下表是从现有代码里归纳出的 8px 基准尺度，建议补进 :root。

Token	值	典型用途
--s1	4px	图标与文字间隙、微调
--s2	8px	标签内边距、紧密行间
--s3	12px	按钮组间隙、卡片内小间距
--s4	16px	段落间距、栅格 gap 默认
--s5	24px	卡片内边距
--s6	32px	子区块间距
--s7	48px	章节内大间隔
--s8	64px	章节间距（窄屏）
--s9	96px	章节间距（宽屏）、页头
--max	1440px	内容最大宽（文档页建议 1120px）
--pad	clamp(20px,4vw,64px)	页面左右留白 · 已存在

布局一律用 flex/grid + gap，不用逐元素 margin——避免外边距塌陷与双倍间距。

圆角 · 描边 · 动效

本页新提

现状：hub.css 里出现了 7 种不同圆角（999px×14、50%×8、4px×4、3px×4、8px×3、2px×2、6px×1）且没有任何 token。收敛成四个：

--r-sm · 3px

输入框、标签、代码

--r-md · 8px

卡片、表格、面板

--r-pill · 999px

按钮、徽章、段位

--r-circle · 50%

头像、色点、图标钮

描边两级

--line（12%）—— 常规分隔：卡片、表格、区块。
--hairline（6%）—— 更轻的内部分隔：表格行、列表项。
--field-border（30%）—— 只给表单，WCAG 1.4.11 要求非文本边界 ≥3:1；分隔线保持轻盈不受此约束。

动效

现状散落 .2s / .15s / .12s 三种时长，无 token。建议：

Token	值	用途
--dur-fast	.12s	颜色、图标即时反馈
--dur-base	.15s	默认：hover、focus
--dur-slow	.2s	按钮底色反转等较大变化
--ease	cubic-bezier(.4,0,.2,1)	统一缓动

禁止 transition: all（现有 5 处）——显式列出属性，否则布局属性也会被动画化，造成卡顿。并且必须尊重 prefers-reduced-motion。

组件

按钮

变体	用在哪	规格
.primary	页面唯一主行动	橙底 / 白字 → hover 反转为描边
默认	次级行动	text 描边 → hover 反色填充
.ghost	取消、次要出口	line 描边 / muted 字
.sm	密集区、表格内	7px 14px · 11px

规矩：一屏只有一个 .primary；按钮文字用动词（"开始盘点"而非"确定"）；全部 mono 字体、胶囊圆角；焦点态必须可见（outline: 2px var(--accent)）。

段位徽章（SMS 专属）

S 86+ A 76–85 B 64–75 C 50–63 D <50

这是产品最独有的组件：SMS 评级的可视化。底色 = 语义色 12%，描边 = 30%，文字 = 纯语义色。 S 段用品牌橙——这是强调色唯一被允许承担语义的地方（旗舰资产 = 品牌代表作）。徽章永远带字母，不靠颜色单独传达段位。

卡片 · 表单 · 标签

未落户分身分歧

卡片

--bg-card 底 + --line 描边 + --r-md 圆角 + --s5 内边距。 不加投影——与底色的明度差已足够。

表单

边框必须用 --field-border（30%）而非 --line（12%）—— 后者达不到 WCAG 对交互控件边界的 3:1 要求。

无障碍

这套系统已经为对比度改过三次，代码注释里留着记录。这些不是建议，是既成约束。

Token	改动	原因
--muted	.56 → .72	原 4.09:1 未达标，现约 5.4:1
--faint	.40 → .60	原约 2.5:1，现约 4.7:1
--field-border	新增 .30	WCAG 1.4.11 非文本对比 ≥3:1
--link	新增 #bf4520	品牌橙做小号正文链接不足 4.5:1

品牌橙的使用边界：大字（≥24px）、按钮、装饰可用 --accent；小号正文链接必须用 --link。
焦点可见：所有可交互元素 :focus-visible 有 2px 强调色描边，不允许 outline:none 裸奔。
不靠颜色单独传意：段位带字母、状态带文字标签。
尊重减动偏好：prefers-reduced-motion 下关闭全部过渡与动画。

审计发现

对 xiaoneng/hub.css（1723 行）的实测结果。按修复优先级排序。

段位色的 fallback 与真实 token 不一致已修复

.tier-A 写的是 var(--green, #4a9b8a)，但 rams 主题里 --green 实际是 #2f7d6b。更糟的是 .tier-B 在两处有两个不同的 fallback（#8a9250 与 #a8b56c），而徽章底色 rgba(74,155,138,.1) 是从旧绿色硬编码来的——底色和文字色来自两个不同的绿。

已改：删除全部 fallback，底/描边/字改用 color-mix 从同一 token 派生；补上缺失的 .tier-D 规则。连带查出一个隐藏缺陷：dark 主题与 :root 从未定义 --green/--amber/--red——删掉 fallback 后深色徽章会失色，已一并补齐（深底用更亮的明度）。另加一行降级兜底，老浏览器不支持 color-mix 时得到中性底而非透明。

两套按钮系统并存高

.btn（12px / 10px 18px）与 .btn-primary+.btn-outline（13px / 14px 24px）是两套独立实现，视觉规格不同却承担同样角色。同一页面若混用，尺寸会明显打架。

修：保留 .btn + 修饰类一套，.btn-primary/.btn-outline 标记废弃并迁移。

间距 / 圆角 / 动效三类 token 完全不存在已修复

实测命中 0 处 spacing / radius / duration 变量。所有间距是散值，圆角有 7 种，时长有 3 种。这意味着任何新页面都在重新发明间距，一致性只能靠人肉记忆维持。

已改：--s1..--s9、--r-sm/md/pill/circle、--dur-fast/base/slow、--ease 已写进 hub.css 的 :root。纯增量，现有视觉零变化——存量代码不受影响，新代码一律引用。

transition: all 出现 10 处中 · 待办

会把 width/height/padding 等布局属性一并动画化，触发重排、造成掉帧。分布：.2s×5 · .15s×2 · .12s×3。

暂不动：把 all 换成显式属性清单，可能误删某处本来依赖的过渡（如已有代码里出现过 padding-left 动画）。这需要逐处在浏览器里比对前后效果，属于有视觉风险的改动—— 待能在线上逐页核对时再做。新代码请直接用 --dur-* + 显式属性。

做得好的：无障碍已成体系保持

对比度改动都带注释说明改前改后和原因；--link 与 --accent 的分工（小字用深、大字用亮）是成熟做法。这套纪律应该延续到新组件。

做得好的：主题切换是 token 级保持

三套主题只重定义变量、不重写组件，rams 额外用 display:none 关掉装饰层。这是可扩展的正确结构——加第四套主题只需加一个变量块。

优先行动

~~1 · 补三类 token 到 :root~~ —— ✓ 已完成，纯增量零视觉变化。
~~2 · 修段位色同源问题~~ —— ✓ 已完成，连带补齐 dark 主题缺失的语义色。
3 · 合并两套按钮——废弃 .btn-primary/.btn-outline，迁移调用点。需逐页视觉核对。
4 · 清 transition: all——10 处，需逐处比对前后效果。
5 · 存量代码换 token——把散落的间距/圆角值逐步替换成 --s* / --r-*。
6 · 把本页挂到线上 skillops.tech/design-system/，作为团队与外部开发者的对接口径。

1、2 已改在本地 xiaoneng/hub.css（已提交 git）。尚未部署到线上——部署需另行确认。