coinbase
An institutional-grade crypto exchange whose marketing surfaces read like a quietly-confident financial-services brand. The base canvas is pure white; Coinbase Blue (`#0052ff`) is the single brand voltage, used scarcely on primary CTAs, signature glyphs, and inline accent moments
colors
#0052ff #003ecc #a8b8cc #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
design.md source
---
version: alpha
name: Coinbase-design-analysis
description: An institutional-grade crypto exchange whose marketing surfaces read like a quietly-confident financial-services brand. The base canvas is pure white; Coinbase Blue (`#0052ff`) is the single brand voltage, used scarcely on primary CTAs, signature glyphs, and inline accent moments. Type runs Coinbase's licensed CoinbaseDisplay (display) and CoinbaseSans (body) at modest weights — display sits at weight 400 not 700, signaling editorial calm rather than fintech-bombastic. Page rhythm rotates between bright white sections, soft gray elevation bands, and full-bleed dark editorial heroes (`#0a0b0d`) carrying product-ui mockup cards. Iconography is geometric and minimal; depth comes from card-on-card layering, never decorative shadows.
colors:
primary: "#0052ff"
primary-active: "#003ecc"
primary-disabled: "#a8b8cc"
ink: "#0a0b0d"
body: "#5b616e"
body-strong: "#0a0b0d"
muted: "#7c828a"
muted-soft: "#a8acb3"
hairline: "#dee1e6"
hairline-soft: "#eef0f3"
canvas: "#ffffff"
surface-soft: "#f7f7f7"
surface-card: "#ffffff"
surface-strong: "#eef0f3"
surface-dark: "#0a0b0d"
surface-dark-elevated: "#16181c"
on-primary: "#ffffff"
on-dark: "#ffffff"
on-dark-soft: "#a8acb3"
semantic-up: "#05b169"
semantic-down: "#cf202f"
accent-yellow: "#f4b000"
typography:
display-mega:
fontFamily: "'Coinbase Display', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
fontSize: 80px
fontWeight: 400
lineHeight: 1.0
letterSpacing: -2px
display-xl:
fontFamily: "'Coinbase Display', sans-serif"
fontSize: 64px
fontWeight: 400
lineHeight: 1.0
letterSpacing: -1.6px
display-lg:
fontFamily: "'Coinbase Display', sans-serif"
fontSize: 52px
fontWeight: 400
lineHeight: 1.0
letterSpacing: -1.3px
display-md:
fontFamily: "'Coinbase Display', sans-serif"
fontSize: 44px
fontWeight: 400
lineHeight: 1.09
letterSpacing: -1px
display-sm:
fontFamily: "'Coinbase Sans', sans-serif"
fontSize: 36px
fontWeight: 400
lineHeight: 1.11
letterSpacing: -0.5px
title-lg:
fontFamily: "'Coinbase Sans', sans-serif"
fontSize: 32px
fontWeight: 400
lineHeight: 1.13
letterSpacing: -0.4px
title-md:
fontFamily: "'Coinbase Sans', sans-serif"
fontSize: 18px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 0
title-sm:
fontFamily: "'Coinbase Sans', sans-serif"
fontSize: 16px
fontWeight: 600
lineHeight: 1.25
letterSpacing: 0
body-md:
fontFamily: "'Coinbase Sans', sans-serif"
… components
display headline
body copy from coinbase tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#0052ff",
font: ""Coinbase Sans", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on coinbase's visual identity.