Coinbase Design System

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.

...

Key Characteristics:

• Single accent color: {colors.primary} (#0052ff Coinbase Blue) carries every primary CTA, wordmark, and inline brand link. Used scarcely.
• ...

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.
• ...

Surface

• Canvas ({colors.canvas} — #ffffff): The default page floor.
• Surface Soft ({colors.surface-soft} — #f7f7f7): Subtle alternating band surface.
• ...

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.
• ...

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.

Font Family

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

Hierarchy

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.
• ...

Note on Font Substitutes

• CoinbaseDisplay → Inter at weight 400, letter-spacing -1.5%.
• CoinbaseSans → Inter at weight 400/600.
• ...

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.
• ...

Grid & Container

• Max content width: ~1200px centered. Hero photography full-bleed.
• Editorial body: Single 12-column grid.
• ...

Whitespace Philosophy

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.

Border Radius Scale

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

• 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.

Breakpoints

Touch Targets

• Primary CTA pill at 44px height — at WCAG AAA.
• Larger hero pill ({component.button-pill-cta}) at 56px — well above 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.
• ...

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}.

• ...

The parsed design tokens extracted from the core stylesheet of this design system: