designlang
Brand guidelines #0000ee

June 25, 2026

coinbase.com

A reading of the visual language at https://coinbase.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
B 86/100
Tokens
4 colours · 5 sizes
Generated
designlang
Chapter 00

Essence

coinbase.com is an Outlaw brand — kinetic, cool, bold, modern and rebellious — anchored on #0000ee and Arial, mixed motion.

Outlaw archetype · 60% fit · vs Magician

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 31% confidence
Material language
flat
Imagery style
icon-only
Component library
unknown
Stack
unknown
Voice tone
neutral
Chapter 03

Colour

1 primary · 3 neutrals · 4 total

Primary #0000EE
RGB
0, 0, 238
HSL
240°, 100%, 47%

Neutrals

#313131
#000000
#D9D9D9

Full palette

#313131
#0000EE
#000000
#D9D9D9

WCAG 100% · 0 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

1 families · 5 sizes · 2 weights

Display
Arial
Body
Arial
Weights
400, 600

Specimen

Quick brown fox jumps over the lazy dog.
AaBbCc 0123456789 ?!&

Scale

StepSizeSample
t00 40px Quick brown fox jumps over t
t01 24px Quick brown fox jumps over t
t02 16px Quick brown fox jumps over t
t03 13.3333px Quick brown fox jumps over t
t04 12px Quick brown fox jumps over t
Chapter 05

Spacing

Base 8px · 2 steps captured

Rhythm

8px
128px
Chapter 06

Shape

1 radii · 0 elevation tiers

Border radii

50px
Chapter 07

Iconography

unknown · 0 captured

Library
unknown
Confidence
0%
Stroke style
—

No icons captured.

Chapter 08

Motion

Feel: mixed · 0 durations · 0 easings

Chapter 09

Components

unknown · 0 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →
Chapter 10

Voice

neutral · — · —

Chapter 11

Accessibility

100% WCAG 2.1 contrast
0 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #0000ee;
  --font-display: "Arial";
  --space-base: 4px;
  --radius-md: 50px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#0000ee' },
      fontFamily: { display: ['Arial', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '50px' },
    },
  },
};

Run npx designlang pack coinbase.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.