这是永乐教育全站的单一可信来源——颜色、字体、间距、组件、动效、模板，所有页面都从这里取规范。每次新建或迭代页面前先来这里对一遍，保证视觉一致性。
永乐教育的视觉语言来自这 3 个关键词。所有设计决策都应回到这里检验。
所有颜色都已定义为 CSS 变量（--accent 等）。新页面只用这里列出的，不创新颜色。
#C8472C / #E1361C）仅限于印刷头盔 logo、印章、Manifesto Deck 的「转折/警句」slide 主题。不作 UI 主色使用——它与全站冷调蓝金体系跳脱过大，禁止用于按钮、链接、CTA 等界面强调。需要"强调"用 --accent (#4A75E5)；需要"警示"用 --gold (#D4A858)。
5 套签名渐变。Hero 用夜→晨，强调用蓝/金，IP 用彩虹环。不创新渐变——需要新方向先提议进规范。
5 套字体 + 明确的使用场景。不要引入新字体——除非有强场景理由。
规则：所有标题级别字重恒定 500，层级靠字号 + 颜色拉开（ink → ink-soft → ink-mute）。letter-spacing 反梯度——大字母 0、小字母正向（提升可读性 + 现代感）。不再用 Noto Serif SC 做标题（避免"古朴/教育老气"）—— 衬线宋体只留给长文阅读体。
永乐的"脸"——RGB 霓虹小球，hover 时眨眼 + 微笑。这是线上正在使用的版本。10+ 种备选与完整 VI 规范见 Logo 实验室。
assets/css/site.css。这 4 个字是品牌的面子。挑一个最匹配气质、最易识别的字体。下方推荐方案是综合考量后的首选。
无衬线 + 500 字重——干净、现代、AI 原生气质。letter-spacing 拉到 .10em 让 4 个字呼吸开。
略粗一档——深色背景或小尺寸下更稳，作为反白场景备用。
思源黑体粗体。海报、印刷、超大字号时备选——视觉分量足。
衬线宋体——偏古朴、教育"老气"，跟 AI 原生气质不符。已弃用为主字标。
中文手写——温度感最强。不适合主字标（识别度弱），适合签名/家长信落款。
主品牌字标（顶栏 / 底栏 / 名片 / lockup）用 Noto Sans SC 500，letter-spacing .08–.10em——干净、现代，跟"AI 原生时代"的气质对齐，避免衬线宋体的古朴/教育老气。
深色 / 小尺寸场景切到 Noto Sans SC 600（多 100 字重换稳定性）。
长文正文（letter / 宣言体）仍保留 Noto Serif SC——那是阅读场景，衬线提升长文可读性，跟"字标"是两件事。
手写体 只用于"签名"和"温度感装饰"（如创始人信件落款的"邱懿武"），慎用。
⚠ ZCOOL 庆科黄油体已弃用 —— 之前推荐的"IP 周边用 ZCOOL"已撤回。圆润手写体跟整体的精确/克制气质冲突，少年 IP 周边也用统一 sans / 配色来差异化，不靠字体玩耍。
基于 8 的倍数。所有 padding/margin/gap 都从这里选，不要用 11px、17px 这种"中间值"。
5 个圆角档位 + 4 个阴影档位。覆盖 99% 场景。
高频小组件——徽章、标签、章节符、分割线。所有 letterspacing / 字号 / 颜色已对齐 --mono + 品牌色板。
.ds-badge.blue|gold|red|ink|outline.24em letter-spacing，主色一般为 --accent。.on → 反白。标准卡片结构 — 编号 + 标题 + 英文小字 + 正文。hover 上浮 + 蓝边。
15px 中文正文，line-height 1.7，颜色 --ink-soft。控制在 2-3 行最佳。
15px 中文正文，line-height 1.7，颜色 --ink-soft。控制在 2-3 行最佳。
15px 中文正文，line-height 1.7，颜色 --ink-soft。控制在 2-3 行最佳。
所有交互组件。全部 CSS 在 site.css 单点定义，HTML 只需 markup + class。
| Class | 用途 |
|---|---|
| .field | 字段容器 (label+input+help/err) |
| .input / .textarea / .select | 3 种文本输入基线 |
| .input.sm / .lg | 两个尺寸变体 |
| .check / .radio | 自绘选择控件 |
| .field.has-error | 触发 err 显示 + 红色 border |
| 状态 | 视觉 |
|---|---|
| Default | paper bg · line border |
| Hover | #fff bg · darker border |
| Focus-visible | accent border + 3px halo |
| Disabled | opacity .45 · cursor not-allowed |
| Error | red-bright border + .04 bg tint |
<div class="field has-error">
<label>邮箱 <span class="req">*</span></label>
<input class="input" value="abc@email">
<div class="err">邮箱格式不正确</div>
</div>| Class | 用途 | ARIA |
|---|---|---|
| .toast.success | 绿 icon · 操作成功 | role="status" |
| .toast.info | 蓝 icon · 信息提示 | role="status" |
| .toast.warn | 金 icon · 警告 | role="status" |
| .toast.error | 红 icon · 错误 | role="alert" |
<div class="toast-region" aria-live="polite">
<div class="toast success" role="status">
<span class="toast-ico">✓</span>
<div class="toast-body">
<strong>已提交</strong>副标题
</div>
<button class="toast-close">×</button>
</div>
</div>报名提交后，我们会在 24 小时内通过邮件联系你确认面试时间。
预约面试为必经流程，由邱懿武老师亲自进行（每个家庭约 45 分钟）。
| Class | 作用 |
|---|---|
| .modal-overlay | backdrop blur + 居中 |
| .modal | 主卡片 · paper bg · 圆角 xl |
| .modal.sm / .lg | 380 / 720px 变体（默认 540px） |
| .modal-header | 标题 + 副标题 + × 关闭 |
| .modal-body | 主内容（可滚动） |
| .modal-footer | 右对齐按钮组 + 可选 .modal-helper 左侧 |
<div class="modal-overlay" role="presentation">
<div class="modal" role="dialog"
aria-modal="true"
aria-labelledby="m-title">
<header class="modal-header">
<div><div class="modal-title" id="m-title">标题</div>
<div class="modal-sub">副标题</div></div>
<button class="modal-close">×</button>
</header>
<div class="modal-body">正文…</div>
<footer class="modal-footer">
<button class="btn ghost-ink">取消</button>
<button class="btn accent">确认</button>
</footer>
</div>
</div>8 个高频小组件——badge · chip · tabs · breadcrumbs · pager · tooltip · progress · divider。全部在 site.css 单点定义，所有页面 import 即用。
<span class="badge success dot">招生中</span><span class="chip is-active">全部</span><button class="tab is-active" aria-selected="true">概述</button><nav class="crumbs">
<a href="…">永乐</a><span class="sep">/</span>
<span class="current">当前页</span>
</nav>少年 CEO 采用 H³-TII 体系培养，每个学员产出 MVP 级真实作品。
<span class="tip" data-tip="解释文案">术语</span><div class="progress"><div class="bar" style="width:68%"></div></div><div class="hr">CHAPTER 02</div>3 档时长 + 2 种缓动曲线。每个交互最多用一种动效。禁止 1s+ 长动画（除非全屏过场）。
完整规范见 Logo 实验室 单独页面（10+ 方案对比 + 品牌应用规范）。
规范：背景 rgba(14,18,32,.35) + backdrop-filter:saturate(180%) blur(30px) · 边框 rgba(255,255,255,.14) · 链接 hover 加 rgba(255,255,255,.10) 背景（鼠标移到链接试试）。
规范：主页滚出 hero 区后，加 .on-paper class 切换为浅色——背景 rgba(255,255,255,.55)，文字 var(--ink)。过渡 250ms。
white‑space:nowrap + flex‑shrink:0。white-space:nowrap——单条链接永远不竖排。规范：nav links 和 nav-cta 隐藏（display:none），"造物云出品"小字隐藏，wordmark 字号收到 13.5px，加 flex-shrink:0 防止挤压。点 burger 弹出 .mobile-menu 全屏抽屉（参考 index.html 第 2069 行）。
| 属性 | 深底（hero 上） | 浅底（.on-paper） |
|---|---|---|
| 背景 | rgba(14,24,55,.45) | rgba(255,255,255,.7) |
| backdrop-filter | saturate(180%) blur(30px) · 两态一致 | |
| border | 1px rgba(255,255,255,.14) | 1px rgba(14,18,24,.10) |
| 阴影 | 0 8px 30px -10px rgba(0,0,0,.35) | 0 8px 30px -10px rgba(0,0,0,.12) |
| wordmark 文字 | #fff | var(--ink) |
| "造物云出品" 副字 | rgba(255,255,255,.55) | var(--ink-mute) |
| nav links | rgba(255,255,255,.72) | var(--ink-soft) |
| link :hover | bg rgba(255,255,255,.10) · #fff | bg rgba(14,18,24,.06) · var(--ink) |
| link .current | bg rgba(255,255,255,.14) · #fff | bg rgba(14,18,24,.06) · var(--ink) |
| CTA 按钮 | var(--accent) → :hover #3D60BD · #fff 文字 · 两态一致 | |
| 过渡 | color/background .25s ease · border-color .25s ease | |
原则：nav 默认深态，滚过 hero 区（或子页面的 page-hero）后加 .on-paper class 切到浅态。
触发条件：IntersectionObserver 观察 hero 元素。hero 离开视口顶部（intersection ratio = 0 且 boundingClientRect.top < 0）→ 加 .on-paper。反之移除。
没有 hero 的页面（如 design-system / logo-lab）→ 永远保持 默认深态，不切。
所有子页面共享同一骨架：顶栏 → 面包屑 → Hero → 章节 N → CTA → 页脚。Hero 风格随主题切换（深空 / 米色 / 渐变），其余结构稳定。
padding:80px 8vw · 内容 max-width:1320px · 居中.crumb · --mono · 11px · .22em · uppercase · 顶部 18px gapclamp(40px,5.4vw,72px) · line-height 1.08 · 主导词用 em 着金/蓝色--ink-soft · max-width 780 · line-height 1.85<section> · 80px 上下 padding · 之间用 border-bottom: 1px solid --line-softclamp(32px,4.4vw,56px) · 编号用 .num (Cormorant italic · 主蓝).sec-lede · 15px · color --ink-soft · max-width 760 · 章节标题下方 14px同一骨架在不同主题下的呈现。点卡片在新标签打开完整页面。
站内 10 类视觉表达：基础 4 种（柱状/折线/环形/轨道）+ 补充 6 种（迷你线/进度/仪表/热力/漏斗/雷达）。色板只用 --accent / --gold / --ink-mute，不引入第四个色——保证全站数据视觉风格统一。
--accent，重点高亮用 --gold。柱宽 24-40px，圆角顶 --r-sm。--gold。下方填充为主色 25% 渐隐到 0。用 Mermaid 文本生成流程图 / 时序图 / 状态机 / 甘特 / 思维导图。全部走永乐主题——节点 8px 圆角、边线 1.5px、字体 Sans，4 个语义色（默认 / accent / gold / dark）。
:::accent 蓝 · :::gold 金 · :::dark 深--ink-mute，不用默认黑色 2px--r-md），跟 .btn / .card 一致--sans 13.5px，跟全站正文统一.ds-mermaid 里，自带 paper 容器 + 右上角小标识flowchart LR
A([识别问题]):::accent
B([研究 + AI 协作])
C{可行?}:::muted
D([做 MVP])
E([用户测试])
F([成品]):::gold
A --> B --> C
C -- Yes --> D --> E --> F
C -- No --> B
LR 横向 · TB 纵向:::accent（开始）或 :::gold（结果）{文} 用 :::mutedflowchart LR
A([识别问题]):::accent
B([研究])
C{可行?}:::muted
F([成品]):::gold
A --> B --> C
C -- Yes --> FsequenceDiagram autonumber participant 家长 participant 系统 participant 老师 家长->>系统: 提交报名 系统-->>家长: 确认 + 面试时段 家长->>老师: 视频面谈 Note right of 老师: 评估 老师-->>家长: 录取通知
autonumber 自动编号每条消息->> 同步 · 虚线 -->> 异步响应Note right of（金色高亮）sequenceDiagram
participant 家长
participant 系统
家长->>系统: 提交
系统-->>家长: 确认stateDiagram-v2 [*] --> 草稿 草稿 --> 待审: 提交 待审 --> 已发布: 通过 待审 --> 草稿: 退回修改 已发布 --> 归档: 6 个月 归档 --> [*]
[*] 表示开始 / 结束stateDiagram-v2
[*] --> 草稿
草稿 --> 待审: 提交
待审 --> 已发布: 通过.done / .default / .active / .crit 全部走 单 hue (accent 蓝) + 透明度分级，不混色.active 加 gold-light 内描边表示"现在".crit 用 red-bright（唯一例外的红色）<div class="ds-gantt" data-kind="GANTT · 排期">
<div class="g-title">12 周排期</div>
<div class="g-section">
<div class="g-s-label">探索期</div>
<div class="g-s-meta">EXPLORATION</div>
</div>
<div class="g-row">
<div class="g-label">选题</div>
<div class="g-track">
<div class="g-bar active"
style="left:8%;width:16%">现在</div>
</div>
</div>
</div><div class="ds-mindmap" data-kind="MINDMAP">
<svg viewBox="0 0 920 540">
<path class="mm-link" d="M…"/>
<g transform="translate(80 110)">
<rect class="mm-node-pill"
width="180" height="60" rx="30"/>
<text class="mm-node-text"
x="90" y="36">科技</text>
<text class="mm-leaf"
x="90" y="92">· AI 协作</text>
</g>
<circle class="mm-root-circle"
cx="460" cy="270" r="78"/>
</svg>
</div><script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
import {yongleMermaidInit} from '/assets/js/mermaid-init.js';
yongleMermaidInit(mermaid);
</script><div class="ds-mermaid" data-kind="FLOWCHART · 报名流程">
<pre class="mermaid">
flowchart LR
A([访问]):::accent --> B([咨询]) --> C([报名]):::gold
</pre>
</div>| Class | 颜色 | 用途 |
|---|---|---|
| :::accent | 蓝（--accent #4A75E5） | 起点 / 关键决策 / 主流程 |
| :::gold | 金（--gold #D4A858） | 成果 / 终点 / 高亮里程碑 |
| :::dark | 深（--ink） | 系统节点 / 不可变状态 |
| :::muted | 纸色（--paper-2） | 支撑性节点 / 决策菱形 |
| :::default | 白底 ink 边 | 其他所有节点（默认） |
style XXX fill:#aaa 硬编码颜色pie — 跟 charts 系统的 donut 重复，统一去 #charts 第 16 节超出 Mermaid 能力 / 美感不够的场景，用下面 6 个自研模板。0 依赖 · 纯 CSS+HTML，跟设计 token 100% 咬合。
按兴趣 + 性格匹配，1 导师带 8 学员，12 周不换。
线下集训 3 天，混龄分组做"非典型作业"，互相认识。
每个孩子提 3 个想做的真实问题，导师协助收敛到 1 个 12 周可落地的项目。
带孩子去做真实采访 / 田野观察，把"我想做的"翻成"用户要的"。
AI 不会偷走提问的人。邱懿武 · 永乐教育创始人 · 致家长信 02
它会放大那些真正在想的人。
| 组件 | 用途 | 替代 |
|---|---|---|
| .ds-vs | 对比 2 个状态 / 时代 / 方案 | 替代"vs/对比"型 inline 文字 |
| .ds-stats | 关键 KPI 数据墙（3-5 个） | 替代 chart bar |
| .ds-timeline | 里程碑 / 历史 / 路线图（5-7 个节点） | 替代 mermaid gantt 在"展示"场景 |
| .ds-matrix | 2×2 决策（紧急/重要 / SWOT） | 替代 mermaid flowchart 在策略场景 |
| .ds-steps | 3-5 步顺序流程，文字解释为主 | 替代 mermaid flowchart 在"教学"场景 |
| .ds-quote | 大引言 / 价值观陈述 callout | 替代普通 blockquote |
14 类标准动画 = 6 基础（fade/lift/meteor/text-swap/pulse/orbit）+ 8 补充（stagger/count/typewriter/blur/parallax/marquee/scroll-progress/morph）。每个页面最多用 3-4 种，避免动画过载。全部尊重 prefers-reduced-motion。
delay 80-150ms。opacity 0→1 + translateY 12px→0。translateY(0→-4|-6px) + 阴影从 sh-1 → sh-2。边框可改 --accent。opacity 0→1→0 + 长距离 translate。opacity .6↔1 + scale 1↔1.15。80-150ms 入场。比单一 fade 更有节奏感。JS 用 el.style.animationDelay = i * 80 + 'ms'。requestAnimationFrame 插值，Math.floor 显示。用于落地页"成就墙"。1s steps(1)。完成后光标消失。慎用——阻塞用户阅读，长句体验差。filter:blur(12px)→0 + opacity 0→1，比纯 fade 更有"清晰浮现"的电影感。rotateX/Y ±15°。mouseleave 回正 400ms。仅桌面——触摸设备禁用（@media (hover:none)）。transform:translateX(-50%) 无缝循环。鼠标 hover 暂停。scrollY / pageHeight。提示阅读进度。色阶 accent → gold（同 grad-gold）。border-radius / scale / background 同步过渡。SVG 用 d 属性 morph（GSAP MorphSVG 或 CSS clip-path）。@media (prefers-reduced-motion:reduce) 关闭。scroll 事件。transform + opacity（GPU 友好），避免 width/height/top/left。用前端 HTML 做 PPT —— 沉浸式、全屏、一页一画。"少年 CEO 宣言" 是该模式的样板。键盘 / 鼠标 / 触控全支持。设计上跟普通子页面完全不同：无导航条、无页脚、logo 只放一处。
百分比 = 一套 deck 里建议的使用配比。深空 70% 打底，米色穿插长文，红/金保留给高潮时刻。
<div class="deck"> → N 个 <section class="slide [theme] [center]">。.active 控制当前页显示。.center 让内容水平居中。.slide-inner · max-width 1280 · padding 80px 8vw · 文字左对齐为默认。clamp(28px,4.2vw,52px) / line-height 1.15。重音用 <em> → 金色（深底）或蓝色（浅底）。.ui-bar 底部居中胶囊：← page/total → + 细金进度条。背景半透明黑 + backdrop-blur。.brand-home（logo + 永乐教育 + ← 返回）= clickable home。nav.top 和 <footer> 全不挂载。完整阅读体验由 deck 内部承担。.brand-home .back"← 返回"字隐藏，只留 logo + 品牌名。不要一套 deck 全是大字 — 用 25 种版式交替编排，节奏才丰富。L1-L8 文字型 · L9-L12 数据可视化型 · L13-L20 进阶型 · L21-L25 编辑设计型（杂志刊头 / 海报标语 / 便签 / 堆叠胶囊 / 中英双栏）。每种都有自己的 .slide.l-XXX class 标记。
把 L21-L25 + 通用动画抽成 14 个命名组件，每个用 .ds- 前缀。HTML 直接套，不用从零写。
<section class="ds-stage dark">
<span class="ds-slide-num">02 / 08</span>
<div class="ds-stage-inner">
内容…
</div>
</section>变体: .paper / .dark / .gold / .red，自带 star particles（dark）+ 右上 slide 编号槽
<div class="ds-kicker">CHAPTER 01</div><div class="ds-masthead">
<div class="ds-rule thick"></div>
<div class="ds-issue">第 02 期</div>
<div class="ds-title">永乐<em>年鉴</em></div>
<div class="ds-rule"></div>
</div><div class="ds-pin-note">
<div class="ds-pn-text">"引言…"</div>
<div class="ds-pn-attr">— 来源</div>
</div>变体: .right 正向旋转；hover 自动回正
<div class="ds-pill-stack">
<div class="ds-pill dark">少年 CEO</div>
<div class="ds-pill accent">AI IP 营</div>
<div class="ds-pill gold">家长共学</div>
</div><div class="ds-poster">
让<em>建造</em>，<br>从少年开始。
</div>
<div class="ds-poster-sub">Let creation…</div><div class="ds-bilingual">
<div class="ds-bi-cn">让创造者…</div>
<div class="ds-bi-divider"></div>
<div class="ds-bi-en">Let creators…</div>
</div>变体: .dark；窄屏自动叠成单列
<div class="ds-frame accent">
内容
</div>| Class | 效果 | 取自 |
|---|---|---|
| .ds-anim-fadeup | opacity 0→1 + translateY(28px→0) | broadside · kFadeUp |
| .ds-anim-fade | 纯 opacity 0→1 | broadside · kFadeIn |
| .ds-anim-reveal-r | clip-path 从右→左展开 | broadside · kRevealRight |
| .ds-anim-reveal-l | clip-path 从左→右展开 | broadside · kRevealLeft |
| .ds-anim-scale | opacity + scale(.94→1) | broadside · kScaleIn |
style="--i:1"（数字 0-9）自动 100ms 递增延迟。
每张 slide 可挂一份 <aside class="notes">，默认隐藏。按 N 弹出 speaker view：当前 slide + 注解 + 下张预览 + 计时器。
公开 deck（manifesto.html）不放敏感 notes；内部 deck 才用。
每 5-7 张 slide 插一张全屏 .slide.divider — 大数字章节号 + 短语。给观众"换气"。
模板：CHAPTER 02 · 培养系统 横排，背景用 grad-night / grad-dawn 切换。
用同一套规范预制好 8 套适用不同场景的整 deck 模板，做新 deck 时挑一个直接 fork，不必从零拼。宣言 · 极简授课 · 品牌发布 · 事件海报 · 课程报告 · 学术汇报 · 工作坊 · 杂志编辑。
深空主导 70% + 红 8% + 金 7%。情绪起伏大，适合品牌宣言、价值观陈述、招生发布会开场。
米色 paper 主导 90%，深空仅章节封面。大段留白 + 编号列表 + 流程图。适合课程讲义、方法论拆解、技术细节。
深空 + 紫渐变。每页一个"hero 视觉元素"（霓虹球 / 头盔 / 数字 / 引言）。含数据图表、团队网格。适合融资路演、招商合作、对外发布。
少 5-8 张，每张色彩饱和、字号巨大、像海报。深→红→金的色彩升温叙事。适合校友夜、产品发布、节日特典。
深空 + 米色交替。图表 / 流程 / 时间线 / 网格四种可视化轮番出场——少年作品产出、家长反馈数据、季度路线图。适合家长会、董事会、年终总结。
米色 paper 90% + 章节编号 + 衬线大字号 + 脚注引用。代码块、表格、参考文献规范化。适合学术会议、论文答辩、研究成果汇报、技术 talk。
金/橙暖色主导 + 大计时器 + 任务卡 + Q&A 留白。每张含一个练习任务。适合家长工作坊、教师培训、少年破冰、训练营 day 1。
米色 paper + 双线刊头 + 衬线大字号 + 引文卡 + 便签注解。像杂志。适合年终回顾、季度刊物、品牌年鉴、家长通讯。
左上 .brand-home 旁挂一个 9 点 grid 圆按钮 — 点开左侧 slide 出全部缩略图列表，跳页快捷。每个缩略图带主题色色带和首行文字摘要，当前页加金色高亮。
规范：面板宽 340px / 移动端全宽 · 背景 rgba(8,15,38,.96) + blur 30px · 滑入 350ms ease · 半透明遮罩点击关闭 · Esc 关闭 · 每行缩略图左侧 3px 色带 = slide 主题（深空/米色/红/金）· 当前页加金色高亮 + 滚动居中 · 点击直接跳转那页并收起面板。
14 张 slide · 深空主导 · 红/金穿插 · 现已支持左上 9 点圆按钮 → 缩略图总览跳页。基于本规范实现的完整样板。
这套设计系统可以直接 fork 给其他项目。下面是迁移到新品牌的标准步骤——理论上 30 分钟就能换品牌完毕。
cp assets/css/site.css new-project/
cp llms.txt sitemap.xml new-project/
cp robots.txt new-project/site.css 是单一可信源——所有 token、组件、a11y、动画都在这一个文件里。1300 行带完整注释。
:root{
--accent:#YOUR; /* 主品牌色 */
--gold:#YOUR; /* 高光色 */
--night-0..3:#YOUR; /* 深色场景 4 档 */
--paper..paper-3:#YOUR;/* 米色场景 4 档 */
--ink/--ink-soft/--ink-mute /* 文字 3 档 */
}改这 5 组（约 20 个 hex），整站颜色全部更新。不要新增颜色，永远从这里选。
/* logo 在 site.css 的 .yongle-logo 块 */
.yongle-logo{
/* 改 conic-gradient 颜色环 */
background:conic-gradient(...)
}
/* 字体在 :root */
--serif: 'YOUR_SERIF';
--sans: 'YOUR_SANS';logo 改名 → 把 .yongle-logo 改成 .brand-logo，全局 grep 替换。
<nav class="top" role="navigation"
aria-label="站点导航" id="topnav">
<div class="wordmark">...</div>
<ul>改你的 8 个菜单项</ul>
<a class="nav-cta">CTA</a>
</nav>从 alumni.html 复制 nav + footer + mobile-menu 三块标准模板，全站统一。
/design-system audit用 Claude Code 的 /design-system audit 技能跑一次评分。目标 90+/100。常见扣分：硬编码颜色 / 重复 :root / `!important` / 缺 role。
| 类型 | 命名 | 例 |
|---|---|---|
| 原子组件 | .单数名词 | .btn / .field / .toast / .modal |
| 变体 | .父.变体 | .btn.accent / .toast.success |
| 尺寸 | .父.sm/.lg/.xl | .input.lg / .modal.sm |
| 状态 | .is-状态 或 [aria-*] | .is-active / aria-selected="true" |
| 子部分 | .父-部分 | .modal-header / .toast-body |
| 布局工具类 | .动词-名词 | .body-content / .preview-spec |
| 系统专属 | .ds-前缀 | .ds-btn-demo / .ds-td-mono |
| 分类 | 前缀 | 层级 |
|---|---|---|
| 颜色 · 品牌 | --accent / --gold | 无后缀 = 主，-deep -light 加深加亮 |
| 颜色 · 中性 | --ink / --paper / --line | -soft -mute 减弱，-2 -3 数字层次 |
| 间距 | --s-1..--s-10 | 8 倍数阶梯（4/8/12/16/24/32/48/64/96/128） |
| 圆角 | --r-sm/md/lg/xl/pill | 5 档：4/8/12/18/99 |
| 阴影 | --sh-1..--sh-4 | 4 档浮起强度 |
| 动效时长 | --t-fast/base/slow | 150/250/400ms 三档 |
| 字体 | --serif/sans/mono/latin/hand | 5 种用途 |
| 渐变 | --grad-night/dawn/gold/accent/rainbow | 5 套签名渐变 |
project-root/
├── assets/
│ └── css/
│ ├── site.css ← 单一可信源（token + 通用组件 + nav + footer）
│ └── home.css ← 首页专属（hero 动画 / 章节布局）
├── index.html ← 首页
├── design-system.html ← 这份文档（fork 时一并搬过去）
├── logo-lab.html ← logo 实验场（可选）
├── manifesto.html ← 旗舰 deck 示范
├── <子页面 ×N> ← 内嵌 <style> 仅页面专属 CSS
│ └── 必须包含：
│ • <link site.css>
│ • <link rel="sitemap">
│ • <nav class="top" id="topnav">
│ • <footer class="site">
│ • mobile-menu drawer
├── llms.txt ← LLM 爬虫提示
├── sitemap.xml ← SEO 站点地图
└── robots.txt ← 含 Sitemap: 声明每次新建子页面，复制下面这段 head + nav + footer：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>页面标题 · 品牌名</title>
<meta name="description" content="..." />
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />
<link rel="stylesheet" href="assets/css/site.css" />
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
<style>
/* 仅此页面专属样式 — 通用样式去 site.css */
</style>
</head>
<body>
<nav class="top" role="navigation" aria-label="站点导航" id="topnav">
<!-- 8 项菜单 + CTA -->
</nav>
<div class="mobile-menu" id="mobileMenu">...</div>
<main>
<!-- 你的页面内容 -->
</main>
<footer class="site" role="contentinfo">
<!-- 4 列 .ft-grid -->
</footer>
<script>
/* burger toggle + scroll observer */
</script>
</body>
</html>这些事在设计或代码评审时无条件 reject。
white-space:nowrap，竖屏 ≤1280px 走 hamburger。