Coinbase — design system & UI screens

Fintech · 1 screen · 9 sections · coinbase.com

Split hero pairs a tilted blue portfolio-app screenshot (live $33,683.80 balance with line chart and asset rows) on the left against an oversized "The future of finance is here." headline and an inline email-capture signup field on the right. The page's signature device is the recurring 3D-tilted product mockup: dark glassy cards showing a live crypto asset list (Bitcoin/Ethereum/Tether with prices), stacked phone screens, and trading terminals, alternating left/right against a clean white canvas. Closes with a giant "Take control of your money." email-capture CTA over a cluster of floating coin logos, then a dense multi-column blue-on-white footer.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/coinbase.

Decoded design system

Coinbase's decoded design system: background #FFFFFF, text #000000, accent #0052FF, link #0052FF, primary #0667D0; type scale h1 80px / h2 16px / body 16px; 8px spacing base; 16px base radius. The single interactive/action color is #0052FF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#EFEFEF`
border	`#D8D8D8`
text	`#000000`
text_muted	`#606060`
primary	`#0667D0`
accent	`#0052FF`
link	`#0052FF`
secondary	`#578BFA`
button_bg	`#0052FF`
button_text	`#FFFFFF`

Using these colors

Action color #0052FF — the single interactive color; only on things you click or must notice, never large fills.
accent, link, button_bg are all #0052FF — one role, not several (the action color).
accent #0052FF — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #0667D0 — a brand color — but the call-to-action uses #0052FF, not this.
secondary #578BFA — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Coinbase Display
Body: Coinbase Sans
h1: 80px
h2: 16px
body: 16px

Spacing

base unit: 8px
scale: 4px, 6px, 8px, 10px, 12px, 16px, 24px, 30px, 32px, 48px

Radii

base: 16px
button: 56px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 300ms (dominant) with ease-in-out.

durations: 300ms · 200ms
easings: ease-in-out
animated properties: width, transform, background-color, opacity

Native design tokens

Token	Value
`--full-view-height`	`900px`
`--full-view-width`	`1440px`

Button states (measured)

primary hover: background rgba(0, 72, 224, 0.88)
primary focus: outline 2px solid rgb(0, 82, 255)

Layout (measured)

container max-width: 1600px
common grid: 2 columns

Motion choreography (measured)

Load order: a.GlobalNavLink__StyledLin

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Responsive (measured)

breakpoints: 400px · 426px · 550px · 600px · 768px · 896px
mobile (390px): hero 52px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Coinbase fintech landing with split hero, dark product cards, and trading-app showcases