harrisliangsu Dark Tech Style
一套用于构建暗色科技风 HTML 页面的设计系统。提取自一份高质量架构全景页，覆盖架构图、技术全景、Landing、Dashboard、Roadmap 等场景。
使用方式
总是优先采用 assets/tokens.css 中已定义的 token 和组件类，不要重新发明颜色或圆角。如果用户没有特别指定风格但要做一个偏技术调性的页面，就把这套风格作为默认。
最快路径：
- 读
assets/tokens.css，把整个:root { ... }块和重置/基础部分原样塞进<style> - 参考
assets/starter.html的结构，按需要的章节挑选组件拼装 - 如果用户给了内容，把内容填入这套结构；不要为了"丰富"而无中生有加章节
风格指纹（一段话理解）
近黑三级背景（#0a0c14 → #10121c → #161924），几乎不可见的 6% 白色边框（hover 升到 12%），超粗 800 字重 + 强烈负字距（-0.02em ~ -0.03em）的大标题，配 7 色高亮系（橙/蓝/绿/金/紫/红/青）每色都有 15% 透明的 dim 变体作软背景。每个 section 都有「11px UPPERCASE kicker 标签 + clamp 大标题 + 二级文字副标题」三件套。数字和关键词用 135° 渐变文字。导航玻璃态（backdrop-blur 20px）。卡片 14px 圆角，hover 边框透明度上升。代码/文件名等宽字体，正文 SF Pro / PingFang。
设计 Token 速查
读完 tokens.css 你就有了，这里是关键速查：
背景（从外到内越浅）--bg-deepest → --bg-surface（用作内嵌面板/tab/代码块背景）→ --bg-card → --bg-card-hover
文字 --text-primary（标题/数据）→ --text-secondary（正文）→ --text-tertiary（说明/scrollbar）
边框 --border（默认）→ --border-hover（hover）
高亮 7 色：--accent-{orange,blue,green,gold,purple,red,cyan}，每个都有对应的 -dim 变体（15% 透明）。给每个 section / 类别选一个固定颜色，不要在同一个 section 里混色。
圆角 --radius: 14px（卡片）/ --radius-sm: 8px（按钮、小标签）
颜色使用法则
这是这套风格最容易做坏的地方，请认真对待：
- 每个 section 或类别绑定一种 accent。比如「需求阶段」用 orange，「编码阶段」用 green，「审查阶段」用 purple。同一类别里所有元素（kicker 颜色、卡片左边框、徽章、icon、数字渐变）都用这一种 accent。
dim变体只用作软背景（badge 底色、icon 容器底色），不要用作文字。- 白色文字不要纯白，用
--text-primary(#e2e5ef)，纯白会和 800 字重叠加显得过亮刺眼。 - 不要新发明颜色。如果觉得 7 色不够用，先想想是不是 section 切得太细了。
- 状态语义：成功 = green，警告 = gold，错误/硬约束 = red，信息/链接 = blue，进度/演进 = purple。
标准组件清单
tokens.css 已经定义好以下组件类，直接用：
| 组件 | 类名 | 用途 |
|---|---|---|
| 玻璃态导航 | .nav .nav-logo .nav-links |
顶部 56px 固定导航 |
| Hero 容器 | .hero .hero-badge .hero-desc .hero-stats |
首屏，自带椭圆光晕 |
| 渐变文字 | .grad-{orange,blue,green,purple} |
数字、关键词高亮 |
| Section 三件套 | .section-label .section-title .section-subtitle |
每个章节的头部 |
| 卡片 | .card + 可选 .card-rail-{color} |
主要容器；rail 版有 3px 左边框 |
| 网格 | .grid-2 .grid-3 .grid-4 |
768px 以下自动单列 |
| Tab 切换 | .tab-bar + .tab-btn / .tab-btn.active |
多视图切换 |
| 徽章 | .badge |
11px 小标签，背景用 -dim 配色 |
| 类别圆点 | .pillar-dot |
10px 实心圆，标识类别色 |
| 时间轴 | .timeline-item .timeline-num .timeline-line |
数字圆角 + 垂直连接线 |
| 进度条 | .progress-bar .progress-fill |
6px 高，1s 动画 |
| 流水线箭头 | .flow-container .flow-phase .flow-arrow |
横向阶段流 |
| 终端 mock | .terminal .terminal-header .terminal-body .terminal-prompt |
三圆点 header + 等宽命令体 |
| 动画 | .fade-up、@keyframes pulse |
进场动画、状态点呼吸 |
章节模式（按需挑选）
一个完整页面常见的章节顺序，不需要全部都用，按内容多少挑：
- Hero：badge → 大标题（一段渐变 + 一段普通）→ 一句话描述 → 4 个 stat 数字
- Executive Summary：2×2 卡片网格，每张卡片一个 pillar-dot + 标题 + 一段说明
- Tab + Detail：顶部 tab 切换不同维度，下面动态展示当前 tab 的卡片详情
- Pipeline / Flow：横向阶段卡 + 箭头连接，可点击展开详情
- Layered Architecture：纵向层叠卡片，每层
.card-rail-{color}+ 内嵌.grid-3列出文件/模块 - Three-pillar / Defense-in-depth：3 列卡片，每张大 emoji + 彩色标题 + 说明
- Maturity Model：纵向卡片列表，当前等级用边框加粗标记 + "当前位置" 徽章 + 进度条
- Gap Analysis：CSS Grid 模拟的紧凑表格（48px 序号列 + 110px 名称 + 80px 等级徽章 + 1fr 已有 + 1fr 待建）
- Roadmap / Timeline：
.timeline-item串联，每个阶段下嵌套子任务卡片 - Distance Radar：6 项维度，每项一个进度条 + 已建/待建并列两栏
- KPI：3 列分组，每组一个标题色 + 多个 "名称 / 大数字 / 描述" 行
- Quick Start (Terminal)：
.terminalmock，命令前缀$，命令体绿色等宽 - Footer：1px 上边框 + 居中两行小字（品牌 + 作者/年份）
字体规范
- 西文 + 中文默认：
-apple-system, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif - 代码 / 文件名 / 命令：
'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace - 大标题：
font-weight: 800，letter-spacing: -0.02em到-0.03em，line-height: 1.1~1.2 - kicker 标签：
font-size: 11px，font-weight: 600，letter-spacing: 0.12em，text-transform: uppercase - 正文行高：
1.6（紧）到1.7（描述/段落）
实施流程
接到一个页面需求时：
确认结构：把用户内容拆成 3-8 个章节，从「章节模式」清单里挑对应组件。如果用户给的是一篇文档，先把信息分组（核心理念 / 架构 / 流程 / 数据 / 路线图 / 安装），每组对应一个章节。
绑定颜色：给每个章节/类别分配一个 accent，写下来不要混。一般 hero 用 orange/blue（暖/冷调主导），后续章节按语义分配。
拼装页面：粘贴
tokens.css内容到<style>，参考starter.html拼装章节，保留 inline style 的格式风格（这套风格大量使用 inline style 来精细控制颜色变体，不需要为此抽 class）。填内容：用户给的具体文案 / 数字 / 模块名直接填进去。不要为了对齐而编造数据。
检查：
- 全部颜色都来自 token 吗？（grep 找硬编码 hex）
- 每个 section 有 kicker 三件套吗？
- 大标题字重 800 了吗？
- 数字用渐变了吗？
输出格式
默认输出单文件 HTML（CSS 内联在 <style> 里），方便用户直接 open 预览。如果用户特别要求或页面规模很大（>1500 行），可以拆出 tokens.css 单独引用。
复杂交互（tab 切换、点击展开）默认用 React 18 + Babel CDN（参考原始风格的实现）。简单静态页用纯 HTML+CSS 即可，不要为了静态展示引入 React。
反模式
- 不要用 Material Design / Bootstrap 的颜色（蓝色不是
#1976d2，是#3b82f6） - 不要用纯黑
#000作背景，会显得廉价；用--bg-deepest(#0a0c14) - 不要给卡片加阴影；这套风格用边框透明度，不用 box-shadow
- 不要用 emoji 作为主要图标系统；如果需要图标，用 lucide / feather 风格的线性 SVG（stroke-width 2）
- 不要让 section padding 小于
60px 24px；信息要呼吸 - 不要在同一个 section 里混用多个 accent；混色 = 失败