维护者文档 · Design System
这一页把 /（介绍页）用到的东西列全：颜色变量、字体栈、玻璃材质、
环境光与颗粒、组件、动效与可达性。它的来历是 PR #4（作者的设计）——我们收下了他的视觉语言与结构，
这一页也是"改介绍页时要跟着改"的对照物。
给维护者看：不索引（noindex）、不在主导航里，页脚有个小入口。
对比度是按本页画布 #eae9e7 用 WCAG 公式实算的（不是估的）。
--bg
#eae9e7 · 页面底色--bg-deep
#dcdad6 · 备用--fg
#2b2b2b · 11.67:1 ✓--muted
#5d5b57 · 5.58:1 ✓--accent
大字号/线条/按钮底 · 4.62:1 ✓--accent-strong
链接与小号红字 · 6.56:1 ✓--ok-ink
#0d5b41 · 6.68:1 ✓--warn
#8a5a12 · 4.87:1 ✓--mark
首屏那句话的底（压在深色字下）--glow-blue
光斑用，不当文字--glow-grey
光斑用，不当文字--ink-dark
#141414 · 其上是 #f2f1ef（16.32:1 ✓）| 他们那支 | 问题 | 我们怎么做 |
|---|---|---|
--link #1eaedb「链接青」 |
当文字色只有 2.13:1（设计规格里按它的底层色实测 1.71:1）——远低于 AA 的 4.5:1 | 链接一律用 --accent-strong（6.56:1）；青色只留在环境光斑里（不当文字） |
#fff200 当状态色（量表/圆点） |
在浅底上只有 1.01:1，等于看不见 | 荧光笔只当背景（深色字压在上面），状态一律用文字 + 形状（我们的 chip） |
不引外部字体：CSP 是 default-src 'self'（外部字体根本加载不出来），
而且不该把访客 IP 交给字体 CDN。中文本来就走系统字体。
系统无衬线栈：--sans。
中文依次落到 PingFang SC / 微软雅黑。
衬线栈：--serif。
介绍页里只用在信末落款那一行。
等宽栈：--mono。
用在 code 与 bento 卡的编号（01 · 重要）。
首屏 clamp(38px,7.4vw,76px)／章节 clamp(25px,3.6vw,40px)／
小标题 18px。字距负一点（-.028em～-.04em）。
外壳 40px / 内芯 32px 的同心圆角，磨砂 backdrop-filter: blur(18px) saturate(1.7)，
一圈内亮边 + 一层细边。镜面高光用两个可插值属性 --gx/--gy 跟着指针走。
把鼠标移到这块卡片上，高光会跟着走（300ms 过渡； 系统里选了「减少动态效果」时不动）。
同一个材质的小号版本，圆角用内芯那一档（32px），
hover 抬升 3px（.lift）。
玻璃要有可折射的东西才存在：四个模糊光斑在漂移 + 一层 SVG 噪点当颗粒
（feTurbulence，opacity .11）。没有这一层，backdrop-filter 磨的就是一片纯色。
| 层 | 参数 |
|---|---|
| 光斑 | 640–820px 圆，filter: blur(30px)，27–42s alternate 漂移 |
| 颗粒 | data URI 的 SVG 噪点，opacity:.11（CSP 允许 img-src data:） |
| 层级 | 光斑在 z-index:0，内容在 z-index:1 之上；减少动效时停漂移 |
主按钮实心红（白字 5.6:1）；次按钮白底描边；第三条是文字链。 首屏只放"一个实心 + 一个白底 + 一条文字链" —— 三颗实心会有一个被挤到第二行，看不出主次。
三档来自应用界面真实的分法（
app.js 的 importanceLabel）：重要 / 一般 / 低。
不是作者设计里那套「紧急 / 较急 / 常规」。
content、宽度、背景与文字留白list-style:none）教务处 图书馆
一行 22px 的方块，只用首字（不写全名）：
它让「这几封是同一个人发的」一眼看得出来，又不会因为名字长短把行撑开。
它是纯装饰（aria-hidden）——同一行里紧跟着就是发件人的名字。
表单只有三件事要说清：标签在控件上方
（不拿 placeholder 当标签——输入之后它就没了）、输入框字号 16px
（iOS 上小于 16px 会在聚焦时把整页放大）、聚焦描边用 --accent 加一层柔光
（:focus-visible，所以鼠标点击不会平白多一个框）。
整页只有三种骨架，尺寸都是量出来的：单列正文（.wrap
1250px、24px 边距）、首屏两栏（1fr 1fr，窄屏并成一栏）、
以及 bento 六列（跨列 span-2/3/4、跨行 row-2）。
窄屏那一档必须把 grid-row 一起 reset，否则一张跨行卡会空出一大块。
1.06fr.94fr旁边两张各占一行，bento 的错落感就是这么来的。
默认宽度。
默认宽度。
与上面那张 row-2 的第二行并排。
同一个材质、反过来的墨色。
介绍页里给「宽卡」用的那一档。
| 用途 | 曲线 |
|---|---|
| 一般过渡（颜色、位移） | --ease: cubic-bezier(.32,.72,0,1)（长尾） |
| 回弹（按钮、卡片、抽屉） | --spring: cubic-bezier(.16,1.16,.3,1) |
| 玻璃高光跟随 | 两个 @property 注册的属性，300ms 过渡（不注册就没法插值、会跳变） |
| 滚动进入 | 纯 CSS 的 animation-timeline: view()；不支持就当静态页（没有把内容默认设成透明） |
| 减少动效 | prefers-reduced-motion 下：光斑停漂移、高光不跟指针、跑马灯停 |
深色块用 --ink-dark，正文 --ink-dark-fg（16.32:1）。