Coinbase

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

## 概览
Coinbase 读起来像一个 institutional financial brand，只是它刚好交易 crypto：marketing surface 安静、white-canvas、editorially-spaced，并且几乎 monochromatic。唯一的 brand voltage 是 **Coinbase Blue**（`{colors.primary}` — #0052ff），且用得很克制：每个 primary CTA pill、brand wordmark 和 inline emphasis link。除这一抹 blue 之外，系统由 white canvas + ink + soft gray elevation band，以及用于 full-bleed product-mockup hero 的 deep near-black editorial canvas（`{colors.surface-dark}` — #0a0b0d）构成。

Type pairing 是 **CoinbaseDisplay** 负责 hero headline，**CoinbaseSans** 负责 body、caption 和 navigation。Display 保持 **weight 400**，不是 trading platform 常见的 700+。这个选择传达 editorial calm 与 institutional trust，而不是 fintech urgency。

Page rhythm 在三种模式之间轮转：bright white editorial section、soft-gray elevation band，以及承载 layered product-UI mockup card 的 **full-bleed dark editorial hero**。带 floating dashboard mockup 的 dark hero 是最有辨识度的单一 component。

**Key Characteristics:**
- Single accent color：`{colors.primary}`（#0052ff Coinbase Blue）承载每个 primary CTA、wordmark 和 inline brand link，并且使用克制。
- Modest display weight：CoinbaseDisplay 保持 weight 400，绝不使用 700+。
- Editorial pill geometry：每个 CTA 都是 `{rounded.pill}`（100px），每个 asset glyph 都是 `{rounded.full}`，每张 card 都是 `{rounded.xl}`（24px）。没有 sharp corner。
- Full-bleed dark hero 搭配 floating product-UI card：`{component.hero-band-dark}` 加 inline `{component.product-ui-card-dark}` mockup，是品牌最强 signature pattern。
- Trading semantics：`{colors.semantic-up}`（#05b169）和 `{colors.semantic-down}`（#cf202f）只作为 text color，绝不作为 background fill。
- 96px section rhythm，形成慷慨的 editorial pacing。

## Colors

### Brand & Accent
- **Coinbase Blue** (`{colors.primary}` — #0052ff): 唯一 brand color。用于每个 primary CTA pill、Coinbase wordmark 和 inline brand link。
- **Coinbase Blue Active** (`{colors.primary-active}` — #003ecc): Primary pill 的 press-state darken。
- **Coinbase Blue Disabled** (`{colors.primary-disabled}` — #a8b8cc): Disabled CTA 的 faded-blue tint。
- **Accent Yellow** (`{colors.accent-yellow}` — #f4b000): 小型 sub-brand accent，极少用于 feature card 内 Bitcoin / asset glyph fill。仅 illustrative，不是 action color。

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): 默认 page floor。
- **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): subtle alternating band surface。
- **Surface Strong** (`{colors.surface-strong}` — #eef0f3): Secondary button、search pill、asset-icon plate 背后的 light-gray fill。
- **Surface Dark** (`{colors.surface-dark}` — #0a0b0d): 用于 full-bleed dark hero 与 CTA band 的 deep near-black canvas。与 `{colors.ink}` 同 hex：page-floor 与 text-color 共享此值。
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #16181c): 亮一级，用于 dark hero 内的 floating product-UI mockup card。

### Hairlines
- **Hairline** (`{colors.hairline}` — #dee1e6): White surface 上的默认 1px divider。
- **Hairline Soft** (`{colors.hairline-soft}` — #eef0f3): 更轻的 divider，与 `{colors.surface-strong}` 同 hex。

### Text
- **Ink** (`{colors.ink}` — #0a0b0d): Display heading、primary nav、body emphasis。
- **Body** (`{colors.body}` — #5b616e): 默认 running-text，略 cool gray。
- **Body Strong** (`{colors.body-strong}` — #0a0b0d): 与 ink 相同，用于更强 emphasis。
- **Muted** (`{colors.muted}` — #7c828a): Subtitle、breadcrumb、footer secondary。
- **Muted Soft** (`{colors.muted-soft}` — #a8acb3): Disabled link text。
- **On Primary** (`{colors.on-primary}` — #ffffff): Coinbase Blue CTA 上的 white text。
- **On Dark** (`{colors.on-dark}` — #ffffff): Dark hero 上的 white text。
- **On Dark Soft** (`{colors.on-dark-soft}` — #a8acb3): Dark surface 上 secondary text 使用的 muted off-white。

### Trading Semantics
- **Semantic Up** (`{colors.semantic-up}` — #05b169): “Price up” green，仅 text color。
- **Semantic Down** (`{colors.semantic-down}` — #cf202f): “Price down” red，仅 text color。

## Typography

### Font Family
系统使用 **CoinbaseDisplay**（display headline）、**CoinbaseSans**（body、navigation、caption、button）、**CoinbaseIcons**（icon font），以及用于 tabular numerical data 的 **CoinbaseMono**。Fallback stack：`-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`。

Display/body split 是功能性的：CoinbaseDisplay 只承载 hero headline；CoinbaseSans 承载其他所有内容。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-mega}` | 80px | 400 | 1.0 | -2px | Homepage hero h1 |
| `{typography.display-xl}` | 64px | 400 | 1.0 | -1.6px | Subsidiary hero |
| `{typography.display-lg}` | 52px | 400 | 1.0 | -1.3px | Section head |
| `{typography.display-md}` | 44px | 400 | 1.09 | -1px | CTA-band headline |
| `{typography.display-sm}` | 36px | 400 | 1.11 | -0.5px | Sub-section head，CoinbaseSans |
| `{typography.title-lg}` | 32px | 400 | 1.13 | -0.4px | Card group title |
| `{typography.title-md}` | 18px | 600 | 1.33 | 0 | Component title、asset row primary |
| `{typography.title-sm}` | 16px | 600 | 1.25 | 0 | List label |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |
| `{typography.body-strong}` | 16px | 700 | 1.5 | 0 | Emphasized body |
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |
| `{typography.caption}` | 13px | 400 | 1.5 | 0 | Photo caption |
| `{typography.caption-strong}` | 12px | 600 | 1.5 | 0 | Badge pill label |
| `{typography.number-display}` | 18px | 500 | 1.4 | 0 | Asset price、percent change，CoinbaseMono |
| `{typography.button}` | 16px | 600 | 1.15 | 0 | Standard CTA pill |
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu item |

### Principles
- **Display weight 保持 400。** 这是最有辨识度的 typographic choice，传达 “calm institutional brand”，而不是 “trading-platform urgency”。
- **Negative letter-spacing 只用于 display。** Display 使用 -1px 到 -2px tracking；body 保持 0。
- **每个数字都用 CoinbaseMono。** Asset price、percent change 以及任何 tabular 内容都用 CoinbaseMono 渲染。

### Font Substitutes
CoinbaseDisplay、CoinbaseSans 和 CoinbaseMono 是 Coinbase 授权字体。
- **CoinbaseDisplay → Inter**，weight 400，letter-spacing -1.5%。
- **CoinbaseSans → Inter**，weight 400/600。
- **CoinbaseMono → JetBrains Mono** 或 **Geist Mono**，weight 500。

## Layout

### Spacing System
- **Base unit:** 4px。
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px。
- **Section padding:** 每个 major editorial band 使用 `{spacing.section}`（96px）。
- **Card internal padding:** Feature card 与 product-UI mockup 使用 `{spacing.xl}`（32px）。

### Grid & Container
- **Max content width:** 居中约 1200px。Hero photography full-bleed。
- **Editorial body:** 单一 12-column grid。
- **Feature card grids:** Hero split 在 desktop 为 2-up，benefit grid 为 3-up。
- **Footer:** Desktop 为 6-column link list。

### Whitespace Philosophy
慷慨的 editorial pacing，更接近 Bloomberg 或 Financial Times，而不是 trading dashboard。Band 之间 96px；band 内 card 相距 24px。Density 存在于登录墙之后，而不是 marketing 中。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Flat | 无 shadow，无 border | 80% 的 surface |
| Hairline border | 1px `{colors.hairline}` | White surface 上的 feature card outline |
| Soft drop | `0 4px 12px rgba(0, 0, 0, 0.04)` | 单一 shadow tier，用于 hovered card |
| Photographic | Full-bleed product-UI mockup | Hero depth |

### Decorative Depth
- **Dark hero 内的 layered product-UI card** 是最有辨识度的 decorative pattern：`{component.product-ui-card-dark}` 浮在更暗的 base canvas 上方，常有第二张较小 card 以倾斜角度 overlap。
- **Geometric brand illustration** 在原本需要 shadow 的位置承载 illustrative depth。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | Reserved（基本不用） |
| `{rounded.xs}` | 4px | Inline tag |
| `{rounded.sm}` | 8px | Compact row |
| `{rounded.md}` | 12px | Form input |
| `{rounded.lg}` | 16px | Mid-size card |
| `{rounded.xl}` | 24px | Feature card、product-UI mockup、pricing tier |
| `{rounded.pill}` | 100px | 所有 CTA button、search pill、badge |
| `{rounded.full}` | 9999px | Asset icon circle、avatar |

Interactive 使用 pill，container 使用 card-radius（24px），icon 使用 full circle。没有 sharp corner。

## Components

### Top Navigation

**`top-nav-light`** — White page 上的默认 top nav。Background `{colors.canvas}`、text `{colors.ink}`、height 64px。Layout：Coinbase wordmark 在左，primary horizontal menu（Cryptocurrencies / Individuals / Businesses / Institutions / Developers / Company）居中，search-icon + globe + Sign In + Sign Up CTA 在右。

**`top-nav-on-dark`** — 位于 dark hero band 上的 top nav。Background `{colors.surface-dark}`、text `{colors.on-dark}`。Layout 相同。

### Buttons

**`button-primary`** — Signature Coinbase Blue pill。Background `{colors.primary}`、text `{colors.on-primary}`、type `{typography.button}`（16px / 600）、padding 12px × 20px、height 44px、rounded `{rounded.pill}`（100px）。

**`button-primary-active`** — Press state。Background `{colors.primary-active}`，更深 blue。

**`button-primary-disabled`** — Faded blue tint。Background `{colors.primary-disabled}`。Cursor not-allowed。

**`button-secondary-light`** — White surface 上的 soft-gray secondary。Background `{colors.surface-strong}`、text `{colors.ink}`，pill geometry 相同。

**`button-secondary-dark`** — 用于 dark hero。Background `{colors.surface-dark-elevated}`、text `{colors.on-dark}`，pill geometry 相同。

**`button-outline-on-dark`** — 带 white outline 的 transparent pill。Background transparent、text `{colors.on-dark}`、1px white border。

**`button-tertiary-text`** — Inline text link。Background transparent、text `{colors.primary}`、type `{typography.button}`。

**`button-pill-cta`** — Homepage hero（“Get started”）使用的更大 pill CTA。使用同一 Coinbase Blue palette，但 height 为 56px，padding 为 16px × 32px，姿态更 proud。

### Hero Bands

**`hero-band-dark`** — Signature full-bleed dark hero。Background `{colors.surface-dark}`、text `{colors.on-dark}`，搭配 full-bleed layered product-UI mockup card。左侧 display headline 使用 `{typography.display-mega}`（80px / 400），subhead 使用 `{typography.body-md}`，两个 CTA。

**`hero-band-light`** — Wealth 与 Explore 使用的 white-canvas variant。Background `{colors.canvas}`、text `{colors.ink}`。Skeleton 相同，palette 为 light。

### Cards

**`product-ui-card-dark`** — Floating product-UI mockup。Background `{colors.surface-dark-elevated}`、text `{colors.on-dark}`、rounded `{rounded.xl}`（24px）、padding 32px。常以 2-3 张轻微旋转的 stacked card 展示，模拟 layered dashboard。

**`product-ui-card-light`** — Explore 中 asset card 使用的 light-canvas variant。Background `{colors.canvas}`、text `{colors.ink}`、geometry 相同，带 1px hairline border。

**`feature-card`** — 用于 3-up 与 2-up grid。Background `{colors.canvas}`、text `{colors.ink}`、type `{typography.title-md}`、rounded `{rounded.xl}`、padding 32px。

### Trading Surfaces

**`asset-row`** — Asset list（Explore、Wealth）中的 horizontal row。Background transparent，1px hairline divider。Layout：左侧 32px circular asset icon，随后是 asset name + ticker，price column 使用 `{typography.number-display}`，24h change column 使用 `{component.price-up-cell}` 或 `{component.price-down-cell}`。

**`price-up-cell`** + **`price-down-cell`** — Inline price-change cell。仅使用 color：`{typography.number-display}` 的 green 或 red text，无 background fill。

**`asset-icon-circular`** — Asset glyph 后方的 circular plate。Background `{colors.surface-strong}`、rounded `{rounded.full}`、diameter 32px。

### Pricing

**`pricing-tier-card`** — Developer Platform 上的 standard pricing tier。Background `{colors.canvas}`、rounded `{rounded.xl}`、padding 32px、1px hairline border。Layout：tier name + price + feature checklist + CTA pill。

**`pricing-tier-featured`** — Featured tier。Background `{colors.surface-dark}`、text `{colors.on-dark}`。Skeleton 相同，palette 为 dark；visual inversion 在没有 colored ribbon 的情况下表示 “highlighted choice”。

### Forms

**`text-input`** — Standard text input。Background `{colors.canvas}`、text `{colors.ink}`、rounded `{rounded.md}`（12px）、padding 14px × 16px、height 48px、1px hairline border。Focus 时 border 加粗为 2px Coinbase Blue。

**`search-input-pill`** — Pill-shaped search bar。Background `{colors.surface-strong}`、rounded `{rounded.pill}`、padding 12px × 20px、height 44px。

### Tags & Badges

**`badge-pill`** — 用作 section label（“INSTITUTIONAL”、“REGULATED”）的小型 uppercase pill。Background `{colors.surface-strong}`、text `{colors.ink}`、type `{typography.caption-strong}`、rounded `{rounded.pill}`。

### CTA / Footer

**`cta-band-dark`** — Pre-footer “Take control of your money” band。Background `{colors.surface-dark}`、text `{colors.on-dark}`、vertical padding 96px。Centered headline + two CTAs。

**`footer-light`** — Closing white-canvas footer。Background `{colors.canvas}`、text `{colors.body}`。6-column link list。

**`footer-link`** — 单个 footer link。Background transparent、text `{colors.body}`。

**`legal-band`** — Footer column 下方的 bottom strip。所有 text 使用 `{colors.muted}` 与 `{typography.caption}`。

## Do's and Don'ts

### Do
- 将 `{colors.primary}`（Coinbase Blue）保留给 primary CTA、wordmark、brand-glyph illustration 和 inline accent link。
- 每个 CTA 都设为 `{rounded.pill}`（100px）；每个 asset glyph 都设为 `{rounded.full}`。
- CoinbaseDisplay headline 保持 weight 400。
- 使用 dark/light band rotation 作为 page rhythm。
- 每个 numerical value 都通过 `{typography.number-display}` 以 CoinbaseMono 渲染。
- 每个 dark hero 都搭配 layered product-UI mockup card stack。

### Don't
- 不要引入 secondary brand color。Coinbase Blue 是唯一 action color；trading green/red 仅为 semantic。
- 不要加粗 display copy；display 保持 weight 400，加粗会改变 brand voice。
- 不要添加 drop shadow tier；系统只有一个 shadow tier。
- 不要在 CTA 上使用 sharp `{rounded.none}`（0px）。
- 不要在同一个 headline 内混用 CoinbaseDisplay 与 CoinbaseSans。
- 不要把 trading green/red 用作 button background。
- 不要从 third-party widget（cookie consent、OneTrust）提取 CTA color。品牌 CTA color 来自真实 product CTA，而不是 injected modal。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 640px | Hero h1 80→40px；feature card grid 为 1-up；asset row 堆叠；nav 折叠为 hamburger；layered product-UI card 折叠为 single card。 |
| Tablet | 640–1024px | Hero h1 为 64px；feature card grid 为 2-up；asset row 保持 horizontal 但压缩 column。 |
| Desktop | 1024–1280px | 完整 hero h1 为 80px；feature card grid 为 3-up；完整 asset row layout。 |
| Wide | > 1280px | Content 上限 1200px；hero photography full-bleed。 |

### Touch Targets
- Primary CTA pill height 为 44px，达到 WCAG AAA。
- 更大的 hero pill（`{component.button-pill-cta}`）为 56px，显著高于 AAA。
- Asset icon circle 为 32px，接近边界；带 8px padding 的 row 形成 effective 48px tap zone。
- Search pill height 为 44px，达到 AAA。

### Collapsing Strategy
- Top nav 在 768px 以下切换为 hamburger sheet。Sign Up CTA 保持可见。
- Hero h1 逐级下降：80 → 64 → 52 → 44 → 36px（最小屏）。
- Layered product-UI mockup card 在 mobile 上从 2-3 张 stacked 折叠为 single card。
- Pricing tier row：3-up → 2-up → 1-up。
- Mobile 上 asset row 垂直堆叠：ticker line 在上，price + change line 在下。

## Iteration Guide

1. 一次关注一个 component。直接引用 YAML key。
2. 新 CTA 默认使用 `{rounded.pill}`（100px）；新 icon plate 默认使用 `{rounded.full}`。Card 使用 `{rounded.xl}`。
3. Variant 作为 `components:` block 内的独立 entry。
4. 所有位置都使用 `{token.refs}`，不要 inline hex。
5. 绝不记录 hover state。只记录 Default 与 Active/Pressed。
6. Display 使用 CoinbaseDisplay 400，body 使用 CoinbaseSans 400/600/700。每个数字都用 CoinbaseMono。
7. Coinbase Blue 保持稀缺：每个 band 只出现一两个 blue moment。

## Known Gaps

- CoinbaseDisplay、CoinbaseSans、CoinbaseMono 都是授权字体；Inter 与 JetBrains Mono 是记录的替代。
- In-product trading surface（order book、chart、order form）位于登录墙之后；本文档只覆盖 marketing。
- Animation timing 不在范围内。
- Captured surface 中未看到 focus 之外的 form validation state。
- Accent yellow 只出现在 Bitcoin asset glyph illustration 内；记录为 illustrative-only。