Download

Coinbase Designsystem.

Coinbase Designsystem — Krypto-Börse. Saubere blaue Identität, vertrauensorientiert, institutioneller Look.

Plugin nutzen → Auf GitHub ansehen →

Im Kontext ansehen

Dieselben Design-Tokens, angewendet auf verschiedene Artefaktarten – eine Website, eine App, eine Folie, ein Poster. Originale Mockups, neu mit diesem System gestaltet, keine Screenshots.

Website
Folien
App
Poster

Design-Tokens

56 Tokens, die dem Open Design Token-Vertrag entsprechen – dieselben strukturierten Werte für Palette, Typografie, Abstände und Motion, die dein Agent liest, um jedes Artefakt zu gestalten.

Oberfläche

  • --bg #ffffff
  • --surface #eef0f3
  • --surface-warm var(--surface)

Text

  • --fg #0a0b0d
  • --fg-2 var(--fg)
  • --muted #5b616e
  • --meta var(--muted)

Rahmen

  • --border rgba(91, 97, 110, 0.2)
  • --border-soft var(--border)

Akzent

  • --accent #0052ff
  • --accent-on #ffffff
  • --accent-hover #578bfa
  • --accent-active #0667d0

Semantisch

  • --success #16a34a
  • --warn #eab308
  • --danger #dc2626

Typografie

  • --font-display "CoinbaseDisplay", "Coinbase Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif
  • --font-body "CoinbaseText", "CoinbaseSans", "Coinbase Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif
  • --font-mono ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace

Typografie-Skala

  • --text-xs 12px
  • --text-sm 14px
  • --text-base 16px
  • --text-lg 18px
  • --text-xl 32px
  • --text-2xl 36px
  • --text-3xl 52px
  • --text-4xl 80px
  • --leading-body 1.5
  • --leading-tight 1.0
  • --tracking-display -0.01em

Abstände

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-12 48px
  • --section-y-desktop 96px
  • --section-y-tablet 64px
  • --section-y-phone 40px

Radius

  • --radius-sm 8px
  • --radius-md 16px
  • --radius-lg 32px
  • --radius-pill 9999px

Elevation

  • --elev-flat none
  • --elev-ring 0 0 0 1px var(--border)
  • --elev-raised 0 1px 2px color-mix(in oklab, var(--fg), transparent 92%)

Fokus

  • --focus-ring 0 0 0 2px var(--fg)

Motion

  • --motion-fast 150ms
  • --motion-base 200ms
  • --ease-standard cubic-bezier(0.2, 0, 0, 1)

Layout

  • --container-max 1280px
  • --container-gutter-desktop 24px
  • --container-gutter-tablet 16px
  • --container-gutter-phone 16px

Design System Inspired by Coinbase

Category: Fintech & Crypto Crypto exchange. Clean blue identity, trust-focused, institutional feel.

1. Visual Theme & Atmosphere

Coinbase’s website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (#0052ff) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.

The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (#578bfa). The design alternates between white content sections and dark (#0a0b0d, #282b31) feature sections, creating a professional, financial-grade interface.

Key Characteristics:

  • Coinbase Blue (#0052ff) as singular brand accent
  • Four-font proprietary family: Display, Sans, Text, Icons
  • 56px radius pill buttons with blue hover transition
  • Near-black (#0a0b0d) dark sections + white light sections
  • 1.00 line-height on display headings — ultra-tight
  • Cool gray secondary surface (#eef0f3) with blue tint
  • text-transform: lowercase on some button labels — unusual

2. Color Palette & Roles

Primary

  • Coinbase Blue (#0052ff): Primary brand, links, CTA borders
  • Pure White (#ffffff): Primary light surface
  • Near Black (#0a0b0d): Text, dark section backgrounds
  • Cool Gray Surface (#eef0f3): Secondary button background

Interactive

  • Hover Blue (#578bfa): Button hover background
  • Link Blue (#0667d0): Secondary link color
  • Muted Blue (#5b616e): Border color at 20% opacity

Surface

  • Dark Card (#282b31): Dark button/card backgrounds
  • Light Surface (rgba(247,247,247,0.88)): Subtle surface

3. Typography Rules

Font Families

  • Display: CoinbaseDisplay — hero headlines
  • UI / Sans: CoinbaseSans — buttons, headings, nav
  • Body: CoinbaseText — reading text
  • Icons: CoinbaseIcons — icon font

Hierarchy

RoleFontSizeWeightLine HeightNotes
Display HeroCoinbaseDisplay80px4001.00 (tight)Maximum impact
Display SecondaryCoinbaseDisplay64px4001.00Sub-hero
Display ThirdCoinbaseDisplay52px4001.00Third tier
Section HeadingCoinbaseSans36px4001.11 (tight)Feature sections
Card TitleCoinbaseSans32px4001.13Card headings
Feature TitleCoinbaseSans18px6001.33Feature emphasis
Body BoldCoinbaseSans16px7001.50Strong body
Body SemiboldCoinbaseSans16px6001.25Buttons, nav
BodyCoinbaseText18px4001.56Standard reading
Body SmallCoinbaseText16px4001.50Secondary reading
ButtonCoinbaseSans16px6001.20+0.16px tracking
CaptionCoinbaseSans14px600–7001.50Metadata
SmallCoinbaseSans13px6001.23Tags

4. Component Stylings

Buttons

Primary Pill (56px radius)

  • Background: #eef0f3 or #282b31
  • Radius: 56px
  • Border: 1px solid matching background
  • Hover: #578bfa (light blue)
  • Focus: 2px solid black outline

Full Pill (100000px radius)

  • Used for maximum pill shape

Blue Bordered

  • Border: 1px solid #0052ff
  • Background: transparent

Cards & Containers

  • Radius: 8px–40px range
  • Borders: 1px solid rgba(91,97,110,0.2)

5. Layout Principles

Spacing System

  • Base: 8px
  • Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px

Border Radius Scale

  • Small (4px–8px): Article links, small cards
  • Standard (12px–16px): Cards, menus
  • Large (24px–32px): Feature containers
  • XL (40px): Large buttons/containers
  • Pill (56px): Primary CTAs
  • Full (100000px): Maximum pill

6. Depth & Elevation

Minimal shadow system — depth from color contrast between dark/light sections.

7. Do’s and Don’ts

Do

  • Use Coinbase Blue (#0052ff) for primary interactive elements
  • Apply 56px radius for all CTA buttons
  • Use CoinbaseDisplay for hero headings only
  • Alternate dark (#0a0b0d) and white sections

Don’t

  • Don’t use the blue decoratively — it’s functional only
  • Don’t use sharp corners on CTAs — 56px minimum

8. Responsive Behavior

Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px

9. Agent Prompt Guide

Quick Color Reference

  • Brand: Coinbase Blue (#0052ff)
  • Background: White (#ffffff)
  • Dark surface: #0a0b0d
  • Secondary surface: #eef0f3
  • Hover: #578bfa
  • Text: #0a0b0d

Example Component Prompts

  • “Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa.”
  • “Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff).”
Modus
design-system
Szene
design
Oberfläche
web
Manifest-ID
design-system-coinbase

Tags

  • design-system
  • first-party
  • design
  • fintech-crypto