What is Coinbase's primary brand color?

Coinbase's brand color is Coinbase Blue — #0052ff, a saturated cobalt that carries every primary CTA pill, the wordmark, and inline brand links. The press state darkens to #003ecc and the disabled state fades to #a8b8cc. There is no secondary brand color in the system — trading green (#05b169) and red (#cf202f) are reserved as text-only semantic signals on asset rows, never used as button backgrounds. Most pages are 90% white plus near-black ink with one or two blue moments per band.

What typography does Coinbase use, and what should I use if the typefaces aren't available?

The system runs CoinbaseDisplay for hero headlines, CoinbaseSans for body and navigation, CoinbaseIcons for icon glyphs, and CoinbaseMono for tabular numbers. All four are licensed Coinbase typefaces. The documented substitutes: CoinbaseDisplay maps to Inter at weight 400 with letter-spacing -1.5%, CoinbaseSans to Inter at 400/600, and CoinbaseMono to JetBrains Mono or Geist Mono at weight 500. The display/body split is strict — CoinbaseDisplay carries hero headlines only; CoinbaseSans carries everything else.

Why does Coinbase keep display headlines at weight 400?

It signals an institutional brand voice rather than a trading-platform one. The homepage hero h1 at 80px / 400 with -2px letter-spacing reads as editorial calm — closer to Bloomberg or the Financial Times than to a retail trading dashboard. Bolding the display copy would shift the entire brand voice toward fintech urgency, which the rest of the system (single accent color, generous 96px section spacing, no drop-shadow tiers) deliberately avoids. The only typographically loud moment in the spec is numeric data rendered in CoinbaseMono.

What's the dark editorial hero pattern?

The hero-band-dark component is the system's most distinctive signature. Background sits at #0a0b0d (deep near-black, same hex as the ink token), with white text and 96px vertical padding. Inside the band, one to three product-ui-card-dark mockups float on a slightly elevated #16181c surface, often stacked at slight rotation to mimic a layered dashboard. The pattern collapses to a single card on mobile. Pair it with a 80px / 400 CoinbaseDisplay headline and two pill CTAs to reproduce the homepage hero faithfully.

Can I use this DESIGN.md to build my own React fintech site?

Yes — the file is structured to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Coinbase's restraint (single blue, pill geometry, modest display weight, CoinbaseMono on numbers) rather than a generic shadcn theme. Every color, type style, radius, spacing value, and component definition is a quoted token reference you can paste directly into a Tailwind config, CSS variable sheet, or shadcn/ui registry. The pill radius (100px) and full-circle asset icons are the two geometry rules to keep.

What's missing from this DESIGN.md spec?

Several things, documented in the Known Gaps section. The licensed typefaces (CoinbaseDisplay, CoinbaseSans, CoinbaseMono) need Inter and JetBrains Mono substitutes for non-Coinbase projects. In-product trading surfaces — order book, charts, order forms — live behind login walls and aren't represented; the spec covers marketing pages only. Animation timings are out of scope. Form validation states beyond focus weren't visible on captured surfaces. The accent yellow (#f4b000) appears only inside Bitcoin glyph illustrations and is documented as illustrative-only, never an action color.

Coinbase Design System

Coinbase's design system as a DESIGN.md file.

About Coinbase DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source coinbase.com

Fintech & Crypto
Banking & Payments

Coinbase's design system is built around one idea: institutional calm. One brand color (Coinbase Blue, #0052ff). One licensed display typeface (CoinbaseDisplay at weight 400, never bold). One pill radius (100px) on every interactive surface. The page rhythm rotates white canvas, soft-gray bands, and full-bleed near-black editorial heroes carrying layered product-UI mockup cards.

This page packages the spec into a single DESIGN.md file. Inside: 21 color tokens, 17 type styles, 8 corner radii, 9 spacing values, and 28 components — the signature blue pill CTA, the layered dark-hero mockup stack, asset rows with green/red price cells, pricing tiers, search pills, and the entire marketing surface.

Download the file and feed it to Claude, Cursor, or GitHub Copilot. The agent will reproduce the brand's restraint — single accent, modest type weights, pill geometry, CoinbaseMono on every number — instead of a generic fintech theme. Or pull tokens directly into a Tailwind config or CSS variable sheet.

What makes it distinct

Single accent voltageCoinbase Blue #0052ff carries every primary pill CTA, the wordmark, and inline brand links across all 28 components
Display weight stays at 400CoinbaseDisplay headlines at 80px sit in regular weight, signaling institutional calm over fintech urgency
Three-mode page rhythmbright white #ffffff bands rotate with #f7f7f7 gray elevation and full-bleed #0a0b0d dark heroes carrying layered product-UI cards
Pill geometry everywhereevery CTA is 100px rounded, every asset glyph is full-circle, every card sits at 24px; sharp corners are absent
CoinbaseMono on every numberasset prices and percent changes render in monospace via the 18px / 500 number-display token, never proportional

Live at coinbase.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

coinbase.com

Explore Coinbase

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Coinbase design system FAQ

Common questions about Coinbase's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Coinbase in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→