Coinbase DESIGN.md

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

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

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.

---

Verified: 2026-06-08 (component harvest — TIER 1) Tier 1 sources: https://coinbase.com (live DOM via playwright across /, /explore, /about — round 56px icon buttons; nav chip 16px radius 4px·16px; input 56px·16px pad; pill 100000px; link #0667d0; surface #eef0f3). Coinbase Design System (CDS / "Cedar") — https://cds.coinbase.com + https://github.com/coinbase/cds: component inventory (100+ across Layout/Inputs/Cards/Data Display/Feedback/Overlay/Navigation/Charts) and per-component specs (Button variants/sizes/states, TextInput, Banner, Modal, Toast, ProgressCircle, Table, Switch). Tier 2 sources: styles.refero.design — no record. getdesign.md/coinbase — cross-checked. Tier 1 (Philosophy): coinbase.com homepage; Brian Armstrong public talks; SEC public filings. Style ref: stripe. Conflicts unresolved: none.

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

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.

Voice samples

• Tagline: "Buy and Sell Bitcoin, Ethereum, and more with trust"

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.