Pixel Portfolio 风格
一套完整的视觉与动效系统。请严格遵循。当此文档未覆盖某情况时，请选择更安静、更圆润、更具几何感的方案——切勿引入新颜色、新字体、新圆角或新的缓动曲线。
不可妥协项（每次必读）
- 仅使用两种字体。 像素显示字体用于部分标题和英雄区关键词。无衬线几何字体用于其他所有内容。
- 仅使用一种强调色。 蓝色
#0B8DF8。次要按钮使用黑色#111。别无其他。 - 每个部分标题：大写像素字体 + 手绘波浪 SVG 下划线，居中。
- 每个部分 在滚动时以相同的模糊渐入过渡方式呈现（参见
references/motion.md）。 - 圆角为药丸形或20px。 永远不要使用4px、8px或尖锐的角落（锯齿分隔线除外）。
- 无边框。 元素之间的分离通过
#F2F2F2填充和柔和阴影实现，而非1px线条。 - 内容列居中，最大宽度1080px。 垂直间距充足（各部分之间120–160px）。
- 文案偏向小写且带自嘲/人性化， 避免企业腔。使用短句。
添加任何新内容时的工作流程
- 阅读
references/design-tokens.md→ 使用 CSS 变量，不要使用原始十六进制值。 - 阅读
references/components.md→ 检查该内容是否已存在相应模式（药丸、标签、卡片、部分标题、跑马灯、轮播、表单字段）。复用现有模式，不要发明第二种卡片样式。 - 阅读
references/motion.md→ 应用标准的显示和悬停行为。 - 如果是全新的部分，阅读
references/section-recipes.md并严格遵循“新部分模板”（间距、标题、显示、容器）。 - 交替使用
--bg/--bg-hero作为部分背景色。如果两个相邻部分背景不同，在它们之间放置一个锯齿分隔线（绝不要使用直线）。 - 仅当该部分是顶级目的地时才在导航药丸链接中注册其 ID（最多4个导航链接；如果要添加第5个，请询问用户应移除哪一个）。
- 将任何新图像占位添加到
assets/IMAGES.md，并注明所需的确切宽高比，以便用户知道提供什么。
完成前的自我检查
- 每个新标题是否都使用了像素字体 + 波浪下划线？
- 是否有任何十六进制代码不在令牌列表中？删除它。
- 是否有任何圆角不是
999px或20px/16px/14px？修正它。 - 新块是否以
blur(10px) → 0和y: 30px → 0的方式淡入？ - 悬停状态是否使用了
scale(1.03)+ 阴影抬高 +250ms？ - 移动端：扇形/轮播/网格是否按照
references/components.md中的移动端规则折叠？ - 是否保持了各部分垂直内边距为
clamp(80px, 10vw, 160px)？
参考文件
| 文件 | 何时阅读 |
|---|---|
references/design-tokens.md | 始终——颜色、字体标度、间距、阴影、字体 |
references/components.md | 构建任何 UI 元素（导航、卡片、标签、表单、跑马灯、轮播、分隔线） |
references/motion.md | 任何动画、显示、悬停或页面加载编排 |
references/section-recipes.md | 添加全新的部分或页面 |
assets/base.css | 即用型样式表，已实现所有令牌和基础样式 |
assets/IMAGES.md | 网站需要什么图像以及什么比例 |