Finance / iOS / Android / Web

Coinbase

Coinbase keeps money feeling approachable: a white page, one saturated blue for the action and round pills for everything you can tap, with green saved for gains.

Download
  • #0052FF
  • #0A0B0D
  • #5B616E
  • #EEF0F3
  • #098551
  • #0667D0

Color

Every color token in the file, grouped by role.

Brand

  • primary#0052FF
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF
  • canvas subtle#EEF0F3
  • canvas soft#F2F4F6

Text

  • link#0667D0
  • ink#0A0B0D
  • ink muted#5B616E

Lines

  • scrim#32353D54 (33%)

Status

  • positive#098551

More

  • black#000000
  • chip dark#282B31

Typography

Each style is set with the file's own family, size, weight and spacing.

  • CoinbaseDisplayCoinbaseDisplay is private and not available in open fonts. Shown in Geist, the closest open match.
  • CoinbaseSansCoinbaseSans is private and not available in open fonts. Shown in Inter, the closest open match.
  • display40px / 400 / 48px

    Coinbase

  • heading28px / 700 / 32px

    Pack my box with five dozen liquor jugs

  • subheading16px / 600 / 24px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 600 / 24px

    Continue to checkout

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl24px
  • chip40px
  • pill56px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md10px
  • base12px
  • lg16px
  • xl24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • tab
    tab
  • skip link
    skip-link
  • search field
    search-field
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 97 lines
version: alpha
name: Coinbase-design-analysis
description: "A crypto exchange drawn as a bright finance page: white and pale gray surfaces, near-black ink, one saturated blue (#0052ff), Coinbase Display and Sans in regular and semibold, and round 44 high pill buttons and tabs."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0052ff"
  on-primary: "#ffffff"
  link: "#0667d0"
  ink: "#0a0b0d"
  ink-muted: "#5b616e"
  black: "#000000"
  canvas: "#ffffff"
  canvas-subtle: "#eef0f3"
  canvas-soft: "#f2f4f6"
  positive: "#098551"
  chip-dark: "#282b31"
  scrim: "#32353d54"

typography:
  # Font note: "CoinbaseDisplay" is a private font and is not available in open fonts. Closest open alternative: "Geist".
  # Font note: "CoinbaseSans" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  # Font note: "CoinbaseText" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  display:
    fontFamily: "CoinbaseDisplay, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
  heading:
    fontFamily: "CoinbaseSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 32px
  subheading:
    fontFamily: "CoinbaseSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
  body:
    fontFamily: "CoinbaseSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "CoinbaseSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  chip: 40px
  pill: 56px

spacing:
  sm: 8px
  md: 10px
  base: 12px
  lg: 16px
  xl: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 0 24px
  tab:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 12px 24px
  skip-link:
    backgroundColor: "{colors.canvas-subtle}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    height: 36px
    padding: 10px 16px
  search-field:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.chip}"
    height: 40px
    padding: 8px 16px

Overview

Coinbase is a crypto exchange with a public market site. The look is a calm, bright finance page: white and pale gray, near-black ink, one saturated blue for every action and plenty of rounded pills. [Observed]

What defines the look:

  1. One saturated blue. #0052ff fills the main buttons and marks links on a white page. [Measured]
  2. Near-black ink on cool grays. Text is #0a0b0d with #5b616e for secondary lines, on white and a pale gray #eef0f3. [Measured]
  3. Round pills. Buttons and tabs are 44 high with a fully round corner, and chips are 40 high. Cards use 16 and 24. [Measured]
  4. Three Coinbase faces. Display for large titles, Sans for interface and headings, and Text for reading copy. [Measured]
  5. Green for gains. #098551 marks positive price moves. [Measured]

Source for this file: the Coinbase explore page and the Bitcoin price page measured in a browser at 1440 and 390 wide, read on 2026-10-06. Coinbase's own design system documentation was not read. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Action blue#0052ffPrimary buttons, skip links
Link blue#0667d0Inline links
Text#0a0b0dTitles and body
Secondary text#5b616eMeta lines
Page#ffffffMain surface
Pale gray#eef0f3, #f2f4f6Panels and rows
Positive#098551Gains
Dark chip#282b31Selected filter chips

Typography

Coinbase Display carries large titles: 40 on 48 at 400. Coinbase Sans carries headings and interface text: 28 on 32 at 700 for section headings, 16 on 24 at 600 for subheadings and buttons, 16 at 400 for body. Coinbase Text and Mono are also loaded. [Measured]

Shape and spacing

Corners seen are 4, 8, 12, 16, 24 and 40, and a fully round 56 on buttons. Buttons and tabs are 44 high with 12 by 24 padding, the skip links 36 high and fields 40 to 56 high. [Measured]

Iconography and motion

A Coinbase icon font is loaded. Motion was not measured. [Measured for the icon font]

Themes

Light on the pages measured. [Observed]

Platform: iOS

The Coinbase iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of a finance app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A blue primary button for trading or buying. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The apps are expected to share the blue, the ink and the pill shapes with the web. [Inferred]

Platform: Android

The Coinbase Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of a finance app. [Inferred]

Main action

Expected on Android: Floating action button.

A blue primary button for trading or buying. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The apps are expected to share the blue, the ink and the pill shapes with the web. [Inferred]

Platform: Web

The Coinbase explore page and Bitcoin price page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar with audience tabs (Individuals, Businesses, Institutions, Developers) as 44 high pills, a search field and sign-in and sign-up buttons. [Observed]

Main action

Expected on Web: Page-level button.

A blue pill button, 44 high, white semibold text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Pill tabs, 40 high filter chips and 40 to 56 high fields. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons and tabs measure 44 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the blue, the pill shapes, the gray surfaces and the type family. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use the one blue for the main action.
  • Keep buttons and tabs as 44 high pills.
  • Use pale gray panels instead of borders.
  • Use green only for gains.

Don't

  • Don't add a second action color.
  • Don't use sharp corners on buttons.
  • Don't use the blue for body text.

Known Gaps

  • Trading screens, the portfolio and the signed-in app were not measured, since they sit behind login.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • Coinbase's published design system was not read, so role names are not given.