№ coinbase-com

Coinbase

Deep indigo expanse, crisp geometric sans-serif, digital clarity and precise spatial layering.

Feature Stackminimalism brutalism monochrome futurist crypto fintechlight

The layout prioritizes a central call to action within a clean, structured frame. The use of deep blues and stark white creates a sense of technological precision and straightforwardness. · crypto platform, fintech interface, dark ui, financial dashboard, cryptocurrency app, modern finance, investment platform

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: cool · monochrome · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#0949f1
OKLCHoklch(50.1% 0.255 264)
RoleDominant
find sites →
Hex#041c7f
OKLCHoklch(30.2% 0.165 265)
RoleSurface
find sites →
Hex#81a5e9
OKLCHoklch(72.2% 0.107 263)
RoleInk
find sites →
Hex#6180ba
OKLCHoklch(60.1% 0.096 262)
RoleAccent
find sites →
Hex#a7b1bd
OKLCHoklch(75.6% 0.021 253)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	CoinbaseDisplay	80px	400	1	Aa Bb Cc
h2	CoinbaseSans	16px	600	1.5	Aa Bb Cc
h3	CoinbaseSans	32px	400	1.13	Aa Bb Cc
body	CoinbaseSans	16px	400	1.15	Aa Bb Cc
button	CoinbaseSans	16px	400	1.15	Aa Bb Cc

Spacing scale

4px

Radius scale

0px

16px

56px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0949f1;
  --color-surface: #041c7f;
  --color-ink: #81a5e9;
  --color-accent: #6180ba;
  --color-detail: #a7b1bd;
}

/* CSS variables exposed by source */
:root {
  --cds-font-display: CoinbaseDisplay, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --cds-font-sans: CoinbaseSans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --cds-font-mono: CoinbaseMono, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --full-view-height: 900px;
  --full-view-width: 1440px;
  --cds-font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --cds-font-condensed: CoinbaseCondensed, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --cds-font-text: CoinbaseText, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Coinbase.
Reference design system (extracted from the live site):
- Palette: #0949f1, #041c7f, #81a5e9, #6180ba, #a7b1bd
- Typefaces: CoinbaseDisplay, CoinbaseSans
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/coinbase-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

CoinbaseDisplay

80px

400

Aa Bb Cc

CoinbaseSans

16px

600

1.5

Aa Bb Cc

CoinbaseSans

32px

400

1.13

Aa Bb Cc

body

CoinbaseSans

16px

400

1.15

Aa Bb Cc

button

CoinbaseSans

16px

400

1.15

Aa Bb Cc

:root { --color-dominant: #0949f1; --color-surface: #041c7f; --color-ink: #81a5e9; --color-accent: #6180ba; --color-detail: #a7b1bd; } /* CSS variables exposed by source */ :root { --cds-font-display: CoinbaseDisplay, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --cds-font-sans: CoinbaseSans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --cds-font-mono: CoinbaseMono, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --full-view-height: 900px; --full-view-width: 1440px; --cds-font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --cds-font-condensed: CoinbaseCondensed, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --cds-font-text: CoinbaseText, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

Build a landing page in the visual style of Coinbase. Reference design system (extracted from the live site): - Palette: #0949f1, #041c7f, #81a5e9, #6180ba, #a7b1bd - Typefaces: CoinbaseDisplay, CoinbaseSans - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/coinbase-com