# 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

#### Scale

$199/mo

- 100,000 requests / mo
- Priority support
- Advanced API access
- Higher rate limits

#### Enterprise

Custom

- Unlimited requests
- Dedicated support
- Custom integrations

08 — Forms

## Inputs & search

Email
Phone
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

Name | Width | Key Changes
--- | --- | ---
Mobile | < 640px | Hero h1 80→40px; feature cards 1-up; asset rows stack; nav hamburger.
Tablet | 640–1024px | Hero h1 64px; feature cards 2-up.
Desktop | 1024–1280px | Full hero h1 80px; 3-up feature cards.
Wide | > 1280px | Content caps at 1200px.

375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

#### Touch Targets

- Primary pill at 44px height — at WCAG AAA.
- Hero pill at 56px — well above AAA.
- Asset icon circles 32px — padded row creates effective 48px tap zone.

#### Collapsing Strategy

- Top nav switches to hamburger below 768px.
- Layered product-UI mockup cards collapse from 2-3 stacked to single card.
- Pricing tier rows: 3-up → 2-up → 1-up.
- Asset rows on mobile drop the change column.