---
name: Coinbase
colors:
  primary: '#0052ff'
  primary-hover: '#578bfa'
  brand: '#0052ff'
  canvas: '#ffffff'
  foreground: '#0a0b0d'
  muted: '#5b616e'
  on-primary: '#ffffff'
  surface: '#eef0f3'
  surface-dark: '#282b31'
  dark-section: '#0a0b0d'
  link: '#0667d0'
typography:
  display-hero:
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1
    use: Hero headlines, maximum impact
  display-secondary:
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    use: Sub-hero headlines
  display-third:
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1
    use: Third-tier display
  section-heading:
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.11
    use: Feature section titles
  card-title:
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.13
    use: Card headings
  feature-title:
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.33
    use: Feature emphasis
  body-bold:
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    use: Strong body
  body-semibold:
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    use: Buttons, nav
  body:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    use: Standard reading
  body-small:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    use: Secondary reading
  button:
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.16px
    use: Button labels
  caption:
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
    use: Metadata
  small:
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.23
    use: Tags
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 40px
  pill: 56px
  full: 100000px
spacing:
  xs: 4
  sm: 8
  md: 16
  base: 16
  lg: 24
  xl: 32
  xxl: 48
  section: 64
components:
  button-primary:
    type: button
    backgroundColor: '#0052ff'
    textColor: '#ffffff'
    rounded: 100000px
    border: '1px solid #0052ff'
    typography: 16px / 600
    hover: 'bg #578bfa'
    focus: 2px solid black outline
    states: loading hides label + ProgressCircle · sizes Compact/Default/Block
    use: High-emphasis primary CTA, one per screen
  button-secondary:
    type: button
    backgroundColor: '#eef0f3'
    textColor: '#0a0b0d'
    rounded: 100000px
    border: '1px solid #eef0f3'
    typography: 16px / 600
    use: Medium-emphasis equal-weight actions
  button-tertiary:
    type: button
    backgroundColor: '#eef0f3'
    textColor: '#0a0b0d'
    rounded: 100000px
    states: transparent-until-interaction
    use: Low-emphasis action
  button-inverse:
    type: button
    backgroundColor: '#282b31'
    textColor: '#ffffff'
    rounded: 100000px
    use: High contrast on dark sections
  button-negative:
    type: button
    textColor: '#ffffff'
    rounded: 100000px
    use: Destructive only, used sparingly
  button-transparent:
    type: button
    backgroundColor: transparent
    textColor: '#0a0b0d'
    rounded: 100000px
    states: container visible only on hover/press · sizes Compact/Default/Block · startIcon+endIcon slots
    use: Transparent modifier on any variant
  button-blue-bordered:
    type: button
    backgroundColor: transparent
    textColor: '#0052ff'
    rounded: 100000px
    border: '1px solid #0052ff'
    typography: 16px / 600
    use: Secondary CTA pairing
  icon-button:
    type: button
    backgroundColor: transparent
    rounded: 100000px
    height: 56px
    use: Icon-only action, 56px round hit-target
  chip:
    type: badge
    backgroundColor: '#eef0f3'
    textColor: '#0a0b0d'
    rounded: 100000px
    states: 'selected bg #0052ff'
    use: Pill selectable token
  nav-tab-chip:
    type: tab
    textColor: '#0667d0'
    rounded: 16px
    padding: 4px 16px
    typography: 14px / 400
    use: Header category chip
  text-input:
    type: input
    backgroundColor: '#ffffff'
    textColor: '#0a0b0d'
    border: 1px solid rgba(91,97,110,0.2)
    rounded: 8px
    height: 56px
    padding: 16px
    typography: 16px / 400
    states: 'label outside/inside-float · negative sets aria-invalid + ''Error: …'' helper · positive validated · read-only secondary bg · disabled distinct'
    use: Bordered text field
  search-input:
    type: input
    backgroundColor: transparent
    textColor: '#0a0b0d'
    border: none
    typography: 16px / 400
    states: borderless inline · leading search glyph
    use: Inline search field
  switch:
    type: toggle
    states: 'control #0052ff when checked · optional thumb elevation'
    use: On/off toggle
  checkbox-radio:
    type: toggle
    active: 'selected fill #0052ff'
    states: Cell + Group wrappers
    use: Checkbox and Radio selection
  segmented-control:
    type: tab
    backgroundColor: '#eef0f3'
    active: 'active segment #0052ff'
    rounded: 100000px
    use: Time-range and view switches
  card:
    type: card
    backgroundColor: '#ffffff'
    border: 1px solid rgba(91,97,110,0.2)
    rounded: 8px–40px
    shadow: none — depth from section contrast
    states: ContentCard Header/Body/Footer · DataCard/MediaCard/NudgeCard/UpsellCard
    use: Content container family
  data-table:
    type: card
    border: 1px solid rgba(91,97,110,0.2)
    states: desktop-only (Lists View on mobile) · variants default/graph/ruled · required header row · sortable · sticky header · TableCellFallback skeleton
    use: Tabular data, desktop only
  list-cell:
    type: listItem
    textColor: '#0a0b0d'
    states: leading CellMedia + title/subtitle
    use: Mobile substitute for Table, asset rows
  modal:
    type: dialog
    backgroundColor: '#ffffff'
    shadow: scrim overlay + FocusTrap
    states: visible + onRequestClose · restoreFocusOnUnmount=false for chains · FullscreenModal/Tray/Alert/FullscreenAlert siblings
    use: Header/Body/Footer modal
  toast:
    type: toast
    states: bottom-anchored · auto-dismiss 5s base + close button · bgPositive/bgNegative/bgWarning · role=alert · persists on hover
    use: Transient status message
  tooltip:
    type: card
    states: Tooltip + PopoverPanel + Coachmark
    use: Contextual hints and first-run tours
  banner:
    type: card
    border: global avoids custom radius — flush with status bar
    states: styles global/inline/contextual · variants informational/warning/error/promotional · startIcon+title+children+primaryAction+secondaryAction+showDismiss
    use: Feedback and status messaging
  progress:
    type: card
    textColor: '#0052ff'
    states: ProgressCircle determinate 0–100% / indeterminate fgMuted arc · stroke thin 2px/normal 4px/semiheavy 8px/heavy 12px · ProgressBar + Spinner
    use: Determinate/indeterminate progress
  sparkline:
    type: card
    textColor: '#0052ff'
    states: Sparkline/LineChart/AreaChart/BarChart/PercentageBarChart · live price ticks flash green/red (disabled under reduced-motion)
    use: Inline price/chart visualization
  dark-section:
    type: card
    backgroundColor: '#0a0b0d'
    textColor: '#ffffff'
    active: 'accent links #0052ff'
    use: Dark feature section
fonts:
  roles:
    sans: CoinbaseSans
    display: CoinbaseDisplay
    body: CoinbaseText
    icon: CoinbaseIcons
---

# Design System Inspiration of Coinbase

## Overview

### Visual Theme & Atmosphere

Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.

The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.

**Key Characteristics:**
- Coinbase Blue (`#0052ff`) as singular brand accent
- Four-font proprietary family: Display, Sans, Text, Icons
- 56px radius pill buttons with blue hover transition
- Near-black (`#0a0b0d`) dark sections + white light sections
- 1.00 line-height on display headings — ultra-tight
- Cool gray secondary surface (`#eef0f3`) with blue tint
- `text-transform: lowercase` on some button labels — unusual

### Primary tasks

- Buy and sell Bitcoin, Ethereum, and other assets
- Upload a government-issued ID to finish verification
- Check the full receipt after a purchase clears
- Follow a withdrawal from submitted through to confirmed
- Set up a recurring monthly buy of BTC and ETH

### Brand Narrative

Coinbase was founded **June 2012** in San Francisco by **Brian Armstrong** (CEO) and **Fred Ehrsam** (former Goldman Sachs FX trader) (Brian Armstrong — Wikipedia), Frederick.ai — Brian Armstrong). Origin story: **Armstrong posted on Hacker News looking for a co-founder for Y Combinator**; Ehrsam responded after seeing the post on Reddit — the HN post itself went viral. They entered **Y Combinator S12** with $150K. Mission: ***"to increase economic freedom in the world."*** **NASDAQ direct listing April 14, 2021** under ticker **COIN** — landmark moment for the crypto industry, briefly approached **$100B market cap** at IPO peak (99bitcoins). Coinbase **survived the 2022 crypto winter and the FTX collapse (Nov 2022)** as the most-regulated US crypto exchange — turning regulatory caution into positioning advantage. Product family extended: **Coinbase Wallet** (non-custodial), **Coinbase Prime** (institutional), **Base** (L2 blockchain, launched 2023).

What Coinbase refuses: token shilling, unregistered securities listings (regulatory caution), aggressive trader-bait UI, casino-style gambling framing.

### Principles

1. **Compliance is a feature, not a tax.** *UI implication:* KYC/security flows have first-class UX investment, not last-mile.
2. **Show the receipt, always.** *UI implication:* every transaction includes asset / amount / fee / USD value / network status.
3. **Education sits next to action.** *UI implication:* Earn pages, Learn pages have nav prominence equal to Trade.
4. **Round buttons, not aggressive corners.** *UI implication:* fully-pill (`56px` radius) on primary actions reads "approachable, retail-grade".
5. **Coinbase Blue `#0052ff` is the only accent.** *UI implication:* never multi-color brand chrome; let market data charts carry color.

### Personas

*Personas are fictional archetypes informed by Coinbase user segments (retail crypto holders, institutional traders, recurring-buy long-holders), not individual people.*

**Marcus Reilly, 41, Boston.** First-time crypto buyer, $200/month recurring buy of BTC and ETH. Trusts Coinbase as the most regulated US option.

**Yuki Sato, 29, Tokyo.** Tech worker exploring DeFi via Coinbase Wallet (separate from Coinbase exchange). Cares about gas fees and L2 support.

**Aisha Patel, 53, NYC.** RIA managing client crypto exposure via Coinbase Prime (institutional). Compliance reporting is the entire reason for choosing Coinbase.

## Colors

### Primary
- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders
- **Pure White** (`#ffffff`): Primary light surface
- **Near Black** (`#0a0b0d`): Text, dark section backgrounds
- **Cool Gray Surface** (`#eef0f3`): Secondary button background

### Interactive
- **Hover Blue** (`#578bfa`): Button hover background
- **Link Blue** (`#0667d0`): Secondary link color
- **Muted Blue** (`#5b616e`): Border color at 20% opacity

### Surface
- **Dark Card** (`#282b31`): Dark button/card backgrounds
- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface

## Typography

### Font Families
- **Display**: `CoinbaseDisplay` — hero headlines
- **UI / Sans**: `CoinbaseSans` — buttons, headings, nav
- **Body**: `CoinbaseText` — reading text
- **Icons**: `CoinbaseIcons` — icon font

### Hierarchy

| Role | Font | Size | Weight | Line Height | Notes |
|------|------|------|--------|-------------|-------|
| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |

## Layout

### Spacing System
- Base: 8px
- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px

### Border Radius Scale
- Small (4px–8px): Article links, small cards
- Standard (12px–16px): Cards, menus
- Large (24px–32px): Feature containers
- XL (40px): Large buttons/containers
- Pill (56px): Primary CTAs
- Full (100000px): Maximum pill

### Responsive Behavior

| Breakpoint | px | Notes |
|---|---|---|
| xs | 400 | Smallest phone |
| sm | 576 | Phone landscape |
| md | 640 | Large phone / small tablet |
| lg | 768 | Tablet |
| xl | 896 | Tablet landscape |
| xxl | 1280 | Desktop |
| 3xl | 1440 | Wide desktop |
| 4xl | 1600 | Max content width |

Measured live viewport 1440px. `Table` is desktop-only and swaps to `ListCell` / Lists View below tablet; `Tray` (bottom sheet) replaces `Modal` on small screens.

## Elevation & Depth

Minimal shadow system — depth from color contrast between dark/light sections.

### Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

- `shadow.soft`: `minimal — depth from dark/light section contrast, not box-shadow`

## Motion & Easing

**No motion duration or easing token is promoted.** The capture bundle for this
reference records no transition or animation property, and no official source consulted
publishes a motion scale. The behaviour described below was observed; treat any exact
duration or curve as a local extension until a component-level official source verifies it.

Easings: standard cubic-bezier; no bounce. **Live price updates** flash green/red cell background briefly on tick. `prefers-reduced-motion: reduce` disables price flash.

---

## Components

### Buttons

**Primary Pill (56px radius)**
- Background: `#eef0f3` or `#282b31`
- Radius: 56px
- Border: `1px solid` matching background
- Hover: `#578bfa` (light blue)
- Focus: `2px solid black` outline

**Full Pill (100000px radius)**
- Used for maximum pill shape

**Blue Bordered**
- Border: `1px solid #0052ff`
- Background: transparent

### Cards & Containers
- Radius: 8px–40px range
- Borders: `1px solid rgba(91,97,110,0.2)`

Coinbase open-sourced its design system — **Coinbase Design System (CDS)**, internally codenamed Cedar — at `cds.coinbase.com` and `github.com/coinbase/cds`. It is a cross-platform React / React Native library of 100+ components. The patterns below combine CDS-documented semantics with values measured live from `coinbase.com` (playwright `getComputedStyle`, 2026-06). Color roles map to CDS semantic tokens: `fgPrimary`/`bgPrimary` = Blue70 (`#0052ff`), `fgMuted`/`line` = Gray60 (the `#5b616e` muted role at 20% opacity), `fgInverse`/`bg` = Gray0/white, foreground text = `#0a0b0d`.

### Actions

**button-primary** — CDS `Button` `variant="primary"`. High-emphasis, limit one per screen. Coinbase Blue (`#0052ff`) fill, white label, `16px·600` CoinbaseSans, `+0.16px` tracking. Pill geometry: measured `100000px` radius on full-pill CTAs, `16px` on compact nav chips. Hover lightens to `#578bfa`; focus `2px solid black` outline. Sizes: Compact / Default / Block (fills width). Slots: `startIcon`, `endIcon`. Loading state hides the label and shows an indeterminate ProgressCircle.

**button-secondary** — `variant="secondary"`, medium emphasis for equal-weight actions. Cool-gray (`#eef0f3`) fill, `#0a0b0d` label, `1px solid` matching border.

**button-tertiary / inverse / negative** — Tertiary: low emphasis, muted background, transparent-until-interaction. Inverse: high contrast for dark sections — `#282b31` fill, white label. Negative: destructive-only, used sparingly.

**button-transparent** — modifier on any variant; the container surface only becomes visible on hover/press.

**button-blue-bordered** — transparent fill, `1px solid #0052ff` border, `#0052ff` label. Secondary CTA pairing.

**icon-button** — icon-only `IconButton`. Measured `56px` round hit-target on the homepage utility row, transparent fill.

### Navigation

**top-nav** — sticky `header` containing brand wordmark, category chips, search, and Sign in / Sign up CTAs. Nav category chip measured `16px` radius, `4px 16px` padding, `14px` CoinbaseSans; link text in Link Blue (`#0667d0`).

**tabs** — CDS `Tabs` (the current component; `TabNavigation` is deprecated). Primary and secondary variants, active tab tracked by `value`, underline `TabIndicator`, full W3C tab keyboard pattern with arrow-key wrap-around and overflow arrows.

**segmented-tabs / SegmentedControl** — pill track, `#eef0f3` track surface with `#0052ff` active segment. Used for time-range and view switches.

**stepper / pagination** — `Stepper` for multi-step flows (mirrors the Submitted → Confirming → Confirmed transaction pattern), `Pagination` for paged tables.

### Forms

**text-input** — CDS `TextInput`. Bordered by default (`1px solid` at the `#5b616e`-derived line color, 20% opacity); measured `56px` height, `16px` padding, CoinbaseSans `16px`. Label `outside` (above) or `inside` (floats when unfocused). `variant="negative"` auto-sets `aria-invalid="true"` and expects `"Error: …"` helper text; `variant="positive"` for validated values. Read-only inputs take a secondary background and remain focusable; disabled inputs are visually distinct.

**search-input** — CDS `SearchInput`, borderless inline with a leading search glyph, `#0a0b0d` text.

**switch** — CDS `Switch` on/off toggle. `controlColor` resolves to `#0052ff` when checked; optional thumb elevation/shadow.

**checkbox / radio** — `Checkbox` and `Radio` with `Cell` and `Group` wrappers; selected state fills Coinbase Blue (`#0052ff`).

### Data display

**card** — CDS `ContentCard` family (`Header` / `Body` / `Footer`), plus `DataCard`, `MediaCard`, `NudgeCard`, `UpsellCard`. Radius `8px–40px`, `1px solid rgba(91,97,110,0.2)` border, depth from section contrast rather than box-shadow.

**data-table** — CDS `Table`, explicitly desktop-only (mobile falls back to Lists View). Variants: default / graph (grid lines) / ruled (horizontal lines). Requires a header row; supports sortable headers, row/column spans, sticky header, and `TableCellFallback` skeleton rows.

**list-cell** — `ListCell` / `ContentCell` with leading `CellMedia` (asset logo) + title/subtitle; the mobile substitute for tables and the basis of asset rows.

**sparkline / charts** — `Sparkline`, `LineChart`, `AreaChart`, `BarChart`, `PercentageBarChart` with `XAxis`/`YAxis`/`Scrubber`. Series accent Coinbase Blue (`#0052ff`); live price ticks flash green/red on the cell (disabled under `prefers-reduced-motion`).

### Overlays

**modal** — CDS `Modal` with `ModalHeader` / `ModalBody` / `ModalFooter`. Scrim overlay + `FocusTrap`; `visible` + `onRequestClose` control; `restoreFocusOnUnmount={false}` for chained modals. Siblings: `FullscreenModal`, `Tray` (bottom sheet), `Alert`, `FullscreenAlert`.

**toast** — CDS `Toast`, bottom-anchored (`bottomOffset` clears bottom nav). Auto-dismiss = 5s base + content/action adjustments, plus a default close button; variants `bgPositive` / `bgNegative` / `bgWarning` surge the background; `role="alert"`, persists on hover.

**tooltip / popover** — `Tooltip`, `PopoverPanel`, and `Coachmark` for contextual hints and first-run tours.

### Feedback & status

**banner** — CDS `Banner` in `global` / `inline` / `contextual` styles, variants informational / warning / error / promotional. Slots: `startIcon`, `title`, `children`, `primaryAction`, `secondaryAction`, optional `showDismiss`. Global banners avoid custom radius to stay flush with the status bar.

**progress** — `ProgressCircle` (determinate 0–100% with % overlay, or indeterminate `fgMuted` arc) with stroke weights thin `2px` / normal `4px` / semiheavy `8px` / heavy `12px`; plus `ProgressBar` (fixed and floating label variants) and `Spinner`.

### States

| State | Treatment |
|---|---|
| **Empty (no portfolio)** | "Make your first purchase" CTA + recurring-buy promotion |
| **Empty (no transactions)** | "Your transaction history will appear here." Plain, no upsell |
| **Loading (price feed)** | Per-cell shimmer; chart shows last cached + stale-indicator |
| **Loading (KYC verification)** | Persistent badge, allows navigation while pending |
| **Error (verification)** | Specific reason + remediation path, never blocking-without-recourse |
| **Error (transaction)** | Receipt-style failure + retry + customer support link |
| **Success (purchase)** | Full receipt: amount, fee, USD value, network confirmation tracker |
| **Success (deposit)** | Confirmation + when funds available, network reliance disclosed |
| **Skeleton (asset list)** | Light gray rows at exact dimensions |
| **Disabled (insufficient funds)** | 0.5 opacity + "Add funds" inline link |
| **Loading (long action: send/withdraw)** | Multi-step progress (Submitted → Confirming → Confirmed) with explicit timing |

## Do's and Don'ts

### Do
- Use Coinbase Blue (#0052ff) for primary interactive elements
- Apply 56px radius for all CTA buttons
- Use CoinbaseDisplay for hero headings only
- Alternate dark (#0a0b0d) and white sections

### Don't
- Don't use the blue decoratively — it's functional only
- Don't use sharp corners on CTAs — 56px minimum

## Voice & Tone

Coinbase's voice is **compliance-aware-but-friendly** — a fintech that's been through SEC scrutiny and writes microcopy with both legal precision and consumer warmth. Marketing copy avoids hyped crypto-bro language ("moon", "lambo") and stays plainspoken: *"Buy and Sell Bitcoin, Ethereum, and more with trust"* (homepage 2026-05). Product UI emphasizes regulatory clarity (KYC required, rates explicit, fees disclosed) over speculative excitement.

| Context | Tone |
|---|---|
| CTA | Verb-first. "Sign up", "Buy", "Sell". Never "Trade now!!" |
| Marketing | Trust-emphasized. Plain language about regulation/security |
| Error (verification) | Specific. "Verification incomplete. Upload a government-issued ID to continue." |
| Success (transaction) | Receipt-detail. Asset, amount, fee, USD equivalent, network confirmation status |
| Risk warnings | Required and prominent — never minimized in fine print |

**Voice samples**
- Tagline: *"Buy and Sell Bitcoin, Ethereum, and more with trust"* <!-- verified: coinbase.com homepage 2026-05 -->

**Forbidden phrases.** "To the moon", "diamond hands". Hyperbolic ROI claims. Hidden fees. "Risk-free" framing on volatile assets.

## Agent Prompt Guide

### Quick Color Reference
- Brand: Coinbase Blue (`#0052ff`)
- Background: White (`#ffffff`)
- Dark surface: `#0a0b0d`
- Secondary surface: `#eef0f3`
- Hover: `#578bfa`
- Text: `#0a0b0d`

### Example Component Prompts
- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."

## Governance

### Known Gaps

- **Contrast, `button-transparent`.** Text `#0a0b0d` on `#00000000` measures 1.07:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
- **Contrast, `button-blue-bordered`.** Text `#0052ff` on `#00000000` measures 3.65:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
- **Contrast, `search-input`.** Text `#0a0b0d` on `#00000000` measures 1.07:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.