Coinbase

# Coinbase — Style Reference
> Digital Trust, Blueprinted. A system built on the clarity of an architectural plan, energized by a single, electric blue neuron.

**Theme:** light

**Site:** https://coinbase.com

The design system establishes a feeling of digital-native trust, grounded in a high-contrast, minimalist palette. A precise foundation of pure white (#ffffff) and near-black (#0a0b0d) creates an environment of clarity and focus. The system's entire personality is injected through a single, electric `Coinbase Blue` (#0052ff), which is reserved exclusively for primary actions and brand marks, acting as a confident guide. A suite of custom fonts (Coinbase Display, Sans, Text) provides a unique and cohesive typographic voice across all scales. Depth is achieved not with shadows but with bold, full-width color blocks, alternating between bright white and deep midnight sections, creating a clean, architectural rhythm.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Coinbase Blue | `#0052ff` | `--color-coinbase-blue` | Primary CTAs, logos, active states — the core brand identifier. |
| Interactive Blue | `#578bfa` | `--color-interactive-blue` | Secondary links and interactive elements. |
| Pure White | `#ffffff` | `--color-pure-white` | Primary page background, text on dark surfaces. |
| Midnight | `#0a0b0d` | `--color-midnight` | Dark section backgrounds, primary text. |
| Frost | `#f7f8f9` | `--color-frost` | Subtle light backgrounds, like the footer area. |
| Cloud | `#eef0f3` | `--color-cloud` | Light background dividers or button hover states. |
| Pewter | `#dedfe2` | `--color-pewter` | Borders between light sections. |
| Charcoal | `#141519` | `--color-charcoal` | Alternative dark section background surface. |
| Positive Green | `#27ad75` | `--color-positive-green` | Price increases, success messages. |
| Negative Red | `#f0616d` | `--color-negative-red` | Price decreases, error messages. |

## Tokens — Typography

### CoinbaseDisplay
- **Substitute:** Manrope
- **Weights:** 400
- **Sizes:** 44px, 52px, 64px, 80px
- **Line height:** 1
- **Role:** Used exclusively for large, impactful headlines (H1/H2). Its clean, slightly wide geometry gives headlines a declarative, confident presence.

### CoinbaseSans
- **Substitute:** Inter
- **Weights:** 400, 600
- **Sizes:** 13px, 16px, 18px, 20px, 28px, 36px, 64px
- **Line height:** 1.11
- **Role:** The primary workhorse font for subheadings, buttons, and some body copy. The 600 weight is used for emphasis and smaller headings.

### CoinbaseText
- **Substitute:** Inter
- **Weights:** 400, 700
- **Sizes:** 13px, 16px, 18px
- **Line height:** 1.5
- **Role:** Optimized for readability in dense UI and long-form text blocks. Its generous line-height makes paragraphs breathable.

## Tokens — Type Scale

Perfect Fourth (1.333) from 16px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 13px | 1.54 | — |
| body | 16px | 1.5 | — |
| subheading | 18px | 1.56 | — |
| heading-sm | 28px | 1.25 | — |
| heading | 44px | 1.09 | — |
| heading-lg | 64px | 1 | — |
| display | 80px | 1 | — |

## Tokens — Spacing

- **Max width:** 1200px
- **Card padding:** 24px

## Tokens — Radius

- **Buttons:** 56px
- **Inputs:** 8px
- **Cards:** 24px
- **tags:** 100000px

## Layout

The layout is a centered, max-width container (approx. 1200px) providing a stable reading experience. A key pattern is the rhythmic alternation between a white-background hero (split-column text/visual) and a full-bleed dark feature section. This creates dramatic contrast and pacing. Content is organized in simple, clear structures like 2-column feature blocks and multi-column card grids. Generous vertical spacing (64px+) between sections ensures each message has room to breathe.

## Imagery

Visuals are dominated by abstract vector illustrations and clean product UI screenshots. Illustrations use a flat-color, geometric style featuring brand colors, making complex financial concepts feel approachable and modern. They are always contained within layout blocks, reinforcing the structured, grid-based feel of the page. Photography is absent, placing the focus squarely on the product's interface and stylized brand graphics.

## Components

### Primary & Secondary Button Group

### Crypto Price List Card

### Earn APY Feature Banner

### Primary CTA Button
*The main call-to-action on any page.*

Background: `Coinbase Blue` (#0052ff). Text: `Pure White` (#ffffff). Padding: 16px 32px. Radius: a distinctive elongated pill shape at 56px.

### Secondary Pill Button
*Secondary action, often on a dark background.*

Background: `Pure White` (#ffffff). Text: `Midnight` (#0a0b0d). Padding: 12px 24px. Radius: a perfect pill shape at 100000px.

### Ghost Link
*Inline, text-style interactive elements.*

Background: transparent. Text: `Interactive Blue` (#578bfa). No padding or border. Used for tertiary actions like 'Learn more'.

### Header Nav Link
*Top-level navigation items.*

Background: transparent. Text: `Midnight` (#0a0b0d). No padding. Font: CoinbaseSans 16px.

### Filter Tag
*Toggleable filter in data views.*

Background: typically transparent with a subtle border, or a light fill on hover/active. Text: `Slate` (#5b616e). Padding: 12px 24px. Radius: 100000px.

### Footer Link
*Tertiary navigation links in the page footer.*

Background: transparent. Text: `Slate` (#5b616e). Font: CoinbaseText 16px. No underline until hover.

### Large Headline
*The primary heading for a page or hero section.*

Font: CoinbaseDisplay, 64px. Color: `Midnight` (#0a0b0d).

## Guidelines

### Do

- Use `Coinbase Blue` (#0052ff) exclusively for primary CTAs and the brand logo.
- Define primary buttons with the signature 56px border-radius.
- Construct all major page headlines using the `CoinbaseDisplay` font.
- Create visual hierarchy by alternating full-width #ffffff and #0a0b0d sections.
- Reserve `Slate` (#5b616e) for all secondary body copy and footer links.
- Set body text at 16px with `CoinbaseSans` or `CoinbaseText` for optimal readability.
- Apply a 24px radius to all larger content cards.

### Don't

- Don't use shadows on any element; rely on color blocking for depth.
- Don't use `Coinbase Blue` (#0052ff) for text or non-interactive elements.
- Don't use multiple saturated colors in one section; stick to the neutral palette with one blue accent.
- Don't use sharp corners for buttons or tags; they must be rounded (56px or 100000px).
- Don't use system fonts; the custom Coinbase font suite is essential to the brand identity.
- Don't create visual dividers with lines; use negative space and background color changes.
- Don't make footer links any color other than `Slate` (#5b616e).

## Agent Prompt Guide

### Quick Color Reference
- **Text:** `#0a0b0d`
- **Background:** `#ffffff`
- **CTA Button:** `#0052ff`
- **Dark Section BG:** `#0a0b0d`
- **Secondary Text:** `#5b616e`
- **Link:** `#578bfa`

### Example Component Prompts
1. **Hero Section:** "Create a two-column hero on a `#ffffff` background. Left column: headline 'Hello, Spain!' at 64px CoinbaseDisplay weight 400 in `#0a0b0d`. Subtext 'Coinbase is the world's safest platform...' at 18px CoinbaseSans weight 400 in `#5b616e`. Primary button 'Sign up' with `#0052ff` background, `#ffffff` text, 16px 32px padding, and 56px border-radius."
2. **Dark Promo Section:** "Create a full-width section with a `#0a0b0d` background and 80px vertical padding. Inside, place a centered headline 'Earn up to 14% APY on your crypto' at 36px CoinbaseSans weight 600 in `#ffffff`. Add a subtext below it. Below that, add a secondary pill button 'Explore staking options' with a `#ffffff` background, `#0a0b0d` text, 12px 24px padding, and 100000px radius."
3. **Footer:** "Design a footer on a `#f7f8f9` background. Create four columns. Each column has a heading like 'Company' or 'Learn' using 16px CoinbaseSans weight 600 in `#0a0b0d`. List links below each heading like 'About' or 'Blog' using 16px CoinbaseText weight 400 in `#5b616e`."