@umacloud/knowledge 1.0.52 → 1.0.54

package/design-systems/design-system-deep-dive.md

@@ -72,7 +72,7 @@ Component（组件）   --button-bg: var(--color-primary)  用法："按钮背
   边框 `浅灰描边 → rgba(255,255,255,0.06) 半透明`、链接色按底色换亮度（亮底 `#376cd5` → 暗底 `#3b9eff`）。
 - **渐变只做氛围/媒介，不做 UI 填充**：氛围用低透明度径向 orb（`radial-gradient(circle, rgba(255,89,0,0.22) 0%, transparent 600px)`，6–22% 透明度，贴在 section 顶部），
   品牌 lift 交给"mesh / 背景图 / 真实摄影"，按钮和卡片用纯色。
-- **禁 AI 紫**：hue 250–310 作主色、`#6366f1 #7c3aed #8b5cf6 #a855f7 #764ba2 #667eea` 渐变——头号 AI 指纹。
+- **禁 AI 紫**：OKLCH **色相 270–320 且 chroma ≥ 0.09** 作主色/强调色（`#6366f1 #7c3aed #8b5cf6 #4f46e5 #a855f7` 及邻近色）、`#667eea→#764ba2` 渐变——头号 AI 指纹。**改用**产品自己拥有的一个色相，并把 `on-` 前景对比度算出来。
 - **禁"奶油米色带"当万能友好信号**：OKLCH `L 0.84–0.97 · C<0.06 · hue 40–100`，以及 `--paper/--cream/--sand/--linen` 这种命名本身就是 tell（暖奶白只在**明确的编辑/品质定位**下用）。
 - **对比度**：正文 ≥4.5:1、大字/UI ≥3:1。禁 gray-on-gray。
 

package/design-systems/editorial-clean.md

@@ -5,8 +5,11 @@ domain: design-systems
 category: design-systems
 difficulty: intermediate
 tags: [clean, color, component, design-systems, editorial, motion, palette, patterns]
+register: [brand, product]
+icon-library: Heroicons
+icon-stroke: 1.5
 quality_score: 70
-last_updated: 2026-06-15
+last_updated: 2026-07-14
 ---
 # Editorial Clean
 
@@ -20,35 +23,65 @@ Content sites, blogs, portfolios, documentation, news/media products. Products w
 
 ```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;
+  /* Surfaces + paired foregrounds */
+  --color-bg: oklch(99.4% 0.003 84.6);           /* warm near-white, not a templated cream */
+  --color-on-bg: oklch(21.8% 0 0);
+  --color-surface: oklch(100% 0 0);
+  --color-on-surface: oklch(21.8% 0 0);
+  --color-card: oklch(100% 0 0);
+  --color-on-card: oklch(35.0% 0.009 80.7);
+  --color-muted: oklch(97.0% 0.007 88.6);
+  --color-on-muted: oklch(45.4% 0.014 84.6);
+
+  --color-primary: oklch(49.5% 0.157 29.5);      /* ink red */
+  --color-on-primary: oklch(100% 0 0);
+  --color-primary-hover: oklch(44.5% 0.150 29.5);
+  --color-accent: oklch(35.6% 0.039 249.0);      /* slate blue */
+  --color-on-accent: oklch(100% 0 0);
+
+  --color-success: oklch(52.5% 0.123 152.7);
+  --color-on-success: oklch(100% 0 0);
+  --color-warning: oklch(54.5% 0.116 70.2);
+  --color-on-warning: oklch(100% 0 0);
+  --color-error: oklch(54.3% 0.174 29.7);
+  --color-on-error: oklch(100% 0 0);
+
+  --color-border: oklch(91.0% 0.008 84.6);
+  --color-border-hover: oklch(85.0% 0.010 84.6);
+  --color-border-focus: oklch(49.5% 0.157 29.5);
+
+  /* Type scale — reading-first: a real display step, calm body steps */
+  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem;
+  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem;
+  --text-3xl: 2.75rem; --text-display: 4rem;
+
+  /* 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: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-full: 9999px;
+
+  --duration-fast: 140ms;
+  --duration-normal: 220ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
+
   --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;
+    --color-bg: oklch(19.2% 0.004 84.6); --color-on-bg: oklch(93.8% 0.012 84.6);
+    --color-surface: oklch(23.9% 0.006 91.6); --color-on-surface: oklch(93.8% 0.012 84.6);
+    --color-card: oklch(27.8% 0.006 78.2); --color-on-card: oklch(86.8% 0.013 82.4);
+    --color-muted: oklch(21.4% 0.004 84.6); --color-on-muted: oklch(71.5% 0.013 75.3);
+    --color-primary: oklch(71.6% 0.128 32.2); --color-on-primary: oklch(20.9% 0.047 33.9);
+    --color-accent: oklch(76.7% 0.061 244.8); --color-on-accent: oklch(22.0% 0.027 242.6);
+    --color-success: oklch(75.5% 0.137 155.7); --color-on-success: oklch(23.0% 0.055 151.4);
+    --color-warning: oklch(78.5% 0.122 82.1); --color-on-warning: oklch(23.8% 0.046 80.5);
+    --color-error: oklch(69.6% 0.142 28.0); --color-on-error: oklch(20.4% 0.057 30.4);
+    --color-border: oklch(31.0% 0.006 84.6);
   }
 }
 ```
@@ -69,12 +102,6 @@ Content sites, blogs, portfolios, documentation, news/media products. Products w
 | 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

package/design-systems/glass-aurora.md

@@ -5,8 +5,11 @@ domain: design-systems
 category: design-systems
 difficulty: intermediate
 tags: [glassmorphism, aurora, frosted, depth, ai, modern, gradient-controlled, design-systems, palette, patterns]
+register: [brand]
+icon-library: Lucide
+icon-stroke: 1.5
 quality_score: 72
-last_updated: 2026-06-19
+last_updated: 2026-07-14
 ---
 # Glass Aurora
 
@@ -20,34 +23,72 @@ AI / 大模型产品、现代消费工具、creator 工具、做得高级的 web
 
 ```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%);
+  /* Surfaces + paired foregrounds — 玻璃层叠在实底 token 之上，前景永远配对 */
+  --color-bg: oklch(13.6% 0.012 274.6);          /* 近黑带蓝 */
+  --color-on-bg: oklch(97.3% 0.007 268.5);
+  --color-surface: oklch(19.3% 0.017 273.8);     /* 玻璃层的实底回退（backdrop-filter 不可用时） */
+  --color-on-surface: oklch(97.3% 0.007 268.5);
+  --color-card: oklch(23.2% 0.020 271.8);
+  --color-on-card: oklch(91.6% 0.016 270.0);
+  --color-muted: oklch(17.0% 0.015 272.3);
+  --color-on-muted: oklch(71.3% 0.033 269.7);
+
+  --color-primary: oklch(66.2% 0.179 265.8);     /* 克制的电蓝 — 蓝，不是 AI 紫 */
+  --color-on-primary: oklch(14.9% 0.041 261.8);
+  --color-primary-hover: oklch(72.0% 0.160 265.8);
+  --color-accent: oklch(81.8% 0.137 180.7);      /* 青绿点缀 */
+  --color-on-accent: oklch(23.5% 0.039 183.5);
+
+  --color-success: oklch(81.8% 0.137 180.7);
+  --color-on-success: oklch(23.5% 0.039 183.5);
+  --color-warning: oklch(86.2% 0.135 81.0);
+  --color-on-warning: oklch(24.2% 0.047 81.2);
+  --color-error: oklch(69.5% 0.196 18.5);
+  --color-on-error: oklch(19.6% 0.065 20.5);
+
+  /* 玻璃 */
+  --color-glass: oklch(100% 0 0 / 0.04);
+  --color-glass-strong: oklch(100% 0 0 / 0.08);
+  --color-glass-border: oklch(100% 0 0 / 0.12);  /* 1px 反光描边 */
+  --color-border: oklch(100% 0 0 / 0.08);
   --blur: 16px;
-  --radius: 16px;
+
+  /* 极光：极低饱和、大模糊、固定在背景，绝不做成 hero 主色块 */
+  --aurora: radial-gradient(60% 50% at 20% 0%, oklch(66.2% 0.179 265.8 / 0.18), transparent 70%),
+            radial-gradient(50% 40% at 90% 10%, oklch(81.8% 0.137 180.7 / 0.12), transparent 70%);
+
+  /* Type scale — brand register */
+  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
+  --text-lg: 1.25rem; --text-xl: 1.625rem; --text-2xl: 2.25rem;
+  --text-3xl: 3rem; --text-display: 4.5rem;
+
+  /* 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: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px;
+
+  --duration-fast: 150ms;
+  --duration-normal: 240ms;
+  --duration-reveal: 600ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @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%);
+    --color-bg: oklch(97.6% 0.007 268.5); --color-on-bg: oklch(18.4% 0.040 271.0);
+    --color-surface: oklch(100% 0 0); --color-on-surface: oklch(18.4% 0.040 271.0);
+    --color-card: oklch(100% 0 0); --color-on-card: oklch(37.7% 0.044 273.7);
+    --color-muted: oklch(94.9% 0.013 266.7); --color-on-muted: oklch(42.5% 0.042 274.0);
+    --color-primary: oklch(48.0% 0.191 266.5); --color-on-primary: oklch(100% 0 0);
+    --color-accent: oklch(47.4% 0.085 180.5); --color-on-accent: oklch(100% 0 0);
+    --color-success: oklch(47.4% 0.085 180.5); --color-on-success: oklch(100% 0 0);
+    --color-warning: oklch(51.2% 0.108 75.1); --color-on-warning: oklch(100% 0 0);
+    --color-error: oklch(53.7% 0.190 21.0); --color-on-error: oklch(100% 0 0);
+    --color-glass: oklch(100% 0 0 / 0.7);
+    --color-glass-border: oklch(18.4% 0.040 271.0 / 0.08);
+    --aurora: radial-gradient(60% 50% at 20% 0%, oklch(48.0% 0.191 266.5 / 0.10), transparent 70%);
   }
 }
 ```
@@ -67,10 +108,6 @@ AI / 大模型产品、现代消费工具、creator 工具、做得高级的 web
 | 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)`，不随滚动喧宾）。

package/design-systems/modern-minimal.md

@@ -5,8 +5,11 @@ domain: design-systems
 category: design-systems
 difficulty: intermediate
 tags: [borders, color, component, design-systems, minimal, modern, palette, patterns]
+register: [product]
+icon-library: Lucide
+icon-stroke: 1.5
 quality_score: 70
-last_updated: 2026-06-15
+last_updated: 2026-07-14
 ---
 # Modern Minimal
 
@@ -14,132 +17,132 @@ last_updated: 2026-06-15
 
 ## When to use
 
-SaaS products, developer tools, dashboards, productivity apps. Products where information density matters but visual noise must stay low.
+**Register: product.** SaaS products, developer tools, dashboards, productivity apps. Products where information density matters but visual noise must stay low. Read `01-register.md` first: the product register's rules apply here, and every brand-only rule (display type, page-load choreography, background depth) is OFF.
 
 ## Color palette
 
+Every surface role ships a paired `on-` foreground; every declared pair clears WCAG AA (4.5:1 body). Colors are OKLCH — perceptually uniform, so `L` is the only knob you need to turn to derive a hover/muted variant.
+
 ```css
 :root {
-  /* Surface */
-  --color-bg: #fafafa;
-  --color-surface: #ffffff;
-  --color-surface-elevated: #ffffff;
-  --color-surface-sunken: #f4f4f5;
-
-  /* Text */
-  --color-text: #18181b;
-  --color-text-secondary: #71717a;
-  --color-text-tertiary: #a1a1aa;
-
-  /* Brand */
-  --color-primary: #2563eb;
-  --color-primary-hover: #1d4ed8;
-  --color-primary-muted: #dbeafe;
+  /* Surfaces + their paired foregrounds */
+  --color-bg: oklch(98.5% 0 0); --color-on-bg: oklch(21.0% 0.006 285.9);
+  --color-surface: oklch(100% 0 0); --color-on-surface: oklch(21.0% 0.006 285.9);
+  --color-card: oklch(100% 0 0); --color-on-card: oklch(37.0% 0.012 285.8);
+  --color-muted: oklch(96.7% 0 0); --color-on-muted: oklch(44.2% 0.015 285.8);
 
-  /* Accent */
-  --color-accent: #8b5cf6;
+  /* Brand + one restrained accent (never AI-purple) */
+  --color-primary: oklch(48.8% 0.217 264.4); --color-on-primary: oklch(100% 0 0);
+  --color-primary-hover: oklch(43.8% 0.200 264.4);
+  --color-accent: oklch(51.1% 0.086 186.4); --color-on-accent: oklch(100% 0 0);
 
   /* Status */
-  --color-success: #22c55e;
-  --color-warning: #f59e0b;
-  --color-error: #ef4444;
+  --color-success: oklch(52.7% 0.137 150.1); --color-on-success: oklch(100% 0 0);
+  --color-warning: oklch(55.5% 0.146 49.0); --color-on-warning: oklch(100% 0 0);
+  --color-error: oklch(53.5% 0.203 27.6); --color-on-error: oklch(100% 0 0);
 
   /* Border */
-  --color-border: #e4e4e7;
-  --color-border-hover: #d4d4d8;
-  --color-border-focus: #2563eb;
+  --color-border: oklch(92.0% 0.004 286.3);
+  --color-border-hover: oklch(87.0% 0.006 286.3);
+  --color-border-focus: oklch(48.8% 0.217 264.4);
+
+  /* Type scale — product register: fixed ratio ~1.2 */
+  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
+  --text-xl: 1.375rem; --text-2xl: 1.625rem; --text-3xl: 2rem;
+
+  /* Spacing — 4pt grid */
+  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
+  --space-12: 48px; --space-16: 64px;
+
+  /* Radius */
+  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
+
+  /* Motion */
+  --duration-fast: 120ms; --duration-normal: 180ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
 
   /* Shadow */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-bg: #09090b;
-    --color-surface: #18181b;
-    --color-surface-elevated: #27272a;
-    --color-surface-sunken: #09090b;
-    --color-text: #fafafa;
-    --color-text-secondary: #a1a1aa;
-    --color-text-tertiary: #71717a;
-    --color-primary-muted: #1e3a5f;
-    --color-border: #27272a;
-    --color-border-hover: #3f3f46;
-    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+    --color-bg: oklch(14.1% 0.004 285.8);       /* #09090b */
+    --color-on-bg: oklch(98.5% 0 0);
+    --color-surface: oklch(21.0% 0.006 285.9); --color-on-surface: oklch(98.5% 0 0);
+    --color-card: oklch(27.4% 0.005 286.0); --color-on-card: oklch(92.0% 0.004 286.3);
+    --color-muted: oklch(21.0% 0.006 285.9); --color-on-muted: oklch(71.2% 0.013 286.1);
+    --color-primary: oklch(71.4% 0.143 254.6); --color-on-primary: oklch(18.3% 0.031 263.4);
+    --color-accent: oklch(78.5% 0.133 181.9); --color-on-accent: oklch(22.5% 0.036 182.4);
+    --color-success: oklch(80.0% 0.182 151.7); --color-on-success: oklch(26.6% 0.063 152.9);
+    --color-warning: oklch(83.7% 0.164 84.4); --color-on-warning: oklch(23.5% 0.047 73.4);
+    --color-error: oklch(71.1% 0.166 22.2); --color-on-error: oklch(19.9% 0.061 24.7);
+    --color-border: oklch(27.4% 0.005 286.0);
+    --color-border-hover: oklch(37.0% 0.012 285.8);
   }
 }
 ```
 
 ## Typography
 
-- **Headings**: `Inter, -apple-system, BlinkMacSystemFont, sans-serif`, weight 600
-- **Body**: `Inter, -apple-system, BlinkMacSystemFont, sans-serif`, weight 400
-- **Code**: `JetBrains Mono, Menlo, monospace`, weight 400
-
-| Level | Size | Weight | Line-height | Letter-spacing | Use |
-|---|---|---|---|---|---|
-| h1 | 2.25rem (36px) | 700 | 1.2 | -0.025em | Page title |
-| h2 | 1.5rem (24px) | 600 | 1.3 | -0.02em | Section header |
-| h3 | 1.25rem (20px) | 600 | 1.4 | -0.015em | Card title |
-| body-lg | 1.125rem (18px) | 400 | 1.6 | 0 | Hero subtitle |
-| body | 1rem (16px) | 400 | 1.5 | 0 | Default text |
-| body-sm | 0.875rem (14px) | 400 | 1.5 | 0 | Secondary text |
-| caption | 0.75rem (12px) | 500 | 1.4 | 0.02em | Labels, badges |
+Product register: a familiar neutral UI face is CORRECT here — the user is reading data, not admiring the letterforms. Do not import a display face for a dashboard.
 
-## Spacing
+- **UI / Body**: `Inter, ui-sans-serif, system-ui, sans-serif`, weight 400
+- **Headings**: same family, weight 600 (hierarchy comes from weight + color, not a second face)
+- **Code / numerics**: `JetBrains Mono, ui-monospace, monospace`, weight 400 — tabular figures for any column of numbers
 
-4px base grid: `4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96`
+Fixed scale, adjacent step ratio ~1.2 (never a 3x display jump — that is the brand register):
 
-## Borders & radius
-
-- Default radius: `8px`
-- Small radius: `6px` (badges, tags)
-- Large radius: `12px` (cards, modals)
-- Full radius: `9999px` (pills, avatars)
-- Border width: `1px`
+| Level | Token | Size | Weight | Line-height | Tracking | Use |
+|---|---|---|---|---|---|---|
+| h1 | `--text-3xl` | 32px | 600 | 1.25 | -0.02em | Page title |
+| h2 | `--text-2xl` | 26px | 600 | 1.3 | -0.015em | Section header |
+| h3 | `--text-xl` | 22px | 600 | 1.35 | -0.01em | Card title |
+| body | `--text-base` | 16px | 400 | 1.5 | 0 | Default text |
+| body-sm | `--text-sm` | 14px | 400 | 1.5 | 0 | Table cells, secondary |
+| caption | `--text-xs` | 12px | 500 | 1.4 | 0.02em | Labels, badges |
 
 ## Component patterns
 
 ### Buttons
-- Primary: `bg-primary text-white`, hover darkens 10%, active darkens 15%, disabled opacity 0.5
-- Secondary: `bg-transparent border-default text-primary`, hover bg-surface-sunken
-- Ghost: no border, hover bg-surface-sunken
-- Height: 36px (sm), 40px (md), 44px (lg)
+- Primary: `background: var(--color-primary); color: var(--color-on-primary)`; hover → `--color-primary-hover`; disabled opacity 0.5
+- Secondary: transparent fill, `--color-border`, text `--color-primary`; hover fill `--color-muted`
+- Ghost: no border; hover fill `--color-muted`
+- Height: 32px (sm), 36px (md), 40px (lg) — product register: compact hit targets beat airy ones
 - Padding: 12px horizontal (sm), 16px (md), 20px (lg)
-- Font: body-sm weight 500
+- Font: `--text-sm` weight 500
 
 ### Cards
-- `bg-surface border-default radius-lg shadow-sm`
-- Hover: `shadow-md border-hover`
-- Padding: 20px (compact), 24px (default)
+- `background: var(--color-card); color: var(--color-on-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg)`
+- Hover: `--shadow-md` + `--color-border-hover`
+- Padding: 16px (compact), 20px (default) — never both a 1px hairline border AND a wide (≥16px blur) shadow; pick one elevation language
 
 ### Inputs
-- Height: 40px
-- `bg-surface border-default radius-md`
-- Focus: `border-focus shadow(0 0 0 3px primary-muted)`
-- Error: `border-error`
+- Height: 36px
+- `background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md)`
+- Focus: `--color-border-focus` + a 2px focus ring at 2px offset
+- Error: `--color-error` border + an `--color-on-error`-legible message
 
 ## Motion
 
-- `--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1)` — hover, focus
-- `--transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1)` — expand, collapse
-- `--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1)` — modals, drawers
+Product register: motion CONFIRMS an action, it never announces the page. No mount/entrance animation, no staggered reveal, no scroll-triggered choreography — that is the brand register.
+
+- `--duration-fast: 120ms` + `--ease-standard` — hover, focus, press
+- `--duration-normal: 180ms` + `--ease-standard` — expand/collapse, popover, drawer
+- Never animate `width` / `height` / `padding` / `margin` (they force layout) — animate `transform` and `opacity`.
 
 ## Do
 
-- Let whitespace do the work. 24-32px between sections minimum.
+- Let whitespace do the work between GROUPS (16–24px); keep rows dense (8–12px).
 - One accent color, used at most 2x per screen.
 - Subtle borders over heavy shadows.
-- Monochrome icons (Lucide stroke width 1.5).
+- Monochrome icons from ONE library at ONE stroke weight (this pack: Lucide, stroke 1.5).
 
 ## Don't
 
-- Purple/pink gradient hero backgrounds.
-- More than 2 font weights per page.
-- Shadows heavier than `shadow-md` on cards.
-- Icon + text + icon on every row.
-- Rounded everything (keep some sharp edges for contrast).
+- Purple/pink gradient hero backgrounds → commit to `--color-primary` as a solid.
+- More than 2 font weights per page → carry hierarchy with size + color instead.
+- Shadows heavier than `--shadow-md` on cards → let the border carry elevation.
+- A mount/entrance animation on a dashboard route → motion only on interaction.

package/design-systems/premium-luxury.md

@@ -5,8 +5,11 @@ domain: design-systems
 category: design-systems
 difficulty: intermediate
 tags: [luxury, premium, refined, elegant, serif, dark, single-accent, generous-space, design-systems, palette, patterns]
+register: [brand]
+icon-library: Heroicons
+icon-stroke: 1
 quality_score: 72
-last_updated: 2026-06-19
+last_updated: 2026-07-14
 last_note: high-end refined aesthetic
 ---
 # Premium Luxury
@@ -21,31 +24,66 @@ last_note: high-end refined aesthetic
 
 ```css
 :root {
-  --color-bg: #0b0b0c;
-  --color-surface: #131316;
-  --color-surface-elevated: #1b1b1f;
-  --color-text: #f5f3ef;               /* 暖白，非纯白 */
-  --color-text-secondary: #b8b3a8;
-  --color-text-tertiary: #76726a;
-  --color-primary: #c8a96a;            /* 单一精炼金 —— 唯一强调，面积极小 */
-  --color-primary-hover: #d9bd84;
-  --color-accent: #c8a96a;             /* 不引入第二强调色 */
-  --color-success: #7d9a76;
-  --color-error: #b5544e;
-  --color-border: #26262b;
-  --color-border-accent: rgba(200,169,106,0.4);
-  --radius: 4px;                        /* 极小圆角，克制 */
-  --shadow-soft: 0 24px 60px rgba(0,0,0,0.5);
+  /* Surfaces + paired foregrounds — 克制是奢华的本质 */
+  --color-bg: oklch(15.0% 0.002 286.1);
+  --color-on-bg: oklch(96.5% 0.006 84.6);        /* 暖白，非纯白 */
+  --color-surface: oklch(18.8% 0.006 285.8);
+  --color-on-surface: oklch(96.5% 0.006 84.6);
+  --color-card: oklch(22.4% 0.008 285.8);
+  --color-on-card: oklch(88.6% 0.012 84.6);
+  --color-muted: oklch(17.9% 0.006 285.8);
+  --color-on-muted: oklch(70.8% 0.012 76.6);
+
+  --color-primary: oklch(74.8% 0.089 84.2);      /* 单一精炼金 —— 唯一强调，面积极小 */
+  --color-on-primary: oklch(19.5% 0.024 84.0);
+  --color-primary-hover: oklch(80.0% 0.080 84.2);
+  --color-accent: oklch(74.8% 0.089 84.2);       /* 不引入第二强调色 */
+  --color-on-accent: oklch(19.5% 0.024 84.0);
+
+  --color-success: oklch(71.7% 0.065 139.3);
+  --color-on-success: oklch(19.9% 0.038 140.1);
+  --color-warning: oklch(75.5% 0.103 82.1);
+  --color-on-warning: oklch(22.4% 0.042 87.2);
+  --color-error: oklch(66.3% 0.123 25.2);
+  --color-on-error: oklch(20.0% 0.054 28.7);
+
+  --color-border: oklch(26.5% 0.006 285.8);
+  --color-border-accent: oklch(74.8% 0.089 84.2 / 0.4);
+
+  /* Type scale — 衬线标题 × 无衬线正文的对比 */
+  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
+  --text-lg: 1.25rem; --text-xl: 1.625rem; --text-2xl: 2.25rem;
+  --text-3xl: 3.25rem; --text-display: 5rem;
+
+  /* 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: 2px; --radius-md: 4px; --radius-lg: 4px; --radius-full: 9999px;  /* 极小圆角，克制 */
+
+  --duration-fast: 200ms;
+  --duration-normal: 400ms;
+  --duration-reveal: 900ms;                       /* 慢而顺滑 */
+  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+
+  --shadow-soft: 0 24px 60px rgb(0 0 0 / 0.5);
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    --color-bg: #faf8f3;               /* 暖象牙白（非奶油 AI 米色——靠极低饱和的真象牙 + 金强调区分） */
-    --color-surface: #ffffff;
-    --color-text: #1a1814;
-    --color-text-secondary: #5c574d;
-    --color-primary: #9a7b3f;          /* 浅底下加深金以保对比 */
-    --color-border: #e7e2d6;
+    --color-bg: oklch(97.9% 0.007 88.6);         /* 暖象牙白（非奶油 AI 米色——极低饱和的真象牙 + 金强调区分） */
+    --color-on-bg: oklch(21.0% 0.008 84.6);
+    --color-surface: oklch(100% 0 0); --color-on-surface: oklch(21.0% 0.008 84.6);
+    --color-card: oklch(100% 0 0); --color-on-card: oklch(35.4% 0.017 82.3);
+    --color-muted: oklch(94.9% 0.012 91.5); --color-on-muted: oklch(41.1% 0.017 84.6);
+    --color-primary: oklch(54.9% 0.083 81.1);    /* 浅底下加深金以保对比 */
+    --color-on-primary: oklch(100% 0 0);
+    --color-accent: oklch(54.9% 0.083 81.1); --color-on-accent: oklch(100% 0 0);
+    --color-success: oklch(48.2% 0.091 141.4); --color-on-success: oklch(100% 0 0);
+    --color-warning: oklch(49.2% 0.096 80.3); --color-on-warning: oklch(100% 0 0);
+    --color-error: oklch(51.8% 0.135 26.8); --color-on-error: oklch(100% 0 0);
+    --color-border: oklch(90.5% 0.010 88.6);
   }
 }
 ```
@@ -65,10 +103,6 @@ last_note: high-end refined aesthetic
 | body | 1rem (16px) | 400 | 1.7 | 0 | 正文 |
 | overline | 0.75rem (12px) | 500 | 1.2 | 0.18em | 标签，ALL CAPS，宽字距 |
 
-## Spacing
-
-8px 基，**慷慨**：`8 / 16 / 32 / 64 / 96 / 160 / 240`。Hero 与区块用 160px+ 垂直留白。留白是主角。
-
 ## Layout
 
 - 大量负空间；少而精的元素；严格对齐与基线网格。