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**(`` — #0052ff)이며 거의 사용되지 않습니다. 모든 기본 CTA 알약, 브랜드 워드마크 및 인라인 강조 링크입니다. 그 파란색 외에도 시스템은 완전한 제품 모형 영웅을 위한 흰색 캔버스 + 잉크 + 부드러운 회색 엘리베이션 밴드 + 검정색에 가까운 편집 캔버스(`` — #0a0b0d)입니다.

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

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

**주요 특성:**

• 단일 강조 색상: ``(#0052ff Coinbase Blue)은 모든 기본 CTA, 워드마크 및 인라인 브랜드 링크를 전달합니다. 거의 사용되지 않습니다.
• 가장 적당한 디스플레이 무게 — Coinbase디스플레이는 무게가 400이며 절대 700+는 아닙니다.
• 편집 알약 모양: 모든 CTA는 ``(100px), 모든 자산 문양은 ``, 모든 카드는 ``(24px)입니다. 날카로운 모서리가 없습니다.
• 플로팅 제품 UI 카드를 갖춘 풀 블리드 다크 히어로: `` 및 인라인 `` 모형은 브랜드의 가장 강력한 시그니처 패턴입니다.
• 거래 의미: ``(#05b169) 및 ``(#cf202f) — 텍스트 색상만, 배경 채우기 없음.
• 96px 섹션 리듬 — 넉넉한 편집 속도.

색상

브랜드 및 액센트

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

표면

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

헤어라인

• **가는 선** (`` — #dee1e6): 흰색 표면의 기본 1px 구분선.
• **헤어라인 소프트**(`` — #eef0f3): 더 가벼운 구분선 — ``.
과 동일한 16진수

텍스트

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

거래 의미

• **의미 상승** (`` — #05b169): "가격 인상" 녹색, 텍스트 색상만.
• **의미적 하향** (`` — #cf202f): "가격 하향" 빨간색, 텍스트 색상만.

타이포그래피

글꼴군

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

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

계층

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

사용

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

| _`` | 80px | 400 | 1.0 | -2px | 홈페이지 히어로 h1 |

| _`` | 64px | 400 | 1.0 | -1.6px | 자회사 영웅 |

| _`` | 52px | 400 | 1.0 | -1.3px | 섹션 헤드 |

| _`` | 44px | 400 | 1.09 | -1픽셀 | CTA 밴드 헤드라인 |

| _`` | 36px | 400 | 1.11 | -0.5px | 하위 섹션 헤드 — CoinbaseSans |

| _`` | 32px | 400 | 1.13 | -0.4px | 카드 그룹 제목 |

| _`` | 18px | 600 | 1.33 | 0 | 구성요소 제목, 자산 행 기본 |

| _`` | 16px | 600 | 1.25 | 0 | 라벨 목록 |

| _`` | 16px | 400 | 1.5 | 0 | 기본 본문 |

| _`` | 16px | 700 | 1.5 | 0 | 강조된 본문 |

| _`` | 14px | 400 | 1.5 | 0 | 바닥글 본문 |

| _`` | 13px | 400 | 1.5 | 0 | 사진 캡션 |

| _`` | 12px | 600 | 1.5 | 0 | 배지 알약 라벨 |

| _`` | 18px | 500 | 1.4 | 0 | 자산 가격, 변동률 — CoinbaseMono |

| _`` | 16px | 600 | 1.15 | 0 | 표준 CTA 알약 |

| _`` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 항목 |

원칙

• **표시 가중치는 400으로 유지됩니다.** 가장 독특한 인쇄체 선택은 "거래 플랫폼의 긴급성"보다는 "차분한 기관 브랜드"를 나타냅니다.
• **디스플레이에서만 음수 문자 간격이 적용됩니다.** 디스플레이는 -1px ~ -2px 추적을 사용합니다. 본문은 0.
에 유지됩니다.
• **모든 숫자에 대한 CoinbaseMono.** 자산 가격, 백분율 변동 — CoinbaseMono에서 모든 표 형식 렌더링이 가능합니다.

글꼴 대체에 대한 참고사항

CoinbaseDisplay, CoinbaseSans 및 CoinbaseMono는 라이선스가 부여된 Coinbase 서체입니다.

• **CoinbaseDisplay → Inter** 무게 400, 문자 간격 -1.5%.
• **CoinbaseSans → Inter** 무게 400/600.
• **CoinbaseMono → JetBrains Mono** 또는 무게 500의 **Geist Mono**.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 96px.
• **섹션 패딩:** 모든 주요 편집 밴드에 대해 ``(96px).
• **카드 내부 패딩:** 기능 카드 및 제품 UI 모형의 경우 ``(32px).

그리드 및 컨테이너

• **최대 콘텐츠 너비:** 중앙 중심 ~1200픽셀. 영웅 사진 풀블리드.
• **편집 본문:** 단일 12열 그리드.
• **기능 카드 그리드:** 영웅 분할을 위한 데스크탑의 2-up, 혜택 그리드의 3-up.
• **바닥글:** 데스크톱의 6열 링크 목록.

공백 철학

풍부한 편집 속도 — 거래 대시보드보다 Bloomberg 또는 Financial Times에 더 가깝습니다. 밴드 간 96px; 밴드 내부의 카드는 24px 간격으로 배치됩니다. 밀도는 마케팅이 아닌 로그인 벽 뒤에 있습니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 플랫 | 그림자 없음, 테두리 없음 | 표면의 80% |

| 헤어라인 테두리 | 1픽셀 `` | 흰색의 기능 카드 개요 |

| 소프트 드롭 | _`0 4px 12px rgba(0, 0, 0, 0.04)` | 단일 섀도우 계층 — 마우스를 올려 놓은 카드 |

| 사진 | 풀 블리드 제품 UI 모형 | 영웅 깊이 |

장식적 깊이

• **어두운 영웅 내부의 계층화된 제품 UI 카드**는 가장 독특한 장식 패턴입니다. ``는 더 어두운 기본 캔버스 위에 떠 있으며, 종종 두 번째 작은 카드가 비스듬히 겹쳐져 있습니다.
• **기하학적 브랜드 일러스트레이션**은 그림자가 표현하는 깊이를 전달합니다.

도형

테두리 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 0픽셀 | 예약됨(기본적으로 사용되지 않음) |

| _`` | 4픽셀 | 인라인 태그 |

| _`` | 8픽셀 | 압축 행 |

| _`` | 12px | 양식 입력 |

| _`` | 16px | 중간 크기 카드 |

| _`` | 24px | 기능 카드, 제품 UI 모형, 가격 책정 계층 |

| _`` | 100px | 모든 CTA 버튼, 검색 알약, 배지 |

| _`` | 9999px | 자산 아이콘 원, 아바타 |

대화형 알약, 컨테이너용 카드 반경(24px), 아이콘용 원형. 날카로운 모서리가 없습니다.

구성요소

상단 탐색

**`top-nav-light`** — 흰색 페이지의 기본 상단 탐색입니다. 배경 ``, 텍스트 ``, 높이 64px. 레이아웃: 왼쪽 코인베이스 워드마크, 기본 가로 메뉴(암호화폐/개인/기업/기관/개발자/회사), 검색 아이콘 + 지구본 + 로그인 + 가입 CTA 오른쪽.

**`top-nav-on-dark`** — 다크 히어로 밴드의 상위 탐색입니다. 배경 ``, 텍스트 ``. 동일한 레이아웃.

버튼

**`button-primary`** — 시그니처 Coinbase Blue 알약. 배경 ``, 텍스트 ``, 유형 ``(16px/600), 패딩 12px × 20px, 높이 44px, 반올림 ``(100px).

**`button-primary-active`** — 프레스 상태. 배경 ``, 진한 파란색.

**`button-primary-disabled`** — 희미한 파란색 색조. 배경 ``. 커서가 허용되지 않습니다.

**`button-secondary-light`** — 흰색 표면에 부드러운 회색 보조. 배경 ``, 텍스트 ``, 동일한 알약 형상.

**`button-secondary-dark`** — 다크 히어로에 사용됩니다. 배경 ``, 텍스트 ``, 동일한 알약 형상.

**`button-outline-on-dark`** — 흰색 윤곽선이 있는 투명한 알약. 배경 투명, 텍스트 ``, 1px 흰색 테두리.

**`button-tertiary-text`** — 인라인 텍스트 링크. 배경 투명, 텍스트 ``, 유형 ``.

_**`button-pill-cta`** — 홈페이지 히어로("시작하기")에 사용되는 더 큰 알약 CTA입니다. 동일한 Coinbase Blue 팔레트이지만 더 자랑스러운 입장을 위해 높이가 56px이고 패딩이 16px × 32px입니다.

히어로 밴드

_**`hero-band-dark`** — 시그니처 풀블리드 다크 히어로입니다. 배경 ``, 텍스트 ``, 풀 블리드 레이어 제품 UI 모형 카드. ``(80px/400)에 왼쪽 표시 헤드라인, ``에 하위 헤드, 두 개의 CTA.

**`hero-band-light`** — 부(Wealth) 및 탐색(Explore)에 사용되는 흰색 캔버스 변형입니다. 배경 ``, 텍스트 ``. 동일한 뼈대, 밝은 팔레트.

카드

**`product-ui-card-dark`** — 플로팅 제품 UI 모형. 배경 ``, 텍스트 ``, 반올림 ``(24px), 패딩 32px. 계층형 대시보드를 모방하여 약간 회전하면서 2~3개의 카드가 쌓인 형태로 표시되는 경우가 많습니다.

**`product-ui-card-light`** — 자산 카드 탐색에 사용되는 라이트 캔버스 변형입니다. 배경 ``, 텍스트 ``, 동일한 기하학, 1px 가는선 테두리.

**`feature-card`** — 3등분 그리드와 2등분 그리드에 사용됩니다. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 32px.

거래 표면

**`asset-row`** — 자산 목록(탐색, 부)의 가로 행. 배경은 투명하며 1px 헤어라인 구분선입니다. 레이아웃: 왼쪽 32px 순환 자산 아이콘, 자산 이름 + 티커, ``의 가격 열, `` 또는 ``.

의 24시간 변경 열

**`price-up-cell`** + **`price-down-cell`** — 인라인 가격 변경 셀. 색상만 — ``의 녹색 또는 빨간색 텍스트, 배경 채우기 없음.

**`asset-icon-circular`** — 자산 문자 모양 뒤의 원형 플레이트. 배경 ``, 둥근 ``, 32px 직경.

가격

**`pricing-tier-card`** — 개발자 플랫폼의 표준 가격 책정 계층입니다. 배경 ``, 둥근 ``, 패딩 32px, 1px 가는선 테두리. 레이아웃: 계층 이름 + 가격 + 기능 체크리스트 + CTA 알약.

**`pricing-tier-featured`** — 추천 계층입니다. 배경 ``, 텍스트 ``. 동일한 뼈대, 어두운 팔레트 — 시각적 반전은 컬러 리본 없이 "강조된 선택"을 나타냅니다.

양식

**`text-input`** — 표준 텍스트 입력. 배경 ``, 텍스트 ``, 둥근 ``(12px), 패딩 14px × 16px, 높이 48px, 가는선 테두리 1px. 초점이 맞춰지면 테두리가 2px Coinbase Blue로 두꺼워집니다.

**`search-input-pill`** — 알약 모양의 검색 창. 배경 ``, 둥근 ``, 패딩 12px × 20px, 높이 44px.

태그 및 배지

_**`badge-pill`** — 섹션 레이블("INSTITUTIONAL", "REGULATED")로 사용되는 작은 대문자 알약입니다. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``.

CTA/바닥글

**`cta-band-dark`** — 앞부분 "돈을 관리하세요" 밴드. 배경 ``, 텍스트 ``, 세로 패딩 96px. 중앙 헤드라인 + CTA 2개.

**`footer-light`** — 흰색 캔버스 바닥글을 닫습니다. 배경 ``, 텍스트 ``. 6열 링크 목록.

**`footer-link`** — 개별 바닥글 링크. 배경 투명, 텍스트 ``.

_**`legal-band`** — 바닥글 열 아래의 하단 스트립. 모든 텍스트 ``(``.

)

해야 할 일과 하지 말아야 할 일

하라

• 기본 CTA, 워드마크, 브랜드 문양 일러스트레이션, 인라인 악센트 링크를 위해 ``(Coinbase Blue)을 예약하세요.
• 모든 CTA를 ``(100px)으로 설정합니다. 모든 자산 문자 모양은 ``.
입니다.
• CoinbaseDisplay 헤드라인을 400으로 유지합니다.
• 어두운/밝은 밴드 회전을 페이지 리듬으로 사용하세요.
• __CODEBCK_742___를 통해 CoinbaseMono의 모든 숫자 값을 렌더링합니다.
• 모든 어두운 영웅을 계층화된 제품 UI 모형 카드 스택과 결합하세요.

하지 마세요

• 보조 브랜드 색상을 소개하지 마세요. Coinbase Blue가 유일한 액션 색상입니다. 녹색/빨간색 거래는 의미만 있습니다.
• 디스플레이 문구를 굵게 표시하지 마세요. 디스플레이 무게는 400입니다. 굵은 글씨는 브랜드 목소리를 변화시킵니다.
• 드롭 섀도우 계층을 추가하지 마세요. 시스템에는 섀도우 계층이 하나 있습니다.
• CTA에 날카로운 문자 ``(0px)을 사용하지 마세요.
• 같은 헤드라인에 CoinbaseDisplay와 CoinbaseSans를 혼합하지 마세요.
• 녹색/빨간색 거래를 버튼 배경으로 사용하지 마세요.
• 타사 위젯(쿠키 동의, OneTrust)에서 CTA 색상을 추출하지 마세요. 브랜드의 CTA 색상은 삽입된 모달이 아닌 실제 제품 CTA에 표시되는 색상입니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 모바일 | _< 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. |

| 태블릿 | 640~1024px | 영웅 h1 64px; 기능 카드 그리드 2업; 자산 행은 수평으로 유지되지만 열은 압축됩니다. |

| 데스크탑 | 1024~1280px | 전체 영웅 h1 80px; 기능 카드 그리드 3업; 전체 자산 행 레이아웃. |

| 와이드 | > 1280px | 콘텐츠는 1200px로 제한됩니다. 영웅 사진 풀블리드. |

터치 대상

• 44px 높이의 기본 CTA 알약 — WCAG AAA.
• 56px의 더 큰 영웅 알약(``) — AAA보다 훨씬 높습니다.
• 32px의 자산 아이콘 원 — 경계선; 패딩된 8px 행은 효과적인 48px 탭 영역을 생성합니다.
• 44px 높이의 알약 검색 - AAA에서.

축소 전략

• 상단 탐색은 768px 미만의 햄버거 시트로 전환됩니다. 가입 CTA는 계속 표시됩니다.
• Hero h1 단계 감소: 가장 작은 화면에서 80 → 64 → 52 → 44 → 36px.
• 레이어형 제품 UI 모형 카드는 모바일에서 2~3개가 쌓여 단일 카드로 축소됩니다.
• 가격 등급 행: 3개 → 2개 → 1개.
• 모바일 스택의 자산 행을 수직으로 배치합니다. 상단에는 종목 표시 줄, 아래에는 가격 + 변경 라인이 있습니다.

반복 가이드

1. 한 번에 하나의 구성요소에만 집중하세요. YAML 키를 직접 참조하세요.

2. 새 CTA의 기본값은 ``(100px)입니다. 새 아이콘 플레이트의 기본값은 ``입니다. 카드 사용 ``.

3. 변형은 `components:` 블록 내에 별도의 항목으로 존재합니다.

4. 어디에서나 ``을 사용하세요. 16진수 인라인은 사용하지 마세요.

5. 호버 상태는 문서화되지 않았습니다. 기본값 및 활성/누름만 가능합니다.

6. 디스플레이용 CoinbaseDisplay 400, 본체용 CoinbaseSans 400/600/700. 모든 번호에 대한 CoinbaseMono.

7. Coinbase Blue는 여전히 부족합니다. 밴드당 1~2개의 파란색 순간이 있습니다.

알려진 격차

• CoinbaseDisplay, CoinbaseSans, CoinbaseMono는 라이센스가 부여되었습니다. Inter 및 JetBrains Mono는 대체품으로 문서화되어 있습니다.
• 제품 내 거래 화면(주문장, 차트, 주문 양식)은 로그인 벽 뒤에 있습니다. 이 문서에서는 마케팅에만 적용됩니다.
• 애니메이션 타이밍이 범위를 벗어났습니다.
• 초점을 벗어난 양식 유효성 검사 상태는 캡처된 표면에 표시되지 않습니다.
• 악센트 노란색은 비트코인 자산 문양 그림 내부에만 나타납니다. 설명용으로만 문서화되어 있습니다.

概要

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

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

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

_**主な特徴:**

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

色

ブランドとアクセント_

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

サーフェス

• **キャンバス** (`` — #ffffff): デフォルトのページフロア。
• **表面ソフト** (`` — #f7f7f7): 微妙な交互バンド表面。
• **Surface Strong** (`` — #eef0f3): 二次ボタン、検索ピル、アセット アイコン プレートの背後にあるライトグレーの塗りつぶし。
• **Surface Dark** (`` — #0a0b0d): フルブリードのダーク ヒーロー、CTA バンド向けの深く黒に近いキャンバス。 `` と同じ 16 進数 — ページ フロアとテキストの色は値を共有します。
• **Surface Dark Elevated** (`` — #16181c): 1 段階軽くなり、ダーク ヒーロー内のフローティング製品 UI モックアップ カードに使用されます。

ヘアライン

• **ヘアライン** (`` — #dee1e6): 白い表面上のデフォルトの 1 ピクセルの分割線。
• **ヘアライン ソフト** (`` — #eef0f3): より軽い分割線 — `` と同じ六角形。

テキスト

• **インク** (`` — #0a0b0d): 見出し、プライマリ ナビゲーション、本文の強調を表示します。
• **本文** (`` — #5b616e): デフォルトの実行テキスト — ややクールなグレー。
• **ボディ ストロング** (`` — #0a0b0d): インクと同じで、より強調するために使用されます。
• **ミュート** (`` — #7c828a): サブタイトル、ブレッドクラム、セカンダリ フッター。
• **ミュートソフト** (`` — #a8acb3): リンクテキストが無効になりました。
• **プライマリ上** (`` — #ffffff): Coinbase Blue CTA の白いテキスト。
• **ダーク上** (`` — #ffffff): ダーク ヒーローに白いテキスト。
• **ダーク ソフト上** (`` — #a8acb3): ダークのセカンダリ テキストはオフホワイトでミュートされます。

取引セマンティクス

• **セマンティックアップ** (`` — #05b169): 「価格アップ」緑色、テキストの色のみ。
• **セマンティック ダウン** (`` — #cf202f): 「値下げ」赤、テキストの色のみ。

タイポグラフィ

フォント ファミリー

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

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

階層

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

を使用します

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

| `` | 80ピクセル | 400 | 1.0 | -2ピクセル |ホームページ ヒーロー h1 |

| `` | 64ピクセル | 400 | 1.0 | -1.6ピクセル |補助ヒーロー |

| `` | 52ピクセル | 400 | 1.0 | -1.3ピクセル |セクションヘッド |

| `` | 44ピクセル | 400 | 1.09 | -1ピクセル | CTA バンドの見出し |

| `` | 36ピクセル | 400 | 1.11 | -0.5ピクセル |サブセクションの先頭 — CoinbaseSans |

| `` | 32ピクセル | 400 | 1.13 | -0.4ピクセル |カード グループのタイトル |

| `` | 18ピクセル | 600 | 1.33 | 0 |コンポーネント タイトル、アセット行プライマリ |

| `` | 16ピクセル | 600 | 1.25 | 0 |リストのラベル |

| `` | 16ピクセル | 400 | 1.5 | 0 |デフォルトの本文 |

| `` | 16ピクセル | 700 | 1.5 | 0 |強調された本文 |

| `` | 14ピクセル | 400 | 1.5 | 0 |フッター本文 |

| `` | 13ピクセル | 400 | 1.5 | 0 |写真のキャプション |

| `` | 12ピクセル | 600 | 1.5 | 0 |バッジの錠剤ラベル |

| `` | 18ピクセル | 500 | 1.4 | 0 |資産価格、変化率 — CoinbaseMono |

| `` | 16ピクセル | 600 | 1.15 | 0 |標準 CTA ピル |

| `` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーション メニュー項目 |

原則

• **表示ウェイトは 400 のままです。** 唯一最も特徴的なタイポグラフィの選択 — 「取引プラットフォームの緊急性」ではなく「穏やかな機関ブランド」を示しています。
• **表示時のみ負の文字間隔。** 表示では -1px ～ -2px のトラッキングが使用されます。本文は 0.
のままです
• **すべての数値に CoinbaseMono を表示します。** 資産価格、パーセント変化 — 表形式のものはすべて CoinbaseMono に表示されます。

フォントの代替に関する注意

CoinbaseDisplay、CoinbaseSans、および CoinbaseMono は、ライセンスを取得した Coinbase 書体です。

• **CoinbaseDisplay → Inter**、ウェイト 400、文字間隔 -1.5%。
• **CoinbaseSans → Inter** (ウェイト 400/600)。
• **CoinbaseMono → JetBrains Mono** または **Geist Mono** (重量 500)。

レイアウト

間隔システム

• **基本単位:** 4px.
• _**トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 96px.
• **セクション パディング:** 主要な編集バンドごとに `` (96 ピクセル)。
• **カードの内部パディング:** `` (32 ピクセル) フィーチャー カードと製品 UI モックアップ用。

グリッドとコンテナ

• _**コンテンツの最大幅:** 中央に最大 1200 ピクセル。 ヒーロー写真フルブリード。
• **編集本文:** 単一の 12 列グリッド。
• **フィーチャー カード グリッド:** ヒーロー スプリットの場合はデスクトップで 2 アップ、特典グリッドの場合は 3 アップ。
• **フッター:** デスクトップの 6 列のリンク リスト。

ホワイトスペースの哲学

寛大な編集ペース — 取引ダッシュボードよりもブルームバーグやフィナンシャル・タイムズに近い。バンド間は96ピクセル。バンド内のカードは 24 ピクセル離れて配置されます。密度はマーケティングではなく、ログインの壁の背後に存在します。

標高と深さ

|レベル |治療 | |

を使用します

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

|フラット |影も境界線もありません |表面の 80% |

|ヘアラインボーダー | ヘアラインボーダー1px `` |白のフィーチャー カードのアウトライン |

|ソフトドロップ | `0 4px 12px rgba(0, 0, 0, 0.04)` |単一のシャドウ層 — ホバーされたカード |

|写真 |フルブリードの製品 UI モックアップ |ヒーローの深さ |

装飾の深さ_

• **ダーク ヒーロー内のレイヤー化された製品 UI カード** は、最も特徴的な装飾パターンです。__CODEBCK_644___ は、暗いベース キャンバスの上に浮かび上がり、多くの場合、2 番目の小さなカードが斜めに重なっています。
• **幾何学的なブランドのイラスト** は、影が存在する場合に奥行きのあるイラストを表現します。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 0ピクセル |予約済み (基本的には未使用) |

| `` | 4ピクセル |インライン タグ |

| `` | 8ピクセル |コンパクトな行 |

| `` | 12ピクセル |フォーム入力 |

| `` | 16ピクセル |中サイズのカード |

| `` | 24ピクセル |フィーチャー カード、製品 UI モックアップ、価格帯 |

| `` | 100ピクセル |すべての CTA ボタン、検索ピル、バッジ |

| `` | 9999ピクセル |アセット アイコン サークル、アバター |

_インタラクティブの場合はピル、コンテナの場合はカード半径 (24 ピクセル)、アイコンの場合は完全な円。鋭い角はありません。

コンポーネント

トップナビゲーション

_**`top-nav-light`** — 白いページのデフォルトのトップ ナビゲーション。背景__CODEBCK_654___、テキスト__CODEBCK_655___、高さ64ピクセル。レイアウト: Coinbase のワードマーク左、プライマリ水平メニュー (暗号通貨 / 個人 / 企業 / 機関 / 開発者 / 会社)、右に検索アイコン + グローブ + サインイン + サインアップ CTA。

**`top-nav-on-dark`** — ダーク ヒーロー バンドのトップ ナビゲーション。背景__CODEBCK_657___、テキスト__CODEBCK_658___。同じレイアウト。

ボタン

**`button-primary`** — Coinbase Blue の代表的な錠剤。背景 ``、テキスト ``、タイプ `` (16px / 600)、パディング 12px × 20px、高さ 44px、丸め `` (100px)。

_**`button-primary-active`** — プレス状態。背景__CODEBCK_665___、濃い青色。

**`button-primary-disabled`** — 色あせた青い色合い。背景__CODEBCK_667___。カーソルは使用できません。

**`button-secondary-light`** — 白い表面にソフトグレーのセカンダリ。 背景__CODEBCK_669___、テキスト__CODEBCK_670___、同じ錠剤のジオメトリ。

_**`button-secondary-dark`** — ダークヒーローに使用されます。背景__CODEBCK_672___、テキスト__CODEBCK_673___、同じ錠剤のジオメトリ。

_**`button-outline-on-dark`** — 白い輪郭の透明な錠剤。背景は透明、テキスト__CODEBCK_675___、1ピクセルの白い境界線。

**`button-tertiary-text`** — インライン テキスト リンク。背景は透明、テキスト__CODEBCK_677___、タイプ__CODEBCK_678___.

_**`button-pill-cta`** — ホームページのヒーロー (「始めましょう」) で使用される大きな丸薬 CTA。同じ Coinbase Blue パレットですが、高さが 56 ピクセル、パディングが 16 ピクセル × 32 ピクセルで、より誇らしいスタンスを実現しています。

ヒーロー バンド_

**`hero-band-dark`** — 特徴的なフルブリードのダーク ヒーロー。背景 ``、テキスト ``、フルブリードのレイヤー化された製品 UI モックアップ カード。 `` (80px / 400) に左見出し、__CODEBCK_684___ に小見出し、2 つの CTA を表示します。

**`hero-band-light`** — Wealth と Explore で使用される白いキャンバスのバリアント。背景__CODEBCK_686___、テキスト__CODEBCK_687___。同じスケルトン、ライト パレット。

カード

_**`product-ui-card-dark`** — フローティング製品 UI モックアップ。背景__CODEBCK_689___、テキスト__CODEBCK_690___、丸め__CODEBCK_691___ (24ピクセル)、パディング32ピクセル。多くの場合、層状のダッシュボードを模倣して、わずかに回転させて 2 ～ 3 枚のカードを重ねて表示されます。

**`product-ui-card-light`** — アセット カードの Explore で使用されるライトキャンバスのバリアント。背景 ``、テキスト ``、同じジオメトリ、1 ピクセルのヘアライン境界線。

**`feature-card`** — 3-up および 2-up グリッドで使用されます。背景__CODEBCK_696___、テキスト__CODEBCK_697___、タイプ__CODEBCK_698___、丸め__CODEBCK_699___、パディング32px.

取引面

**`asset-row`** — 資産リストの水平行 (Explore、Wealth)。背景は透明、1 ピクセルのヘアラインの仕切り。レイアウト: 32 ピクセルの円形アセット アイコン (左)、アセット名 + ティッカー、__CODEBCK_701___ の価格列、__CODEBCK_702___ または `` の 24 時間変更列。

_**`price-up-cell`** + **`price-down-cell`** — インライン価格変更セル。カラーのみ - `` の緑または赤のテキスト、背景の塗りつぶしなし。

**`asset-icon-circular`** — アセット グリフの後ろの円形プレート。背景__CODEBCK_708___、角丸__CODEBCK_709___、直径32ピクセル

価格

**`pricing-tier-card`** — 開発者プラットフォームの標準価格レベル。背景__CODEBCK_711___、角丸__CODEBCK_712___、パディング32ピクセル、ヘアライン境界線1ピクセル。レイアウト: 階層名 + 価格 + 機能チェックリスト + CTA ピル。

**`pricing-tier-featured`** — 注目の層。背景__CODEBCK_714___、テキスト__CODEBCK_715___。同じスケルトン、暗いパレット — 視覚的な反転は、色付きのリボンなしで「強調表示された選択肢」を示します。

フォーム

**`text-input`** — 標準のテキスト入力。背景 ``、テキスト ``、角丸 `` (12 ピクセル)、パディング 14 ピクセル × 16 ピクセル、高さ 48 ピクセル、ヘアライン境界線 1 ピクセル。フォーカスすると、境界線が 2px Coinbase Blue に太くなります。

**`search-input-pill`** — 錠剤の形をした検索バー。背景__CODEBCK_721___、角丸__CODEBCK_722___、パディング12px × 20px、高さ44px.

タグとバッジ

_**`badge-pill`** — セクション ラベルとして使用される小さな大文字のピル (「INSTITUTIONAL」、「REGULATED」)。 背景__CODEBCK_724___、テキスト__CODEBCK_725___、タイプ__CODEBCK_726___、丸め__CODEBCK_727___.

CTA / フッター

**`cta-band-dark`** — プレフッター「お金を管理する」バンド。背景__CODEBCK_729___、テキスト__CODEBCK_730___、垂直パディング96ピクセル。中央揃えの見出し + 2 つの CTA。

_**`footer-light`** — 白いキャンバスのフッターを閉じます。背景__CODEBCK_732___、テキスト__CODEBCK_733___。 6 列のリンク リスト。

_**`footer-link`** — 個別のフッター リンク。背景は透明、テキスト__CODEBCK_735___.

_**`legal-band`** — フッター列の下の下部ストリップ。すべてのテキスト `` (__CODEBCK_738___).

推奨事項と禁止事項

実行

• __CODEBCK_739___ (コインベース ブルー) は、プライマリ CTA、ワードマーク、ブランド グリフのイラスト、インライン アクセント リンク用に予約してください。
• すべての CTA を `` (100 ピクセル) として設定します。すべてのアセット グリフは__CODEBCK_741___.
• CoinbaseDisplay の見出しのウェイトを 400 に保ちます。
• ページのリズムとして暗い/明るいバンドの回転を使用します。
• __CODEBCK_742___ を介して CoinbaseMono のすべての数値をレンダリングします。
• すべてのダーク ヒーローを、レイヤード プロダクト UI モックアップ カード スタックと組み合わせます。

しないでください

• 二次的なブランドカラーを導入しないでください。 Coinbase Blue は唯一のアクションカラーです。取引緑/赤はセマンティックのみです。
• _コピーを太字で表示しないでください。表示はウェイト 400 で表示されます。太字はブランドの声を変えます。
• ドロップ シャドウ層を追加しないでください。システムには 1 つのシャドウ層があります。
• CTA ではシャープ__CODEBCK_743___ (0px) を使用しないでください。
• 同じ見出し内で CoinbaseDisplay と CoinbaseSans を混在させないでください。
• 取引緑/赤をボタンの背景として使用しないでください。
• サードパーティのウィジェットから CTA カラーを抽出しないでください (Cookie 同意、OneTrust)。ブランドの CTA カラーは、挿入されたモーダルではなく、実際の商品 CTA に表示されるものです。

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

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

|モバイル | < 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. |

|タブレット | 640–1024ピクセル |ヒーロー h1 64px;フィーチャーカードグリッド2アップ。アセットの行は水平のままですが、列は圧縮されます。 |

|デスクトップ | 1024–1280ピクセル |フルヒーロー h1 80px;フィーチャーカードグリッド 3 アップ。完全なアセット行レイアウト。 |

|ワイド | > 1280ピクセル |コンテンツの上限は 1200 ピクセルです。ヒーロー写真フルブリード。 |

タッチターゲット

• 高さ 44 ピクセルのプライマリ CTA ピル - WCAG AAA。
• 56 ピクセルの大きなヒーロー ピル (``) — AAA をはるかに上回ります。
• アセット アイコンは 32 ピクセルで円を描きます — 境界線。パディングされた 8 ピクセルの行により、有効な 48 ピクセルのタップ ゾーンが作成されます。
• 高さ 44 ピクセルでピルを検索します — AAA で。

戦略の崩壊

• トップ ナビゲーションは 768 ピクセル以下でハンバーガー シートに切り替わります。 サインアップ CTA は表示されたままになります。
• Hero h1 はステップダウンします: 最小画面で 80 → 64 → 52 → 44 → 36 ピクセル。
• 階層化された製品 UI モックアップ カードは、モバイル上で 2 ～ 3 枚の積み重ねから 1 枚のカードに折りたたまれます。
• 価格階層行: 3-up → 2-up → 1-up.
• モバイルスタック上のアセット行は垂直方向に配置されます: 上部にティッカーライン、その下に価格 + 変更ライン。

反復ガイド

1.一度に 1 つのコンポーネントに焦点を当てます。 YAML キーを直接参照します。

2.新しい CTA のデフォルトは `` (100px) です。新しいアイコン プレートのデフォルトは `` です。カードは__CODEBCK_747___.

を使用します

3.バリアントは、__CODEBCK_748___ ブロック内の個別のエントリとして存在します。

4. `` をどこでも使用します。16 進数をインライン化しないでください。

5.ホバー状態は文書化されていません。デフォルトおよびアクティブ/押下のみ。

6.ディスプレイはCoinbaseDisplay 400、本体はCoinbaseSans 400/600/700。すべての数値の CoinbaseMono。

7. Coinbase Blue は引き続き希少です — バンドごとに 1 つまたは 2 つのブルーモーメント。

既知のギャップ

• CoinbaseDisplay、CoinbaseSans、CoinbaseMono はライセンスを取得しています。 Inter と JetBrains Mono は文書化された代替品です。
• 製品内の取引画面 (オーダーブック、チャート、オーダーフォーム) はログインウォールの背後にあります。このドキュメントではマーケティングのみを扱います。
• アニメーションのタイミングは範囲外です。
• フォーカスを超えたフォーム検証状態は、キャプチャされたサーフェスには表示されません。
• _アクセントの黄色は、ビットコイン資産のグリフのイラスト内にのみ表示されます。説明のみを目的として文書化されています。

Industry Context

In the landscape of modern digital products, Coinbase's design system stands out for its distinctive visual identity. Compared to peers, Coinbase invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Coinbase's design system stands out for its distinctive visual identity. Compared to peers, Coinbase invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Coinbase's design system stands out for its distinctive visual identity. Compared to peers, Coinbase invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Related Design Systems

Explore similar design languages from the same category:

• Kraken Design System
• Wise Design System
• Binance Design System
• Mastercard Design System