W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Coinbase
Coinbase Global, Inc. is the U.S.-based publicly traded cryptocurrency exchange and the most recognizable retail-facing crypto brand. The identity, refreshed in 2021, is built around a single signature Coinbase Blue (#0052FF) on a clean light canvas — a deliberate posture of trust and clarity against the speculative volatility of the crypto category. The mark is a simple circular "C," and the wordmark is rendered in a custom geometric sans (Coinbase Sans). The voice is rational, plain-spoken, and infrastructure-leaning rather than performative.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/coinbase/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/coinbase/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Coinbase
Coinbase Global, Inc. is the U.S.-based publicly traded cryptocurrency exchange and the most recognizable retail-facing crypto brand. The identity, refreshed in 2021, is built around a single signature Coinbase Blue (#0052FF) on a clean light canvas — a deliberate posture of trust and clarity against the speculative volatility of the crypto category. The mark is a simple circular "C," and the wordmark is rendered in a custom geometric sans (Coinbase Sans). The voice is rational, plain-spoken, and infrastructure-leaning rather than performative.
Tags: fintech, crypto, coinbase, exchange, light-first, trust
Atoms
Palette
Coinbase · [email protected] · Proprietary — All Rights Reserved
Coinbase corporate brand palette. The identity is anchored on a single saturated blue (Coinbase Blue, #0052FF) — the wordmark, the circular "C" mark, and primary CTAs all read as this one unambiguous blue. The canvas leans light-first for marketing and the retail product, with a near-black ink for body and a deep navy for dark-mode product surfaces. Coinbase's brand voice is rational and trust-leaning — a deliberate counterweight to crypto's volatility narrative.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
coinbase-blue |
Coinbase Blue | #0052FF |
coinbase-blue-hover |
Coinbase Blue Hover | #1652F0 |
coinbase-blue-deep |
Coinbase Blue Deep | #001A66 |
coinbase-forest |
Coinbase Forest | #00633A |
coinbase-green |
Coinbase Green | #05B169 |
coinbase-red |
Coinbase Red | #CF202F |
coinbase-ink |
Coinbase Ink | #0A0B0D |
coinbase-slate |
Coinbase Slate | #5B616E |
coinbase-gray |
Coinbase Gray | #7C828C |
coinbase-white |
Coinbase White | #FFFFFF |
coinbase-fog |
Coinbase Fog | #F5F8FA |
coinbase-divider |
Coinbase Divider | #DDE1E6 |
coinbase-canvas-dark |
Coinbase Canvas Dark | #0A0B0D |
coinbase-surface-dark |
Coinbase Surface Dark | #1E2025 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
coinbase-white |
#FFFFFF |
surface |
coinbase-fog |
#F5F8FA |
surface-elevated |
coinbase-white |
#FFFFFF |
text-primary |
coinbase-ink |
#0A0B0D |
text-secondary |
coinbase-slate |
#5B616E |
text-tertiary |
coinbase-gray |
#7C828C |
primary |
coinbase-blue |
#0052FF |
primary-hover |
coinbase-blue-hover |
#1652F0 |
accent |
coinbase-blue |
#0052FF |
accent-hover |
coinbase-blue-hover |
#1652F0 |
warning |
coinbase-red |
#CF202F |
warning-hover |
coinbase-red |
#CF202F |
error |
coinbase-red |
#CF202F |
success |
coinbase-green |
#05B169 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
coinbase-canvas-dark |
#0A0B0D |
surface |
coinbase-surface-dark |
#1E2025 |
surface-elevated |
coinbase-surface-dark |
#1E2025 |
text-primary |
coinbase-white |
#FFFFFF |
text-secondary |
coinbase-gray |
#7C828C |
text-tertiary |
coinbase-slate |
#5B616E |
primary |
coinbase-blue |
#0052FF |
primary-hover |
coinbase-blue-hover |
#1652F0 |
accent |
coinbase-blue |
#0052FF |
accent-hover |
coinbase-blue-hover |
#1652F0 |
warning |
coinbase-red |
#CF202F |
warning-hover |
coinbase-red |
#CF202F |
error |
coinbase-red |
#CF202F |
success |
coinbase-green |
#05B169 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
coinbase-blue |
#0052FF |
on-identity |
coinbase-white |
#FFFFFF |
primary |
coinbase-blue |
#0052FF |
primary-hover |
coinbase-blue-hover |
#1652F0 |
accent |
coinbase-blue |
#0052FF |
accent-hover |
coinbase-blue-hover |
#1652F0 |
mark |
coinbase-blue |
#0052FF |
success |
coinbase-green |
#05B169 |
error |
coinbase-red |
#CF202F |
warning |
coinbase-red |
#CF202F |
text-primary-light |
coinbase-ink |
#0A0B0D |
text-primary-dark |
coinbase-white |
#FFFFFF |
text-secondary-light |
coinbase-slate |
#5B616E |
background-light |
coinbase-white |
#FFFFFF |
background-dark |
coinbase-canvas-dark |
#0A0B0D |
surface-light |
coinbase-fog |
#F5F8FA |
surface-dark |
coinbase-surface-dark |
#1E2025 |
divider |
coinbase-divider |
#DDE1E6 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: coinbase-blue, coinbase-white, coinbase-ink
- forbidden: coinbase-blue-hover, coinbase-blue-deep, coinbase-green, coinbase-red, coinbase-forest
The Coinbase circular "C" mark renders in Coinbase Blue on light, reversed white on dark, or monochrome ink for print. The hover and deep blues are interactive-state values; the greens and red are buy/sell semantic colors — none are acceptable mark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant
The Coinbase mark's circular geometry depends on exact proportions and a flat solid fill. The 2021 brand refresh explicitly removed gradient and multi-color treatments; consumers MUST NOT reintroduce them.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Coinbase Ink (#0A0B0D) on Coinbase White gives ~20:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing on Coinbase surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Coinbase Blue (#0052FF) on white reaches ~5.7:1 — clears AA for normal text. Buttons using the blue fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas.
contextRestriction → roles.colors.success
- forbiddenContexts: body-text, secondary-link
Coinbase Green carries specific semantic weight in the retail product — it indicates "buy" action and positive price movement. Using it for body text or generic links breaks the semantic separation between trading affordances and chrome.
contextRestriction → roles.colors.error
- forbiddenContexts: body-text, secondary-link
Coinbase Red carries specific semantic weight in the retail product — it indicates "sell" action and negative price movement. Using it for body or links breaks the semantic separation between trading affordances and chrome.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Fintech surfaces handling consumer funds have elevated trust requirements; AA is the floor on any new role pairing.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Coinbase Sans headlines on coinbase.com sit in the Medium (500), Semibold (600), and Bold (700) band. Lighter cuts compromise the confident, trust-leaning voice the brand depends on.
Provenance
- Source: https://www.coinbase.com/en-de/press
- License:
Proprietary — All Rights Reserved - Attribution: Coinbase Global, Inc. — Coinbase, the Coinbase wordmark, and the circular "C" mark are registered trademarks of Coinbase Global, Inc. The Coinbase Blue value (#0052FF) is documented across the Coinbase press kit and verified against the deployed Coinbase logomark SVG. Coinbase Sans is the proprietary corporate face; Inter is referenced here as the open-source fallback.
- Imported:
2026-05-18 - Notes: Coinbase Sans (proprietary) is not publicly distributed. This atom references Inter for both heading and body roles and notes Coinbase Sans as the proprietary primary in provenance. The 2021 brand refresh dropped the prior multi-color secondary palette in favor of the single-blue identity captured here.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Coinbase
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Coinbase
A clear hierarchy in Coinbase's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ coinbase-blue #0052FF accent-hover
→ coinbase-blue-hover #1652F0 background-dark
→ coinbase-canvas-dark #0A0B0D background-light
→ coinbase-white #FFFFFF divider
→ coinbase-divider #DDE1E6 error
→ coinbase-red #CF202F identity
→ coinbase-blue #0052FF mark
→ coinbase-blue #0052FF on-identity
→ coinbase-white #FFFFFF primary
→ coinbase-blue #0052FF primary-hover
→ coinbase-blue-hover #1652F0 success
→ coinbase-green #05B169 surface-dark
→ coinbase-surface-dark #1E2025 surface-light
→ coinbase-fog #F5F8FA text-primary-dark
→ coinbase-white #FFFFFF text-primary-light
→ coinbase-ink #0A0B0D text-secondary-light
→ coinbase-slate #5B616E warning
→ coinbase-red #CF202F Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from coinbase)
Light mode (14 roles)
accent
→ coinbase-blue accent-hover
→ coinbase-blue-hover background
→ coinbase-white error
→ coinbase-red primary
→ coinbase-blue primary-hover
→ coinbase-blue-hover success
→ coinbase-green surface
→ coinbase-fog surface-elevated
→ coinbase-white text-primary
→ coinbase-ink text-secondary
→ coinbase-slate text-tertiary
→ coinbase-gray warning
→ coinbase-red warning-hover
→ coinbase-red Dark mode (14 roles)
accent
→ coinbase-blue accent-hover
→ coinbase-blue-hover background
→ coinbase-canvas-dark error
→ coinbase-red primary
→ coinbase-blue primary-hover
→ coinbase-blue-hover success
→ coinbase-green surface
→ coinbase-surface-dark surface-elevated
→ coinbase-surface-dark text-primary
→ coinbase-white text-secondary
→ coinbase-gray text-tertiary
→ coinbase-slate warning
→ coinbase-red warning-hover
→ coinbase-red Rules (8 typed constraints)
error · 7 rules
colorChoice logo.mark allowed coinbase-blue, coinbase-white, coinbase-ink forbidden coinbase-blue-hover, coinbase-blue-deep, coinbase-green, coinbase-red, coinbase-forest The Coinbase circular "C" mark renders in Coinbase Blue on light, reversed white on dark, or monochrome ink for print. The hover and deep blues are interactive-state values; the greens and red are buy/sell semantic colors — none are acceptable mark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant The Coinbase mark's circular geometry depends on exact proportions and a flat solid fill. The 2021 brand refresh explicitly removed gradient and multi-color treatments; consumers MUST NOT reintroduce them.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Coinbase Ink (#0A0B0D) on Coinbase White gives ~20:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing on Coinbase surfaces.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Coinbase Blue (#0052FF) on white reaches ~5.7:1 — clears AA for normal text. Buttons using the blue fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas.
contextRestriction roles.colors.success forbiddenContexts body-text, secondary-link Coinbase Green carries specific semantic weight in the retail product — it indicates "buy" action and positive price movement. Using it for body text or generic links breaks the semantic separation between trading affordances and chrome.
contextRestriction roles.colors.error forbiddenContexts body-text, secondary-link Coinbase Red carries specific semantic weight in the retail product — it indicates "sell" action and negative price movement. Using it for body or links breaks the semantic separation between trading affordances and chrome.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Fintech surfaces handling consumer funds have elevated trust requirements; AA is the floor on any new role pairing.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Coinbase Sans headlines on coinbase.com sit in the Medium (500), Semibold (600), and Bold (700) band. Lighter cuts compromise the confident, trust-leaning voice the brand depends on.
Provenance
- Source
- https://www.coinbase.com/en-de/press
- License
Proprietary — All Rights Reserved- Attribution
- Coinbase Global, Inc. — Coinbase, the Coinbase wordmark, and the circular "C" mark are registered trademarks of Coinbase Global, Inc. The Coinbase Blue value (#0052FF) is documented across the Coinbase press kit and verified against the deployed Coinbase logomark SVG. Coinbase Sans is the proprietary corporate face; Inter is referenced here as the open-source fallback.
- Imported
2026-05-18- Notes
- Coinbase Sans (proprietary) is not publicly distributed. This atom references Inter for both heading and body roles and notes Coinbase Sans as the proprietary primary in provenance. The 2021 brand refresh dropped the prior multi-color secondary palette in favor of the single-blue identity captured here.