Notion

---
version: alpha
name: "Notion"
description: "Notion 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Notion 通过自信、插画丰富的品牌声音，把自己呈现为 all-in-one workspace。首页以 **“Meet the night shift.”** 开场，标题居中放在深 navy hero band（{colors.brand-navy}）上，周围散落品牌色 sticky-note dot 与 mesh wire 插画。标志性的 **purple primary CTA**（{colors.primary}）“Get Notion free” 位于视觉中心，旁边是 outlined “Request a demo” secondary。按钮下方嵌入真实 Notion workspace UI mockup（“Ramp HQ” kanban board），并以深而扩散的 drop shadow 从 hero band 中浮出。

Hero 之后，页面进入一组非常有辨识度的 feature section：密集 sticky-note 风格的 “Keep work moving 24/7” 面板，包含 red / blue / green / purple / teal 状态 icon；**bold yellow**（{colors.card-tint-yellow-bold}）“Ask your on-demand assistants” banner card，左右由 orange / rose / mint pastel feature tile 环绕并展示 assistant UI mockup；以及 “Bring all your work together” 三栏网格，使用 sky-blue tutorial card、浅色 Notion calendar 和 brown/rust testimonial slate 等品牌色 mockup。Pricing 页面横向展示 Free / Plus / Business / Enterprise 四层，并以 purple border 突出一个 tier，下方接密集 feature comparison table。

系统使用 Notion-Sans（Inter-based）贯穿所有 UI 表面，人文几何气质与彩色插画自然匹配。按钮是 {rounded.md}（8px）矩形，而不是 pill，这让 Notion 与普遍使用 pill 的竞品区分开来。卡片则稳定使用 {rounded.lg}（12px）。

**关键特征：**
- 深 navy hero band（{colors.brand-navy}）搭配 sticky-note dots 与 mesh wire 装饰插画
- **标志性 purple**（{colors.primary}）primary CTA，是 “Get Notion free” 按钮的识别色
- Hero 中嵌入真实 Notion workspace UI mockup card，并带深 drop shadow
- bold yellow feature banner（{colors.card-tint-yellow-bold}）用于高强调内容区
- pastel feature card palette（peach、rose、mint、lavender、sky、yellow）呼应产品里的 database properties
- Notion-Sans（Inter-based）覆盖所有 UI 表面
- 8px 圆角按钮（NOT pills）与 12px 圆角卡片，形成克制 editorial 几何
- 四层 pricing comparison 与密集 feature table
- 居中 hero layout，区别于多数 B2B SaaS 的左对齐 norm

## 色彩

> 来源页面： notion.com/ (homepage), /enterprise, /product/ai, /product/agents, /startups, /pricing. 这些页面的 token 覆盖保持一致： all six pages.

### 品牌与主色
- **Notion Purple** ({colors.primary}): Signature primary CTA color — the unmistakable "Get Notion free" pill button. Reserved for the dominant CTA only.
- **Purple Pressed** ({colors.primary-pressed}): Pressed-state variant
- **Purple Deep** ({colors.primary-deep}): Deeper variant for emphasis
- **Brand Navy** ({colors.brand-navy}): Hero band background — deep navy
- **Brand Navy Deep** ({colors.brand-navy-deep}): Deeper navy for promo banner
- **Brand Navy Mid** ({colors.brand-navy-mid}): Mid-spectrum navy
- **Link Blue** ({colors.link-blue}): 行内文本链接 blue (NOT primary CTA)
- **Link Blue Pressed** ({colors.link-blue-pressed}): Pressed-state link blue

### Brand Color Spectrum (echoes live product database properties)
- **Brand Pink** ({colors.brand-pink}): Pink accent
- **Brand Pink Deep** ({colors.brand-pink-deep}): Deeper pink
- **Brand Orange** ({colors.brand-orange}): Orange accent
- **Brand Orange Deep** ({colors.brand-orange-deep}): Deeper orange-rust
- **Brand Purple** ({colors.brand-purple}): Purple accent variant
- **Brand Purple 300** ({colors.brand-purple-300}): Light purple
- **Brand Purple 800** ({colors.brand-purple-800}): Deep purple for tag text
- **Brand Teal** ({colors.brand-teal}): Teal accent
- **Brand Green** ({colors.brand-green}): Bright green
- **Brand Yellow** ({colors.brand-yellow}): Soft yellow
- **Brand Brown** ({colors.brand-brown}): Brand brown for "earthy" tints

### Card Tints (Pastel Feature Card Backgrounds)
- **Tint Peach** ({colors.card-tint-peach}): Pale peach
- **Tint Rose** ({colors.card-tint-rose}): Pale rose-pink
- **Tint Mint** ({colors.card-tint-mint}): Pale mint-green
- **Tint Lavender** ({colors.card-tint-lavender}): Pale lavender
- **Tint Sky** ({colors.card-tint-sky}): Pale sky-blue
- **Tint Yellow** ({colors.card-tint-yellow}): Pale yellow
- **Tint Yellow Bold** ({colors.card-tint-yellow-bold}): Bold yellow for high-emphasis feature banners ("Ask your on-demand assistants")
- **Tint Cream** ({colors.card-tint-cream}): Cream tint
- **Tint Gray** ({colors.card-tint-gray}): Neutral surface

### 表面
- **Canvas White** ({colors.canvas}): Page background and primary card surface
- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, featured 定价层级
- **Surface Soft** ({colors.surface-soft}): Quieter section divisions
- **Hairline** ({colors.hairline}): 1px borders and primary dividers
- **Hairline Soft** ({colors.hairline-soft}): Quieter dividers
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs

### 文本
- **Ink Deep** ({colors.ink-deep}): Pure black for emphasis
- **Ink** ({colors.ink}): Primary headlines and body text
- **Charcoal** ({colors.charcoal}): Body emphasis (Notion's signature warm-charcoal)
- **Slate** ({colors.slate}): Secondary text
- **Steel** ({colors.steel}): Tertiary, footer links
- **Stone** ({colors.stone}): Muted labels
- **Muted** ({colors.muted}): Disabled, placeholders
- **On Dark** ({colors.on-dark}): White 文本 on dark surfaces
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white

### 语义色
- **Success** ({colors.semantic-success}): Confirmation green
- **Warning** ({colors.semantic-warning}): Mid-priority alerts (orange)
- **Error** ({colors.semantic-error}): Validation errors (red)

## 字体

### 字体家族
**Notion Sans** (primary): Notion's custom Inter-based variable typeface. Fallbacks: Inter, -apple-system, system-ui, 'Segoe UI', Helvetica, sans-serif. Humanist-geometric character used across every UI surface.

### 层级

| Token | 尺寸 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
| `{typography.hero-display}` | 80px | 600 | 1.05 | -2px | Hero ("Meet the night shift") |
| `{typography.display-lg}` | 56px | 600 | 1.10 | -1px | Section openers |
| `{typography.heading-1}` | 48px | 600 | 1.15 | -0.5px | Page-level headlines ("Try for free") |
| `{typography.heading-2}` | 36px | 600 | 1.20 | -0.5px | Subsection headlines ("Keep work moving 24/7") |
| `{typography.heading-3}` | 28px | 600 | 1.25 | 0 | 卡片标题 |
| `{typography.heading-4}` | 22px | 600 | 1.30 | 0 | 功能区块标题 |
| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | FAQ questions |
| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle |
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | 主要正文 |
| `{typography.body-md-medium}` | 16px | 500 | 1.55 | 0 | Body emphasis |
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body |
| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar, button labels |
| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | 徽章标签 |
| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | 按钮标签 |

### 原则
- Tight hero leading (1.05) on 80px display
- Negative letter-spacing on display sizes (-2px to -0.5px)
- Generous body leading (1.55) for documentation readability
- 600 weight for headlines + 500 for buttons; 400 body

## 布局

### 间距系统
- **Base unit**: 4px (8px primary increment)
- **Tokens**: `{spacing.xxs}` (4px) through `{spacing.hero}` (120px)
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); pricing tightens to `{spacing.section}` (64px)

### 网格与容器
- 1280px max-width with 32px gutters
- 定价: 4-tier card row at desktop with dense comparison table
- Homepage: centered hero with workspace mockup below buttons; alternating colorful feature card sections

### 留白理念
Marketing surfaces use generous breathing room between feature card bands. Workspace mockup card on hero gets full-width treatment with deep drop shadow.

## 层级与深度

| 层级 | 处理方式 | 用途 |
|---|---|---|
| 0 (flat) | 无阴影; `{colors.hairline}` border | 默认卡片、表格行 |
| 1 (subtle) | `rgba(15, 15, 15, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |
| 2 (card) | `rgba(15, 15, 15, 0.08) 0px 4px 12px 0px` | 功能卡片 |
| 3 (mockup) | `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px` | Hero workspace mockup card |
| 4 (modal) | `rgba(15, 15, 15, 0.16) 0px 16px 48px -8px` | 模态框、下拉菜单 |

### 装饰性深度
- Hero workspace mockup card uses deep diffuse drop shadow (Level 3) — significant elevation against the navy band
- Pastel feature cards carry their own visual weight via tint backgrounds
- Sticky-note dot illustrations and mesh wires add atmospheric decoration to navy hero

## 形状

### 圆角尺度

| Token | 值 | 用途 |
|---|---|---|
| `{rounded.xs}` | 4px | Tag chips |
| `{rounded.sm}` | 6px | Type badges |
| `{rounded.md}` | 8px | Buttons, inputs, search-pill |
| `{rounded.lg}` | 12px | Cards, 定价层级s, agent tiles, workspace mockup |
| `{rounded.xl}` | 16px | Larger feature panels |
| `{rounded.xxl}` | 20px | Featured product showcases |
| `{rounded.xxxl}` | 24px | Larger feature cards |
| `{rounded.full}` | 9999px | Status badges, pill tabs (NOT regular buttons) |

Notion's geometry is sober-editorial — `{rounded.md}` (8px) buttons distinguish it from pill-button-everywhere brands.

## 组件

> 根据 no-hover policy，不记录 hover 状态。

### 按钮

**`button-primary`** — Signature purple rectangular primary CTA, the dominant action.
- 背景 `{colors.primary}`, 文本 `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.
- Pressed 状态 `button-primary-pressed` deepens to `{colors.primary-pressed}`.
- Disabled 状态 uses `{colors.hairline}` background.

**`button-dark`** — Black rectangular CTA on light backgrounds.
- 背景 `{colors.ink-deep}`, 文本 `{colors.on-dark}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.

**`button-secondary`** — Outlined rectangular for secondary actions ("Request a demo").
- 背景 transparent, 文本 `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.

**`button-on-dark`** — White button on dark hero bands.
- 背景 `{colors.on-dark}`, 文本 `{colors.ink}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.

**`button-secondary-on-dark`** — Outlined button on dark.
- 背景 transparent, 文本 `{colors.on-dark}`, border `1px solid {colors.on-dark-muted}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.

**`button-ghost`** — Quieter ghost button.
- 背景 transparent, 文本 `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.sm}`.

**`button-link`** — Inline blue 文本 link (NOT primary purple).
- 背景 transparent, 文本 `{colors.link-blue}`, typography `{typography.body-sm-medium}`, padding `0`.

### 卡片与容器

**`card-base`** — 标准内容卡片.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

**`card-feature`** — Feature card with larger padding.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.

**`card-feature-yellow-bold`** — Bold yellow feature banner for high-emphasis content ("Ask your on-demand assistants").
- 背景 `{colors.card-tint-yellow-bold}`, 文本 `{colors.charcoal}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.

**`card-feature-peach`** + **`card-feature-rose`** + **`card-feature-mint`** + **`card-feature-sky`** + **`card-feature-lavender`** + **`card-feature-yellow`** + **`card-feature-cream`** — Pastel-tinted feature cards.
- Each variant uses its corresponding `card-tint-*` color as background, 文本 `{colors.charcoal}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.

**`card-agent-tile`** — Agent assistant tile.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

**`card-template`** — Template thumbnail card.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid {colors.hairline}`.

**`card-startup-perk`** — Startup-program perk grid item.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

**`pricing-card`** — Standard 定价层级 card.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.

**`pricing-card-featured`** — Featured 定价层级 (Plus or Business — purple-bordered).
- 背景 `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.primary}`.

### 输入与表单

**`text-input`** — 标准文本字段.
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.

**`text-input-focused`** — 激活状态.
- Border switches to `2px solid {colors.primary}` (purple).

**`search-pill`** — 搜索栏.
- 背景 `{colors.surface}`, 文本 `{colors.steel}`, typography `{typography.body-md}`, rounded `{rounded.md}`, height 44px, border `1px solid {colors.hairline}`.

### 标签页

**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav for top-level switching.
- Inactive： 文本 `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
- Active： background `{colors.ink-deep}`, 文本 `{colors.on-dark}`.

**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.
- Inactive： 文本 `{colors.steel}`, no border. Active： 文本 `{colors.ink}`, 2px bottom border in `{colors.ink}`.

### 徽章与状态

**`badge-purple`** — Purple status badge (matches primary CTA).
- 背景 `{colors.primary}`, 文本 `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-pink`** — Pink accent badge.
- 背景 `{colors.brand-pink}`, 文本 `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-orange`** — Orange accent badge.
- 背景 `{colors.brand-orange}`, 文本 `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-tag-purple`** — Soft-purple feature tag chip.
- 背景 `{colors.card-tint-lavender}`, 文本 `{colors.brand-purple-800}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.

**`badge-tag-orange`** — Soft-orange feature tag.
- 背景 `{colors.card-tint-peach}`, 文本 `{colors.brand-orange-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.

**`badge-tag-green`** — Soft-mint feature tag.
- 背景 `{colors.card-tint-mint}`, 文本 `{colors.brand-green}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.

**`badge-popular`** — "Most Popular" tier indicator.
- 背景 `{colors.primary}`, 文本 `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`promo-banner`** — Light surface promo strip ABOVE the top nav.
- 背景 `{colors.surface}`, 文本 `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. ("Developers: Get a first look at our new Developer Platform on May 13.")

### 表格

**`comparison-table`** — 定价 功能对比表.
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.

**`comparison-row`** — Individual feature row.
- 背景 `{colors.canvas}`, 文本 `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`.

### 文档组件

**`workspace-mockup-card`** — Embedded Notion workspace UI mockup on hero band ("Ramp HQ" kanban board).
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, border `1px solid {colors.hairline}`, deep shadow `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px`. Carries actual Notion product UI mock.

**`testimonial-card`** — Customer testimonial card.
- 背景 `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.

**`logo-wall-item`** — Customer logo wordmark cell.
- 背景 transparent, 文本 `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.

**`faq-accordion-item`** — FAQ 面板.
- 背景 `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.

**`stat-row`** — Stats strip with bar chart visualization ("More productivity. Fewer tools.").
- 背景 `{colors.surface}`, 文本 `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section-sm}`.

**`cta-banner-light`** — Light surface CTA banner.
- 背景 `{colors.surface}`, 文本 `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section}`.

### 导航

**顶部导航（Marketing）** — Sticky white bar.
- 背景 `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline}`.
- Left: Notion "N" logo + "Product / AI / Solutions / Resources / Enterprise / 定价 / Request a demo" links.
- Right: "Get Notion free" purple button + "Log in" link.

### 标志性组件

**`hero-band-dark`** — Deep navy hero band with embedded workspace mockup and decorative dots/wires.
- 背景 `{colors.brand-navy}`, 文本 `{colors.on-dark}`, padding `{spacing.hero}`.
- Layout: centered headline `{typography.hero-display}`, subtitle, button row (`button-primary` purple + `button-secondary-on-dark`), `workspace-mockup-card` below.
- Atmospheric decoration: scattered colorful sticky-note dots and mesh wire illustrations around the hero content (NOT a literal pattern fill — handled per-page via SVG/illustration).

**`footer-region`** — Multi-column light footer.
- 背景 `{colors.canvas}`, padding `{spacing.section} {spacing.xxl}`, top border `1px solid {colors.hairline}`.
- 6-column link grid (Product / Download / Resources / Notion for / Company / Legal).

**`footer-link`** — Individual footer link.
- 背景 transparent, 文本 `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.

## 使用准则

### 应该
- 严格使用本文定义的 brand color、surface token、typography token 与 rounded token，不要临时创造视觉规则
- 将 primary CTA 保持在品牌最有识别度的颜色或按钮形态上，并让 secondary action 明显退后
- 根据组件角色选择正确圆角：button、card、badge、tab 各自遵循本文的 radius scale
- 真实产品 UI mockup、code mockup、logo wall 与 feature card 应使用对应组件 token，而不是重新发明样式
- 在 responsive breakpoint 中保持 hero typography、grid column 与 footer layout 的收缩节奏
- 引用 component id 与 token 名称时保持原样，便于实现时直接映射

### 不要
- 不要把品牌强调色扩展到 body text 或大面积背景，除非该品牌明确把它作为 surface color
- 不要混用不属于该品牌的圆角语言，例如把矩形按钮改成 pill，或把 pill button 改成 square
- 不要引入未记录的新 accent color、重阴影或第二套字体
- 不要在 flat documentation card 上使用过重 elevation；阴影应保留给 mockup、modal 或明确的 featured surface
- 不要删除品牌标志性组件，例如 hero mockup、sunset stripe、workspace card、product matrix 或 footer band

## 响应式行为

### 断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Mobile（小） | < 480px | 单列. Hero 36px. 定价 1-up. |
| Mobile（大） | 480 – 767px | 功能卡片 2-up. Hero 48px. |
| Tablet | 768 – 1023px | 2-column feature grids. Hero 56px. |
| Desktop | 1024 – 1279px | 4-tier pricing card row. Hero 72px. |
| Wide Desktop | ≥ 1280px | Full 80px hero presentation. |

### 触控目标
- Buttons render at 40–44px effective height
- Form inputs render at 44px height
- Pill tabs ~32px → 44px on mobile

### 折叠策略
- **Promo banner** stays full-width; truncates at < 480px
- **Top nav** below 1024px collapses to hamburger
- **Hero band**: workspace mockup card moves below text/buttons on mobile
- **定价 tiers**: 4-column → 2-column tablet → 1-column mobile
- **功能卡片**: 3-up desktop → 2-up tablet → 1-up mobile
- **Hero typography**: 80px → 56px → 48px → 36px
- **页脚**: 6-column desktop → 3-column tablet → accordion mobile

### 图像行为
- Workspace mockup card maintains aspect ratio
- Pastel illustrations inside feature cards scale proportionally
- Customer logo wall: wordmarks at consistent 60–80px height

## 迭代指南

1. 一次只聚焦一个组件，避免同时重写多个 surface。
2. 直接引用 component name 与 token（例如 {colors.primary}、{component-name}-pressed、{rounded.full}），不要改写标识符。
3. 修改后运行 npx @google/design.md lint DESIGN.md，检查 broken refs、contrast 与结构问题。
4. 新增状态时用单独 variant 表达，例如 -pressed、-disabled、-focused、-active。
5. 正文默认使用 {typography.body-md}；强调文本、hero display 与 caption 按本文 hierarchy 向下选择。
6. 品牌主色只用于它被授权的角色；如果出现在 generic surface 上，需要重新确认是否合理。
7. 保持按钮圆角、卡片圆角、badge 圆角与 responsive typography 的品牌节奏。

## 已知缺口

- 部分 dark-mode token 没有在公开页面中完整暴露，不能推断为正式 palette。
- animation / transition timing 未全部抽取；一般建议 150–200ms ease，并根据组件语境微调。
- form validation success / error 的完整样式没有覆盖所有场景，应按现有 semantic color 与 badge pattern 实现。
- 个别 feature tint、category color 或 code syntax palette 来自页面观察，正式设计库中可能还有更细的映射。