Replicate

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

## 概览
Replicate 是一个 developer-tools platform，但带着 art zine 的气质。公开 marketing surface 使用温暖的 cream canvas（`{colors.canvas}` — `#f9f7f3`），而不是典型 AI infrastructure site 的白色或近黑背景；这个决定影响了整个系统：photography 像 editorial，code well 像印刷 pull-quote，品牌橙色（`{colors.primary}` — `#ea2804`）像一枚 stamp，而不是 notification。整体视觉不追求企业软件的冷硬效率，而是把模型、代码和社区贡献者组织成可以浏览、收藏和再次调用的创作目录。

Typography 是主要装饰。**rb-freigeist-neue** 是厚重、略窄的 grotesque，用于最高 128px 的 hero band，配合紧密 `lineHeight: 1.0` 与负 letter-spacing，让多行 headline 堆成几何块。**basier-square** 负责 14–18px 的 body、button label 和 metadata；**JetBrains Mono** 承担所有 code well、command 与 example。三套字体各司其职，不重叠。

页面节奏在 cream canvas、全幅 orange hero band、以及承载 "how it works" code story 的 `{colors.surface-dark}` (`#202020`) section 之间循环。曲线有意保持柔和：所有 interactive surface（button、input、tag、avatar）都使用 `{rounded.full}`，content card 与 code well 则使用 `{rounded.md}` 或 `{rounded.lg}`。Replicate 没有尖角，整体读感是友好的精确感。即使是 pricing、model card、code example 这类功能密集区域，也会通过圆角、cream surface 和明确的文字层级保持轻松、可探索的节奏。

**关键特征：**
- 温暖 cream canvas（`{colors.canvas}` — `#f9f7f3`）替代常规白底，并搭配 `{colors.surface-bone}` 做 inset card。
- Hot orange（`{colors.primary}` — `#ea2804`）只用于 primary CTA、hero band 和 inline link color，绝不作为装饰。
- Display headline 尺寸巨大：hero 中 `{typography.display-xxl}` 为 128px，section opener 中 `{typography.display-xl}` 为 72px，均使用紧密 `lineHeight: 1.0` 和负 letter-spacing。
- 三字体栈：`rb-freigeist-neue` 用于 display，`basier-square` 用于 UI/body，`jetbrains-mono` 用于 code。
- 每个 interactive element 都是 fully rounded（`{rounded.full}` 9999px）；content card 使用 `{rounded.md}` 10px。
- Dark code well（`{colors.surface-dark}`）作为 full-bleed reading surface 嵌在 cream canvas 中，模拟印刷 pull-quote。
- Section rhythm: cream -> orange hero -> cream -> dark code-story band -> cream -> black footer。

## Colors

### Brand & Accent
- **Replicate Orange** (`{colors.primary}` — `#ea2804`): 品牌 accent，仅用于 primary CTA、hero band background、inline link color。像 stamp 一样使用，每个 viewport 最多一个 orange element。
- **Orange Pressed** (`{colors.primary-deep}` — `#c01f00`): `{colors.primary}` 的 active/pressed state，用于 `{component.button-primary-pressed}`。
- **Hero Glow** (`{colors.hero-glow}` — `#ff6a3d`): hero copy 后方 radial atmospheric mesh 中的浅橙。
- **Hero Pink** (`{colors.hero-pink}` — `#f4a8a0`): 温暖 pink wash，用于 hero band 过渡到 cream 前柔化底边。
- **On-Primary** (`{colors.on-primary}` — `#ffffff`): `{colors.primary}` surface 上的 label color。

### Surface
- **Canvas** (`{colors.canvas}` — `#f9f7f3`): 默认页面背景，温暖 cream，绝不是 pure white。
- **Surface Bone** (`{colors.surface-bone}` — `#f3f0e8`): 稍深一档的 cream，用于 inset card group 与 feature band。
- **Surface Card** (`{colors.surface-card}` — `#ffffff`): individual model card、search input、pricing tier 中使用的纯白，是唯一出现白色的位置。
- **Surface Dark** (`{colors.surface-dark}` — `#202020`): code well、featured pricing tier、"how it works" walkthrough band。
- **Surface Deep** (`{colors.surface-deep}` — `#000000`): footer canvas 与 `{component.code-block}` 内的 inset code-tab strip。
- **Hairline** (`{colors.hairline}` — `rgba(32,32,32,0.12)`): cream surface 上低对比 1px divider。
- **Hairline Strong** (`{colors.hairline-strong}` — `#202020`): button outline、focused input、structural separator。

### Text
- **Ink** (`{colors.ink}` — `#202020`): primary text color，比 `#000000` 更温暖，与 cream canvas 匹配。
- **Body** (`{colors.body}` — `#3a3a3a`): 长正文，避免 ink 在 18px+ 行长中显得过重。
- **Charcoal** (`{colors.charcoal}` — `#575757`): caption、metadata、secondary nav。
- **Mute** (`{colors.mute}` — `#646464`): supporting text 与 inactive label。
- **Ash** (`{colors.ash}` — `#8d8d8d`): tertiary text、placeholder copy。
- **Stone** (`{colors.stone}` — `#bbbbbb`): disabled foreground、neutral icon outline。
- **On-Dark** (`{colors.on-dark}` — `#fcfcfc`): `{colors.surface-dark}` 与 `{colors.surface-deep}` 上的 primary text。
- **On-Dark Mute** (`{colors.on-dark-mute}` — `rgba(252,252,252,0.72)`): dark region 中的 secondary text，保持 off-white feel 而不是纯白 pop。

### Semantic Colors
- **Success** (`{colors.badge-success}` — `#2b9a66`): model card 上的 inline success badge 与 "running" status pill。
- **Link** (`{colors.link}` — `#ea2804`): inline link color，与 primary orange 相同，有意把 link 拉回品牌 accent。
- **Focus Ring** (`{colors.ring-focus}` — `rgba(59,130,246,0.5)`): interactive element 的默认 focus ring。
- **GitHub Dark** (`{colors.github-dark}` — `#24292e`): GitHub-branded button surface，刻意保持 off-brand 以匹配 GitHub token。

## Typography

### Font Family
Replicate 使用明确分工的三字体栈：

- **rb-freigeist-neue** — 专有 heavy grotesque，用于所有 30px+ display size，通过 `lineHeight: 1.0` 和负 letter-spacing 传达 editorial-magazine personality。
- **basier-square** — 专有人文 sans-serif，用于 body、button label、caption、metadata。
- **jetbrains-mono** — 开源 monospace，用于每个 code well 和 inline command。

无法授权专有字体时，**Bricolage Grotesque** 或 **Migra** 可作为 rb-freigeist-neue 的可信替代，**Geist** 或 **Inter** 可替代 basier-square。JetBrains Mono 是开源字体，应始终直接使用。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xxl}` | 128px | 700 | 1.0 | -3px | 单个 hero "Run AI" / "Imagine what you can build" headline。每页一个。 |
| `{typography.display-xl}` | 72px | 700 | 1.0 | -1.8px | Section opener，如 "How it works"、"Scale on Replicate"。 |
| `{typography.display-lg}` | 48px | 700 | 1.0 | -1px | Sub-section title、pricing tier name。 |
| `{typography.display-md}` | 30px | 600 | 1.2 | -0.5px | Feature card title。 |
| `{typography.heading-lg}` | 38.4px | 600 | 0.83 | -0.5px | 紧密堆叠的 basier-square headline，用于 pricing 与 enterprise hero。 |
| `{typography.heading-md}` | 24px | 600 | 1.33 | -0.35px | Card title、model detail header。 |
| `{typography.heading-sm}` | 20px | 600 | 1.4 | -0.3px | List section header。 |
| `{typography.subtitle}` | 18px | 600 | 1.56 | 0 | Display section 中的 lead paragraph。 |
| `{typography.body-lg}` | 18px | 400 | 1.56 | 0 | Marketing prose。 |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body。 |
| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Caption、metadata。 |
| `{typography.button-md}` | 16px | 600 | 1.0 | 0 | Default button label。 |
| `{typography.button-sm}` | 14px | 600 | 1.0 | 0 | Compact button label、sub-nav pill。 |
| `{typography.caption}` | 12px | 400 | 1.33 | 0 | Footer disclosure、copyright。 |
| `{typography.caption-tight}` | 14px | 600 | 1.43 | -0.35px | Pricing tier row 中的强调型小 caption。 |
| `{typography.code-md}` | 14px | 400 | 1.43 | 0 | Code block 与 inline code。 |
| `{typography.code-sm}` | 11px | 400 | 1.5 | 0 | Code-tab label 与小型 inline token。 |

### Principles
- Display size 保持 `lineHeight: 1.0`（`{typography.heading-lg}` 为 0.83），让多行堆叠像一个 typographic block。
- 负 letter-spacing 随 size 放大而增加：128px 为 -3px，20px 为 -0.3px；body type 保持 0。
- `{typography.body-lg}` 与 `{typography.body-md}` 保持 400 weight，不用 500 做强调。强调来自 family change（basier-square -> rb-freigeist-neue），不是 weight。
- Code 永远不用 basier-square，即使很小；JetBrains Mono 承担每个 literal command、model slug、API call。

### Font Substitutes
当专有字体不可用时，明确 clamp display `lineHeight` 到 1.0，并在 display-xxl / display-xl 上应用 -3% letter-spacing，以匹配原始紧密度。替代字体默认通常 tracking 更松。

## Layout

### Spacing System
- **Base unit**: 4px，工作 scale 基于 4 / 8 / 16 的倍数。
- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.xxxl}` 48px · `{spacing.section}` 96px · `{spacing.band}` 160px。
- Section padding: full-width band 之间垂直 `{spacing.section}` (96px)；hero 与 closing "Imagine what you can build" stripe 使用 `{spacing.band}` (160px)。
- Card internal padding: `{component.model-card}` 使用 `{spacing.lg}` (16px)，`{component.pricing-tier}` 使用 `{spacing.xxl}` (32px)。

### Grid & Container
- **Max content width** ≈ body section 1280px，hero band 1440px 且 full-bleed。
- **Model grid**: collection 页面 desktop 4 columns，tablet large 3 columns，tablet 2 columns，mobile 1 column。
- **Pricing**: desktop 居中 3-tier grid，1024px 以下垂直堆叠；center tier 切换为 `{component.pricing-tier-featured}` dark inversion。
- **Code-story sections**: 2-up split，左 narrative copy，右 code well，< 1024px 堆叠。

### Whitespace Philosophy
- Cream 上的 whitespace generous 且 editorial；section 使用 96px，关键 band 使用 160px，让 typography 可放大而不拥挤。
- Card 内部收紧到 16–32px，让 model thumbnail、status、metadata 形成紧凑 list-of-cards rhythm。
- `{colors.hairline}` divider 替代 cream surface 上的 shadow；dark surface 上由 `{colors.divider-dark}` 承担同等角色。

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| 0 — flat | No shadow, no border | Default cream canvas、full-bleed band。 |
| 1 — outline | 1px solid `{colors.hairline}` or `{colors.hairline-strong}` | Model card、pricing tier、collection tile。 |
| 2 — bone inset | `{colors.canvas}` band 内切换为 `{colors.surface-bone}` | Feature group container、"How it works" walkthrough。 |
| 3 — dark inversion | Cream 上的 card 切换为 `{colors.surface-dark}` | Code well、featured pricing tier、"Scale on Replicate" hero card。 |
| 4 — soft drop | `0 8px 24px rgba(32,32,32,0.08)` | Hover-anchored model thumbnail（仅视觉，不作为 interaction-state documented）。 |

Drop shadow 虽存在于 token 中，但使用克制，只偶尔将 photography thumbnail 从 cream canvas 上抬起一层。主要 elevation language 是 colour-blocking。

### Decorative Depth
- **Hero atmospheric mesh** — home hero 的橙到粉 gradient 是 layered radial mesh：`{colors.primary}` core -> `{colors.hero-glow}` mid-stop -> `{colors.hero-pink}` outer wash，仅用于 home hero band。
- **Code-story dark band** — "How it works" 使用 `{colors.surface-dark}` full-bleed，并用单条 `{colors.divider-dark}` 分隔 narrative copy 与 code well。
- **Contributor mosaic** — home page 有一条水平滚动的 circular avatar（`{component.contributor-avatar}`）带，位于 textured cream canvas 上；这是品牌层面唯一使用 avatar 的位置。

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Hero band、full-bleed section、footer。 |
| `{rounded.xs}` | 4px | Code tab、code well 内 inline tag。 |
| `{rounded.sm}` | 6px | Mid-radius callout、小 inset chip。 |
| `{rounded.md}` | 10px | Model card、collection tile、code well。 |
| `{rounded.lg}` | 16px | Pricing tier、大型 feature card。 |
| `{rounded.full}` | 9999px | Button、input、badge、avatar、pill。 |

### Photography Geometry
- Model thumbnail: 1:1 square，`{rounded.md}` corners，image full-bleed 到 card edge。
- Hero example output: 4:3 或 16:9，`{rounded.md}` corners。
- Contributor avatar: circular (`{rounded.full}`)，home 40px，card metadata 32px。
- Hero band 使用 stylised black-ink illustration（"tinkerer at the workbench"）作为 photography stand-in，放在 orange band 内而不是覆盖在 cream 上。

## Components

### Buttons

**`button-primary`** — orange CTA
- Background `{colors.primary}`, label `{colors.on-primary}`, type `{typography.button-md}`, padding `12px 24px`, `rounded: {rounded.full}`, height 44px。
- 页面最重要的单一 action，如 "Sign in with GitHub"、"Try a model"。
- Pressed state 位于 `button-primary-pressed`（background `{colors.primary-deep}`）。

**`button-dark`** — dark CTA
- Background `{colors.surface-dark}`, label `{colors.on-dark}`, type `{typography.button-md}`, `rounded: {rounded.full}`。
- 与 `{component.button-primary}` 配对的等权重 secondary action，或在 cream 上 orange 过响时作为 primary。

**`button-outline`** — outlined CTA
- Background `{colors.surface-card}`, label `{colors.ink}`, 1px solid `{colors.hairline-strong}`, type `{typography.button-md}`, `rounded: {rounded.full}`。
- Tertiary action，用于 "View docs"、"Read more" 等。

**`button-ghost`** — inline button
- Background `{colors.canvas}`, label `{colors.ink}`, no border, type `{typography.button-md}`, `rounded: {rounded.full}`, padding `8px 16px`。
- Card 内或正文旁的小 action。

**`button-icon`** — icon button
- Background `{colors.surface-card}`, label `{colors.ink}`, 1px solid `{colors.hairline}`, `rounded: {rounded.full}`, 36×36px circular。
- Carousel arrow、copy-to-clipboard、GitHub link icon。

### Cards & Containers

**`model-card`** — model listing card
- Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-md}`, `rounded: {rounded.md}`, padding `{spacing.lg}` (16px)。
- 顶部 square thumbnail，下方显示 model owner + name（`{typography.body-sm}`）、单行 description（`{colors.charcoal}`），左下角为 status pill `{component.badge-status}`。

**`collection-tile`** — collection-of-models tile
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.heading-md}`, `rounded: {rounded.md}`, padding `{spacing.xl}` (24px)。
- `{colors.surface-bone}` band 内的 cream-on-cream tile，用于浏览 model category。

**`pricing-tier`** — pricing tier card
- Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}` (32px)。
- 3-up grid；tier name 使用 `{typography.display-lg}`，price 使用 `{typography.display-md}`。

**`pricing-tier-featured`** — featured pricing tier
- Background `{colors.surface-dark}`, text `{colors.on-dark}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}`。
- Center tier 翻转为 dark inversion 来标记 "recommended"。

**`code-block`** — code well
- Background `{colors.surface-dark}`, text `{colors.on-dark}`, type `{typography.code-md}`, `rounded: {rounded.md}`, padding `{spacing.xl}` (24px)。
- 顶部 tab strip 使用 `{component.code-tab}`，可在 Python、Node.js、cURL、HTTP 之间切换。

**`code-tab`** — code tab chip
- Background `{colors.surface-deep}`, text `{colors.on-dark-mute}`, type `{typography.code-sm}`, `rounded: {rounded.xs}`, padding `6px 12px`。
- Active tab 将 text color 切换为 `{colors.on-dark}`，并添加 2px `{colors.primary}` bottom underline。

**`hero-band`** — full-bleed hero
- Background `{colors.hero-warm}`，包含 Elevation 中描述的 atmospheric mesh；text `{colors.on-dark}`，title type `{typography.display-xxl}`。
- 仅用于 home page；secondary page 使用 cream + `{typography.display-xl}` 开场。

### Inputs & Forms

**`text-input`** — default input
- Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-md}`, 1px solid `{colors.hairline}`, `rounded: {rounded.full}`, padding `12px 20px`, height 44px。
- Pill-shaped search 与 email field。Focus state 添加 `{colors.ring-focus}` 3px ring。

### Navigation

**`nav-bar`** — top nav (desktop)
- Background `{colors.canvas}`, type `{typography.button-sm}`, height 60px，底部单条 `{colors.hairline}` hairline。
- 左侧 wordmark logo；中间 top-level nav ("Explore", "Pricing", "Docs", "Blog")；右侧 GitHub icon + "Sign in" link + `{component.button-primary}`。

**`nav-bar`** (mobile)
- 同样 60px height，中间 nav 折叠成 hamburger icon。Logo 保持左侧，sign-in CTA 保持右侧。

**`sub-nav-pill`** — sub-nav chip
- 内容上方横向排列的 pill chip，如 "All"、"Featured"、"Image generation"、"Audio"，使用 `{component.sub-nav-pill}` styling。

### Signature Components

**`badge-status`** — model status badge
- Background `{colors.badge-success}`, label `{colors.on-dark}`, type `{typography.caption}`, `rounded: {rounded.full}`, padding `4px 10px`。
- 锚定在 model card 左下角，用来表示 "running" 或 "deployed"。

**`badge-tag`** — neutral tag
- Background `{colors.canvas}`, label `{colors.ink}`, 1px solid `{colors.hairline}`, type `{typography.caption}`, `rounded: {rounded.full}`, padding `4px 10px`。
- Model card 上的 capability tag，如 "text-to-image"、"video"、"audio"。

**`contributor-avatar`** — community contributor
- Background `{colors.surface-card}` placeholder behind 1:1 photography, `rounded: {rounded.full}`, 40×40px（metadata context 中为 32px）。
- 用于 home-page contributor mosaic。

**`footer`** — global footer
- Background `{colors.surface-deep}`, text `{colors.on-dark}`, type `{typography.body-sm}`, `rounded: {rounded.none}`, padding `64px 32px`。
- 多列 quick-link grid 位于 copyright row 之上，并由 `{colors.divider-dark}` 分隔。

## Do's and Don'ts

### Do
- 使用 `{colors.canvas}`（cream）作为默认页面背景。White（`{colors.surface-card}`）只出现在 individual card、input、hero illustration backdrop。
- 将 `{colors.primary}` 限定为 primary CTA、home hero band、inline link 三种角色。
- 所有 interactive element 都使用 `{rounded.full}`：button、input、badge、avatar、pill。
- Content card 使用 `{rounded.md}` (10px) 或 `{rounded.lg}` (16px)，不要使用 sharp corner。
- Hero band 使用 `{typography.display-xxl}` (128px) 与 `{typography.display-xl}` (72px)，`lineHeight: 1.0`，负 letter-spacing。
- `rb-freigeist-neue` 用于 display，`basier-square` 用于 UI/body，`jetbrains-mono` 用于 code，保持职责边界。
- Code 必须渲染在 `{component.code-block}` 中，background 为 `{colors.surface-dark}`；code 是 print，不是 inline grey box。
- Photography 与 `{rounded.md}` corners 和 card 内 full-bleed crop 配对。

### Don't
- 不要在 page level 用 pure white 替代 cream；品牌温度来自 `{colors.canvas}`。
- 不要引入 secondary brand color。Orange 是唯一 accent；semantic green 与 focus blue 是功能色，不是装饰。
- 不要放松 display `lineHeight` 超过 1.0；紧密堆叠是结构。
- 不要把 body weight 提到 500 来强调；改用 family change（`basier-square` -> `rb-freigeist-neue`）。
- 不要把 `{rounded.full}` 用在 content card 上；pill-shaped card 会破坏节奏。
- 不要把 code 放在 light grey box 中；code well 始终是 `{colors.surface-dark}` 或 `{colors.surface-deep}`。
- 不要在 body text 或大面积 surface 上使用 orange，否则会立即失去 stamp quality。
- 不要给 cream surface 加 drop shadow；elevation 是 colour-blocking，shadow 只保留给 floating thumbnail。

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Desktop XL | ≥ 1440px | Full max-width 1280 body，hero band full-bleed，4-up model grid。 |
| Desktop | 1280–1439px | Container 收窄；side padding `{spacing.xl}` (24px)。 |
| Tablet Large | 1024–1279px | Model grid 3-up，code-story split 保持 2-up。 |
| Tablet | 768–1023px | Model grid 2-up，code-story 堆叠（narrative 在上，code 在下），pricing 垂直堆叠。 |
| Mobile Large | 426–767px | Model grid 在 480px+ 为 1-up，nav 折叠为 hamburger，hero `{typography.display-xxl}` clamp 到 64px。 |
| Mobile | ≤ 425px | 所有 grid 1-up，hero clamp 到 48px，section padding `{spacing.section}` 收缩到 64px。 |

### Touch Targets
- 所有 button 在 mobile 最小 44px 高；默认 `{component.button-primary}` 为 44px，满足 WCAG AAA。
- `{component.button-icon}` (36px) 在 mobile 通过增加 padding 提升到 44px。
- `{component.sub-nav-pill}` desktop 36px，mobile 通过 vertical padding 增至 40px。

### Collapsing Strategy
- Top-level nav 在 < 1024px 折叠为 hamburger；wordmark 与 `{component.button-primary}` 保持锚定。
- Hero `{typography.display-xxl}` 按 128px -> 96px -> 64px -> 48px clamp。
- Pricing 3-up grid 在 < 1024px 垂直堆叠，featured tier 保持居中堆叠。
- Code-story split 在 < 1024px 从并排改为堆叠，code well 始终第二。
- Sub-nav pill 在 < 768px 从 wrap row 转为 horizontal scroll-rail。

### Image Behavior
- Model thumbnail 提供 1.5× 与 2× DPR；768px 以下使用 600×600 export 替代 1200×1200。
- Hero atmospheric mesh 作为 CSS gradient 渲染，无 asset cost，无 breakpoint variation。
- Code-block content 在 < 1024px soft wrap，不横向滚动；long line 用 continuation marker 断行。

## Iteration Guide

1. 一次只关注 ONE component。多数 interactive element 共享 `{rounded.full}` 与 `{colors.canvas}` / `{colors.surface-card}`，只有 role-specific token（`{colors.primary}`、`{component.code-block}`）在 variant 间变化。
2. 直接引用 component name 和 token（`{colors.primary}`、`{component.button-primary-pressed}`、`{rounded.lg}`），不要改写。
3. 编辑后运行 `npx @google/design.md lint DESIGN.md`；orphaned-tokens warning 会捕捉未使用条目。
4. 新 variant 作为独立 entry 添加（`-pressed`、`-disabled`、`-featured`），不要埋在 prose 中。
5. 默认 body type 使用 `{typography.body-md}`；只有 hero subtitle 使用 `{typography.subtitle}`。
6. 保持 `{colors.primary}` 稀缺；如果每个 viewport 出现多个 orange element，应考虑将其中一个降级为 `{colors.surface-dark}`。

## Known Gaps

- Active/pressed visual state 只记录了 `button-primary-pressed`；其他组件依赖 focus-ring（`{colors.ring-focus}`）提供 interactive feedback，未作为 per-component variant 提取。
- Model playground / try-this-model interactive surface（logged-in feature）不在范围内；这里只记录公开 marketing canvas。
- Dashboard / billing / API key management surface 未提取，它们位于 authentication 之后。
- Home hero illustration（"the tinkerer at the workbench"）被视为 decorative artwork，不是 system component；复刻它需要 bespoke illustration，而不是 token。