---
title: "Coinbase design system"
variant: extended
source: https://www.coinbase.com/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/coinbase-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Coinbase · Design System

> Clear, confident finance with a vivid blue signal.

**Theme:** light · **Industry:** crypto · **Source:** https://www.coinbase.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Coinbase pairs a bright, open canvas with oversized typography, rounded product imagery, and confident blue calls to action. Dark trading interfaces and pale section bands provide contrast while keeping the overall page calm and approachable.

## North star

Keep the interface calm and legible on white, reserving Coinbase blue for decisive actions and letting product imagery provide the visual drama.

## Overview

The page builds trust through a predominantly white canvas, near-black text, and restrained use of Coinbase blue for key conversion actions. Pale gray section bands break up the long homepage without competing with its content; a nearly black campaign panel introduces a focused dark interlude. Typography is clean and sans-serif, with large, regular-weight display headings and compact supporting text. The layout alternates spacious feature splits with product-led cards, keeping text and interface imagery easy to scan. Rounded media frames and pill-shaped buttons soften the financial subject matter. Product imagery carries richer blues, greens, and chart details, but these colors belong to the screens and illustrations rather than the core interface palette. Hairline borders organize navigation, cards, and controls; the overall treatment is flat, with separation coming from tonal contrast and generous whitespace rather than shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Slate Copy | `#5b616e` | `--color-slate-copy` | neutral | Muted body copy, footer links, and secondary text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, navigation background, and text on dark or blue buttons. |
| Cloud Gray | `#eef0f3` | `--color-cloud-gray` | surface | Pale section bands, navigation controls, and large rounded product-card backgrounds. |
| Carbon Ink | `#0a0b0d` | `--color-carbon-ink` | brand | Headings, primary copy, inverse surfaces, and dark feature buttons. |
| Quiet Rule | `#dedfe2` | `--color-quiet-rule` | neutral | Fine borders and hairlines around navigation and cards. |
| Coinbase Blue | `#0052ff` | `--color-coinbase-blue` | brand | Primary sign-up actions and small, high-priority interface accents. |
| Night Panel | `#141519` | `--color-night-panel` | surface | Dark campaign section background, distinct from the main white page. |
| Frost Card | `#f7f8f9` | `--color-frost-card` | surface | Subtle light card backgrounds for supporting content. |
| Mist Stroke | `#93979f` | `--color-mist-stroke` | neutral | Occasional subtle outlines; secondary measured border tone rather than a defining brand color. |
| Silver Line | `#d8d9dd` | `--color-silver-line` | neutral | Secondary card border tone, used for quiet separation. |
| Market Green | `#27ad75` | `--color-market-green` | semantic | Positive market movement text; retain for trading status rather than broad decoration. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#eef0f3` (Cloud Gray) · `--color-surface-2` → `#0a0b0d` (Carbon Ink) · `--color-surface-3` → `#141519` (Night Panel) · `--color-surface-4` → `#f7f8f9` (Frost Card) · `--color-text` → `#0a0b0d` (Carbon Ink) · `--color-text-muted` → `#5b616e` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#dedfe2` (Quiet Rule) · `--color-accent` → `#0052ff` (Coinbase Blue) · `--color-accent-2` → `#27ad75` (Market Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0b0d` | `#ffffff` | 19.69:1 | AAA |
| `#0a0b0d` | `#eef0f3` | 17.25:1 | AAA |
| `#0a0b0d` | `#141519` | 1.08:1 | fail |
| `#5b616e` | `#ffffff` | 6.21:1 | AA |
| `#5b616e` | `#eef0f3` | 5.44:1 | AA |
| `#5b616e` | `#0a0b0d` | 3.17:1 | AA-large |
| `#5b616e` | `#141519` | 2.94:1 | fail |
| `#ffffff` | `#eef0f3` | 1.14:1 | fail |
| `#ffffff` | `#0a0b0d` | 19.69:1 | AAA |
| `#ffffff` | `#141519` | 18.24:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| CoinbaseText | `--font-body` | webfont | 400, 700 | Default body copy, fine print, and compact links. | Inter |
| CoinbaseSans | `--font-coinbasesans` | webfont | 400, 600 | Navigation, prominent headings, and button labels. | Inter |
| CoinbaseDisplay | `--font-display` | webfont | 400 | Large display headings and feature-section titles. | DM Sans |

- **CoinbaseText:** Regular weight dominates; measured body and link styles are compact and comfortably line-spaced.
- **CoinbaseSans:** Use the measured regular and semibold weights; navigation and controls favor clear, unembellished casing.
- **CoinbaseDisplay:** Regular-weight display lettering, with large scale and tight line height; no tracked-out or uppercase styling.

### Type scale — Augmented Fourth (ratio ≈ 1.438, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | 0 | — | CoinbaseDisplay | Oversized hero-scale promotional or campaign heading. |
| h1 | 64px | 400 | 1 | 0 | — | CoinbaseIcons | Primary page headline; measured family is an icon font, so verify actual rendered text. |
| h2 | 52px | 400 | 1 | 0 | — | CoinbaseDisplay | Major feature and promotional section headings. |
| h3 | 44px | 400 | 1.09 | 0 | — | CoinbaseDisplay | Feature titles and supporting section headings. |
| h4 | 36px | 400 | 1.11 | 0 | — | CoinbaseSans | Smaller feature titles and card headings. |
| body | 13px | 400 | 1.54 | 0 | — | CoinbaseText | Compact descriptions, disclosures, and explanatory copy. |
| nav | 16px | 600 | 1.25 | 0 | — | CoinbaseSans | Top-level navigation labels and prominent controls. |
| link | 13px | 400 | 1.54 | 0 | — | CoinbaseText | Inline learn-more links and footer navigation. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 48, 80 px.
- Section rhythm 48px · element gap 16px · card padding — · max content width 1376px.

The homepage uses a wide, centered content area with a measured maximum width of 1376px and comfortable density. The first viewport pairs a large rounded product visual with a left-aligned headline and sign-up form. Farther down, alternating feature splits swap image and copy placement, while pale bands and a dark campaign panel reset the rhythm. Sections have generous vertical separation; text stays aligned to the start rather than centered. The footer becomes a dense multi-column directory, contrasting with the open promotional sections.

## Shape & elevation

- Radius: button `9999px` · card `56px` · nav `9999px` · link `40px` · xs `8px` · sm `12px` · md `24px` · lg `40px` · xl `56px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.33, 0, 0, 1)` on interactive elements.

The interface is mostly flat: measured shadow styles are absent. Use fine neutral borders and tonal differences between white, pale-gray, and dark section surfaces to establish hierarchy. Rounded media and card frames provide the strongest sense of containment; avoid adding strong drop shadows or layered effects.

## Imagery

Product interface screenshots and app mockups are the dominant imagery, framed in large rounded rectangles. Trading panels introduce saturated blue chart details against dark screens; wallet and membership visuals add device imagery. Supporting illustrations use brighter colors but sit inside restrained card layouts. Treat these vivid hues as content within product artwork, not as a replacement for the white, ink, and blue interface palette.

## Components

### Primary sign-up button

Blue pill-shaped action with white semibold CoinbaseSans text; measured variants use generous horizontal padding.

### Dark feature CTA

Near-black pill button with white semibold text, used for feature actions such as getting started or learning more.

### Email sign-up field

Plain white, lightly bordered input with dark CoinbaseSans text, aligned beside the blue sign-up action.

### Rounded product card

Large image or interface card using pale gray or near-black surfaces and strongly rounded corners.

### Top navigation

White horizontal bar with a fine divider, bold dark navigation labels, compact utility controls, and a blue sign-up action.

### Feature split

Left-aligned copy paired with a rounded product visual; alternate sides between successive feature sections.

### Measured component styles

- **Primary button** (“Sign up”): background #0052ff · text #ffffff · radius 56px · padding 16px 32px · 600 16px CoinbaseSans
- **Secondary button** (“Get started”): background #0a0b0d · text #ffffff · radius 56px · padding 16px 32px · 600 16px CoinbaseSans
- **Link** (“Bitcoin $ 9 8 7 6 5 4 3 2 1 0 . , 9 8 7 ”): transparent background · text #578bfa · radius 0px · padding 0px · 400 16px CoinbaseSans
- **Input**: transparent background · text #0a0b0d · radius 0px · padding 16px · 400 16px CoinbaseSans
- **Card** (“󰘼”): background #eef0f3 · text #000000 · radius 56px · padding 0px · 400 16px CoinbaseSans
- **Navigation item** (“Cryptocurrencies”): transparent background · text #0a0b0d · radius 0px · padding 0px · 600 16px CoinbaseSans

## Do

- Use white as the default page canvas.
- Reserve Coinbase Blue (#0052ff) for high-priority actions.
- Set headings in clean, regular-weight sans-serif type.
- Use Carbon Ink (#0a0b0d) for strong text and dark CTAs.
- Alternate feature copy and product imagery to sustain page rhythm.
- Use pale gray or dark section bands to separate content groups.
- Keep product screens inside rounded media frames.

## Don't

- Do not turn illustration colors into global interface accents.
- Do not add pronounced shadows to otherwise flat components.
- Do not center every heading or feature block.
- Do not make every section dark or heavily saturated.
- Do not use blue buttons for low-priority links.
- Do not crowd the spacious feature sections with unnecessary UI.

## Agent prompt

Build a new Coinbase-style page with Gallery White (#ffffff) as the main canvas, Carbon Ink (#0a0b0d) for headlines and body emphasis, and Coinbase Blue (#0052ff) reserved for the primary action. Use a clean sans-serif hierarchy: large regular display headings, compact readable supporting copy, and semibold navigation or button labels. Structure content as spacious, left-aligned feature splits with rounded product screenshots, alternating image placement. Use Cloud Gray (#eef0f3) and Frost Card (#f7f8f9) for occasional section and card contrast, with Night Panel (#141519) only for a focused dark feature. Keep controls pill-shaped, borders quiet, and shadows absent or restrained. Treat saturated colors inside mockups as artwork, not global brand colors. Preserve a calm, legible, product-led tone.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-split | White feature section with a left-aligned heading and paired product imagery. | Learn more link | Large headline, Rounded interface imagery, Open white canvas |
| 2 | feature-split | White split layout pairing advanced trading copy and product imagery. | Feature discovery link | Left-aligned copy, Trading interface mockup, Spacious section |
| 3 | feature-split | White feature split with membership product visual and supporting text. | Free-trial action | Membership label, Rounded app imagery, Feature heading |
| 4 | feature-split | White split section with wallet copy and a grouped device mockup. | Learn more link | Wallet label, Rounded device imagery, Dark app screens |
| 5 | feature-split | White split section pairing institutional copy with phone-interface imagery. | Learn more link | Prime label, Product mockup, Large feature title |
| 6 | footer | Pale-gray footer organized into five link columns, followed by a compact legal and locale bar. | Browse categorized links, Choose locale | Coinbase mark, Multi-column link lists, Fine print |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/coinbase-com