@umacloud/knowledge 1.0.1

package/design-systems/aesthetic-families.md

@@ -0,0 +1,43 @@
+# 美学家族目录（family picker · 强制选一个具名方向）
+
+> 区别精品与 generic 的第一步：**commit 一个具名家族**，而不是"安全平均"。先按产品/品牌气质从下表选**一个**（最多再叠一个次方向），写出一行 **AVOID**（明确不走哪个），再据所选档位(`anti-ai-slop` 的 8 档)落地。我们的 8 个内置档位是其中最常用的几个；本表给全光谱，覆盖小众但有力的方向。
+
+## 选择法（family-picker）
+1. 这个产品的气质是？(冷峻工程 / 温暖亲和 / 高端克制 / 大胆张扬 / 未来科技 / 编辑文艺)
+2. 信息密度高还是低？(高→data-dense/terminal；低→cinematic/luxury/editorial)
+3. 选**一个**家族 + 一行 AVOID。**绝不"融合三个"**。
+
+## 家族目录（定义 / 何时用 / 标志性动作 / 何时别用）
+
+| 家族 | 一句话 | 何时用 | 标志动作 | 别用于 |
+|---|---|---|---|---|
+| **Editorial Minimalism**(modern-minimal) | 中性色+一个手术刀强调，Inter/Geist，≤8px 圆角，描边代替阴影 | dev工具/B2B/文档 | 单一 accent 只给 action/link/focus；4px 网格 | 需要温暖/张扬的品牌 |
+| **Terminal-Core**(tech-utility) | 等宽字+纯黑底，无彩色强调("对比即特征")，0 圆角，hover 反色 | CLI/基础设施/监控 | mono 全场+瞬时反色+数据 tabular-nums | 消费营销 |
+| **Warm Editorial**(editorial-clean) | 奶白+陶土色，衬线 display+人文 sans，扁平 | prosumer/长文/出版 | 衬线标题×humanist 正文，680px 文栏 | **禁紫渐变** |
+| **Data-Dense Pro** | `#181818`+8 色分类系列，tabular-nums，28–32px 行，粘性表头 | BI/可观测/金融后台 | 高密度表格+热力+sticky header | 营销/衬线 |
+| **Cinematic Dark**(bold-geometric 偏暗) | 纯黑+品红/青，**渐变可用**，96–140px 巨字，pill 按钮 | AI/creator/汽车发布 | 满幅影像当 chrome；唯一允许 scale(1.02) hover 的家族 | 数据密后台 |
+| **Playful Color**(soft-warm) | 5 色品牌棱镜按区轮换，圆角卡/pill，扁平矢量插画 | 消费/教育 | 每区换一个品牌色；圆润友好 | 严肃金融/奢侈 |
+| **Glass / Soft-Futurism**(glass-aurora) | 磨砂 `blur(20px) saturate(160%)`+柔和径向渐变 | 高端消费/AI | 玻璃层+1px 高光，**保 4.5:1 对比** | 数据密/严肃 |
+| **Neon Brutalist / Swiss Bold**(brutalist-bold) | `#fff/#000`+一个饱和色，0 圆角，2px 线代替留白，巨型 tabular 数字 | 编辑/宣言/机构 | 暴露网格+硬边+sans×serif 对撞 | 需要亲和的产品 |
+| **Premium Luxury / Kinpaku**(premium-luxury) | 近黑+单一金/宝石色，衬线细字重，慷慨留白，慢动效 | 奢侈/财富/汽车 | 单金强调面积极小+700ms 慢动+大留白 | 大众打折/儿童 |
+| **Neumorphism** | 软 UI，凸凹双向阴影，单色，12–16px 圆角 | 极简工具/音乐/健康小件 | `-5px -5px 15px, 5px 5px 15px` 双阴影 | 对比要求高(易塌)/复杂界面 |
+| **Claymorphism** | 黏土感，柔大圆角，膨胀阴影+亮色 | 教育/儿童/趣味 | 厚圆角+柔投影+饱和糖果色 | 严肃/数据 |
+| **Aurora / Gradient-Mesh** | 极光网格渐变(低饱和大模糊)做氛围 | AI/旅行/creator | 固定背景极光层+玻璃内容 | 满屏当主体即 slop |
+| **Liquid Glass** | 流体玻璃+色散，更强折射 | 高端发布/Apple 系 | 折射+流体动画(400–600ms) | 低端/快交互 |
+| **Retro-Futurism / Synthwave** | 霓虹紫粉青+网格地平线+发光 | 游戏/音乐/夜店 | 霓虹描边+扫描线+发光文字 | 企业/医疗 |
+| **Cyberpunk / HUD-FUI** | 高科技界面，霓虹+故障+数据流 | 游戏/科幻/硬核工具 | 角标框+故障文字+HUD 元素 | 亲和消费 |
+| **Bento Box Grid** | 便当格：不等大模块拼贴 | 作品集/feature 展示/AI | 不等格 `2fr 1fr 1fr` 拼贴 | 线性长内容 |
+| **Spatial UI (VisionOS)** | 空间层级，半透明玻璃，深度 | 空间计算/前沿 | 玻璃材质+深度+柔光 | 普通 web 性能敏感 |
+| **Skeuomorphism / 3D Hyperrealism** | 拟物质感/超写实 3D | 创意/产品展示 | 真实材质+光影+3D 渲染 | 性能/简洁工具 |
+| **Y2K / Gen-Z Maximalism** | 千禧/极繁混乱，撞色贴纸 | 潮流/Gen-Z/音乐 | 撞色+贴纸+故意混乱 | B2B/严肃 |
+| **Organic / Biophilic** | 自然有机曲线+大地色 | 健康/可持续/食品 | 有机曲线+植物纹理+大地色 | 科技冷峻 |
+| **E-Ink / Paper** | 纸感低对比单色 | 阅读/笔记/极简 | 纸白+墨黑+极少色 | 需要活力/转化 |
+| **Material You** | 动态取色+大圆角+表面色调 | Android/消费 | 壁纸取色+tonal surface | 品牌强一致需求 |
+
+## 通用收尾（任何家族都遵守）
+- 选定后**只用这一套** token；颜色/字体都过 `:root`；遵守 `anti-ai-slop` 的硬规格与自评门。
+- 所选家族的"标志动作"至少做出 1 个，让它有记忆点。
+- 仍跑 thumbnail test：缩略图要像"这个产品"。
+
+---
+**注**：内置 8 档(modern-minimal/editorial-clean/tech-utility/soft-warm/bold-geometric/brutalist-bold/glass-aurora/premium-luxury)已自带完整 token，优先用；本表用于需要更小众方向时**具名 commit**，避免回退 generic。

package/design-systems/anti-ai-slop.md

@@ -0,0 +1,162 @@
+# 反 AI-slop 与设计品味（每次做 UI 必读 · 默认强制）
+
+> 纯模型产出最大的问题不是"丑"，是"**generic（千篇一律、一眼 AI）**"。区别精品与 generic 的，是 **token 背后的"为什么"** 与一套**正向的品味规则**——不是只躲开几个雷，而是主动做对。本文件随设计系统**默认绑定**，每次 UI 都生效。
+
+---
+
+## 0. 先定方向，再写代码（最关键的一步）
+
+动手前先在 UIUX 文档里明确（一句话即可，但必须真的做选择）：
+- **Purpose & Audience**：解决什么问题？谁在用？（决定信息密度与语气）
+- **一个大胆的概念方向（Motif）**：在下列里**选一个并 commit**，不要"clean professional"这种空话——
+  `极简瑞士 / 编辑杂志感 / 技术工具冷峻 / 温暖亲和 / 大胆几何 / 极繁主义 / 复古未来 / Art Deco / 野兽派 brutalist / 玻璃拟态`。
+- **令人记住的一点**：这个界面有什么是用户会记住的？（一个标志性的排版/色彩/动效签名）
+- **真实参照**：选 1–3 个真实产品作锚（如"信息密度像 Linear、排版像 Stripe、留白像 Apple"），并写出**要借鉴的具体动作**，而非泛泛"现代"。
+
+> 原则：**reference-based 胜过 descriptive**。"像 Linear 一样:单色为主、1px 内描边代替投影、密集信息层级" 远胜 "做个干净专业的页面"。
+
+---
+
+## 1. 排版即身份（Typography as identity）
+
+- **不要默认 Inter / Arial / 系统字体**——它们是 AI 味的头号信号。选有性格的字体族（可配一个 display 标题字 + 一个干净正文字），用 `next/font` 或 `@font-face` 真正加载。
+- **战略性字距 letter-spacing**：大标题收紧（`-0.02em ~ -0.01em`，更自信）；全大写的小标签/eyebrow 放开（`0.06em ~ 0.1em`）；正文 `0`。
+- **模块化字阶**（用比例而非随手取值）：1.2（紧凑/数据密）或 1.25（通用）；建立 `--text-xs…--text-5xl`，标题与正文**对比要拉开**（display 可到 48–96px）。
+- 正文行高 1.5–1.7，行宽 50–75 字符；标题行高 1.05–1.2。一个页面字重 ≤3 种。
+
+## 2. 色彩：主色 + 锐利强调，OKLCH 思维
+
+- **70–90% 中性 + 5–10% 主色 + 1 个锐利 accent** 留给最高优先 CTA。不要满屏高饱和、不要彩虹。
+- 用 **OKLCH** 定义色阶（感知均匀、暗色更稳），P3 广色域可选；中性色带一点点主色色相的"温度"，别用纯灰 `#808080`。
+- 全部走**语义 token**（`--color-primary` / `--color-surface` / `--color-muted-foreground`…），组件里**永不**写裸 hex。深色模式是必须，不是可选。
+- 对比度 ≥ 4.5:1（正文）/ 3:1（大字与 UI），别 gray-on-gray。
+
+## 3. 深度与阴影：contextual，不是统一糊一层
+
+- 阴影要**表达 z 轴关系**：贴地的卡片极轻、浮层/弹窗更深、按下变浅；同层一致。
+- 现代精品更爱 **1px 内/外描边 + 极轻阴影** 而非厚重 drop-shadow（"为什么用 1px 描边而非投影"——更干净、更工程感）。
+- 半透明/毛玻璃用于建立层级，不是装饰。
+
+## 4. 氛围与质感：别留大白板
+
+- 背景别只用纯色：用**极细的渐变、噪点纹理、网格/点阵、光晕**制造氛围（克制，不喧宾）。
+- 避免"居中一切 + 等高卡片 3 连 + 没有证据的 hero"这种模板感；用**非对称布局、节奏变化（密-疏交替）、锚点对齐**。
+- 真实内容优先：真实文案/截图/数据，不要 Lorem ipsum、不要"Welcome to [App]"、不要编造指标。
+
+## 5. 动效：必须自证存在
+
+- 动画要**有意义**（引导注意、表达空间连续），时长 150–300ms，缓动用自然曲线（`cubic-bezier(0.2,0,0,1)` 类）。
+- 一次**编排好的入场（staggered reveal）** 胜过满屏散乱微交互；尊重 `prefers-reduced-motion`。
+- 不要 animate width/height（用 transform/opacity）；不要纯装饰性动画。
+
+## 6. 优先级规则表（按影响排序，源自平台官方 HIG / Material）
+
+| 优先 | 类别 | 必须做 | 不可做（Anti-pattern） |
+|---|---|---|---|
+| 1 | 无障碍 | 对比 4.5:1、焦点环可见、icon 按钮加 aria-label、键盘可达、不只靠颜色传达 | 删焦点环、icon-only 无标签、颜色单独表意 |
+| 2 | 触控/交互 | 触控目标 ≥44×44、间距 ≥8、异步有 loading、按压有反馈 | 只靠 hover、0ms 瞬变、手势无替代 |
+| 3 | 性能 | WebP/AVIF、懒加载、给图片留位防 CLS、骨架屏 | 布局抖动、首屏长 spinner、长列表不虚拟化 |
+| 4 | 风格选择 | 匹配产品类型、全站一致、**SVG 图标库（Lucide/Heroicons）** | emoji 当图标、flat 与拟物乱混 |
+| 5 | 布局/响应式 | mobile-first 断点、viewport meta、无横向滚动 | 固定 px 容器、禁缩放、横向滚动主内容 |
+| 6 | 字体/色彩 | base 16px、行高 1.5、语义 token | 正文 <12px、gray-on-gray、组件里裸 hex |
+| 7 | 动效 | 150–300ms、传达意义、空间连续 | 装饰性动画、animate 宽高、无 reduced-motion |
+| 8 | 表单/反馈 | 可见 label、错误就近、helper 文本、渐进披露 | 只用 placeholder 当 label、错误只堆顶部 |
+| 9 | 导航 | 可预测返回、底部导航 ≤5、深链 | 导航过载、返回行为坏、无深链 |
+| 10 | 图表/数据 | 图例、tooltip、无障碍配色 | 只靠颜色区分数据 |
+
+## 7. 组件必须覆盖全部状态
+
+每个交互组件做满 **7 态**：default / hover / focus(可见焦点环) / active(按下) / disabled / loading / error。
+每个数据视图做满 **空 / 加载(骨架) / 错误 / 正常 / 极多** 五态——空态要有引导而非空白。
+
+## 8. 出现即不合格（P0 cardinal sins）
+
+紫→粉渐变 hero · emoji 当功能图标 · 系统默认字体唯一 · 组件里裸 hex · 无深色模式 · Lorem ipsum / "Welcome to [App]" / 编造指标 · 居中一切 + 等高卡片堆叠 + 无证据 hero · 焦点环被删 · 动画无意义。
+
+## 9. 最低交付 checklist
+
+- [ ] 先定 Motif/参照/记忆点，UIUX 文档 `## Visual direction` 写清。
+- [ ] distinctive 字体 + 模块化字阶 + 战略 letter-spacing；语义 token + OKLCH + 深色。
+- [ ] contextual 阴影/描边 + atmospheric 背景；非对称节奏，无模板感。
+- [ ] 动效自证存在(150–300ms + 编排入场 + reduced-motion)。
+- [ ] 优先级表 1→10 全过；组件 7 态 + 数据 5 态；真实内容；无 P0 sins。
+
+---
+
+## 10. 硬规格（battle-tested 具体值，照抄即可）
+
+**字体 reflex-reject（默认禁用，除非品牌 brief 明确点名）**
+- 被用烂的"安全默认"：`Inter / Roboto / Open Sans / Lato / Montserrat / Poppins / Nunito` — 一眼 AI。
+- 设计师"反射性"高级字：`Playfair Display / Fraunces / Cormorant / Space Grotesk / DM Sans` — 也别条件反射地用。
+- 正确做法：先写**三个具象品牌气质词**（"warm and mechanical and opinionated"，不是"modern"），再据此选字；display + body 在**对比轴**上配对，≤3 个字体族。
+
+**色彩硬规格**
+- **60-30-10**（按视觉重量）：60% 中性面 / 30% 次要 / 10% 主色；accent 占视口 **≤3%**，只给最高优先 CTA。
+- 用 **OKLCH**；中性色向品牌色相偏 `+0.005~0.015` chroma（有温度的灰）。
+- **禁 AI 紫**：hue 250–310 的主色、`#7c3aed / #8b5cf6 / #a855f7 / #764ba2 / #667eea` 渐变。
+- **禁"奶油米色"带**：OKLCH `L 0.84–0.97 · C<0.06 · hue 40–100`（以及 `--paper/--cream/--sand/--linen` 这种 token 命名本身就是 tell）。
+- 深色模式：正文字重 −50，抬升用**更亮**不是更暗，绝不切换色相。纯 `#000/#fff` 禁用（用近黑近白）。
+
+**字体/标题硬规格**
+- hero 标题按**字数**定级：21–50 字符 = display 大字；**>90 字符 = 头号 AI tell**（拆短）。
+- display 字距下限 `≥ -0.04em`；ALL-CAPS 字距 `0.05–0.12em`；全大写行高下限 1.0；**斜体标题全局禁用**。
+- 标题与正文字重差 `≥300`；type scale 比例 `≥1.25`；正文 `≥16px`。
+
+**间距/层级**
+- 4pt 刻度 `4 8 12 16 24 32 48 64 96`；紧密分组 8–12px、区块分隔 48–96px。
+- 卡片栅格 `repeat(auto-fit, minmax(280px,1fr))`；z-index 用**语义命名层级**（绝不 `999/9999`）。
+
+**动效硬规格**
+- 时长桶 `120 / 220 / 420ms`（或 100/300/500）；**退场 ≈ 进场的 75%**；80ms 以下视为"瞬时"。
+- 缓动：`--ease-out: cubic-bezier(0.16,1,0.3,1)`、quart `(0.25,1,0.5,1)`、expo；**禁 bounce `(0.34,1.56,0.64,1)` / elastic 过冲**。
+- stagger `calc(var(--i)*50ms)` 封顶 500ms；`@media (prefers-reduced-motion)` 块必写；只用 transform/opacity 动，禁 animate 宽高。
+
+**结构变化（AI 指纹的真正来源）**
+- "**对称读作'生成的'，非对称读作'有意的'**"。先选一个具名的**页面骨架/导航/页脚**原型再写代码；同一产品多页不要重复同一种骨架。
+- 图标当作排版：同一页只用一套图标库、同一描边粗细。
+
+**文案 tells（出现即扣分）**
+- 营销空话：`streamline / empower / supercharge / world-class / enterprise-grade / seamless / cutting-edge`。
+- 编造指标：`trusted by 50,000+ / 99.9% / 10x faster`（无真实出处别写）。
+- 占位名：`Jane Doe / John Smith / Acme / example.com / lorem ipsum`。
+- 假 UI chrome：div 画的浏览器地址栏/手机边框/手绘 sketchy SVG。
+- em-dash `—` 滥用（≥5 个）是常见 tell；克制使用。
+
+> 注：设计**生成时先大胆**，把无障碍的强校验放到 review/quality 阶段——设计阶段过度提醒无障碍会让模型退回"安全但平庸"。但对比度、焦点环、aria 这些**底线仍不可破**。
+
+## 11. 强制差异化（break the default aesthetic）
+
+设计前先选**一个**家族并 commit（force a choice，不要"融合多个"）：
+`modern-minimal · editorial-clean · tech-utility(terminal/data-dense) · soft-warm · bold-geometric · brutalist-bold(swiss/tactical) · glass-aurora · premium-luxury` —— 选定后写一行 **AVOID**（明确这个产品**不**走哪个方向）。
+
+**10 条硬拒绝（出现即重做）**：
+1. 不用默认 teal `#16d5e6` / 默认 indigo-blue 作主色（除非 brief 点名）。
+2. **只用一个** accent；第二个强调色 = 失败。
+3. 容器嵌套深度 **≤2**（卡中卡中卡 = 失败）。
+4. 主字体不用 Inter/Roboto/Arial/Helvetica（brutalist 档的 Helvetica 例外）。
+5. Hero 里不放 3 列等宽 feature 卡网格。
+6. 一个页面只用**一套**图标库；能用纯排版表达就别堆图标网格。
+7. 深色背景上不放紫→粉/靛紫渐变。
+8. 不用"玻璃卡堆叠"当 hero（除非 glass-aurora 档且克制）。
+9. 动效只为表意，且必带 `prefers-reduced-motion`。
+10. 文案产品专属，不用占位/buzzword/编造指标。
+
+**成败判据（thumbnail test）**：把成品缩成缩略图，**不应与任何其它 AI 生成的项目雷同**——一眼能认出是"这个产品"，而不是"又一个 AI 页面"。
+
+**生成顺序（每步定了再下一步）**：① Design Read 一句话(什么页面/给谁/什么气质/选哪个家族) → ② 锁 token 表(OKLCH/hex + 字体 + 图标库 + 间距/圆角) → ③ 布局骨架(可先 ASCII 线框) + 动效规格 → ④ 才写实现，只引用已锁 token。
+
+## 12. 交付前自评门（pre-emit self-critique，必做）
+
+把 UI 交回前，先对自己的产出按 6 个维度各打 1–5 分；**任何一项 <3 必须先改再交**：
+- **Philosophy 立场**：是否 commit 了一个明确方向，而非"安全平均"？
+- **Hierarchy 层级**：一眼能看出主次？标题/正文对比够强？
+- **Execution 执行**：token/间距/状态/对齐到位，无半成品？
+- **Specificity 专属性**：内容/配色/排版属于"这个产品"，而非通用模板？
+- **Restraint 克制**：有没有多余装饰/第二强调色/无意义动效？
+- **Variety 变化**：结构是否有意打破对称与等距，而非千篇一律？
+
+> 自评是给自己看的硬门槛——分低就重做，不要把"能跑的 generic"当完成。
+> 终极判据仍是 **thumbnail test**：缩成缩略图，能不能一眼认出是"这个产品"而不是"又一个 AI 页面"。
+
+---
+**一句话**：先 commit 一个大胆方向 + 真实参照，再把每个 token 都问"为什么是它"——这就是从 generic 到精品的全部距离。

package/design-systems/bold-geometric.md

@@ -0,0 +1,120 @@
+---
+id: bold-geometric
+title: Bold Geometric
+domain: design-systems
+category: bold-geometric.md
+difficulty: intermediate
+tags: [bold, color, component, design-systems, geometric, layout, palette, patterns]
+quality_score: 70
+last_updated: 2026-06-15
+---
+# Bold Geometric
+
+> High contrast, oversized type, asymmetric layouts. Inspired by Figma marketing, Stripe keynotes, Apple product pages.
+
+## When to use
+
+Creative agencies, product launches, marketing landing pages, portfolios, brand showcase sites. Products where visual impact matters more than utility density.
+
+## Color palette
+
+```css
+:root {
+  --color-bg: #000000;
+  --color-surface: #111111;
+  --color-surface-elevated: #1a1a1a;
+  --color-surface-sunken: #000000;
+  --color-text: #ffffff;
+  --color-text-secondary: #999999;
+  --color-text-tertiary: #666666;
+  --color-primary: #ff6b35;
+  --color-primary-hover: #ff8555;
+  --color-primary-muted: rgba(255, 107, 53, 0.15);
+  --color-accent: #00d4aa;
+  --color-success: #00d4aa;
+  --color-warning: #ffb800;
+  --color-error: #ff4444;
+  --color-border: #222222;
+  --color-border-hover: #444444;
+  --color-border-focus: #ff6b35;
+  --shadow-glow: 0 0 40px rgba(255, 107, 53, 0.15);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-bg: #ffffff;
+    --color-surface: #f5f5f5;
+    --color-text: #000000;
+    --color-text-secondary: #555555;
+    --color-border: #e0e0e0;
+    --shadow-glow: none;
+  }
+}
+```
+
+## Typography
+
+- **Display / Headlines**: `"Clash Display", "Space Grotesk", system-ui, sans-serif`, weight 700
+- **Body**: `"Space Grotesk", "DM Sans", system-ui, sans-serif`, weight 400
+
+| Level | Size | Weight | Line-height | Letter-spacing | Use |
+|---|---|---|---|---|---|
+| display | 5rem (80px) | 700 | 0.95 | -0.04em | Hero headline (one line) |
+| h1 | 3rem (48px) | 700 | 1.05 | -0.03em | Section headline |
+| h2 | 2rem (32px) | 600 | 1.15 | -0.02em | Subsection |
+| h3 | 1.25rem (20px) | 600 | 1.3 | -0.01em | Card title |
+| body-lg | 1.25rem (20px) | 400 | 1.6 | 0 | Lead paragraph |
+| body | 1rem (16px) | 400 | 1.6 | 0 | Default text |
+| overline | 0.75rem (12px) | 700 | 1.2 | 0.15em | Section label, ALL CAPS |
+
+## Spacing
+
+8px base: `8 / 16 / 32 / 48 / 64 / 96 / 128 / 160`
+
+Dramatic spacing. Hero sections: 160px+ vertical padding. Section gaps: 96-128px.
+
+## Layout
+
+- Asymmetric grids (60/40 or 70/30 splits, not 50/50)
+- Full-bleed sections alternating with constrained content
+- Max content width: 1200px, but hero/feature sections go edge-to-edge
+- Stagger elements vertically for visual tension
+
+## Component patterns
+
+### Hero
+- Oversized headline (80px+), short subtitle, single CTA
+- Dark bg with subtle gradient or texture (NOT purple/pink)
+- CTA: pill button with glow shadow on hover
+
+### Feature section
+- Large visual (mockup/screenshot) on one side, text on the other
+- Asymmetric split. Text side has overline label + h1 + body paragraph
+- Alternate left/right for rhythm
+
+### Stats / social proof
+- Large numbers (48px+ mono or display font)
+- Minimal labels below (caption weight)
+- 3-column grid, generous gap
+
+## Motion
+
+- `--transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1)` — hover
+- `--transition-reveal: 600ms cubic-bezier(0.16, 1, 0.3, 1)` — scroll-triggered entrance
+- Scroll-triggered fade-up for sections (offset: 40px, staggered 100ms)
+
+## Do
+
+- One BOLD move per section (oversized type OR dramatic image OR striking color — pick one).
+- Negative space as a power tool. Let elements breathe.
+- Dark mode as primary. Light as secondary.
+- Monochrome palette + ONE accent color (max 2 accent appearances per screen).
+- Overline labels in ALL CAPS with wide letter-spacing.
+
+## Don't
+
+- Multiple competing focal points in one viewport.
+- Gradient backgrounds (use solid darks or subtle textures).
+- Small, timid typography. If you're not going big, use Modern Minimal instead.
+- Centered text blocks wider than 600px (they become hard to read).
+- More than 3 type sizes visible at once per viewport.

package/design-systems/brutalist-bold.md

@@ -0,0 +1,103 @@
+---
+id: brutalist-bold
+title: Brutalist Bold
+domain: design-systems
+category: brutalist-bold.md
+difficulty: intermediate
+tags: [brutalist, swiss, editorial, mono, high-contrast, oversized-type, design-systems, palette, patterns]
+quality_score: 72
+last_updated: 2026-06-19
+---
+# Brutalist Bold
+
+> 瑞士国际主义 / 数字野兽派：巨型排版、单色高对比、硬边、网格驱动、近乎零圆角。强烈、自信、有态度。
+
+## When to use
+
+创意机构、作品集、时尚/文化/音乐、艺术展、宣言式落地页、开发者硬核工具的"反精致"品牌。要"被记住"胜过"友好"的产品。**不适合**：需要亲和力的消费/教育/医疗、数据密集后台。
+
+## Color palette
+
+```css
+:root {
+  --color-bg: #0a0a0a;
+  --color-surface: #141414;
+  --color-surface-elevated: #1c1c1c;
+  --color-text: #fafafa;
+  --color-text-secondary: #a3a3a3;
+  --color-text-tertiary: #6b6b6b;
+  --color-primary: #e6ff00;            /* 单一刺眼信号色：电光黄 */
+  --color-primary-hover: #f0ff4d;
+  --color-accent: #e61919;             /* 危险红，仅用于最强调 */
+  --color-border: #2a2a2a;
+  --color-border-strong: #fafafa;      /* 硬边：纯白/纯黑 1-2px */
+  --color-success: #00e676;
+  --color-error: #e61919;
+  --radius: 0px;                       /* 野兽派：拒绝圆角 */
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-bg: #f2f2f2;
+    --color-surface: #ffffff;
+    --color-text: #0a0a0a;
+    --color-text-secondary: #404040;
+    --color-primary: #1a1aff;          /* 浅色下换电光蓝 */
+    --color-border-strong: #0a0a0a;
+  }
+}
+```
+
+## Typography
+
+- **Display**: `"Archivo Expanded", "Anton", "Helvetica Now Display", Helvetica, Arial, sans-serif`, weight 800–900
+- **Body**: `"Inter Tight", Helvetica, Arial, sans-serif`（此档允许 Helvetica 家族——它是瑞士风的正统）
+- **Mono / 数字**: `"JetBrains Mono", "Space Mono", monospace`
+
+| Level | Size | Weight | Line-height | Letter-spacing | Use |
+|---|---|---|---|---|---|
+| mega | clamp(4rem, 11vw, 15rem) | 900 | 0.85 | -0.04em | 满屏巨标题，UPPERCASE |
+| display | 4rem (64px) | 800 | 0.9 | -0.03em | Hero |
+| h1 | 2.5rem (40px) | 800 | 0.95 | -0.02em | Section，常 UPPERCASE |
+| h2 | 1.5rem (24px) | 700 | 1.1 | -0.01em | Subsection |
+| body | 1rem (16px) | 400 | 1.5 | 0 | 正文 |
+| label | 0.75rem (12px) | 700 | 1.1 | 0.08em | 标签，UPPERCASE + mono |
+
+## Spacing
+
+8px 基：`8 / 16 / 24 / 48 / 80 / 128`。区块之间用**硬分隔线**（1-2px 实线）而非留白渐变。
+
+## Layout
+
+- 暴露的网格：可见的列线/基线，模块化排布，刻意的不对称。
+- 满铺色块分区；大留白 + 大字块对撞。
+- 内容硬左对齐为主（非居中）；编号区块用 mono 数字 `01 / 02 / 03`。
+
+## Component patterns
+
+### Hero
+- 巨型 UPPERCASE 标题（mega 级），一句话副标，方形（零圆角）实心按钮。
+- 背景纯色块；可叠一条 1px 全宽分隔线。
+
+### Card
+- 硬边框（1-2px 实线 `--color-border-strong`），零圆角，零阴影；hover 时整卡反色（背景↔前景互换）。
+
+### Button
+- 方角、实心、`--color-primary`；hover：瞬时反色或位移 2px + 出现硬投影 `4px 4px 0 var(--color-text)`。
+
+## Motion
+
+- `--transition: 120ms steps(1)` 或 `cubic-bezier(0.2,0,0,1)`——干脆、机械，不要缓动 bounce。
+- 入场用硬切/位移，不要柔和 fade；尊重 `prefers-reduced-motion`。
+
+## Do
+
+- 一个页面只用 1 个信号色，且面积极小（CTA、关键数字）。
+- 巨字 + 硬边 + 网格三件套；mono 数字。
+- UPPERCASE 标题与标签，字距收紧（标题）/放开（标签）。
+
+## Don't
+
+- 圆角、柔和阴影、渐变、紫色——与本档冲突。
+- 居中、柔弱小字、卡片堆叠的"友好"布局（那是 soft-warm）。
+- 超过 2 种信号色；emoji。

package/design-systems/editorial-clean.md

@@ -0,0 +1,109 @@
+---
+id: editorial-clean
+title: Editorial Clean
+domain: design-systems
+category: editorial-clean.md
+difficulty: intermediate
+tags: [clean, color, component, design-systems, editorial, motion, palette, patterns]
+quality_score: 70
+last_updated: 2026-06-15
+---
+# Editorial Clean
+
+> Magazine-like, serif-accent headings, photography-driven. Inspired by Medium, Substack, The Verge.
+
+## When to use
+
+Content sites, blogs, portfolios, documentation, news/media products. Products where reading experience is the primary value.
+
+## Color palette
+
+```css
+:root {
+  --color-bg: #fefdfb;
+  --color-surface: #ffffff;
+  --color-surface-elevated: #ffffff;
+  --color-surface-sunken: #f7f5f0;
+  --color-text: #1a1a1a;
+  --color-text-secondary: #666666;
+  --color-text-tertiary: #999999;
+  --color-primary: #c0392b;
+  --color-primary-hover: #a93226;
+  --color-primary-muted: #fce4e1;
+  --color-accent: #2c3e50;
+  --color-success: #27ae60;
+  --color-warning: #f39c12;
+  --color-error: #e74c3c;
+  --color-border: #e8e4dd;
+  --color-border-hover: #d5d0c8;
+  --color-border-focus: #c0392b;
+  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.04);
+  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #1a1a1a;
+    --color-surface: #242424;
+    --color-surface-sunken: #141414;
+    --color-text: #eeeeee;
+    --color-text-secondary: #aaaaaa;
+    --color-border: #333333;
+  }
+}
+```
+
+## Typography
+
+- **Headings**: `"Playfair Display", "Georgia", serif`, weight 700
+- **Body**: `"Source Serif 4", "Georgia", serif`, weight 400
+- **UI labels**: `"Inter", system-ui, sans-serif`, weight 500
+
+| Level | Size | Weight | Line-height | Letter-spacing | Use |
+|---|---|---|---|---|---|
+| display | 3rem (48px) | 700 | 1.15 | -0.02em | Hero headline |
+| h1 | 2.25rem (36px) | 700 | 1.2 | -0.015em | Article title |
+| h2 | 1.75rem (28px) | 700 | 1.25 | -0.01em | Section header |
+| h3 | 1.25rem (20px) | 600 | 1.35 | 0 | Subheading |
+| body-lg | 1.25rem (20px) | 400 | 1.7 | 0 | Article body (long-form) |
+| body | 1rem (16px) | 400 | 1.6 | 0 | Default text |
+| caption | 0.8125rem (13px) | 500 | 1.4 | 0.03em | Bylines, dates, tags |
+
+## Spacing
+
+8px base: `8 / 16 / 24 / 32 / 48 / 64 / 80 / 120`
+
+Content column: max-width 680px, centered. Sidebars: 280px.
+
+## Component patterns
+
+### Article card
+- Large featured image (aspect 16:9), bottom text block
+- Title in serif h3, author/date in caption sans-serif
+- No border, just spacing separation. Hover: slight shadow lift.
+
+### Pull quote
+- Left border 3px `--color-primary`, italic serif, 1.25rem
+
+### Navigation
+- Minimal top bar, logo left, text links right
+- Active state: underline 2px `--color-primary`, offset 4px
+
+## Motion
+
+- `--transition-fast: 200ms ease` — link hovers, underlines
+- `--transition-normal: 300ms ease-in-out` — card hover lift
+
+## Do
+
+- Large reading font (18-20px body) with generous line-height (1.6-1.7).
+- One serif for headings, one serif (or sans) for body. Never 3+ fonts.
+- Photography over illustration. Real images over stock.
+- Generous top/bottom padding on sections (80-120px).
+
+## Don't
+
+- Rainbow-colored category tags.
+- Sidebar clutter (ads, widgets, social buttons).
+- Sans-serif headings (defeats the editorial feel).
+- Cards with identical thumbnail sizes in a rigid grid (vary the layout).

package/design-systems/glass-aurora.md

@@ -0,0 +1,108 @@
+---
+id: glass-aurora
+title: Glass Aurora
+domain: design-systems
+category: glass-aurora.md
+difficulty: intermediate
+tags: [glassmorphism, aurora, frosted, depth, ai, modern, gradient-controlled, design-systems, palette, patterns]
+quality_score: 72
+last_updated: 2026-06-19
+---
+# Glass Aurora
+
+> 克制的玻璃拟态 + 极光氛围：磨砂半透明层、深邃暗背景上一抹受控的极光渐变、清晰的 z 轴层级。现代、有科技感、不廉价。
+
+## When to use
+
+AI / 大模型产品、现代消费工具、creator 工具、做得高级的 web3/crypto、需要"未来感"的发布页。**关键**：极光是**氛围**不是 hero 主体；一旦满屏渐变就变 AI-slop。**不适合**：数据密集后台、严肃金融、儿童教育。
+
+## Color palette
+
+```css
+:root {
+  --color-bg: #07080d;                 /* 近黑带蓝 */
+  --color-surface: rgba(255,255,255,0.04);   /* 玻璃层：低透明白 */
+  --color-surface-strong: rgba(255,255,255,0.08);
+  --color-glass-border: rgba(255,255,255,0.12);  /* 1px 反光描边 */
+  --color-text: #f4f6fb;
+  --color-text-secondary: #aab1c5;
+  --color-text-tertiary: #6b7390;
+  --color-primary: #5e8bff;            /* 主色：克制的电蓝 */
+  --color-primary-hover: #7aa2ff;
+  --color-accent: #36e0c8;             /* 青绿点缀 */
+  --color-success: #36e0c8;
+  --color-error: #ff5d6c;
+  --color-border: rgba(255,255,255,0.08);
+  /* 极光：极低饱和、大模糊、固定在背景，绝不做成 hero 主色块 */
+  --aurora: radial-gradient(60% 50% at 20% 0%, rgba(94,139,255,0.18), transparent 70%),
+            radial-gradient(50% 40% at 90% 10%, rgba(54,224,200,0.12), transparent 70%);
+  --blur: 16px;
+  --radius: 16px;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-bg: #f5f7fc;
+    --color-surface: rgba(255,255,255,0.7);
+    --color-glass-border: rgba(10,20,40,0.08);
+    --color-text: #0c1124;
+    --color-text-secondary: #4a5270;
+    --aurora: radial-gradient(60% 50% at 20% 0%, rgba(94,139,255,0.10), transparent 70%);
+  }
+}
+```
+
+## Typography
+
+- **Display / Headlines**: `"General Sans", "Geist", system-ui, sans-serif`, weight 600
+- **Body**: `"Inter", system-ui, sans-serif`（此档正文允许 Inter，但标题必须用更有性格的字）
+- **Mono**: `"Geist Mono", monospace` — 用于数据/代码
+
+| Level | Size | Weight | Line-height | Letter-spacing | Use |
+|---|---|---|---|---|---|
+| display | 3.5rem (56px) | 600 | 1.05 | -0.02em | Hero |
+| h1 | 2.25rem (36px) | 600 | 1.1 | -0.015em | Section |
+| h2 | 1.5rem (24px) | 600 | 1.2 | -0.01em | Subsection |
+| body-lg | 1.125rem (18px) | 400 | 1.6 | 0 | Lead |
+| body | 1rem (16px) | 400 | 1.6 | 0 | 正文 |
+| caption | 0.8125rem (13px) | 500 | 1.4 | 0.02em | 标签 |
+
+## Spacing
+
+4px 基：`4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96`。玻璃卡片内边距 24-32px，卡片间距 16-24px。
+
+## Layout
+
+- 深背景 + 固定的 `--aurora` 氛围层（`position: fixed; filter: blur(40px)`，不随滚动喧宾）。
+- 内容用磨砂玻璃卡浮在其上，建立清晰 z 层级。
+- 居中适度但配非对称强调；不要满屏等高卡。
+
+## Component patterns
+
+### Glass card
+- `background: var(--color-surface); backdrop-filter: blur(var(--blur)); border: 1px solid var(--color-glass-border); border-radius: var(--radius);`
+- 顶部 1px 高光（`box-shadow: inset 0 1px 0 rgba(255,255,255,0.15)`）。
+
+### Hero
+- 标题 + 副标 + 主 CTA；背景是 `--aurora`（低饱和、大模糊），**不是**实心紫渐变块。
+- CTA：实心 `--color-primary`，hover 微亮 + 轻微上浮。
+
+### Button / Input
+- 玻璃或实心两种；focus 用 `--color-primary` 2px 环 + 轻微外发光（克制）。
+
+## Motion
+
+- `--ease: cubic-bezier(0.16, 1, 0.3, 1)`；时长 200/300ms；卡片 hover 上浮 2-4px + 高光增强。
+- 入场 staggered fade-up（`translateY(12px)`）；尊重 `prefers-reduced-motion`。
+
+## Do
+
+- 极光：低饱和、大模糊、固定背景、面积克制——只做氛围。
+- 玻璃层要有清晰的 1px 反光描边和层级；深色为主。
+- 主色 + 一个青绿点缀，其余中性。
+
+## Don't
+
+- 满屏鲜艳渐变 / 紫→粉 hero（这正是要避免的 AI-slop）。
+- 玻璃叠太多层导致可读性差、对比不足。
+- 在亮背景上乱用低透明玻璃（对比塌掉）。