# Coinbase — Design System
> Coinbase is a secure online platform for buying, selling, transferring, and storing cryptocurrency.
- **Canonical:** https://uiuxskills.com/library/coinbase
- **Source:** https://www.coinbase.com
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:54.901Z

---

---
version: alpha
name: Coinbase
description: A secure online platform for buying, selling, transferring, and storing cryptocurrency.
tone: Professional, authoritative, accessible, and transparent.
color-scheme: light
colors:
  primary: "#0052FF"
  surface: "#FFFFFF"
  surface-container: "#F7F8F9"
  on-surface: "#0A0B0D"
  on-primary: "#FFFFFF"
  outline: "#89909E"
  success: "#098551"
  error: "#CF202F"
  warning: "#CF470E"
  focus-ring: "#0052FF"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 4rem
    fontWeight: 400
    lineHeight: 4.5rem
  display-md:
    fontFamily: sans-serif
    fontSize: 3rem
    fontWeight: 400
    lineHeight: 3.5rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.75rem
    fontWeight: 600
    lineHeight: 2.25rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: 1.75rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.5rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: 1.25rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.8125rem
    fontWeight: 600
    lineHeight: 1rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 100000px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: fit-content
  button-primary-hover:
    backgroundColor: rgba(0, 72, 224, 0.88)
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0px 8px 12px rgba(0, 0, 0, 0.12)
  md: 0px 8px 24px rgba(0, 0, 0, 0.12)
  lg: 0px 12px 32px rgba(0, 0, 0, 0.15)
---

## Overview

Coinbase maintains a clean, professional, and highly trustworthy visual identity. It balances a high-energy, tech-forward aesthetic with the stability required of a financial institution, utilizing a crisp blue-and-white palette with clear, legible typography.

## Colors

The color strategy focuses on high-contrast accessibility and functional clarity, using a signature blue for primary actions and semantic colors for financial status.

*   Primary (#0052FF): The core brand blue used for primary CTAs and key interactive elements.
*   Surface (#FFFFFF): The primary background color for the light mode interface.
*   Surface-container (#F7F8F9): Used for secondary containers and alternate backgrounds.
*   On-surface (#0A0B0D): Primary text color for high contrast against white surfaces.
*   On-primary (#FFFFFF): Text color for buttons and elements using the primary brand blue.
*   Outline (#89909E): Used for borders and dividers to maintain structure without visual clutter.
*   Success (#098551): Semantic color for positive trends and successful actions.
*   Error (#CF202F): Semantic color for negative trends and error states.
*   Warning (#CF470E): Semantic color for alerts and warnings.
*   Focus-ring (#0052FF): The brand blue used for focus states on interactive components.

## Typography

Typography is built on a clean sans-serif foundation, prioritizing readability and hierarchy across the platform.

*   Display-lg: Used for high-impact hero headlines.
*   Display-md: Used for secondary hero or section titles.
*   Headline-lg: Used for primary section headers.
*   Headline-md: Used for sub-headers.
*   Body-md: Standard body text for readability.
*   Label-md: Used for button labels and small UI text.
*   Label-sm: Used for captions and legal text.

## Layout

Coinbase utilizes a responsive grid system with a maximum width of 1600px for desktop. Spacing is consistent, relying on an 8px base unit for all margins and padding. The page structure typically follows a hero-first pattern, moving through features, market data, and product showcases before reaching the footer. The design is mobile-first, transitioning from a single-column layout on mobile devices to a multi-column grid on larger screens.

## Elevation & Depth

Depth is used sparingly, primarily for cards and interactive elements to distinguish them from the background. Subtle single-layer shadows are applied across three levels: elevation.sm for subtle separation, elevation.md for standard card lift, and elevation.lg for modal or drawer overlays.

## Shapes

The brand employs a rounded corner philosophy that balances friendliness with technical precision. The scale ranges from 4px (rounded.sm) for small input fields to 100000px (rounded.full) for pill-shaped primary buttons, ensuring that interactive components feel approachable and modern.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use {colors.primary} with {typography.label-md} text, while secondary buttons utilize {colors.surface-container}. These components are intended for clear, singular calls to action; use primary buttons for the main conversion point and secondary buttons for lower-priority actions.

### Card
Cards are defined by a {colors.surface} background and {rounded.md} corners. Use these to group related content or display product information, ensuring they remain distinct from the background using {elevation.md} where necessary.

### Input Field
Input fields feature a {colors.surface} background and {rounded.sm} corners, with an {colors.outline} border that shifts to {colors.primary} upon focus. These should be used for all user data entry to ensure a consistent, accessible experience.

### Badge
Badges are used for status indicators, with specific variants for {colors.success}, {colors.error}, and {colors.warning}. These should be kept small and used to provide immediate, scannable feedback on market trends or account status.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary call-to-action buttons. | Do not use {colors.primary} for text that is not a link or button. |
| Apply {rounded.md} to all card components for consistency. | Avoid using sharp corners (0px) on interactive components. |
| Use {typography.headline-lg} for main page titles. | Do not mix {typography.display-lg} with body text styles in headers. |
| Maintain {spacing.md} between form elements. | Avoid using custom spacing units outside the {spacing} scale. |
| Use {colors.success} to indicate positive market trends. | Never use {colors.error} for non-critical information. |
| Apply {colors.outline} for subtle dividers between content sections. | Do not exceed the {elevation.md} shadow depth for standard cards. |
| Use {rounded.sm} for input field borders. | Do not use {rounded.full} on standard content cards. |
| Apply {colors.focus-ring} to active input states. | Do not omit focus rings on interactive elements. |

## Content Style

CTA labels are imperative and action-oriented, using short, punchy verbs like "Sign up" or "Trade now" to drive user engagement.

Headings are phrased to be direct, benefit-focused, and authoritative, clearly communicating the value proposition of the section.

Copy density is kept low; paragraphs are concise and scannable, supported by clear headings and frequent use of whitespace to prevent visual fatigue.

## Imagery & Icons

The imagery style is mixed, combining high-quality product screenshots with clean vector illustrations for abstract concepts. Icons follow a consistent, branded language that supports the minimal aesthetic. Photos should be clear and professional, while illustrations should maintain a simplified, modern look that complements the overall interface.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Coinbase, a minimal, professional financial platform. Match its authoritative, transparent tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.sm}` — never hardcode hex values, pixel sizes, or shadow strings.
2. Use only the component variants defined under `components:`. Do not invent states, sizes, or variants the spec omits.
3. Follow the Layout section: max-width 1600px on desktop, 8px base spacing unit, mobile-first with a single breakpoint at 768px unless the spec says otherwise.
4. Apply elevation sparingly per the Elevation & Depth narrative — `{elevation.sm}` for subtle separation, `{elevation.md}` for cards, `{elevation.lg}` for modals only. Do not exceed `{elevation.md}` for standard cards.
5. Treat the Do's and Don'ts table as authoritative. Surface any conflict with a user's request before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Render hover, focus, and disabled states for every interactive element when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `{colors.focus-ring}` on focus rings).
- Use `{rounded.full}` for pill-shaped primary buttons; `{rounded.md}` for cards; `{rounded.sm}` for input fields.
- Apply `{typography.label-md}` to button labels and `{typography.headline-lg}` to primary section headers.
- Keep CTA copy imperative and short, matching the Content Style section.

**Must NOT:**
- Invent colors, font sizes, radii, or shadow values absent from the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, decorative flourishes, or marketing filler copy.
- Use `{colors.primary}` for non-link, non-button text.
- Rewrite, replace, or invent page copy, headings, navigation items, or content hierarchy.
- Omit focus rings on any interactive element.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary containers, use `{colors.surface-container}`.
- Tokens marked as visual approximations in the spec are superseded by any authoritative source (Storybook, theme file, or component metadata).
- For semantic color ambiguity, map positive states to `{colors.success}`, errors to `{colors.error}`, and alerts to `{colors.warning}` — never swap these roles.