### Coinbase - Crypto exchange. - Clean blue identity, trust-focused, institutional feel - description: An institutional-grade crypto exchange whose marketin…
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
version alpha
name Coinbase
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#0a0b0dcolors 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" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption-strong: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0 number-display: fontFamily: "'Coinbase Mono', 'Coinbase Sans', monospace" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 button: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.15 letterSpacing: 0 nav-link: fontFamily: "'Coinbase Sans', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0
rounded none: 0px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px pill: 100px full: 9999px
spacing xxs: 4px xs: 8px sm: 12px base: 16px md: 20px lg: 24px xl: 32px xxl: 48px section: 96px
components top-nav-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px top-nav-on-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-secondary-light: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px button-secondary-dark: backgroundColor: "{colors.surface-dark-elevated}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px button-outline-on-dark: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 11px 19px height: 44px button-tertiary-text: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" button-pill-cta: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 16px 32px height: 56px hero-band-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-mega}" padding: 96px hero-band-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-mega}" padding: 96px product-ui-card-dark: backgroundColor: "{colors.surface-dark-elevated}" textColor: "{colors.on-dark}" rounded: "{rounded.xl}" padding: 32px product-ui-card-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 32px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px asset-row: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: 16px 0 price-up-cell: backgroundColor: transparent textColor: "{colors.semantic-up}" typography: "{typography.number-display}" price-down-cell: backgroundColor: transparent textColor: "{colors.semantic-down}" typography: "{typography.number-display}" pricing-tier-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px pricing-tier-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px cta-band-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-lg}" padding: 96px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 14px 16px height: 48px search-input-pill: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px badge-pill: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.caption-strong}" rounded: "{rounded.pill}" padding: 4px 12px asset-icon-circular: backgroundColor: "{colors.surface-strong}" rounded: "{rounded.full}" size: 32px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px 48px footer-link: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.body-sm}" legal-band: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.caption}"
Coinbase reads like an institutional financial brand that happens to trade crypto — the marketing surfaces are quiet, white-canvas, editorially-spaced, and almost monochromatic. The single brand voltage is Coinbase Blue ({colors.primary} — #0052ff), used scarcely: every primary CTA pill, the brand wordmark, and inline emphasis links. Beyond that one blue, the system is white canvas + ink + soft gray elevation bands + a deep near-black editorial canvas ({colors.surface-dark} — #0a0b0d) for full-bleed product-mockup heroes.
Type pairs CoinbaseDisplay for hero headlines with CoinbaseSans for body, captions, and navigation. Display sits at weight 400 — not the 700+ typical of trading platforms. The choice signals editorial calm and institutional trust rather than fintech urgency.
The page rhythm rotates three modes: bright white editorial sections, soft-gray elevation bands, and full-bleed dark editorial heroes carrying layered product-UI mockup cards. The dark hero with floating dashboard mockups is the single most distinctive component.
Key Characteristics:
Single accent color: {colors.primary} (#0052ff Coinbase Blue) carries every primary CTA, wordmark, and inline brand link. Used scarcely.
Modest display weights — CoinbaseDisplay at weight 400, never 700+.
Editorial pill geometry: every CTA is {rounded.pill} (100px), every asset glyph is {rounded.full}, every card is {rounded.xl} (24px). Sharp corners absent.
Full-bleed dark heroes with floating product-UI cards: {component.hero-band-dark} plus inline {component.product-ui-card-dark} mockups is the brand's strongest signature pattern.
Trading semantics: {colors.semantic-up} (#05b169) and {colors.semantic-down} (#cf202f) — text color only, never background fills.
96px section rhythm — generous editorial pacing.
Coinbase Blue ({colors.primary} — #0052ff): The single brand color. Every primary CTA pill, the Coinbase wordmark, and inline brand links.
Coinbase Blue Active ({colors.primary-active} — #003ecc): Press-state darken on the primary pill.
Coinbase Blue Disabled ({colors.primary-disabled} — #a8b8cc): Faded-blue tint for disabled CTAs.
Accent Yellow ({colors.accent-yellow} — #f4b000): A small sub-brand accent used very sparingly on Bitcoin/asset glyph fills inside feature cards. Illustrative-only, not an action color.
Canvas ({colors.canvas} — #ffffff): The default page floor.
Surface Soft ({colors.surface-soft} — #f7f7f7): Subtle alternating band surface.
Surface Strong ({colors.surface-strong} — #eef0f3): The light-gray fill behind secondary buttons, search pills, asset-icon plates.
Surface Dark ({colors.surface-dark} — #0a0b0d): Deep near-black canvas for full-bleed dark heroes, CTA bands. Same hex as {colors.ink} — page-floor and text-color share the value.
Surface Dark Elevated ({colors.surface-dark-elevated} — #16181c): One step lighter, used for floating product-UI mockup cards inside dark heroes.
Hairline ({colors.hairline} — #dee1e6): Default 1px divider on white surfaces.
Hairline Soft ({colors.hairline-soft} — #eef0f3): Lighter divider — same hex as {colors.surface-strong}.
Ink ({colors.ink} — #0a0b0d): Display headings, primary nav, body emphasis.
Body ({colors.body} — #5b616e): Default running-text — slightly cool gray.
Body Strong ({colors.body-strong} — #0a0b0d): Same as ink, used for stronger emphasis.
Muted ({colors.muted} — #7c828a): Sub-titles, breadcrumbs, footer secondary.
Muted Soft ({colors.muted-soft} — #a8acb3): Disabled link text.
On Primary ({colors.on-primary} — #ffffff): White text on Coinbase Blue CTAs.
On Dark ({colors.on-dark} — #ffffff): White text on dark heroes.
On Dark Soft ({colors.on-dark-soft} — #a8acb3): Muted off-white for secondary text on dark.
Semantic Up ({colors.semantic-up} — #05b169): "Price up" green, text color only.
Semantic Down ({colors.semantic-down} — #cf202f): "Price down" red, text color only.
The system runs CoinbaseDisplay (display headlines), CoinbaseSans (body, navigation, captions, buttons), CoinbaseIcons (icon font), and CoinbaseMono for tabular numerical data. Fallback stack: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif.
The display/body split is functional: CoinbaseDisplay carries hero headlines only; CoinbaseSans carries everything else.
proprietary
Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx
4,600+ AI skills, agents & workflows. Install in 60 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.