Coinbase

Overview

Coinbase reads like an institutional financial brand that happens to trade crypto — the marketing surfaces are quiet, white-canvas, editorially-spaced, and almost monochromatic. The single brand voltage is **Coinbase Blue** (`{colors.primary}` — #0052ff), used scarcely: every primary CTA pill, the brand wordmark, and inline emphasis links. Beyond that one blue, the system is white canvas + ink + soft gray elevation bands + a deep near-black editorial canvas (`{colors.surface-dark}` — #0a0b0d) for full-bleed product-mockup heroes.

Type pairs **CoinbaseDisplay** for hero headlines with **CoinbaseSans** for body, captions, and navigation. Display sits at **weight 400** — not the 700+ typical of trading platforms. The choice signals editorial calm and institutional trust rather than fintech urgency.

The page rhythm rotates three modes: bright white editorial sections, soft-gray elevation bands, and **full-bleed dark editorial heroes** carrying layered product-UI mockup cards. The dark hero with floating dashboard mockups is the single most distinctive component.

**Key Characteristics:**

• Single accent color: `{colors.primary}` (#0052ff Coinbase Blue) carries every primary CTA, wordmark, and inline brand link. Used scarcely.
• Modest display weights — CoinbaseDisplay at weight 400, never 700+.
• Editorial pill geometry: every CTA is `{rounded.pill}` (100px), every asset glyph is `{rounded.full}`, every card is `{rounded.xl}` (24px). Sharp corners absent.
• Full-bleed dark heroes with floating product-UI cards: `{component.hero-band-dark}` plus inline `{component.product-ui-card-dark}` mockups is the brand's strongest signature pattern.
• Trading semantics: `{colors.semantic-up}` (#05b169) and `{colors.semantic-down}` (#cf202f) — text color only, never background fills.
• 96px section rhythm — generous editorial pacing.

Colors

Brand & Accent

• **Coinbase Blue** (`{colors.primary}` — #0052ff): The single brand color. Every primary CTA pill, the Coinbase wordmark, and inline brand links.
• **Coinbase Blue Active** (`{colors.primary-active}` — #003ecc): Press-state darken on the primary pill.
• **Coinbase Blue Disabled** (`{colors.primary-disabled}` — #a8b8cc): Faded-blue tint for disabled CTAs.
• **Accent Yellow** (`{colors.accent-yellow}` — #f4b000): A small sub-brand accent used very sparingly on Bitcoin/asset glyph fills inside feature cards. Illustrative-only, not an action color.

Surface

• **Canvas** (`{colors.canvas}` — #ffffff): The default page floor.
• **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): Subtle alternating band surface.
• **Surface Strong** (`{colors.surface-strong}` — #eef0f3): The light-gray fill behind secondary buttons, search pills, asset-icon plates.
• **Surface Dark** (`{colors.surface-dark}` — #0a0b0d): Deep near-black canvas for full-bleed dark heroes, CTA bands. Same hex as `{colors.ink}` — page-floor and text-color share the value.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #16181c): One step lighter, used for floating product-UI mockup cards inside dark heroes.

Hairlines

• **Hairline** (`{colors.hairline}` — #dee1e6): Default 1px divider on white surfaces.
• **Hairline Soft** (`{colors.hairline-soft}` — #eef0f3): Lighter divider — same hex as `{colors.surface-strong}`.

Text

• **Ink** (`{colors.ink}` — #0a0b0d): Display headings, primary nav, body emphasis.
• **Body** (`{colors.body}` — #5b616e): Default running-text — slightly cool gray.
• **Body Strong** (`{colors.body-strong}` — #0a0b0d): Same as ink, used for stronger emphasis.
• **Muted** (`{colors.muted}` — #7c828a): Sub-titles, breadcrumbs, footer secondary.
• **Muted Soft** (`{colors.muted-soft}` — #a8acb3): Disabled link text.
• **On Primary** (`{colors.on-primary}` — #ffffff): White text on Coinbase Blue CTAs.
• **On Dark** (`{colors.on-dark}` — #ffffff): White text on dark heroes.
• **On Dark Soft** (`{colors.on-dark-soft}` — #a8acb3): Muted off-white for secondary text on dark.

Trading Semantics

• **Semantic Up** (`{colors.semantic-up}` — #05b169): "Price up" green, text color only.
• **Semantic Down** (`{colors.semantic-down}` — #cf202f): "Price down" red, text color only.

Typography

Font Family

The system runs **CoinbaseDisplay** (display headlines), **CoinbaseSans** (body, navigation, captions, buttons), **CoinbaseIcons** (icon font), and **CoinbaseMono** for tabular numerical data. Fallback stack: `-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`.

The display/body split is functional: CoinbaseDisplay carries hero headlines only; CoinbaseSans carries everything else.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 80px | 400 | 1.0 | -2px | Homepage hero h1 |

| `{typography.display-xl}` | 64px | 400 | 1.0 | -1.6px | Subsidiary heroes |

| `{typography.display-lg}` | 52px | 400 | 1.0 | -1.3px | Section heads |

| `{typography.display-md}` | 44px | 400 | 1.09 | -1px | CTA-band headlines |

| `{typography.display-sm}` | 36px | 400 | 1.11 | -0.5px | Sub-section heads — CoinbaseSans |

| `{typography.title-lg}` | 32px | 400 | 1.13 | -0.4px | Card group titles |

| `{typography.title-md}` | 18px | 600 | 1.33 | 0 | Component titles, asset row primary |

| `{typography.title-sm}` | 16px | 600 | 1.25 | 0 | List labels |

| `{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 captions |

| `{typography.caption-strong}` | 12px | 600 | 1.5 | 0 | Badge pill labels |

| `{typography.number-display}` | 18px | 500 | 1.4 | 0 | Asset prices, percent changes — CoinbaseMono |

| `{typography.button}` | 16px | 600 | 1.15 | 0 | Standard CTA pill |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |

Principles

• **Display weight stays at 400.** The single most distinctive typographic choice — signals "calm institutional brand" rather than "trading-platform urgency."
• **Negative letter-spacing on display only.** Display uses -1px to -2px tracking; body stays at 0.
• **CoinbaseMono on every number.** Asset prices, percent changes — anything tabular renders in CoinbaseMono.

Note on Font Substitutes

CoinbaseDisplay, CoinbaseSans, and CoinbaseMono are licensed Coinbase typefaces.

• **CoinbaseDisplay → Inter** at weight 400, letter-spacing -1.5%.
• **CoinbaseSans → Inter** at weight 400/600.
• **CoinbaseMono → JetBrains Mono** or **Geist Mono** at 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:** `{spacing.section}` (96px) for every major editorial band.
• **Card internal padding:** `{spacing.xl}` (32px) for feature cards and product-UI mockups.

Grid & Container

• **Max content width:** ~1200px centered. Hero photography full-bleed.
• **Editorial body:** Single 12-column grid.
• **Feature card grids:** 2-up at desktop for hero splits, 3-up for benefit grids.
• **Footer:** 6-column link list at desktop.

Whitespace Philosophy

Generous editorial pacing — closer to Bloomberg or the Financial Times than to a trading dashboard. 96px between bands; cards inside bands sit 24px apart. Density lives behind login walls, not on marketing.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | 80% of surfaces |

| Hairline border | 1px `{colors.hairline}` | Feature card outlines on white |

| Soft drop | `0 4px 12px rgba(0, 0, 0, 0.04)` | Single shadow tier — hovered cards |

| Photographic | Full-bleed product-UI mockups | Hero depth |

Decorative Depth

• **Layered product-UI cards inside dark heroes** is the most distinctive decorative pattern — a `{component.product-ui-card-dark}` floats above a darker base canvas, often with a second smaller card overlapping at an angle.
• **Geometric brand illustrations** carry illustrative depth where shadows would otherwise.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Reserved (essentially unused) |

| `{rounded.xs}` | 4px | Inline tags |

| `{rounded.sm}` | 8px | Compact rows |

| `{rounded.md}` | 12px | Form inputs |

| `{rounded.lg}` | 16px | Mid-size cards |

| `{rounded.xl}` | 24px | Feature cards, product-UI mockups, pricing tiers |

| `{rounded.pill}` | 100px | All CTA buttons, search pills, badges |

| `{rounded.full}` | 9999px | Asset icon circles, avatars |

Pill for interactive, card-radius (24px) for containers, full circle for icons. Sharp corners absent.

Components

Top Navigation

**`top-nav-light`** — Default top nav on white pages. Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Coinbase wordmark left, primary horizontal menu (Cryptocurrencies / Individuals / Businesses / Institutions / Developers / Company), search-icon + globe + Sign In + Sign Up CTAs right.

**`top-nav-on-dark`** — Top nav over a dark hero band. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same layout.

Buttons

**`button-primary`** — The 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}`, deeper blue.

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

**`button-secondary-light`** — Soft-gray secondary on white surfaces. Background `{colors.surface-strong}`, text `{colors.ink}`, same pill geometry.

**`button-secondary-dark`** — Used on dark heroes. Background `{colors.surface-dark-elevated}`, text `{colors.on-dark}`, same pill geometry.

**`button-outline-on-dark`** — Transparent pill with white outline. 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`** — Larger pill CTA used on the homepage hero ("Get started"). Same Coinbase Blue palette but with 56px height and 16px × 32px padding for a prouder stance.

Hero Bands

**`hero-band-dark`** — The signature full-bleed dark hero. Background `{colors.surface-dark}`, text `{colors.on-dark}`, full-bleed layered product-UI mockup cards. Display headline left in `{typography.display-mega}` (80px / 400), subhead in `{typography.body-md}`, two CTAs.

**`hero-band-light`** — White-canvas variant used on Wealth and Explore. Background `{colors.canvas}`, text `{colors.ink}`. Same skeleton, light palette.

Cards

**`product-ui-card-dark`** — The floating product-UI mockup. Background `{colors.surface-dark-elevated}`, text `{colors.on-dark}`, rounded `{rounded.xl}` (24px), padding 32px. Often shown as 2-3 stacked cards at slight rotation, mimicking a layered dashboard.

**`product-ui-card-light`** — Light-canvas variant used on Explore for asset cards. Background `{colors.canvas}`, text `{colors.ink}`, same geometry, 1px hairline border.

**`feature-card`** — Used in 3-up and 2-up grids. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.title-md}`, rounded `{rounded.xl}`, padding 32px.

Trading Surfaces

**`asset-row`** — Horizontal row in asset lists (Explore, Wealth). Background transparent, 1px hairline divider. Layout: 32px circular asset icon left, asset name + ticker, price column in `{typography.number-display}`, 24h change column with `{component.price-up-cell}` or `{component.price-down-cell}`.

**`price-up-cell`** + **`price-down-cell`** — Inline price-change cells. Color only — green or red text in `{typography.number-display}`, no background fill.

**`asset-icon-circular`** — Circular plate behind asset glyphs. Background `{colors.surface-strong}`, rounded `{rounded.full}`, 32px diameter.

Pricing

**`pricing-tier-card`** — Standard pricing tier on Developer Platform. Background `{colors.canvas}`, rounded `{rounded.xl}`, padding 32px, 1px hairline border. Layout: tier name + price + feature checklist + CTA pill.

**`pricing-tier-featured`** — The featured tier. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same skeleton, dark palette — visual inversion signals "highlighted choice" without colored ribbons.

Forms

**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.md}` (12px), padding 14px × 16px, height 48px, 1px hairline border. On focus, border thickens to 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`** — Small uppercase pill used as section labels ("INSTITUTIONAL", "REGULATED"). 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`** — Individual footer link. Background transparent, text `{colors.body}`.

**`legal-band`** — Bottom strip beneath footer columns. All text `{colors.muted}` at `{typography.caption}`.

Do's and Don'ts

Do

• Reserve `{colors.primary}` (Coinbase Blue) for primary CTAs, wordmark, brand-glyph illustrations, inline accent links.
• Set every CTA as `{rounded.pill}` (100px); every asset glyph as `{rounded.full}`.
• Keep CoinbaseDisplay headlines at weight 400.
• Use the dark/light band rotation as page rhythm.
• Render every numerical value in CoinbaseMono via `{typography.number-display}`.
• Pair every dark hero with a layered product-UI mockup card stack.

Don't

• Don't introduce a secondary brand color. Coinbase Blue is the only action color; trading green/red are semantic-only.
• Don't bold display copy — display sits at weight 400; bolding shifts the brand voice.
• Don't add drop shadow tiers — system has one shadow tier.
• Don't use sharp `{rounded.none}` (0px) on CTAs.
• Don't mix CoinbaseDisplay and CoinbaseSans inside the same headline.
• Don't use trading green/red as a button background.
• Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 640px | Hero h1 80→40px; feature card grid 1-up; asset row stacks; nav collapses to hamburger; layered product-UI cards collapse to single card. |

| Tablet | 640–1024px | Hero h1 64px; feature card grid 2-up; asset rows stay horizontal but compress columns. |

| Desktop | 1024–1280px | Full hero h1 80px; feature card grid 3-up; full asset row layout. |

| Wide | > 1280px | Content caps at 1200px; hero photography full-bleed. |

Touch Targets

• Primary CTA pill at 44px height — at WCAG AAA.
• Larger hero pill (`{component.button-pill-cta}`) at 56px — well above AAA.
• Asset icon circles at 32px — borderline; padded 8px row creates effective 48px tap zone.
• Search pill at 44px height — at AAA.

Collapsing Strategy

• Top nav switches to hamburger sheet below 768px. Sign Up CTA stays visible.
• Hero h1 steps down: 80 → 64 → 52 → 44 → 36px on smallest screens.
• Layered product-UI mockup cards collapse from 2-3 stacked into a single card on mobile.
• Pricing tier rows: 3-up → 2-up → 1-up.
• Asset rows on mobile stack vertically: ticker line on top, price + change line beneath.

Iteration Guide

1. Focus on a single component at a time. Reference YAML keys directly.

2. New CTAs default to `{rounded.pill}` (100px); new icon plates default to `{rounded.full}`. Cards use `{rounded.xl}`.

3. Variants live as separate entries inside the `components:` block.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented. Only Default and Active/Pressed.

6. CoinbaseDisplay 400 for display, CoinbaseSans 400/600/700 for body. CoinbaseMono on every number.

7. Coinbase Blue stays scarce — one or two blue moments per band.

Known Gaps

• CoinbaseDisplay, CoinbaseSans, CoinbaseMono are licensed; Inter and JetBrains Mono are documented substitutes.
• In-product trading surfaces (order book, charts, order forms) are behind login walls — this document covers marketing only.
• Animation timings out of scope.
• Form validation states beyond focus not visible on captured surfaces.
• Accent yellow appears only inside Bitcoin asset glyph illustrations; documented as illustrative-only.

개요

Coinbase는 암호화폐를 거래하는 기관 금융 브랜드처럼 읽혀집니다. 마케팅 표면은 조용하고 흰색 캔버스이며 편집 공간이 있으며 거의 단색입니다. 단일 브랜드 전압은 **Coinbase Blue**(`{colors.primary}` — #0052ff)이며 거의 사용되지 않습니다. 모든 기본 CTA 알약, 브랜드 워드마크 및 인라인 강조 링크입니다. 파란색 외에 시스템은 완전한 제품 모형 영웅을 위한 흰색 캔버스 + 잉크 + 부드러운 회색 엘리베이션 밴드 + 짙은 검정색에 가까운 편집 캔버스(`{colors.surface-dark}` — #0a0b0d)입니다.

본문, 캡션 및 탐색에 **CoinbaseSans**를 사용하여 주요 헤드라인에 **CoinbaseDisplay** 쌍을 입력합니다. 디스플레이는 **무게 400**에 위치하며 일반적인 거래 플랫폼의 700+가 아닙니다. 이번 선택은 핀테크의 긴급성보다는 편집부의 평온함과 제도적 신뢰를 나타냅니다.

페이지 리듬은 밝은 흰색 편집 섹션, 부드러운 회색 엘리베이션 밴드, 계층화된 제품 UI 모형 카드를 들고 있는 **완전히 어두운 편집 영웅**의 세 가지 모드로 회전합니다. 대시보드 모형이 떠 있는 다크 히어로는 가장 독특한 구성 요소입니다.

**주요 특징:**

• 단일 강조 색상: `{colors.primary}`(#0052ff Coinbase Blue)는 모든 기본 CTA, 워드마크 및 인라인 브랜드 링크를 포함합니다. 거의 사용되지 않았습니다.
• 보통의 디스플레이 가중치 - Coinbase 디스플레이의 가중치는 400이며 절대 700+는 아닙니다.
• 편집 알약 모양: 모든 CTA는 `{rounded.pill}`(100px)이고, 모든 자산 문양은 `{rounded.full}`이며, 모든 카드는 `{rounded.xl}`(24px)입니다. 날카로운 모서리가 없습니다.
• 떠다니는 제품 UI 카드를 갖춘 완전한 다크 히어로: `{comComponent.hero-band-dark}` 및 인라인 `{comComponent.product-ui-card-dark}` 모형은 브랜드의 가장 강력한 시그니처 패턴입니다.
• 의미 체계 거래: `{colors.semantic-up}`(#05b169) 및 `{colors.semantic-down}`(#cf202f) — 텍스트 색상만, 배경은 채워지지 않습니다.
• 96px 섹션 리듬 — 넉넉한 편집 속도.

색상

브랜드 및 액센트

• **Coinbase Blue** (`{colors.primary}` — #0052ff): 단일 브랜드 색상입니다. 모든 기본 CTA 알약, Coinbase 워드마크 및 인라인 브랜드 링크.
• **Coinbase Blue Active** (`{colors.primary-active}` — #003ecc): 기본 알약을 누르면 상태가 어두워집니다.
• **Coinbase Blue 비활성화됨** (`{colors.primary-disabled}` — #a8b8cc): 비활성화된 CTA에 대한 희미한 파란색 색조입니다.
• **액센트 노란색**(`{colors.accent-yellow}` — #f4b000): 비트코인/자산 문자 모양에 아주 드물게 사용되는 작은 하위 브랜드 액센트가 기능 카드 내부를 채웁니다. 동작 색상이 아닌 예시용입니다.

표면

• **캔버스** (`{colors.canvas}` — #ffffff): 기본 페이지 바닥입니다.
• **부드러운 표면** (`{colors.surface-soft}` — #f7f7f7): 미묘한 교대 밴드 표면.
• **Surface Strong** (`{colors.surface-strong}` — #eef0f3): 보조 버튼, 검색 알약, 자산 아이콘 플레이트 뒤의 밝은 회색 채우기입니다.
• **Surface Dark** (`{colors.surface-dark}` — #0a0b0d): 완전한 다크 히어로, CTA 밴드를 위한 짙은 검정색 캔버스입니다. `{colors.ink}`와 동일한 16진수 — page-floor 및 text-color는 값을 공유합니다.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #16181c): 한 단계 더 가벼워졌으며, 다크 히어로 내부에 떠 있는 제품 UI 모형 카드에 사용됩니다.

헤어라인

• **헤어라인** (`{colors.hairline}` — #dee1e6): 흰색 표면의 기본 1px 구분선입니다.
• **Hairline Soft** (`{colors.hairline-soft}` — #eef0f3): 더 가벼운 구분선 — `{colors.surface-strong}`과 동일한 16진수입니다.

텍스트

• **잉크**(`{colors.ink}` — #0a0b0d): 제목, 기본 탐색, 본문 강조를 표시합니다.
• **본문**(`{colors.body}` — #5b616e): 기본 실행 텍스트 — 약간 차가운 회색.
• **Body Strong** (`{colors.body-strong}` — #0a0b0d): 잉크와 동일하며 더 강한 강조에 사용됩니다.
• **음소거** (`{colors.muted}` — #7c828a): 부제목, 탐색경로, 바닥글 보조.
• **음소거 소프트**(`{colors.muted-soft}` — #a8acb3): 링크 텍스트가 비활성화되었습니다.
• **On Primary** (`{colors.on-primary}` — #ffffff): Coinbase Blue CTA의 흰색 텍스트입니다.
• **On Dark** (`{colors.on-dark}` — #ffffff): 어두운 영웅의 흰색 텍스트입니다.
• **어두운 부드러움** (`{colors.on-dark-soft}` — #a8acb3): 어두운 부분에 보조 텍스트를 표시하기 위해 회백색을 음소거합니다.

거래 의미론

• **Semantic Up** (`{colors.semantic-up}` — #05b169): "가격 인상" 녹색, 텍스트 색상만 해당.
• **Semantic Down** (`{colors.semantic-down}` — #cf202f): "가격 인하" 빨간색, 텍스트 색상만 해당.

타이포그래피

글꼴 계열

시스템은 표 형식의 숫자 데이터에 대해 **CoinbaseDisplay**(디스플레이 헤드라인), **CoinbaseSans**(본문, 탐색, 캡션, 버튼), **CoinbaseIcons**(아이콘 글꼴) 및 **CoinbaseMono**를 실행합니다. 대체 스택: `-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`.

디스플레이/본문 분할은 기능적입니다. CoinbaseDisplay는 주요 헤드라인만 전달합니다. CoinbaseSans는 다른 모든 것을 담고 있습니다.

계층 구조

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | 사용 |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 80px | 400 | 1.0 | -2px | 홈페이지 히어로 h1 |

| `{typography.display-xl}` | 64px | 400 | 1.0 | -1.6px | 자회사

概要

Coinbase は、たまたま暗号通貨を取引する機関金融ブランドのように見えます。マーケティング面は静かで、白いキャンバスで、編集スペースがあり、ほぼ単色です。単一ブランド ボルテージは **Coinbase Blue** (`{colors.primary}` — #0052ff) で、すべての主要な CTA ピル、ブランドのワードマーク、およびインライン強調リンクなど、ほとんど使用されません。その 1 つの青を超えたシステムは、白いキャンバス + インク + ソフト グレーの標高バンド + フルブリード製品モックアップのヒーロー用の黒に近い濃い編集キャンバス (`{colors.surface-dark}` — #0a0b0d) です。

ヒーローの見出しには **CoinbaseDisplay**、本文、キャプション、ナビゲーションには **CoinbaseSans** のペアを入力します。ディスプレイは **ウェイト 400** で、取引プラットフォームの一般的な 700 以上ではありません。この選択は、フィンテックの緊急性ではなく、編集者の冷静さと組織的な信頼を示しています。

ページのリズムは 3 つのモードを回転させます。明るい白い編集セクション、ソフト グレーの標高バンド、および階層化された製品 UI モックアップ カードを運ぶ **フルブリードのダークな編集ヒーロー**です。フローティング ダッシュボード モックアップを備えたダーク ヒーローは、最も特徴的なコンポーネントです。

**主な特徴:**

• 単一のアクセント カラー: `{colors.primary}` (#0052ff Coinbase Blue) には、すべてのプライマリ CTA、ワードマーク、およびインライン ブランド リンクが含まれます。ほとんど使用されていません。
• 控えめな表示ウェイト — CoinbaseDisplay はウェイト 400 で、700 以上はありません。
• 編集ピルのジオメトリ: すべての CTA は `{rounded.pill}` (100 ピクセル)、すべてのアセット グリフは `{rounded.full}`、すべてのカードは `{rounded.xl}` (24 ピクセル) です。鋭い角はありません。
• フローティング製品 UI カードを備えたフルブリードのダーク ヒーロー: `{component.hero-band-dark}` とインライン `{component.product-ui-card-dark}` モックアップは、ブランドの最も強力なシグネチャー パターンです。
• 取引セマンティクス: `{colors.semantic-up}` (#05b169) および `{colors.semantic-down}` (#cf202f) — テキストの色のみであり、背景の塗りつぶしはありません。
• 96 ピクセルのセクション リズム — ゆったりとした編集ペース。

色

ブランドとアクセント

• **Coinbase Blue** (`{colors.primary}` — #0052ff): 単一のブランドカラー。すべての主要な CTA ピル、Coinbase ワードマーク、およびインライン ブランド リンク。
• **Coinbase Blue Active** (`{colors.primary-active}` — #003ecc): プライマリ ピルを押すと状態が暗くなります。
• **Coinbase Blue Disabled** (`{colors.primary-disabled}` — #a8b8cc): 無効になっている CTA の色あせた青の色合い。
• **アクセント イエロー** (`{colors.accent- yellow}` — #f4b000): ビットコイン/資産グリフで非常に控えめに使用される小さなサブブランド アクセントがフィーチャー カード内を埋めます。説明のみであり、アクションカラーではありません。

表面

• **キャンバス** (`{colors.canvas}` — #ffffff): デフォルトのページフロア。
• **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): 微妙な交互のバンド サーフェス。
• **Surface Strong** (`{colors.surface-strong}` — #eef0f3): 二次ボタン、検索ピル、アセット アイコン プレートの後ろの明るい灰色の塗りつぶし。
• **Surface Dark** (`{colors.surface-dark}` — #0a0b0d): フルブリードのダーク ヒーロー、CTA バンド向けの深く黒に近いキャンバス。 `{colors.ink}` と同じ 16 進数 — page-floor と text-color は値を共有します。
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #16181c): 1 段階軽くなり、ダーク ヒーロー内のフローティング製品 UI モックアップ カードに使用されます。

ヘアライン

• **ヘアライン** (`{colors.hairline}` — #dee1e6): 白い表面上のデフォルトの 1 ピクセルの分割線。
• **Hairline Soft** (`{colors.hairline-soft}` — #eef0f3): より明るい分割線 — `{colors.surface-strong}` と同じ 16 進数。

テキスト

• **インク** (`{colors.ink}` — #0a0b0d): 見出し、プライマリ ナビゲーション、本文の強調を表示します。
• **本文** (`{colors.body}` — #5b616e): デフォルトの実行テキスト — わずかにクールなグレー。
• **Body Strong** (`{colors.body-strong}` — #0a0b0d): インクと同じで、より強い強調に使用されます。
• **ミュート** (`{colors.muted}` — #7c828a): サブタイトル、ブレッドクラム、セカンダリ フッター。
• **ミュート ソフト** (`{colors.muted-soft}` — #a8acb3): リンク テキストを無効にしました。
• **プライマリ上** (`{colors.on-primary}` — #ffffff): Coinbase Blue CTA の白いテキスト。
• **オン ダーク** (`{colors.on-dark}` — #ffffff): ダーク ヒーローの白いテキスト。
• **オン ダーク ソフト** (`{colors.on-dark-soft}` — #a8acb3): ダークの二次テキストのオフホワイトをミュートします。

取引セマンティクス

• **セマンティック アップ** (`{colors.semantic-up}` — #05b169): 「価格アップ」緑色、テキストの色のみ。
• **セマンティック ダウン** (`{colors.semantic-down}` — #cf202f): 「価格ダウン」赤、テキストの色のみ。

タイポグラフィー

フォントファミリー

システムは、**CoinbaseDisplay** (見出しの表示)、**CoinbaseSans** (本文、ナビゲーション、キャプション、ボタン)、**CoinbaseIcons** (アイコン フォント)、および表形式の数値データの **CoinbaseMono** を実行します。フォールバック スタック: `-apple-system、system-ui、"Segoe UI"、Roboto、Helvetica、Arial、sans-serif`。

表示と本文の分割は機能しています。CoinbaseDisplay にはヒーローの見出しのみが表示されます。 CoinbaseSans はその他すべてを取り扱っています。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 |使用 |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 80ピクセル | 400 | 1.0 | -2ピクセル |ホームページ ヒーロー h1 |

| `{typography.display-xl}` | 64ピクセル | 400 | 1.0 | -1.6ピクセル |子会社