Typography
Base Font · CoinbaseSans / CoinbaseDisplay
Coinbase
The trusted platform to buy, sell, and manage your crypto portfolio securely.
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Mono Font · CoinbaseText / CoinbaseMono
CoinbaseMono
0x742d35Cc6634C0532925a3b844Bc454e4438f44e
Regular · 400
Medium · 500
Buy & Sell Crypto
Display · 64px · Bold · line-height: 73.6px · letter-spacing: 0.14px
Trade with trust
Display SM · 52px · Bold · line-height: 52px
The most trusted crypto platform
Heading XL · 40px · Bold · line-height: 44px
Buy Bitcoin, Ethereum, and more
Heading LG · 32px · Semibold · line-height: 36px
Start your crypto journey today
Heading MD · 24px · Semibold · line-height: 28px
Create a free account and start buying and selling crypto in minutes. Trusted by over 100 million users worldwide.
Body Default · 16px · Regular · line-height: 24px
Last transaction: 0.00234 BTC · 3 minutes ago · Confirmed
Body Small · 14px · Regular · line-height: 16.8px
BTC · ETH · SOL · USDC
Label / Caption · 12px · Semibold · uppercase · letter-spacing: 0.16px
Letter Spacing
Buy Bitcoin
Tight
0.14px · headings, display
Sell Ethereum
Normal
0.144px · body text
BTC · ETH · SOL
Wide
0.16px · uppercase labels
Spacing
Spacing Scale
12 tokens — 4px → 80px
Borders
Border Widths
Coinbase primarily uses hairline (1px) borders, with 12px thick borders for special UI elements like progress indicators.
Shadows / Elevation
Shadow Tokens
5 tokens
Small
×1
White upward 1px — inner top edge highlight for elements on dark backgrounds
Medium
×1
rgba(0,0,0,.2) 18px radial — modals, overlay panels, floating cards
Large
×1
Gray 2px 10px — subtle card lift for interactive elements
X-Large
×1
Light gray diagonal -3px -3px — top-left corner highlight
Shadow 5
×1
Light gray 12px radial glow — ambient elevation for large containers
Z-Index
| Layer | Value | Usage |
|---|
| Base 1 | 1 | Default stacking context |
| Base 2 | 2 | Slightly elevated content |
| Base 3 | 3 | Positioned elements |
| Base 4 | 4 | Interactive elements |
| Base 5 | 5 | Focus rings, indicators |
| Base 6 | 6 | Sticky bars |
| Navigation | 7 | Fixed headers, nav bars |
| Overlay | 100001 | Modals, drawers, critical overlays |
| Toast Layer 1 | 2147483645 | Notifications, alerts |
| Toast Layer 2 | 2147483646 | High-priority toasts |
| Max | 2147483647 | Absolute top — always visible |
Breakpoints
📱
--breakpoint-xs
400px
XS mobile
📲
--breakpoint-bp-8
600px
Mobile / small
💻
--breakpoint-bp-11
768px
Tablet
🖥
--breakpoint-bp-12
896px
Large tablet
🖥️
--breakpoint-bp-14
1280px
Desktop
📺
--breakpoint-bp-15
1439px
Large desktop
🌐
--breakpoint-bp-16
1600px
Ultra-wide
📊
16 total
400→1600
Full breakpoint range
Opacity
No Opacity Tokens Defined
The Coinbase design system does not define explicit opacity tokens. Transparency is expressed inline via rgba() color values in shadow and fill tokens.
rgba in use
rgba(91, 97, 110, 0.2) — Blue 7 background
rgba in use
rgba(0, 0, 0, 0.2) — shadow-md
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Cyan (#27AD75) | Black (#000000) | 7.32:1 | AAA |
| Cyan (#27AD75) | Black 2 (#0A0B0D) | 6.86:1 | AA |
| Cyan (#27AD75) | White (#FFFFFF) | 2.87:1 | Fail |
| Cyan (#27AD75) | Blue 4 (#0052FF) | 2.01:1 | Fail |
| Blue (#5B616E) | White (#FFFFFF) | 6.21:1 | AA |
| Blue (#5B616E) | Black (#000000) | 3.38:1 | AA Large |
| Blue (#5B616E) | Light Gray (#EEF0F3) | 5.44:1 | AA |
| Blue (#5B616E) | Blue 4 (#0052FF) | 1.08:1 | Fail |
| Red (#F0616D) | Black (#000000) | 6.64:1 | AA |
| Red (#F0616D) | Black 2 (#0A0B0D) | 6.22:1 | AA |
| Red (#F0616D) | White (#FFFFFF) | 3.16:1 | AA Large |
| Blue 2 (#578BFA) | Black (#000000) | 6.48:1 | AA |
| Blue 2 (#578BFA) | Black 2 (#0A0B0D) | 6.07:1 | AA |
| Blue 2 (#578BFA) | White (#FFFFFF) | 3.24:1 | AA Large |
| Blue 3 (#0667D0) | White (#FFFFFF) | 5.44:1 | AA |
| Blue 3 (#0667D0) | Light Gray (#EEF0F3) | 4.77:1 | AA |
CSS Variables Reference
White--color-white#FFFFFF
Black--color-black#000000
Black 2--color-black-2#0A0B0D
Blue 4 (Brand)--color-blue-4#0052FF
Light Gray--color-light-gray#EEF0F3
White 2--color-white-2#F7F8F9
Dark Gray 4--color-dark-gray-4#282B31
Blue 6--color-blue-6#3860BE
Blue 7--color-blue-7rgba(91,97,110,.2)
White 3--color-white-3#F9FFFA
White 4--color-white-4#F4F4F4
Cyan (Green)--color-cyan#27AD75
Blue 2--color-blue-2#578BFA
Blue 3--color-blue-3#0667D0
Dark Gray--color-dark-gray#1D1D1D
Dark Gray 2--color-dark-gray-2#555555
Blue 5--color-blue-5#8A919E
Mid Gray--color-mid-gray#808080
Cyan 2 (Border)--color-cyan-2#32AE88
Light Gray 3--color-light-gray-3#D1D1D1
Light Gray 4--color-light-gray-4#BBBBBB
Dark Blue (Fill)--color-dark-blue#2E3644
Sans Font--font-family-baseCoinbaseSans
Display Font--font-family-3CoinbaseDisplay
Text / Mono--font-family-4CoinbaseText
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs12px
XS--font-size-xs12.992px
SM--font-size-sm13.6px
Base--font-size-base14px
LG--font-size-lg14.4px
XL--font-size-xl16px
2XL--font-size-2xl18px
3XL--font-size-3xl20px
4XL--font-size-4xl24px
5XL--font-size-5xl32px
6XL--font-size-6xl40px
52px--font-size-52px52px
64px--font-size-64px64px
Tight--letter-spacing-tight0.14px
Normal--letter-spacing-normal0.144px
Wide--letter-spacing-wide0.16px
Hairline--border-width-hairline1px
Thin--border-width-thin12px
Instant--duration-instant0.1s
Fast--duration-fast0.2s
Normal--duration-normal0.3s
Ease In-Out--easing-ease-in-outease-in-out
Ease In--easing-ease-inease-in
No opacity tokens—N/A
Base 1–7--z-1 → --z-71 → 7
Overlay--z-8100001
Toast 1--z-92147483645
Toast 2--z-102147483646
Max--z-112147483647
XS--breakpoint-xs400px
SM--breakpoint-sm425px
768px--breakpoint-bp-11768px
1280px--breakpoint-bp-141280px
1600px--breakpoint-bp-161600px
Design System Preview · Coinbase (Dark) · Generated 15/04/2026 · 28 color tokens · 13 font-size · 4 font-family · 4 font-weight · 14 line-height · 3 letter-spacing · 12 spacing · 15 radius · 2 border-width · 5 shadow · 3 duration · 2 easing · 11 z-index · 16 breakpoints · 0 opacity