Design System Inspiration of Coinbase

Institutional-grade crypto exchange. Coinbase Blue carries every primary CTA on a 100px pill; CoinbaseDisplay sits at weight 400 — calm, never bombastic.

01 — Color Palette

Coinbase Blue + monochrome

A single brand voltage on white canvas plus a near-black editorial canvas for full-bleed heroes. Trading green/red are semantic-only.

Brand & Accent

primary (Coinbase Blue)
#0052ff
All primary CTAs, brand wordmark, inline brand links.
primary-active
#003ecc
Press state.
primary-disabled
#a8b8cc
Disabled CTA tint.
accent-yellow
#f4b000
Bitcoin glyph fill — illustrative only.

Surface

canvas
#ffffff
Default page floor.
surface-soft
#f7f7f7
Subtle alternating band.
surface-strong
#eef0f3
Secondary buttons, search pills.
surface-dark
#0a0b0d
Full-bleed dark heroes, CTA bands.
surface-dark-elevated
#16181c
Floating product-UI mockup cards.

Hairlines & Text

hairline
#dee1e6
1px divider.
ink
#0a0b0d
Display, primary nav, body emphasis.
body
#5b616e
Default running-text.
muted
#7c828a
Sub-titles, breadcrumbs.
muted-soft
#a8acb3
Disabled link text.

Trading Semantics

semantic-up
#05b169
Price-up green — text color only.
semantic-down
#cf202f
Price-down red — text color only.
02 — Typography

Display 400, body in CoinbaseSans

Display sits at weight 400 — never bold. CoinbaseMono on every numerical value.

display-mega80px / 400 / 1.0 / -2px
The future of finance.
display-xl64px / 400 / 1.0 / -1.6px
Coinbase Wealth
display-lg52px / 400 / 1.0 / -1.3px
Take control of your money
display-md44px / 400 / 1.09 / -1px
Section heading
title-md18px / 600 / 1.33
Component title
body-md16px / 400 / 1.5
Default body text on white canvas.
body-sm14px / 400 / 1.5
Footer body, fine print.
caption-strong12px / 600 / 1.5
Badge label
number-display18px / 500 (CoinbaseMono)
$67,432.18 +2.4%
button16px / 600 / 1.15
Get Started
nav-link14px / 500 / 1.4
Cryptocurrencies · Individuals · Businesses
03 — Buttons

Pill geometry across

100px radius for every button. Primary blue is reserved.

button-primary
Coinbase Blue / 100px pill / 44px height
button-primary-active
Deeper blue press state.
button-primary-disabled
button-pill-cta
Larger 56px hero variant.
button-secondary-light
Soft-gray on white.
button-secondary-dark
Surface-elevated on dark.
button-outline-on-dark
Transparent + 1px white border.
button-tertiary-text
Inline blue text link.
04 — Hero Band (Dark)

Layered product-UI mockups

Full-bleed dark hero with floating UI cards mimicking a layered dashboard.

Explore millions of tokens.

Real-time prices, deep liquidity, and a global asset universe.

BTC / USD +2.4%
$67,432
+$1,621 today
Volume 24h$28.4B
Market cap$1.32T
ETH / USD
$3,512
−1.1%
05 — Feature Cards

3-up benefit grid

CB

Powerful tools

Built for the advanced trader — real-time charts, depth, advanced order types.

$

Zero trading fees

More rewards for active members on the One subscription.

Countless ways to earn

Stake, lend, and earn yield on the Base App.

06 — Asset Rows

Markets table

Hairline-divided rows with circular icon plate, mono prices, and semantic green/red change cells.

BT
Bitcoin
BTC
$67,432.18
+2.4%
ET
Ethereum
ETH
$3,512.04
−1.1%
SO
Solana
SOL
$148.60
+0.8%
XR
XRP
XRP
$0.5832
−0.3%
BN
BNB
BNB
$612.40
+1.6%
07 — Pricing Tiers

Developer Platform pricing

Featured tier inverts to dark — visual inversion signals "highlighted choice" without colored ribbons.

Starter

$0
  • 1,000 requests / mo
  • Standard support
  • Basic API access

Enterprise

Custom
  • Unlimited requests
  • Dedicated support
  • Custom integrations
08 — Forms

Inputs & search

09 — Badges

Small uppercase pills used as section labels.

Institutional Regulated Audited SOC 2
10 — Spacing Scale

4px base, 96px section rhythm.

xxs · 4
xs · 8
sm · 12
base · 16
md · 20
lg · 24
xl · 32
xxl · 48
section · 96
11 — Border Radius

Pill (100px) for interactive, card-radius (24px) for containers.

0 · none
4 · xs
8 · sm
12 · md
16 · lg
24 · xl
100 · pill
full
12 — Elevation & Depth

One shadow tier; depth from band rotation and layered cards.

Flat / Canvas

80% of surfaces.

Hairline border

1px hairline. Feature card outlines on white.

Soft drop

0 4px 12px rgba(0,0,0,0.04). Single shadow tier.

Layered cards

Floating product-UI mockups inside dark heroes.

13 — Responsive Behavior
NameWidthKey Changes
Mobile< 640pxHero h1 80→40px; feature cards 1-up; asset rows stack; nav hamburger.
Tablet640–1024pxHero h1 64px; feature cards 2-up.
Desktop1024–1280pxFull hero h1 80px; 3-up feature cards.
Wide> 1280pxContent caps at 1200px.
375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

Touch Targets

Collapsing Strategy