@umacloud/knowledge 1.0.52 → 1.0.53

package/design-systems/00-craft-rules.md

@@ -4,68 +4,114 @@ title: Craft Rules — Universal Visual Quality Standards
 domain: design-systems
 category: design-systems
 difficulty: intermediate
-tags: [auto-checked, cardinal, catch, craft, design-systems, governance, reviewer, rules]
-quality_score: 70
-last_updated: 2026-06-15
+tags: [auto-checked, cardinal, catch, craft, design-systems, governance, reviewer, rules, register]
+quality_score: 74
+last_updated: 2026-07-14
 ---
 # Craft Rules — Universal Visual Quality Standards
 
-> These rules apply to ALL frontend output regardless of design direction.
-> P0 = hard blocker (must fix before preview gate).
+> **Read `01-register.md` first.** Rules below are tagged with the register they
+> apply to. A rule tagged `[brand]` applied to a dashboard makes the product WORSE;
+> a rule tagged `[product]` applied to a landing page makes it forgettable.
+> Untagged = `[both]` — always on.
+> P0 = hard blocker (must fix before the preview gate).
 > P1 = should fix (quality suffers noticeably).
-> P2 = polish (nice to have).
+> P2 = polish.
+
+## Trigger
+
+Read before writing any UI code, authoring `design-tokens.{json,css}`, or reviewing a UI diff.
 
 ## P0 — Cardinal Sins (auto-checked by governance)
 
-1. **No emoji as functional icons.** Use Lucide / Heroicons / Tabler only.
-2. **No hardcoded colors.** Every `color`, `background`, `border-color`, `box-shadow` must use a CSS var.
-3. **No purple-to-pink gradient hero backgrounds.** This is the #1 "AI made this" tell.
-4. **No Lorem ipsum / dolor sit amet.** Use realistic placeholder content.
-5. **No "Welcome to [App]" hero headings.** Write a specific value proposition.
-6. **No filler metrics.** Don't invent "10x faster" or "99.9% uptime" without a source.
-7. **No emoji-icon hybrid.** Don't mix emoji and icon-library icons in the same UI.
+1. **One icon library, one stroke weight.** Declare it in the UIUX doc (e.g. Lucide @ 1.5).
+   Never mix two libraries in one UI, never use emoji as a functional icon, never
+   hand-roll a decorative SVG. *Which* library is a per-pack / per-product choice —
+   there is no global default, because a single mandated library is itself a sameness driver.
+2. **No hardcoded colors.** Every `color` / `background` / `border-color` / `box-shadow`
+   comes from a token. Surface tokens ship a paired `on-` foreground.
+3. **No AI-purple as primary or accent** (OKLCH hue 270–320 at chroma ≥ 0.09), unless
+   the requirement text explicitly asks for purple. → Commit to a hue the product owns.
+4. **No Lorem ipsum.** → Write the real, representative content.
+5. **No "Welcome to [App]" hero heading.** → Write the specific value proposition.
+6. **No invented metrics** ("10x faster", "99.9% uptime") without a source. → Cite a real
+   number or drop the claim.
+7. **Contrast is measured, not eyeballed.** Every declared (surface, on-surface) pair:
+   ≥ 4.5:1 body, ≥ 3:1 large/UI. A failing pair is a defect, not a taste question.
 
 ## P1 — Soft Tells (reviewer should catch)
 
-1. **Template skeleton without variation.** If every section follows the same card-grid pattern, add rhythm (alternate layouts, vary section heights).
-2. **Accent color overuse.** Max 2 accent-colored elements visible per viewport. More than that = visual noise.
-3. **Placeholder CDN images.** `placehold.co` or `unsplash.com/random` are acceptable in dev, but mark them `<!-- TODO: replace -->`.
-4. **Too many raw hex values outside `:root`.** If you see 12+ unique hex values scattered in components, refactor into tokens.
-5. **Sans-serif display font when the design system specifies serif.** Read the UIUX doc.
-6. **Identical card content.** 3+ cards with the same placeholder text is obvious AI output. Vary the content.
-7. **Missing component states.** Every button needs hover + focus + disabled. Every input needs focus + error.
+1. `[brand]` **Template skeleton without variation.** *Tell:* every section is the same
+   card-grid. → Alternate layouts, vary section heights, add ≥1 unconventional section.
+2. **Accent overuse.** *Tell:* >2 accent-colored elements visible in one viewport.
+   → Cap at 2; the accent's power is its scarcity.
+3. **Placeholder CDN images.** *Tell:* `placehold.co` / `unsplash.com/random` in source.
+   → Mark `<!-- TODO: replace -->` or ship the real asset.
+4. **Raw hex outside `:root`.** *Tell:* ≥ 3 unique hex literals in components.
+   → Move them into tokens.
+5. **Type drift from the locked system.** *Tell:* a font-family in code that the UIUX doc
+   never declared. → Use only the locked families.
+6. **Identical card content.** *Tell:* 3+ cards with the same placeholder text.
+   → Vary the content; it is the fastest AI tell to spot.
+7. **Missing component states.** *Tell:* a button with no `:focus-visible`, an input with
+   no error state, an async list with no loading/empty state. → Every interactive element
+   ships hover + focus-visible + active + disabled; every async surface ships
+   loading + empty + error.
+8. `[product]` **Marketing type in an app.** *Tell:* ≥3 font sizes on an app route whose
+   max/min ratio ≥ 2.0. → Fixed rem scale at ratio 1.125–1.2; carry hierarchy with weight
+   and color.
+9. `[product]` **Page-load choreography in an app.** *Tell:* mount/entrance animation or
+   staggered reveal on a dashboard route. → Motion only confirms a user action (≤150ms).
 
 ## P2 — Polish
 
-1. **Dark mode.** If the UIUX doc defines dark tokens, wire `prefers-color-scheme`.
-2. **Loading states.** Skeleton screens for async content, not blank white space.
-3. **Empty states.** "No items yet" with an illustration or CTA, not a blank table.
-4. **Micro-interactions.** Button press feedback, card hover lift, toggle animation.
-5. **Scroll-triggered reveals.** Subtle fade-up on section enter (not bouncy/spring).
-6. **Focus ring.** 2px solid primary, 2px offset. Visible on keyboard navigation.
+1. **Dark mode.** If the UIUX doc defines dark tokens, wire `prefers-color-scheme`
+   (and redefine every `on-` pair, not only the surfaces).
+2. **Loading states.** Skeletons for async content, not blank space.
+3. **Empty states.** "No items yet" + the next action, not a blank table.
+4. **Micro-interactions.** Press feedback, hover lift, toggle transition.
+5. `[brand]` **Entrance reveal.** ONE orchestrated page-load reveal — subtle fade-up, never
+   bouncy/spring. `[product]`: none.
+6. **Focus ring.** 2px solid primary, 2px offset, visible on keyboard navigation.
 
 ## Typography Craft
 
-- **Letter-spacing rules:**
-  - ALL CAPS text: >= 0.06em spacing (prevents cramped look)
-  - Display text (>= 32px): -0.01 to -0.02em (tightens for visual weight)
-  - Body text: 0 (default)
-  - Caption/label text: 0.02-0.03em (opens up for legibility at small sizes)
-
-- **Weight system:** use at most 3 weights per page (typically 400 / 500 / 700).
-
-- **Line length:** 50-75 characters for body text. Enforce via `max-width` on text containers.
-
-- **Max typefaces:** 2 (one for headings, one for body). Code blocks can use a third (monospace).
+- **Letter-spacing:** ALL CAPS ≥ 0.06em · display (≥32px) −0.01 to −0.02em · body 0 ·
+  caption 0.02–0.03em. Never below −0.04em (crushed).
+- **Weights:** at most 3 per page. `[product]` 400/500/600. `[brand]` extremes are a tool.
+- **Type scale:** `[product]` fixed rem scale, adjacent step ratio 1.125–1.2.
+  `[brand]` a dramatic display:body jump (≥2.5x) is the point.
+- **Line length:** 50–75 characters for body — enforce with `max-width`.
+- **Line-height:** ≥ 1.4 for body (never below 1.3 — cramped). Never ship text under 12px.
+- **Max typefaces:** 2 (headings + body); a third mono is allowed for code/data.
+  `[product]` a single familiar neutral face for BOTH is correct, not lazy.
 
 ## Color Craft
 
-- **Palette distribution:** neutrals 70-90%, accent 5-10%, semantic (success/warning/error) 0-5%.
-- **Contrast minimums:** 4.5:1 for body text (WCAG AA), 3:1 for large text (>=24px or bold >=18.5px).
-- **One decisive accent.** If you have both `--color-primary` and `--color-accent`, only one should be visible per viewport. The other is for a different screen/section.
+- **Distribution:** neutrals 70–90%, accent 5–10%, semantic 0–5%.
+- **Contrast minimums:** 4.5:1 body (WCAG AA), 3:1 large (≥24px, or bold ≥18.5px) and UI.
+- **One decisive accent.** If both `--color-primary` and `--color-accent` exist, only one is
+  visible per viewport.
+- `[product]` **Restraint is the FLOOR.** Color is a semantic signal (status, selection,
+  danger), not decoration. `[brand]` a committed palette is the point.
 
 ## Layout Craft
 
-- **Rhythm alternation.** Don't stack 3 identical-layout sections. Alternate: full-width → constrained, image-left → image-right, light-bg → dark-bg.
-- **Vertical spacing progression.** Sections: 80-120px. Within sections: 32-48px between groups. Within groups: 16-24px.
-- **One bold move per section.** Oversized type OR dramatic image OR striking color. Pick one. Three competing flourishes = noise.
+- `[brand]` **Rhythm alternation.** *Tell:* 3 stacked identical-layout sections.
+  → Alternate full-width ↔ constrained, image-left ↔ image-right, light ↔ dark.
+- **Vertical spacing progression.** `[brand]` sections 80–120px, groups 32–48px, items 16–24px.
+  `[product]` groups 16–24px, rows 8–12px — density is a feature.
+- `[brand]` **One bold move per section.** Oversized type OR dramatic image OR striking color.
+  Three competing flourishes = noise.
+- **Elevation language:** pick ONE. *Tell:* a 1px hairline border AND a ≥16px-blur shadow on
+  the same element. → Border-led or shadow-led, never both.
+- **Radius:** `[product]` 4–12px on cards/inputs. *Tell:* radius ≥ 24px on product chrome
+  reads as a toy. `[brand]` free, as long as it is consistent.
+
+## Completion criteria
+
+- [ ] Register declared, and every `[brand]`-tagged rule skipped if the register is `product` (and vice versa).
+- [ ] Icon library + stroke weight named once; grep the source: zero emoji, zero second library.
+- [ ] Zero raw hex/font-family/radius/font-size literals outside the token file.
+- [ ] Every (surface, on-surface) pair measured against WCAG and passing.
+- [ ] Every interactive element has 4 states; every async surface has 3.

package/design-systems/01-register.md

@@ -0,0 +1,99 @@
+---
+id: 01-register
+title: Design Register — Brand vs Product
+domain: design-systems
+category: design-systems
+difficulty: intermediate
+tags: [register, brand, product, dashboard, admin, devtool, landing, marketing, design-systems, governance]
+quality_score: 78
+last_updated: 2026-07-14
+---
+# Design Register — Brand vs Product
+
+> **Use this FIRST, before any other design-systems file.** Every visual rule in
+> this corpus is scoped to a REGISTER. Applying the wrong register's rules is the
+> most expensive design mistake we make: it dresses a dashboard like a landing page
+> and makes the product measurably worse to use.
+
+## Trigger
+
+Read this whenever you are about to write UI, pick a design pack, author
+`design-tokens.{json,css}`, or review a UI diff. Declare the register in the UIUX
+doc's `## Visual direction` section **before** you choose a single color.
+
+## The two registers
+
+**brand** — landing page, marketing site, campaign, launch page, portfolio,
+pitch/press page, brand showcase.
+Here **design IS the product**. The page has one job: be memorable in six seconds.
+Distinctiveness beats familiarity. A visitor who cannot tell which product the
+screenshot belongs to means you shipped a template.
+
+**product** — app, dashboard, admin, console, settings, editor, devtool,
+data table, internal tool, any surface a user returns to daily.
+Here **design SERVES the task**. The user did not come to admire the interface;
+they came to finish something. Familiarity beats novelty, because every gram of
+novelty is a gram of relearning. Density is a virtue. The best compliment is that
+nobody mentioned the UI.
+
+**Ambiguous?** Ask: *does the user arrive to DECIDE, or to DO?* Decide → brand.
+Do → product. A marketing site with an embedded demo app is BOTH: the shell is
+brand register, the demo pane is product register. Register is a per-surface
+property, not a per-repo one.
+
+## What flips between registers
+
+| Dimension | brand | product |
+|---|---|---|
+| Typeface | a distinctive display face is required; a system-font-only page is a defect | a familiar neutral UI/system face is CORRECT and preferred; a display face is a defect on a data table |
+| Type scale | dramatic jumps (2.5x–4x display:body) carry the hierarchy | fixed rem scale, step ratio **1.125–1.2**; hierarchy comes from weight, color, and spacing |
+| Weights | extremes are a tool (200 vs 800) | 400 / 500 / 600 only; extremes read as shouting |
+| Color | one dominant + one sharp accent; committed | restrained is the FLOOR; color is a semantic signal (status, selection, danger), not decoration |
+| Background | depth is allowed (grain, geometry, layered fields) | flat surface tokens; a decorative background steals contrast from data |
+| Motion | ONE orchestrated page-load reveal is a signature | **no page-load choreography.** Motion only confirms a user action (≤150ms) or covers a state change |
+| Density | generous negative space OR controlled density — pick a binary | density is a FEATURE: minimize travel, fit more true rows per screen |
+| Novel layout | one unconventional section is required | conventional placement wins; put the nav where the user's hand already is |
+| Imagery | photography / illustration carries meaning | icons + data; decorative imagery is noise |
+
+## Rules that hold in BOTH registers
+
+These are register-independent — never relax them:
+
+1. Colors, fonts, spacing, radii, and motion durations all come from tokens. No
+   raw hex, no one-off inline style.
+2. Every surface token ships a paired `on-` foreground, and the pair meets WCAG
+   (4.5:1 body, 3:1 large/UI).
+3. **One** icon library, **one** stroke weight. Never mix libraries; never emoji as
+   an icon; never a hand-rolled decorative SVG. *Which* library is a per-pack choice.
+4. Real representative content — never lorem, never invented metrics.
+5. Every interactive element has hover / focus-visible / active / disabled states,
+   and every async surface has loading + empty + error states.
+6. No AI-purple (`oklch` hue 270–320 at chroma ≥ 0.09) as primary or accent unless
+   the requirement explicitly asks for purple.
+
+## Anti-patterns — with the observable tell
+
+| Anti-pattern | Observable tell | Positive target |
+|---|---|---|
+| Marketing type in a product | ≥3 font sizes whose max/min ratio ≥ 2.0 inside an app route | Fixed scale, ratio 1.125–1.2; carry hierarchy with weight + color |
+| Landing-page motion in an app | `animate-*` / staggered `delay-*` on a dashboard route's mount | Motion only on user action, ≤150ms |
+| Decorative background under data | gradient / mesh / grain declared on a route that renders a table or chart | Flat `--color-bg`; spend contrast on the data |
+| Over-rounded product chrome | `border-radius` ≥ 24px on a card / input / section | 6–12px; keep the eye on content, not on the container |
+| Airy space where density was asked for | ≥64px vertical rhythm between rows in a list/table view | 4pt scale, 8–16px row rhythm; more true rows per screen |
+| Grey-on-grey "clean" product UI | body text under 4.5:1 against its surface | Use the paired `on-` token; measure, don't eyeball |
+| System-font landing page | landing route's display face resolves to `system-ui` / `-apple-system` only | Commit to one distinctive display face + one body face |
+| Flat landing hierarchy | landing hero heading under 2.5x the body size | Let the display step be dramatic; that's what the register is for |
+
+## Completion criteria (check every one before you call the UI done)
+
+- [ ] The UIUX doc's `## Visual direction` names the register in one word: `brand` or `product`.
+- [ ] The chosen design pack's `register:` field includes that register.
+- [ ] Every rule you applied from `00-craft-rules.md` / `anti-ai-slop.md` marked
+      *brand-only* was skipped if the register is `product`.
+- [ ] Type scale: brand → the display:body ratio is ≥ 2.5; product → every adjacent
+      step ratio is within 1.125–1.2.
+- [ ] Motion: brand → at most ONE orchestrated entrance; product → zero mount
+      animations; every transition is ≤ 150ms and tied to an interaction.
+- [ ] Token file declares ≥ 6 color roles, each with a paired `on-` foreground.
+- [ ] Contrast measured, not eyeballed: 4.5:1 body, 3:1 large/UI, for every pair.
+- [ ] One icon library, one stroke weight, named in the UIUX doc.

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

@@ -2,6 +2,17 @@
 
 > 纯模型产出最大的问题不是"丑"，是"**generic（千篇一律、一眼 AI）**"。区别精品与 generic 的，是 **token 背后的"为什么"** 与一套**正向的品味规则**——不是只躲开几个雷，而是主动做对。本文件随设计系统**默认绑定**，每次 UI 都生效。
 
+## 0.0 先读 `01-register.md`：本文件多数条款只对 `brand` register 生效
+
+标 `[brand]` 的条款（禁系统字体、拉大字阶、极端字重、有质感的背景、编排式入场动效、强制结构非对称）**只适用于落地/营销/作品集页**。
+把它们套到 dashboard / admin / 设置页 / 开发者工具上，是在**主动把产品做坏**：
+- `[product]` 里，**熟悉的中性系统字体是正确答案**（用户是来读数据的，不是来欣赏字体的）；
+- `[product]` 里，字阶是**固定 rem 比例 1.125–1.2**，层级靠字重与颜色，不靠 3 倍跳跃；
+- `[product]` 里，**没有页面入场编排**，动效只确认用户动作（≤150ms）；
+- `[product]` 里，**克制的配色是底线**，密度是优点。
+
+未标注的条款 = `[both]`，永远生效（token 纪律、对比度、真实内容、单一图标库、无 emoji 图标、禁 AI 紫）。
+
 ---
 
 ## 0. 先定方向，再写代码（最关键的一步）
@@ -19,10 +30,11 @@
 
 ## 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 种。
+- `[brand]` **不要默认 Inter / Arial / 系统字体**——在营销页上它们是 AI 味的头号信号。选有性格的字体族（一个 display 标题字 + 一个干净正文字），用 `next/font` 或 `@font-face` 真正加载。
+- `[product]` **反过来：熟悉的中性 UI 字体（含系统字体栈）就是正确选择**，别给数据表硬塞展示字体——那是在增加认知成本，不是在提升品质。
+- **战略性字距 letter-spacing** `[both]`：大标题收紧（`-0.02em ~ -0.01em`）；全大写小标签放开（`0.06em ~ 0.1em`）；正文 `0`；下限 `-0.04em`（再紧就是挤成一团）。
+- **模块化字阶** `[both]`（用比例而非随手取值）：`[product]` 固定 1.125–1.2；`[brand]` 可拉到 1.25–1.333，display 与正文**对比要拉开**（display 可到 48–96px）。建立 `--text-xs…--text-5xl`。
+- 正文行高 1.5–1.7（下限 1.3），行宽 50–75 字符；标题行高 1.05–1.2。一个页面字重 ≤3 种；`[product]` 用 400/500/600 即可。
 
 ## 2. 色彩：主色 + 锐利强调，OKLCH 思维
 
@@ -85,35 +97,41 @@
 
 ## 10. 硬规格（battle-tested 具体值，照抄即可）
 
-**字体 reflex-reject（默认禁用，除非品牌 brief 明确点名）**
-- 被用烂的"安全默认"：`Inter / Roboto / Open Sans / Lato / Montserrat / Poppins / Nunito` — 一眼 AI。
+**`[brand]` 字体 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 个字体族。
+- `[product]` **本条不适用**：应用/后台里用这些中性 UI 字体是**对的**——它们易读、字距成熟、数字有 tabular 变体。
 
-**色彩硬规格**
+**色彩硬规格** `[both]`
 - **60-30-10**（按视觉重量）：60% 中性面 / 30% 次要 / 10% 主色；accent 占视口 **≤3%**，只给最高优先 CTA。
 - 用 **OKLCH**；中性色向品牌色相偏 `+0.005~0.015` chroma（有温度的灰）。
-- **禁 AI 紫**：hue 250–310 的主色、`#7c3aed / #8b5cf6 / #a855f7 / #764ba2 / #667eea` 渐变。
+- **禁 AI 紫**：OKLCH **色相 270–320 且 chroma ≥ 0.09** 的主色/强调色（`#6366f1 #4f46e5 #8b5cf6 #7c3aed #a855f7` 及邻近色）、以及 `#667eea→#764ba2` 这类渐变。**改用**：产品自己拥有的一个色相（电蓝+青绿 / 金 / 电光黄 / 墨红…），并把对比度算出来。
 - **禁"奶油米色"带**：OKLCH `L 0.84–0.97 · C<0.06 · hue 40–100`（以及 `--paper/--cream/--sand/--linen` 这种 token 命名本身就是 tell）。
+- 每个 surface token **必须配一个 `on-` 前景**；每一对都过 WCAG（正文 4.5:1、大字/UI 3:1）——用算的，不用看的。
 - 深色模式：正文字重 −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`。
+- `[brand]` hero 标题按**字数**定级：21–50 字符 = display 大字；**>90 字符 = 头号 AI tell**（拆短）。
+- `[both]` display 字距下限 `≥ -0.04em`；ALL-CAPS 字距 `0.05–0.12em`；全大写行高下限 1.0；**斜体标题全局禁用**；正文 `≥16px`（`[product]` 数据密表格可到 13–14px，但不得 <12px）。
+- `[brand]` 标题与正文字重差 `≥300`；type scale 比例 `≥1.25`。
+- `[product]` type scale 比例 **1.125–1.2**，字重 400/500/600——层级靠字重+颜色+间距，不靠尺寸暴力。
 
 **间距/层级**
 - 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 宽高。
+- `[both]` 时长桶 `120 / 220 / 420ms`（或 100/300/500）；**退场 ≈ 进场的 75%**；80ms 以下视为"瞬时"。
+- `[both]` 缓动：`--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 过冲**（控制点越出 `[-0.1,1.1]` 即为过冲）。→ 改用上面那条真正被打磨过的 ease-out。
+- `[both]` `@media (prefers-reduced-motion)` 块必写；只用 transform/opacity 动，**禁 animate 宽/高/padding/margin**（会触发 layout）。
+- `[brand]` **把动效集中成一次编排式入场**：stagger `calc(var(--i)*50ms)` 封顶 500ms。
+- `[product]` **不要页面入场编排**：动效只确认用户动作（≤150ms）。dashboard 路由上出现 mount 动画/错峰 reveal 就是缺陷。
 
 **结构变化（AI 指纹的真正来源）**
-- "**对称读作'生成的'，非对称读作'有意的'**"。先选一个具名的**页面骨架/导航/页脚**原型再写代码；同一产品多页不要重复同一种骨架。
-- 图标当作排版：同一页只用一套图标库、同一描边粗细。
+- `[brand]` "**对称读作'生成的'，非对称读作'有意的'**"。先选一个具名的**页面骨架/导航/页脚**原型再写代码；同一产品多页不要重复同一种骨架。
+- `[product]` 反过来：**常规位置就是对的**——导航放在用户的手已经在的地方，别为了"不一样"而重排。
+- `[both]` 图标当作排版：**声明一套图标库 + 一种描边粗细**，全站不混用；禁 emoji 当图标；禁手搓装饰性 SVG。**具体选哪一套库是每个 pack / 每个产品自己的决定，没有全局默认**——一个被全体钦定的图标库本身就是"千篇一律"的来源。
 
 **文案 tells（出现即扣分）**
 - 营销空话：`streamline / empower / supercharge / world-class / enterprise-grade / seamless / cutting-edge`。
@@ -130,20 +148,27 @@
 `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/编造指标。
+1. `[both]` 不用默认 teal `#16d5e6` / 默认 indigo-blue 作主色（除非 brief 点名）。
+2. `[both]` **只用一个** accent；第二个强调色 = 失败。
+3. `[both]` 容器嵌套深度 **≤2**（卡中卡中卡 = 失败）。
+4. `[brand]` 主字体不用 Inter/Roboto/Arial/Helvetica（brutalist 档的 Helvetica 例外）。`[product]` **本条不适用**——中性 UI 字体就是正解。
+5. `[brand]` Hero 里不放 3 列等宽 feature 卡网格。
+6. `[both]` 一个页面只用**一套**图标库、一种描边；能用纯排版表达就别堆图标网格。
+7. `[both]` 深色背景上不放紫→粉/靛紫渐变。
+8. `[brand]` 不用"玻璃卡堆叠"当 hero（除非 glass-aurora 档且克制）。
+9. `[both]` 动效只为表意，且必带 `prefers-reduced-motion`。`[product]` 额外：无入场编排。
+10. `[both]` 文案产品专属，不用占位/buzzword/编造指标。
 
 **成败判据（thumbnail test）**：把成品缩成缩略图，**不应与任何其它 AI 生成的项目雷同**——一眼能认出是"这个产品"，而不是"又一个 AI 页面"。
 
-**生成顺序（每步定了再下一步）**：① Design Read 一句话(什么页面/给谁/什么气质/选哪个家族) → ② 锁 token 表(OKLCH/hex + 字体 + 图标库 + 间距/圆角) → ③ 布局骨架(可先 ASCII 线框) + 动效规格 → ④ 才写实现，只引用已锁 token。
+**生成顺序（每步定了再下一步，不许跳步直接写 token）**：
+① **Visual direction**（写进 UIUX 文档的 `## Visual direction` 段，这是 `design-direction` 计划步的验收物）——
+  a. **Design read 一句话**：什么页面 / 给谁 / **register(`brand` 还是 `product`)** / 什么气质 / 选哪个家族。
+  b. **三个被逼出来的决定**：① 用色承诺度（`restrained | committed | full-palette | drenched`）；② 明暗由**一个物理场景句**决定（谁在用、在哪、什么环境光、什么情绪——如果这句话逼不出明或暗，就把场景写得更具体）；③ **2–3 个具名锚点参照，每个绑定到一个具体维度**（密度参照一个、排版参照另一个、留白参照第三个）——"modern / clean / 现代感"这类形容词一律不算数，会被打回。
+  c. **Anti-goals**：这个产品明确**不**走哪几个方向。
+② 锁 token 表（OKLCH + 每个 surface 配 `on-` 前景 + 字体 + 图标库/描边 + 间距/圆角/动效时长）。
+③ 布局骨架（可先 ASCII 线框）+ 动效规格。
+④ 才写实现，只引用已锁 token。
 
 ## 12. 交付前自评门（pre-emit self-critique，必做）
 

package/design-systems/bold-geometric.md

@@ -5,8 +5,11 @@ domain: design-systems
 category: design-systems
 difficulty: intermediate
 tags: [bold, color, component, design-systems, geometric, layout, palette, patterns]
+register: [brand]
+icon-library: Tabler
+icon-stroke: 2
 quality_score: 70
-last_updated: 2026-06-15
+last_updated: 2026-07-14
 ---
 # Bold Geometric
 
@@ -20,33 +23,66 @@ Creative agencies, product launches, marketing landing pages, portfolios, brand
 
 ```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);
+  /* Surfaces + paired foregrounds — every pair clears WCAG AA */
+  --color-bg: oklch(14.5% 0.002 286.1);          /* off-black, never pure #000 */
+  --color-on-bg: oklch(100% 0 0);
+  --color-surface: oklch(19.2% 0.004 286.0);
+  --color-on-surface: oklch(100% 0 0);
+  --color-card: oklch(22.8% 0.006 285.9);
+  --color-on-card: oklch(91.4% 0.004 286.3);
+  --color-muted: oklch(17.9% 0.004 286.0);
+  --color-on-muted: oklch(68.8% 0.009 286.2);
+
+  /* One dominant + one sharp accent (brand register: commit) */
+  --color-primary: oklch(70.5% 0.193 39.2);      /* signal orange */
+  --color-on-primary: oklch(19.2% 0.048 45.8);
+  --color-primary-hover: oklch(76.0% 0.170 39.2);
+  --color-accent: oklch(77.5% 0.151 171.7);      /* electric teal */
+  --color-on-accent: oklch(23.8% 0.041 176.1);
+
+  --color-success: oklch(77.5% 0.151 171.7);
+  --color-on-success: oklch(23.8% 0.041 176.1);
+  --color-warning: oklch(82.7% 0.171 80.5);
+  --color-on-warning: oklch(24.4% 0.050 85.4);
+  --color-error: oklch(69.1% 0.199 23.9);
+  --color-on-error: oklch(19.7% 0.063 25.1);
+
+  --color-border: oklch(24.0% 0.005 286.0);
+  --color-border-hover: oklch(37.0% 0.006 286.1);
+  --color-border-focus: oklch(70.5% 0.193 39.2);
+
+  /* Type scale — brand register: dramatic jumps carry the hierarchy */
+  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
+  --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: 2.5rem;
+  --text-3xl: 3.75rem; --text-display: 6rem;
+
+  /* Spacing — 4pt grid */
+  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
+  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
+  --space-24: 96px;
+
+  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-full: 9999px;
+
+  --duration-fast: 150ms;
+  --duration-normal: 260ms;
+  --duration-reveal: 700ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  --shadow-glow: 0 0 40px oklch(70.5% 0.193 39.2 / 0.15);
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    --color-bg: #ffffff;
-    --color-surface: #f5f5f5;
-    --color-text: #000000;
-    --color-text-secondary: #555555;
-    --color-border: #e0e0e0;
+    --color-bg: oklch(97.6% 0.003 106.4); --color-on-bg: oklch(14.5% 0.002 286.1);
+    --color-surface: oklch(100% 0 0); --color-on-surface: oklch(14.5% 0.002 286.1);
+    --color-card: oklch(100% 0 0); --color-on-card: oklch(35.0% 0.005 286.1);
+    --color-muted: oklch(94.9% 0.003 106.5); --color-on-muted: oklch(42.2% 0.007 286.1);
+    --color-primary: oklch(55.3% 0.174 38.4); --color-on-primary: oklch(100% 0 0);
+    --color-accent: oklch(47.2% 0.088 174.6); --color-on-accent: oklch(100% 0 0);
+    --color-success: oklch(47.2% 0.088 174.6); --color-on-success: oklch(100% 0 0);
+    --color-warning: oklch(50.8% 0.108 73.3); --color-on-warning: oklch(100% 0 0);
+    --color-error: oklch(52.6% 0.190 26.8); --color-on-error: oklch(100% 0 0);
+    --color-border: oklch(88.0% 0.003 106.4);
     --shadow-glow: none;
   }
 }
@@ -67,12 +103,6 @@ Creative agencies, product launches, marketing landing pages, portfolios, brand
 | 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)

package/design-systems/brutalist-bold.md

@@ -5,8 +5,11 @@ domain: design-systems
 category: design-systems
 difficulty: intermediate
 tags: [brutalist, swiss, editorial, mono, high-contrast, oversized-type, design-systems, palette, patterns]
+register: [brand]
+icon-library: Tabler
+icon-stroke: 2
 quality_score: 72
-last_updated: 2026-06-19
+last_updated: 2026-07-14
 ---
 # Brutalist Bold
 
@@ -20,30 +23,62 @@ last_updated: 2026-06-19
 
 ```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;                       /* 野兽派：拒绝圆角 */
+  /* Surfaces + paired foregrounds — hard edges, zero softness, still AA-legible */
+  --color-bg: oklch(14.5% 0 0);                  /* #0a0a0a */
+  --color-on-bg: oklch(98.5% 0 0);
+  --color-surface: oklch(19.1% 0 0);
+  --color-on-surface: oklch(98.5% 0 0);
+  --color-card: oklch(22.6% 0 0);
+  --color-on-card: oklch(90.7% 0 0);
+  --color-muted: oklch(17.8% 0 0);
+  --color-on-muted: oklch(71.5% 0 0);
+
+  --color-primary: oklch(94.9% 0.218 116.7);     /* 单一刺眼信号色：电光黄 */
+  --color-on-primary: oklch(14.5% 0 0);
+  --color-primary-hover: oklch(97.0% 0.180 116.7);
+  --color-accent: oklch(64.5% 0.241 27.4);       /* 危险红，仅用于最强调 */
+  --color-on-accent: oklch(14.8% 0.061 29.2);
+
+  --color-success: oklch(81.0% 0.214 151.8);
+  --color-on-success: oklch(23.4% 0.054 154.8);
+  --color-warning: oklch(81.2% 0.170 76.4);
+  --color-on-warning: oklch(24.2% 0.050 83.0);
+  --color-error: oklch(64.5% 0.241 27.4);
+  --color-on-error: oklch(14.8% 0.061 29.2);
+
+  --color-border: oklch(26.0% 0 0);
+  --color-border-strong: oklch(98.5% 0 0);       /* 硬边：1-2px */
+
+  /* Type scale — brand register: 巨型排版 */
+  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
+  --text-lg: 1.25rem; --text-xl: 2rem; --text-2xl: 3rem;
+  --text-3xl: 4rem; --text-display: clamp(4rem, 11vw, 15rem);
+
+  /* Spacing — 4pt grid */
+  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
+  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
+  --space-24: 96px;
+
+  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-full: 0px;  /* 野兽派：拒绝圆角 */
+
+  --duration-fast: 80ms;
+  --duration-normal: 160ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* 硬切，不弹 */
 }
 
 @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;
+    --color-bg: oklch(96.1% 0.003 106.4); --color-on-bg: oklch(14.5% 0 0);
+    --color-surface: oklch(100% 0 0); --color-on-surface: oklch(14.5% 0 0);
+    --color-card: oklch(100% 0 0); --color-on-card: oklch(32.1% 0 0);
+    --color-muted: oklch(92.4% 0.004 106.5); --color-on-muted: oklch(37.1% 0 0);
+    --color-primary: oklch(46.7% 0.303 266.3);   /* 浅色下换电光蓝 */
+    --color-on-primary: oklch(100% 0 0);
+    --color-accent: oklch(51.6% 0.202 28.2); --color-on-accent: oklch(100% 0 0);
+    --color-success: oklch(46.4% 0.115 154.2); --color-on-success: oklch(100% 0 0);
+    --color-warning: oklch(47.1% 0.099 76.3); --color-on-warning: oklch(100% 0 0);
+    --color-error: oklch(51.6% 0.202 28.2); --color-on-error: oklch(100% 0 0);
+    --color-border-strong: oklch(14.5% 0 0);
   }
 }
 ```
@@ -63,10 +98,6 @@ last_updated: 2026-06-19
 | 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
 
 - 暴露的网格：可见的列线/基线，模块化排布，刻意的不对称。