Design System
Analysis of Coinbase

A crisp, near-monochrome fintech system on white with near-black ink, anchored by the unmistakable Coinbase electric blue on every CTA and link — flat, fully-rounded pill buttons and market green/coral reserved for signal.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Hierarchy is built by size, not weight — display headlines run enormous at a regular weight with tight negative tracking. Coinbase ships in proprietary CoinbaseSans; rendered here in Inter (nearest Google substitute). 16px/400 is the dominant body tier.

03 — Components

Button Variants

button-primary
Brand blue #0052FF, white text, full pill. The single highest-emphasis action.
button-dark
Near-black #0A0B0D fill for inverted bands and app-store CTAs.
button-secondary
Soft grey #EEF0F3 pill — lower-emphasis, used beside the primary CTA.
button-pill / tab
Transparent nav pill that fills grey on the active tab.
04 — Components

Cards & Asset Tiles

Asset tiles sit flat on white with a 1px hairline and 16px radius, lifting to a soft shadow only on hover. Price change uses market green (up) and coral (down).

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base unit on an 8-step rhythm. 16px is the default component padding; 24–32px are the common section gaps.

07 — Foundations

Border Radius

Generous and consistent: a 4 → 40px ladder topped by a true pill. Coinbase uses the full pill constantly — every button, tab and badge.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default. Almost the entire site is flat, bordered surfaces with no shadow.
Level 1 — 0 8px 12px rgba(0,0,0,0.12). The rare lifted card, shown on hover of asset tiles.
Level 2 — 0 0 18px rgba(0,0,0,0.2). A diffuse glow reserved for overlays, popovers and modals.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; hero display drops to ~48px; nav collapses to a menu; pills keep full radius.
Tablet768–1023pxFour-up product/feature grids fold to two columns; container gutters tighten.
Laptop1024–1279pxFull multi-column marketing grids return; max-width container centered.
Desktop≥ 1280px1200px max content width with 40px gutters; oversized 80px display headlines.

Layout is a centered max-width container with predictable column collapse. Pill buttons and CTAs hold their full-pill shape at every breakpoint.

Plan Tiers

Illustrative tiers in the Coinbase visual language — flat bordered cards, the featured plan inverted to near-black, brand-blue bullets and dark block CTAs.

Basic
$0/ month
Buy, sell and hold crypto with the essentials.
  • Spot trading
  • Standard fees
  • Mobile & web access
  • Email support
One● Most popular
$29.99/ month
Zero trading fees and boosted rewards.
  • No trading fees
  • Higher staking rewards
  • Priority support
  • Account protection
Prime
Custom
Institutional-grade custody and execution.
  • Cold storage custody
  • Advanced trading APIs
  • Dedicated coverage
  • OTC desk access

Asset Table

A dense data surface: grey uppercase headers, hairline row dividers, and pill status chips that borrow the market green/coral signal colours.

AssetPrice24hStatusMarket cap
Bitcoin · BTC$61,240.18+2.4%Up$1.21T
Ethereum · ETH$3,388.02+1.1%Up$407.6B
Solana · SOL$146.77−3.2%Down$68.2B
USD Coin · USDC$1.000.0%Flat$32.9B
Chainlink · LINK$14.05+0.8%Up$8.7B
1–5 of 412
123

Auth Forms

Sign-in and create-account patterns: bordered card lifted on a soft shadow, uppercase micro-labels, brand-blue pill CTA, and a full-pill SSO ghost button below a divider.

Sign in

Welcome back

OR
Create account

Get started

OR