# Coinbase Spain — Style Reference
> Digital Trust, Blueprinted. A system built on the clarity of an architectural plan, energized by a single, electric blue neuron.
**Theme:** light
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. |
| Slate | `#5b616` | `--color-slate` | Body text, secondary headings, footer links. |
| Ash | `#8a919` | `--color-ash` | Helper text, disabled states, subtle UI 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 — Used exclusively for large, impactful headlines (H1/H2). Its clean, slightly wide geometry gives headlines a declarative, confident presence. · `--font-coinbasedisplay`
- **Substitute:** Manrope
- **Weights:** 400
- **Sizes:** 44px, 52px, 64px, 80px
- **Line height:** 1.0-1.09
- **Role:** Used exclusively for large, impactful headlines (H1/H2). Its clean, slightly wide geometry gives headlines a declarative, confident presence.
### CoinbaseSans — The primary workhorse font for subheadings, buttons, and some body copy. The 600 weight is used for emphasis and smaller headings. · `--font-coinbasesans`
- **Substitute:** Inter
- **Weights:** 400, 600
- **Sizes:** 13px, 16px, 18px, 20px, 28px, 36px, 64px
- **Line height:** 1.11-1.50
- **Role:** The primary workhorse font for subheadings, buttons, and some body copy. The 600 weight is used for emphasis and smaller headings.
### CoinbaseText — Optimized for readability in dense UI and long-form text blocks. Its generous line-height makes paragraphs breathable. · `--font-coinbasetext`
- **Substitute:** Inter
- **Weights:** 400, 700
- **Sizes:** 13px, 16px, 18px
- **Line height:** 1.50-1.56
- **Role:** Optimized for readability in dense UI and long-form text blocks. Its generous line-height makes paragraphs breathable.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.54 | — | `--text-caption` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.56 | — | `--text-subheading` |
| heading-sm | 28px | 1.25 | — | `--text-heading-sm` |
| heading | 44px | 1.09 | — | `--text-heading` |
| heading-lg | 64px | 1 | — | `--text-heading-lg` |
| display | 80px | 1 | — | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 8px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
### Border Radius
| Element | Value |
|---------|-------|
| tags | 100000px |
| cards | 24px |
| inputs | 8px |
| buttons | 56px |
### Layout
- **Page max-width:** 1200px
- **Card padding:** 24px
## Components
### Primary CTA Button
**Role:** 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
**Role:** 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
**Role:** 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
**Role:** Top-level navigation items.
Background: transparent. Text: `Midnight` (#0a0b0d). No padding. Font: CoinbaseSans 16px.
### Filter Tag
**Role:** 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
**Role:** Tertiary navigation links in the page footer.
Background: transparent. Text: `Slate` (#5b616e). Font: CoinbaseText 16px. No underline until hover.
### Large Headline
**Role:** The primary heading for a page or hero section.
Font: CoinbaseDisplay, 64px. Color: `Midnight` (#0a0b0d).
## Do's and Don'ts
### 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).
## Elevation
The design intentionally avoids shadows. Depth and hierarchy are created through color blocking, contrasting light backgrounds (#ffffff) with distinct dark sections (#0a0b0d).
## 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.
## 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.
## 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`."
## Similar Brands
- **Stripe** — Shared aesthetic of high-contrast typography, a single strong brand color, and a clean, developer-friendly feel.
- **Robinhood** — Similar goal of simplifying finance with a clean, mobile-first design and a dominant, optimistic brand color.
- **Intercom** — Uses a similar strategy of a strong blue brand color, custom illustrations, and ample white space.
- **Wealthsimple** — Also combines a trustworthy-but-not-stodgy feel with clean typography and approachable graphics.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-coinbase-blue: #0052ff;
--color-interactive-blue: #578bfa;
--color-pure-white: #ffffff;
--color-midnight: #0a0b0d;
--color-slate: #5b616;
--color-ash: #8a919;
--color-frost: #f7f8f9;
--color-cloud: #eef0f3;
--color-pewter: #dedfe2;
--color-charcoal: #141519;
--color-positive-green: #27ad75;
--color-negative-red: #f0616d;
/* Typography — Font Families */
--font-coinbasedisplay: 'CoinbaseDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-coinbasesans: 'CoinbaseSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-coinbasetext: 'CoinbaseText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 13px;
--leading-caption: 1.54;
--text-body: 16px;
--leading-body: 1.5;
--text-subheading: 18px;
--leading-subheading: 1.56;
--text-heading-sm: 28px;
--leading-heading-sm: 1.25;
--text-heading: 44px;
--leading-heading: 1.09;
--text-heading-lg: 64px;
--leading-heading-lg: 1;
--text-display: 80px;
--leading-display: 1;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Spacing */
--spacing-unit: 8px;
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-80: 80px;
/* Layout */
--page-max-width: 1200px;
--card-padding: 24px;
/* Border Radius */
--radius-xl: 12px;
--radius-3xl: 24px;
--radius-3xl-2: 40px;
--radius-full: 56px;
--radius-full-2: 100000px;
/* Named Radii */
--radius-tags: 100000px;
--radius-cards: 24px;
--radius-inputs: 8px;
--radius-buttons: 56px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-coinbase-blue: #0052ff;
--color-interactive-blue: #578bfa;
--color-pure-white: #ffffff;
--color-midnight: #0a0b0d;
--color-slate: #5b616;
--color-ash: #8a919;
--color-frost: #f7f8f9;
--color-cloud: #eef0f3;
--color-pewter: #dedfe2;
--color-charcoal: #141519;
--color-positive-green: #27ad75;
--color-negative-red: #f0616d;
/* Typography */
--font-coinbasedisplay: 'CoinbaseDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-coinbasesans: 'CoinbaseSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-coinbasetext: 'CoinbaseText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 13px;
--leading-caption: 1.54;
--text-body: 16px;
--leading-body: 1.5;
--text-subheading: 18px;
--leading-subheading: 1.56;
--text-heading-sm: 28px;
--leading-heading-sm: 1.25;
--text-heading: 44px;
--leading-heading: 1.09;
--text-heading-lg: 64px;
--leading-heading-lg: 1;
--text-display: 80px;
--leading-display: 1;
/* Spacing */
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-80: 80px;
/* Border Radius */
--radius-xl: 12px;
--radius-3xl: 24px;
--radius-3xl-2: 40px;
--radius-full: 56px;
--radius-full-2: 100000px;
}
```
Digital blueprint, on-chain…
Precision on parchment: a…
Deep-sea radiant data

Architectural blueprint on white…
High-contrast digital trading…
Digital ledger on white marble.

Regulated purple circuit board.…
Blockchain blueprint on bright…
Midnight Command Center: a dark…
Electric lime on a dark canvas.…

diffused lavender light

Fuzzy Neon Playground. Crisp white…
Deep Slate Precision
midnight command center, bright…

monochrome financial ledger
digital-first canvas
Monochromatic Precision, Neon Pulse

Architectural blueprint on white…
Soft-edged transparency on…
Crisp Editorial Clarity: a…