@umacloud/knowledge 1.0.51 → 1.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/design-systems/00-craft-rules.md +89 -43
- package/design-systems/01-register.md +99 -0
- package/design-systems/anti-ai-slop.md +52 -27
- package/design-systems/bold-geometric.md +60 -30
- package/design-systems/brutalist-bold.md +56 -25
- package/design-systems/design-system-deep-dive.md +1 -1
- package/design-systems/editorial-clean.md +57 -30
- package/design-systems/glass-aurora.md +65 -28
- package/design-systems/modern-minimal.md +86 -83
- package/design-systems/premium-luxury.md +60 -26
- package/design-systems/product-type-design-map.md +46 -29
- package/design-systems/soft-warm.md +57 -37
- package/design-systems/tech-utility.md +71 -41
- package/low-code/01-standards/low-code-complete.md +1 -1
- package/package.json +1 -1
|
@@ -1,48 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: product-type-design-map
|
|
3
|
+
title: 产品类型 → 设计推荐表
|
|
4
|
+
domain: design-systems
|
|
5
|
+
category: design-systems
|
|
6
|
+
tags: [palette, typography, product-type, design-systems, tokens, contrast]
|
|
7
|
+
quality_score: 76
|
|
8
|
+
last_updated: 2026-07-14
|
|
9
|
+
---
|
|
1
10
|
# 产品类型 → 设计推荐表（concrete palette + 字体对，照抄起步）
|
|
2
11
|
|
|
3
|
-
> 别从空白页开始猜。先按产品类型查这张表拿到**具体起步 token
|
|
12
|
+
> 别从空白页开始猜。先按产品类型查这张表拿到**具体起步 token + 字体对 + 落地结构 + 必避反模式**，再结合所选档位(`anti-ai-slop.md` 的家族)细化。
|
|
13
|
+
> **先读 `01-register.md` 定 register**：`brand`(落地/营销/作品集)与 `product`(应用/后台/工具)吃的是两套规则，用错那套会让产品 UI 更难用。
|
|
4
14
|
|
|
5
15
|
## 用法
|
|
6
16
|
1. 按需求匹配最接近的产品类型行。
|
|
7
|
-
2. 取它的 Primary/Accent/Background 作为 `--color-*` token
|
|
8
|
-
3.
|
|
9
|
-
4.
|
|
17
|
+
2. 取它的 Primary / Accent / Background / Foreground 作为 `--color-*` token 起点（写进 `:root`，组件里只用 `var()`）。
|
|
18
|
+
3. **每个 surface 必须配一个 `on-` 前景**：`--color-bg`/`--color-on-bg`、`--color-primary`/`--color-on-primary`……表里的 Foreground 就是 `--color-on-bg`。
|
|
19
|
+
4. 取字体对作为 display×body（标题/正文对比轴）。`product` register 行：正文用中性 UI 字体是**正确**的，别硬塞展示字体。
|
|
20
|
+
5. 落地结构与必避项作为硬约束。
|
|
10
21
|
|
|
11
22
|
## 推荐表
|
|
12
23
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
|
16
|
-
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
24
|
+
表内每一行都已用 WCAG 算过：Foreground↔Background ≥ 4.5:1（正文），Primary/Accent↔Background ≥ 3:1（UI/大字）。改色后**重算**，别靠眼睛。
|
|
25
|
+
|
|
26
|
+
| 产品类型 | register | 主风格 | Primary | Accent | Background | Foreground(on-bg) | 字体对(display / body) | 落地结构 | 必避 |
|
|
27
|
+
|---|---|---|---|---|---|---|---|---|---|
|
|
28
|
+
| SaaS(通用) | brand+product | 玻璃+扁平 | `#2563EB` | `#B45309` | `#F8FAFC` | `#0F172A` | Geist / Inter | Hero+Features+CTA | 过度动效、默认深色 |
|
|
29
|
+
| 微 SaaS / indie | brand | 扁平+活力 | `#0F766E` | `#B45309` | `#F6F8F7` | `#14201D` | Space Grotesk / DM Sans | Minimal+Demo | 静态无演示、移动端差 |
|
|
30
|
+
| 电商 | brand | 鲜明块面 | `#047857` | `#C2410C` | `#ECFDF5` | `#0B2A1F` | Clash Display / Inter | 商品 showcase | 无深度的纯扁平、文字堆砌 |
|
|
31
|
+
| 电商-奢侈 | brand | premium-luxury | `#1C1917` | `#8A6C34` | `#FAFAF9` | `#1C1917` | Playfair / Inter | 大图+留白 | 鲜艳/廉价实心按钮 |
|
|
32
|
+
| B2B 服务 | brand | 信任+极简 | `#0F172A` | `#0369A1` | `#F8FAFC` | `#0F172A` | Söhne / Inter | 信任模块+案例 | 花哨、第二强调色 |
|
|
33
|
+
| 金融仪表盘 | product | 数据密+深色 | `#38BDF8` | `#22C55E` | `#020617` | `#E2E8F0` | Inter / Inter | 数据看板 | 涨跌只用色不用符号 |
|
|
34
|
+
| 分析后台 | product | 数据密+热力 | `#1E40AF` | `#B45309` | `#F8FAFC` | `#0F172A` | Inter / Inter | 表格+图表 | 小字、gray-on-gray |
|
|
35
|
+
| 医疗健康 | brand+product | 柔和+可达 | `#0E7490` | `#047857` | `#ECFEFF` | `#0B2530` | Lora / Raleway | 信任+预约 | AI 紫粉渐变、低对比 |
|
|
36
|
+
| 教育 | brand+product | 柔和+微交互 | `#0E7490` | `#C2410C` | `#F0F7FA` | `#132A33` | Fredoka / Nunito | 课程+进度 | 冷峻严肃、密集 |
|
|
37
|
+
| 创意机构 | brand | brutalist-bold+motion | `#E6FF00` | `#FF2D2D` | `#0A0A0A` | `#FAFAFA` | Archivo Expanded / Inter Tight | 作品流 | 圆角柔和、居中弱字 |
|
|
38
|
+
| 作品集 | brand | motion+极简 | `#18181B` | `#1D4ED8` | `#FAFAFA` | `#18181B` | Clash Display / Inter | 项目网格 | 千篇一律模板 |
|
|
39
|
+
| 游戏 | brand | 3D+赛博 | `#00E5FF` | `#F43F5E` | `#0B0E1A` | `#E6F1FF` | Orbitron / Rajdhani | 沉浸 hero | 平淡无能量 |
|
|
40
|
+
| 金融科技/Crypto | brand+product | glass-aurora+深色 | `#5E8BFF` | `#36E0C8` | `#07080D` | `#E9EDF7` | General Sans / Inter | 实时数据+信任 | 满屏紫渐变、夸大收益 |
|
|
41
|
+
| 约会/社交 | brand | 活力+motion | `#D6244A` | `#9D2A6B` | `#FFF0F4` | `#2B1017` | Cabinet Grotesk / Inter | 卡片流 | 冷淡、低饱和 |
|
|
42
|
+
| 餐饮/美食 | brand | 暖色+motion | `#C2410C` | `#8A6410` | `#FFF8F0` | `#2A1A0C` | Recoleta / Inter | 大图诱食 | 冷色、无食物图 |
|
|
43
|
+
| 健身 | brand | 活力+深色 OLED | `#FF6B35` | `#00D4FF` | `#0A0A0A` | `#F5F5F5` | Druk / Inter | 强动感 hero | 柔弱、低对比 |
|
|
44
|
+
| 房产 | brand | 玻璃+极简 | `#0369A1` | `#8A6C34` | `#FCFCFB` | `#14181C` | Canela / Inter | 大图+地图 | 廉价、密集 |
|
|
45
|
+
| 旅行 | brand | aurora+motion | `#0369A1` | `#B45309` | `#F0F9FF` | `#0C2436` | Tiempos / Inter | 目的地大图 | 灰暗无憧憬感 |
|
|
46
|
+
| 音乐流媒体 | product | 深色 OLED+专辑色 | `#1DB954` | `#F5C518` | `#121212` | `#E8E8E8` | Inter / Inter | 沉浸播放（强调色可按封面动态取样，但仍须过对比） | 浅底、低对比 |
|
|
47
|
+
| 开发者工具/IDE | product | tech-utility/terminal | `#E0E0E0` | `#4AF626` | `#0A0A0A` | `#E0E0E0` | Berkeley Mono / Inter | 暗色+蓝焦点 | 花哨、圆润可爱 |
|
|
48
|
+
| AI/大模型产品 | brand+product | glass-aurora | `#5E8BFF` | `#36E0C8` | `#07080D` | `#E9EDF7` | General Sans / Inter | 对话/生成展示 | AI 紫主色、满屏渐变 |
|
|
36
49
|
|
|
37
50
|
## 字体对速查（按气质）
|
|
38
51
|
- 古典优雅(奢侈)：Playfair/Canela × Inter
|
|
39
52
|
- 现代专业(SaaS)：Geist/Poppins × Inter
|
|
40
53
|
- 科技初创(dev/AI)：Space Grotesk/General Sans × DM Sans
|
|
41
|
-
- 极简瑞士(后台)：Inter × Inter
|
|
54
|
+
- 极简瑞士(后台)：Inter × Inter（`product` register 下这是**正确**选择，不是偷懒）
|
|
42
55
|
- 活泼创意(儿童/教育)：Fredoka/Cabinet × Nunito
|
|
43
56
|
- 大胆宣言(机构/文化)：Archivo Expanded/Druk × Source Sans
|
|
44
57
|
- 康养平和(健康)：Lora × Raleway
|
|
45
58
|
- 编辑经典(出版)：Cormorant/Tiempos × Libre Baskerville
|
|
46
59
|
|
|
60
|
+
## 图标
|
|
61
|
+
每个产品**声明一个**图标库 + **一种**描边粗细，全站不混用；禁 emoji 当图标；禁手搓装饰性 SVG。具体选哪个库是每个 pack / 每个产品自己的决定，不是全局默认。
|
|
62
|
+
|
|
47
63
|
---
|
|
48
|
-
|
|
64
|
+
**注（硬禁令 + 正向目标）**：OKLCH 色相 270–320 且 chroma ≥ 0.09 的紫/靛（`#6366F1 / #4F46E5 / #8B5CF6 / #7C3AED / #A855F7` 及邻近色）是公认的 "AI-slop 紫"——**不要**用它当主色/强调色/hero 渐变，除非需求原文明确要紫色。
|
|
65
|
+
**改用**：上表里已经算过对比度的电蓝 + 青绿(glass-aurora)来表达"AI/未来感"；要"高级"就用 premium-luxury 的金；要"硬核"就用 brutalist 的电光黄。
|
|
@@ -5,8 +5,11 @@ domain: design-systems
|
|
|
5
5
|
category: design-systems
|
|
6
6
|
difficulty: intermediate
|
|
7
7
|
tags: [borders, color, component, design-systems, palette, patterns, radius, soft]
|
|
8
|
+
register: [brand, product]
|
|
9
|
+
icon-library: Lucide
|
|
10
|
+
icon-stroke: 1.75
|
|
8
11
|
quality_score: 70
|
|
9
|
-
last_updated: 2026-
|
|
12
|
+
last_updated: 2026-07-14
|
|
10
13
|
---
|
|
11
14
|
# Soft Warm
|
|
12
15
|
|
|
@@ -20,35 +23,65 @@ Consumer apps, education, wellness, onboarding flows, community products. Produc
|
|
|
20
23
|
|
|
21
24
|
```css
|
|
22
25
|
:root {
|
|
23
|
-
|
|
24
|
-
--color-
|
|
25
|
-
--color-
|
|
26
|
-
--color-surface
|
|
27
|
-
--color-
|
|
28
|
-
--color-
|
|
29
|
-
--color-
|
|
30
|
-
--color-
|
|
31
|
-
--color-
|
|
32
|
-
|
|
33
|
-
--color-
|
|
34
|
-
--color-
|
|
35
|
-
--color-
|
|
36
|
-
--color-
|
|
37
|
-
--color-
|
|
38
|
-
|
|
39
|
-
--color-
|
|
26
|
+
/* Surfaces + paired foregrounds */
|
|
27
|
+
--color-bg: oklch(99.0% 0.009 78.3);
|
|
28
|
+
--color-on-bg: oklch(32.9% 0.011 91.7);
|
|
29
|
+
--color-surface: oklch(100% 0 0);
|
|
30
|
+
--color-on-surface: oklch(32.9% 0.011 91.7);
|
|
31
|
+
--color-card: oklch(100% 0 0);
|
|
32
|
+
--color-on-card: oklch(44.6% 0.013 89.8);
|
|
33
|
+
--color-muted: oklch(97.2% 0.011 76.6);
|
|
34
|
+
--color-on-muted: oklch(47.5% 0.012 87.5);
|
|
35
|
+
|
|
36
|
+
--color-primary: oklch(56.2% 0.180 25.1); /* warm coral-red */
|
|
37
|
+
--color-on-primary: oklch(100% 0 0);
|
|
38
|
+
--color-primary-hover: oklch(50.5% 0.170 25.1);
|
|
39
|
+
--color-accent: oklch(51.6% 0.103 238.7); /* calm blue */
|
|
40
|
+
--color-on-accent: oklch(100% 0 0);
|
|
41
|
+
|
|
42
|
+
--color-success: oklch(51.9% 0.105 154.7);
|
|
43
|
+
--color-on-success: oklch(100% 0 0);
|
|
44
|
+
--color-warning: oklch(52.9% 0.104 80.9);
|
|
45
|
+
--color-on-warning: oklch(100% 0 0);
|
|
46
|
+
--color-error: oklch(56.2% 0.180 25.1);
|
|
47
|
+
--color-on-error: oklch(100% 0 0);
|
|
48
|
+
|
|
49
|
+
--color-border: oklch(92.5% 0.008 84.6);
|
|
50
|
+
--color-border-hover: oklch(88.5% 0.010 84.6);
|
|
51
|
+
--color-border-focus: oklch(56.2% 0.180 25.1);
|
|
52
|
+
|
|
53
|
+
/* Type scale — approachable but disciplined (ratio ~1.22) */
|
|
54
|
+
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
|
|
55
|
+
--text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
|
|
56
|
+
--text-3xl: 2.25rem; --text-display: 3rem;
|
|
57
|
+
|
|
58
|
+
/* Spacing — 4pt grid */
|
|
59
|
+
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
60
|
+
--space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
|
|
61
|
+
--space-24: 96px;
|
|
62
|
+
|
|
63
|
+
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px;
|
|
64
|
+
|
|
65
|
+
--duration-fast: 150ms;
|
|
66
|
+
--duration-normal: 220ms;
|
|
67
|
+
--ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
|
|
68
|
+
|
|
40
69
|
--shadow-sm: 0 1px 4px rgb(55 53 47 / 0.06);
|
|
41
70
|
--shadow-md: 0 4px 16px rgb(55 53 47 / 0.08);
|
|
42
71
|
}
|
|
43
72
|
|
|
44
73
|
@media (prefers-color-scheme: dark) {
|
|
45
74
|
:root {
|
|
46
|
-
--color-bg:
|
|
47
|
-
--color-surface:
|
|
48
|
-
--color-
|
|
49
|
-
--color-
|
|
50
|
-
--color-
|
|
51
|
-
--color-
|
|
75
|
+
--color-bg: oklch(20.9% 0.004 84.6); --color-on-bg: oklch(96.2% 0.009 84.6);
|
|
76
|
+
--color-surface: oklch(25.2% 0.004 84.6); --color-on-surface: oklch(96.2% 0.009 84.6);
|
|
77
|
+
--color-card: oklch(28.9% 0.006 91.6); --color-on-card: oklch(88.6% 0.012 84.6);
|
|
78
|
+
--color-muted: oklch(23.5% 0.004 84.6); --color-on-muted: oklch(72.0% 0.014 82.4);
|
|
79
|
+
--color-primary: oklch(72.7% 0.140 21.1); --color-on-primary: oklch(20.9% 0.059 23.8);
|
|
80
|
+
--color-accent: oklch(77.7% 0.090 235.4); --color-on-accent: oklch(23.1% 0.041 235.8);
|
|
81
|
+
--color-success: oklch(76.2% 0.125 154.0); --color-on-success: oklch(25.2% 0.059 153.0);
|
|
82
|
+
--color-warning: oklch(81.2% 0.117 84.1); --color-on-warning: oklch(24.5% 0.047 83.7);
|
|
83
|
+
--color-error: oklch(72.7% 0.140 21.1); --color-on-error: oklch(20.9% 0.059 23.8);
|
|
84
|
+
--color-border: oklch(32.0% 0.005 84.6);
|
|
52
85
|
}
|
|
53
86
|
}
|
|
54
87
|
```
|
|
@@ -67,19 +100,6 @@ Consumer apps, education, wellness, onboarding flows, community products. Produc
|
|
|
67
100
|
| body-sm | 0.875rem (14px) | 400 | 1.5 | Secondary text |
|
|
68
101
|
| caption | 0.75rem (12px) | 600 | 1.4 | Labels |
|
|
69
102
|
|
|
70
|
-
## Spacing
|
|
71
|
-
|
|
72
|
-
4px base: `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64`
|
|
73
|
-
|
|
74
|
-
Generous padding. Cards: 24px minimum. Sections: 48-64px vertical.
|
|
75
|
-
|
|
76
|
-
## Borders & radius
|
|
77
|
-
|
|
78
|
-
- Default radius: `12px`
|
|
79
|
-
- Small radius: `8px`
|
|
80
|
-
- Large radius: `16px`
|
|
81
|
-
- Full radius: `9999px` (avatars, pills, floating action buttons)
|
|
82
|
-
|
|
83
103
|
## Component patterns
|
|
84
104
|
|
|
85
105
|
### Card
|
|
@@ -5,8 +5,11 @@ domain: design-systems
|
|
|
5
5
|
category: design-systems
|
|
6
6
|
difficulty: intermediate
|
|
7
7
|
tags: [color, component, design-systems, motion, palette, patterns, spacing, tech]
|
|
8
|
+
register: [product]
|
|
9
|
+
icon-library: Lucide
|
|
10
|
+
icon-stroke: 1.5
|
|
8
11
|
quality_score: 70
|
|
9
|
-
last_updated: 2026-
|
|
12
|
+
last_updated: 2026-07-14
|
|
10
13
|
---
|
|
11
14
|
# Tech Utility
|
|
12
15
|
|
|
@@ -20,61 +23,88 @@ CLI companions, code platforms, monitoring dashboards, data tools, developer-fac
|
|
|
20
23
|
|
|
21
24
|
```css
|
|
22
25
|
:root {
|
|
23
|
-
|
|
24
|
-
--color-
|
|
25
|
-
--color-
|
|
26
|
-
--color-surface
|
|
27
|
-
--color-
|
|
28
|
-
--color-
|
|
29
|
-
--color-
|
|
30
|
-
--color-
|
|
31
|
-
--color-
|
|
32
|
-
|
|
33
|
-
--color-
|
|
34
|
-
--color-
|
|
35
|
-
--color-
|
|
36
|
-
--color-
|
|
37
|
-
--color-
|
|
38
|
-
|
|
39
|
-
--color-
|
|
26
|
+
/* Surfaces + paired foregrounds — dark-native, density-first */
|
|
27
|
+
--color-bg: oklch(17.6% 0.014 258.4);
|
|
28
|
+
--color-on-bg: oklch(94.3% 0.011 243.7);
|
|
29
|
+
--color-surface: oklch(22.0% 0.016 256.8);
|
|
30
|
+
--color-on-surface: oklch(94.3% 0.011 243.7);
|
|
31
|
+
--color-card: oklch(24.6% 0.015 256.8);
|
|
32
|
+
--color-on-card: oklch(85.7% 0.014 248.0);
|
|
33
|
+
--color-muted: oklch(10.4% 0.019 248.3);
|
|
34
|
+
--color-on-muted: oklch(71.4% 0.018 248.1);
|
|
35
|
+
|
|
36
|
+
--color-primary: oklch(71.5% 0.152 253.3); /* focus blue */
|
|
37
|
+
--color-on-primary: oklch(17.7% 0.034 246.5);
|
|
38
|
+
--color-primary-hover: oklch(78.0% 0.130 253.3);
|
|
39
|
+
--color-accent: oklch(72.7% 0.153 52.8); /* amber — deliberately NOT a violet accent */
|
|
40
|
+
--color-on-accent: oklch(20.9% 0.037 42.3);
|
|
41
|
+
|
|
42
|
+
--color-success: oklch(69.5% 0.181 145.6);
|
|
43
|
+
--color-on-success: oklch(21.9% 0.056 147.8);
|
|
44
|
+
--color-warning: oklch(72.0% 0.140 79.9);
|
|
45
|
+
--color-on-warning: oklch(21.7% 0.041 83.5);
|
|
46
|
+
--color-error: oklch(66.5% 0.205 27.0);
|
|
47
|
+
--color-on-error: oklch(19.6% 0.057 27.7);
|
|
48
|
+
|
|
49
|
+
--color-border: oklch(32.5% 0.014 256.8);
|
|
50
|
+
--color-border-hover: oklch(43.0% 0.014 256.8);
|
|
51
|
+
--color-border-focus: oklch(71.5% 0.152 253.3);
|
|
52
|
+
|
|
53
|
+
/* Type scale — product register: fixed ratio 1.125-1.2, small steps, dense rows */
|
|
54
|
+
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
|
|
55
|
+
--text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.625rem;
|
|
56
|
+
--text-3xl: 1.875rem;
|
|
57
|
+
|
|
58
|
+
/* Spacing — 4pt grid */
|
|
59
|
+
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
60
|
+
--space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
|
|
61
|
+
--space-24: 96px;
|
|
62
|
+
|
|
63
|
+
--radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px;
|
|
64
|
+
|
|
65
|
+
--duration-fast: 100ms;
|
|
66
|
+
--duration-normal: 150ms;
|
|
67
|
+
--ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
|
|
68
|
+
|
|
40
69
|
--shadow-sm: 0 0 0 1px var(--color-border);
|
|
41
70
|
--shadow-md: 0 3px 12px rgb(1 4 9 / 0.4);
|
|
42
71
|
}
|
|
43
72
|
|
|
44
73
|
@media (prefers-color-scheme: light) {
|
|
45
74
|
:root {
|
|
46
|
-
--color-bg:
|
|
47
|
-
--color-surface:
|
|
48
|
-
--color-
|
|
49
|
-
--color-
|
|
50
|
-
--color-
|
|
51
|
-
--color-
|
|
52
|
-
--color-
|
|
75
|
+
--color-bg: oklch(100% 0 0); --color-on-bg: oklch(25.4% 0.011 254.0);
|
|
76
|
+
--color-surface: oklch(97.8% 0.003 247.9); --color-on-surface: oklch(25.4% 0.011 254.0);
|
|
77
|
+
--color-card: oklch(100% 0 0); --color-on-card: oklch(38.4% 0.018 254.7);
|
|
78
|
+
--color-muted: oklch(96.0% 0.005 247.9); --color-on-muted: oklch(44.9% 0.018 251.3);
|
|
79
|
+
--color-primary: oklch(54.0% 0.191 257.5); --color-on-primary: oklch(100% 0 0);
|
|
80
|
+
--color-accent: oklch(52.1% 0.115 56.5); --color-on-accent: oklch(100% 0 0);
|
|
81
|
+
--color-success: oklch(43.9% 0.118 148.1); --color-on-success: oklch(100% 0 0);
|
|
82
|
+
--color-warning: oklch(46.6% 0.101 70.2); --color-on-warning: oklch(100% 0 0);
|
|
83
|
+
--color-error: oklch(50.5% 0.183 26.5); --color-on-error: oklch(100% 0 0);
|
|
84
|
+
--color-border: oklch(87.0% 0.008 247.9);
|
|
53
85
|
}
|
|
54
86
|
}
|
|
55
87
|
```
|
|
56
88
|
|
|
57
89
|
## Typography
|
|
58
90
|
|
|
59
|
-
|
|
60
|
-
- **Body**: `"Inter", -apple-system, sans-serif`, weight 400
|
|
61
|
-
- **Code / Data**: `"JetBrains Mono", "Fira Code", monospace`, weight 400
|
|
62
|
-
|
|
63
|
-
| Level | Size | Weight | Line-height | Use |
|
|
64
|
-
|---|---|---|---|---|
|
|
65
|
-
| h1 | 1.75rem (28px) | 600 | 1.25 | Page title (compact) |
|
|
66
|
-
| h2 | 1.25rem (20px) | 600 | 1.3 | Section header |
|
|
67
|
-
| h3 | 1rem (16px) | 600 | 1.4 | Panel title |
|
|
68
|
-
| body | 0.875rem (14px) | 400 | 1.5 | Default text |
|
|
69
|
-
| body-sm | 0.8125rem (13px) | 400 | 1.45 | Table cells, metadata |
|
|
70
|
-
| mono | 0.8125rem (13px) | 400 | 1.5 | Code, terminal output |
|
|
71
|
-
| caption | 0.75rem (12px) | 500 | 1.3 | Timestamps, status labels |
|
|
91
|
+
Product register: a familiar neutral UI face is the CORRECT choice here — the user is reading logs and metrics, not admiring letterforms.
|
|
72
92
|
|
|
73
|
-
|
|
93
|
+
- **UI / Body**: `Inter, ui-sans-serif, system-ui, sans-serif`, weight 400
|
|
94
|
+
- **Headings**: same family, weight 600 (hierarchy from weight + color, not a second face)
|
|
95
|
+
- **Code / Data**: `"JetBrains Mono", ui-monospace, monospace`, weight 400 — tabular figures for every column of numbers
|
|
74
96
|
|
|
75
|
-
|
|
97
|
+
Every row draws from the token scale (adjacent step ratio 1.125–1.2); nothing invents a size.
|
|
76
98
|
|
|
77
|
-
|
|
99
|
+
| Level | Token | Size | Weight | Line-height | Use |
|
|
100
|
+
|---|---|---|---|---|---|
|
|
101
|
+
| h1 | `--text-3xl` | 30px | 600 | 1.25 | Page title (compact) |
|
|
102
|
+
| h2 | `--text-xl` | 22px | 600 | 1.3 | Section header |
|
|
103
|
+
| h3 | `--text-lg` | 18px | 600 | 1.4 | Panel title |
|
|
104
|
+
| body | `--text-base` | 16px | 400 | 1.5 | Default text |
|
|
105
|
+
| body-sm | `--text-sm` | 14px | 400 | 1.45 | Table cells, metadata |
|
|
106
|
+
| mono | `--text-sm` | 14px | 400 | 1.5 | Code, terminal output |
|
|
107
|
+
| caption | `--text-xs` | 12px | 500 | 1.3 | Timestamps, status labels |
|
|
78
108
|
|
|
79
109
|
## Component patterns
|
|
80
110
|
|
|
@@ -406,7 +406,7 @@ const CustomChart = ({ data, options }) => {
|
|
|
406
406
|
labels: data.map(d => d.label),
|
|
407
407
|
datasets: [{
|
|
408
408
|
data: data.map(d => d.value),
|
|
409
|
-
backgroundColor: options.colors || ['#
|
|
409
|
+
backgroundColor: options.colors || ['#2563EB']
|
|
410
410
|
}]
|
|
411
411
|
}
|
|
412
412
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umacloud/knowledge",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.53",
|
|
4
4
|
"description": "UmaDev curated engineering knowledge corpus (standards, methodologies, expert playbooks, design systems, miniprogram/uniapp guides). Platform-independent data shipped once so npm users get the full KB offline.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": { "type": "git", "url": "https://github.com/umacloud/umadev.git" },
|