---
version: alpha
name: Base
description: "Coinbase-blue punched through paper white — institutional crypto dressed as calm infrastructure."
colors:
  on-surface-variant: "#9A9A9A"
  on-surface: "#171717"
  surface: "#FFFFFF"
  outline: "#EFEFEF"
  primary: "#0000FF"
  signature-blue: "#0052FF"
  blue: "#002ef4"
  blue-light: "#0057ea"
  blue-ultra-light: "#0086ed"
  blue-tint: "#9AB8FF"
  paper: "#FAFAFA"
  surface-grey: "#F8F8F8"
  border-strong: "#E5E5E5"
  ink-black: "#000000"
  near-black: "#0A0B0D"
  muted: "#6F6F6F"
typography:
  caption:
    fontFamily: baseSansText
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  ui-small:
    fontFamily: baseSansText
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: baseSansText
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: baseSansText
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subheading:
    fontFamily: baseSansText
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading:
    fontFamily: baseSansText
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  section:
    fontFamily: baseSansText
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  display:
    fontFamily: baseSans
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  hairline-micro: 0.5px
  tag-chip: 2px
  small-control: 4px
  button: 8px
  card-panel: 10px
  large-surface: 40px
  pill: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 40px
---
# Base — Style Reference
> Coinbase-blue punched through paper white — institutional crypto dressed as calm infrastructure.

**Theme:** light

Base builds its identity on one pure gesture: an unmixed electric blue (`#0000FF` / the signature `#0052FF`) set against near-total whitespace. The page is mostly empty — a huge geometric display headline in near-black floats over an open canvas, and colour is spent only where it converts: the primary pill, the logo square, the single inline link. Everything else is a disciplined greyscale ramp from `#171717` foreground down through `#6F6F6F` and `#9A9A9A` muted text, bordered by the faintest `#EFEFEF` hairlines. Type is a custom geometric grotesque (baseSans) carrying a 72px headline at heavy contrast, with a monospace companion (baseSansMono) nodding to the on-chain heritage. Shapes are binary: fully-round pills (`9999px`) for action, tight `8px`/`10px` corners for structure. The result reads like a financial-grade product page — trustworthy, spacious, blue only when it means it.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Base Blue | `#0000FF` | `--color-base-blue` | Primary action + logo mark. The one saturated colour on the page; reserved for the CTA pill and brand square, never body text. |
| Signature Blue | `#0052FF` | `--color-blue-signature` | Base's canonical brand blue — inline links, active borders, focus. Editorial accent, not a background wash. |
| Blue (P3) | `#002ef4` | `--base-blue-p3` | Wide-gamut display-P3 blue for capable screens; the true brand blue on modern displays. |
| Blue Light (P3) | `#0057ea` | `--base-blue-light-p3` | Lighter P3 step for gradients / hover. |
| Blue Ultra-Light (P3) | `#0086ed` | `--base-blue-ultra-light-p3` | Brightest P3 step — glints and gradient tips only. |
| Blue Tint | `#9AB8FF` | `--color-blue-tint` | Soft blue fill for subtle highlight surfaces; the only pastel in the system. |
| Canvas White | `#FFFFFF` | `--background` | Page canvas. Dominant surface — the design is >80% white. |
| Paper | `#FAFAFA` | `--color-paper` | Announcement bar / faint raised surface, one luminance step off canvas. |
| Surface Grey | `#F8F8F8` | `--color-surface` | Card / inset panel fill. |
| Divider | `#EFEFEF` | `--color-border` | Hairline borders on secondary pills and section rules. |
| Border Strong | `#E5E5E5` | `--color-border-strong` | Slightly heavier divider for grouped controls. |
| Foreground | `#171717` | `--foreground` | Primary text + display headline. The working "black". |
| Ink Black | `#000000` | `--color-ink` | True black — logo/glyph strokes and max-contrast text. |
| Near-Black | `#0A0B0D` | `--color-near-black` | Coinbase-heritage cool near-black for dense UI text. |
| Muted | `#6F6F6F` | `--color-muted` | Subheadline + secondary copy grey. |
| Faint | `#9A9A9A` | `--color-faint` | Placeholder / trusted-by logo grey; the quietest legible tone. |

Additional greys in the ramp: `#787878` and `#1D1D1D` *(inferred ramp neighbours — present in the scan's text colours)*.

## Tokens — Typography
### baseSans — the display grotesque · `--font-display`
- **Substitute:** Inter, Helvetica Neue, Arial, ui-sans-serif
- **Weights:** 100–600 (display headline runs heavy; loaded weight family spans 100 baseSans up)
- **Sizes:** 72px display · 32px / 28px section heads · 20px lead
- **Line height:** ~1.0–1.05 at display size (tight, two-line stack)
- **Letter spacing:** slightly negative at display size; neutral below
- **Role:** The 72px hero headline ("The blockchain for global finance.") — a clean geometric grotesque set tight and near-black, doing all the visual work on an empty canvas.

### baseSansText — the reading face · `--font-body`
- **Substitute:** Inter, Helvetica Neue, system-ui, sans-serif
- **Weights:** 400 (body), 600 (emphasis / buttons)
- **Sizes:** 18px / 16px body · 14px UI · 12px caption
- **Line height:** ~1.5 body
- **Letter spacing:** neutral
- **Role:** Nav links, subheadline, button labels, and paragraph copy — the same family softened for text sizes. Muted grey (`#6F6F6F`) for supporting lines.

### baseSansMono — the on-chain companion · `--font-mono`
- **Substitute:** Geist Mono, JetBrains Mono, ui-monospace, monospace
- **Weights:** 100, 300, 400, 500 (normal + italic)
- **Sizes:** 14px / 12px
- **Line height:** ~1.4
- **Letter spacing:** neutral (monospace-fixed)
- **Role:** Addresses, code, numeric/technical labels — a nod to the chain underneath the marketing surface. (Geist Mono is also loaded as a system fallback.)

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| UI / Small | 14px | 1.45 | 0 | `--text-sm` |
| Body | 16px | 1.5 | 0 | `--text-base` |
| Lead | 18px | 1.5 | 0 | `--text-lead` |
| Subheading | 20px | 1.4 | 0 | `--text-xl` |
| Heading | 28px | 1.2 | -0.01em | `--text-2xl` |
| Section | 32px | 1.15 | -0.01em | `--text-3xl` |
| Display | 72px | 1.0 | -0.02em | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (generous whitespace)
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 20px | `--spacing-lg` |
| xl | 40px | `--spacing-xl` |
### Border Radius
| Element | Value |
|---------|-------|
| Hairline / micro | 0.5px |
| Tag / chip | 2px |
| Small control | 4px |
| Button (square) | 8px |
| Card / panel | 10px |
| Large surface | 40px |
| Pill (CTA, nav) | 9999px |
### Shadows
| Name | Value | Token |
|------|-------|-------|
| Soft glow | `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px` | `--shadow-glow` |
### Layout
- **Page max-width:** centered content column (~1100px) on an unbounded white canvas
- **Section gap:** generous — large vertical air between hero, trust strip, and cards
- **Card padding:** ~20–40px
- **Element gap:** 12–20px between adjacent controls

## Components
### Primary CTA Pill
**Role:** The single converting action ("Build on Base" / "Get Started").
Solid Base Blue `#0000FF` background, white label, fully-round `9999px` radius, padding ~`0px 20px 0px 18px`, 16px weight-400 label with a small leading glyph chip. The only saturated element in view — blue means "go".

### Secondary Pill
**Role:** Alternate action ("Get Base App").
White `#FFFFFF` fill, `1px #EFEFEF` hairline border, `9999px` radius, foreground `#171717` label, padding ~`0px 16px 0px 20px`. Same silhouette as the primary but drained of colour — hierarchy by fill, not shape.

### Navigation Bar
**Role:** Top-level product/solutions/developers menus.
Transparent over white, black `400`-weight baseSansText links with chevron dropdown indicators, evenly spaced. Right-aligned blue "Get Started" pill anchors the bar. No underline, no background — resting nav is invisible chrome.

### Announcement Bar
**Role:** Timely notice above the nav ("Private transactions are live on Base").
Full-width `#FAFAFA` strip, centered `#171717` text, a divider, then a `#0052FF` inline "Learn More ›" link. Dismissible via a right-aligned close glyph.

### Display Headline
**Role:** The hero statement.
baseSans at 72px, near-black `#171717`, tight ~1.0 line-height stacked to two lines, slightly negative tracking. Carries the page single-handedly — no image behind it.

### Subheadline
**Role:** Supporting one-liner under the hero.
baseSansText ~18–20px, muted `#6F6F6F`, weight 400 with selective 600 emphasis on key phrases. Centered, short measure.

### Logo Mark
**Role:** Base brand identity, top-left.
A solid `#0000FF` rounded square — no wordmark. Minimal, iconic, the same blue as the CTA so brand and action rhyme.

### Card / Panel
**Role:** Below-fold content blocks.
`#F8F8F8`/white surface, `10px` radius, `#171717` text, `1px #EFEFEF` border where separation is needed; optional soft glow shadow `rgba(0,0,0,0.2) 0 0 18px`.

### Inline Link
**Role:** Text links inside copy.
Signature Blue `#0052FF`, weight 400, no underline at rest — colour alone signals interactivity. Reserved; body stays greyscale.

### Trusted-By Logo Strip
**Role:** Social proof ("Trusted by 1,000+ businesses").
Row of partner logos rendered in faint monochrome grey (`#9A9A9A`), evenly gapped, de-saturated so no partner mark competes with Base Blue.

### Chevron Glyph
**Role:** Directional affordance in links, nav, and dropdowns.
1.5px `currentColor` stroke chevron; on the CTA it animates a trailing dash on hover. Small, functional, monochrome.

## Do's and Don'ts
### Do
- Spend `#0000FF` only on the primary action and the logo — one saturated element per view.
- Keep the canvas overwhelmingly white (`#FFFFFF` / `#FAFAFA`); let whitespace do the framing.
- Set the hero in baseSans at display size with tight, near-1.0 line-height and negative tracking.
- Use `9999px` pills for actions and `8–10px` corners for structural cards — the two shape modes never blur.
- Drain supporting elements (partner logos, secondary buttons, captions) to greyscale so blue always wins the eye.

### Don't
- Don't add a second accent colour — the P3 blues are one blue at different gamuts, not a palette.
- Don't tint large surfaces blue; `#9AB8FF` is a highlight, never a background wash.
- Don't underline links by default — `#0052FF` colour is the only affordance needed.
- Don't crowd the hero; the design's strength is emptiness, not density.
- Don't set body copy in the display face — baseSansText and baseSansMono own everything under 20px.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page background — the dominant surface. |
| 1 | Paper | `#FAFAFA` | Announcement bar, faint raised strip. |
| 2 | Surface | `#F8F8F8` | Cards, inset panels. |
| 3 | Border | `#EFEFEF` | Hairline dividers and control borders. |

## Elevation
Depth is conveyed almost entirely by luminance and hairlines, not shadow. Surfaces step in tiny increments (`#FFFFFF` → `#FAFAFA` → `#F8F8F8`) with `1px #EFEFEF` borders drawing the edges. A single soft glow shadow (`rgba(0,0,0,0.2) 0 0 18px`) exists for the rare floating element (dropdown/modal), but the flat, borderless page is the default. This is a paper-flat system: blue for emphasis, greys for structure, shadow as an exception.

## Imagery
Restrained. The hero carries no photograph or illustration — type on white is the whole composition. Below the fold, imagery is limited to monochrome partner logos (drained to grey) and small product/glyph marks. The one true brand image is the blue logo square itself. Any imagery should stay flat, high-contrast, and never introduce a competing colour against Base Blue.

## Layout
Centered content column on an unbounded white canvas — full-bleed background, contained text. Vertical rhythm is loose: a tall empty hero, then a whisper-quiet trusted-by strip, then structured card rows further down. Navigation is a transparent top bar with dropdown menus and a right-anchored CTA pill, above a dismissible announcement strip. The grid is simple and generous; the design leans on air, not density, to feel premium and financial-grade.

## Typography Signature
Two-mode by design. Mode one is the **display grotesque** — baseSans at 72px, near-black, tracked tight to ~-0.02em with a ~1.0 line-height so the two-line headline reads as one confident block. Mode two is **quiet text** — baseSansText at 14–18px in muted grey, and baseSansMono for anything on-chain (addresses, code, numerics). The signature move is the contrast: an oversized, almost brutal headline sitting above deliberately small, calm supporting type — the size jump itself is the hierarchy. Weight does the rest (400 vs 600); there is no italic, no decorative face. It works because the emptiness around the headline amplifies its scale.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#171717` / surface: `#F8F8F8` / border: `#EFEFEF` / accent: `#0052FF` / primary action: `#0000FF`
## Example Component Prompts
1. **Primary CTA pill**: A fully-round (`9999px`) button, solid `#0000FF` background, white 16px label reading "Build on Base", ~`18px/20px` horizontal padding, a small square glyph chip before the label. No shadow at rest.
2. **Hero headline**: A centered two-line display headline in a geometric grotesque (baseSans / Inter fallback) at 72px, colour `#171717`, line-height 1.0, letter-spacing -0.02em, over a pure white canvas with nothing behind it.
3. **Secondary pill**: A `9999px` white button, `1px #EFEFEF` border, `#171717` 16px label ("Get Base App"), sitting beside the blue primary — identical shape, no fill colour.
4. **Announcement bar**: A full-width `#FAFAFA` strip, centered `#171717` text, a thin divider, then a `#0052FF` "Learn More ›" inline link and a right-aligned close glyph.
5. **Trusted-by strip**: A centered caption "Trusted by 1,000+ businesses." in `#9A9A9A`, above an evenly-gapped row of partner logos rendered in flat monochrome grey.

## Similar Brands
- **Coinbase** — Base's parent; the same near-black-on-white restraint and a single decisive blue used only for action.
- **Stripe** — kindred financial-grade minimalism: huge whitespace, tight geometric display type, colour spent sparingly.
- **Linear** — shares the flat, hairline-bordered, luminance-stepped surface system and disciplined greyscale ramp.
- **Vercel** — the same paper-white canvas, black display type, and near-monochrome-plus-one-accent discipline.
- **Mercury** — fintech calm: generous air, muted greys, and a single saturated brand colour reserved for CTAs.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Blue */
  --color-base-blue: #0000FF;
  --color-blue-signature: #0052FF;
  --base-blue-p3: #002ef4;
  --base-blue-light-p3: #0057ea;
  --base-blue-ultra-light-p3: #0086ed;
  --color-blue-tint: #9AB8FF;
  /* Colors — Surfaces */
  --background: #FFFFFF;
  --color-paper: #FAFAFA;
  --color-surface: #F8F8F8;
  --color-border: #EFEFEF;
  --color-border-strong: #E5E5E5;
  /* Colors — Ink & Greys */
  --foreground: #171717;
  --color-ink: #000000;
  --color-near-black: #0A0B0D;
  --color-dark: #1D1D1D;
  --color-muted: #6F6F6F;
  --color-muted-2: #787878;
  --color-faint: #9A9A9A;

  /* Typography — Families */
  --font-display: 'baseSans', 'Inter', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'baseSansText', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'baseSansMono', 'Geist Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lead: 18px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-3xl: 32px;
  --text-display: 72px;
  --leading-tight: 1.0;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 40px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-sm: 4px;
  --radius-button: 8px;
  --radius-card: 10px;
  --radius-lg: 40px;
  --radius-pill: 9999px;

  /* Shadow */
  --shadow-glow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Blue */
  --color-base-blue: #0000FF;
  --color-blue-signature: #0052FF;
  --color-base-blue-p3: #002ef4;
  --color-base-blue-light-p3: #0057ea;
  --color-base-blue-ultra-light-p3: #0086ed;
  --color-blue-tint: #9AB8FF;
  /* Colors — Surfaces */
  --color-background: #FFFFFF;
  --color-paper: #FAFAFA;
  --color-surface: #F8F8F8;
  --color-border: #EFEFEF;
  --color-border-strong: #E5E5E5;
  /* Colors — Ink & Greys */
  --color-foreground: #171717;
  --color-ink: #000000;
  --color-near-black: #0A0B0D;
  --color-dark: #1D1D1D;
  --color-muted: #6F6F6F;
  --color-muted-2: #787878;
  --color-faint: #9A9A9A;

  /* Typography — Families */
  --font-display: 'baseSans', 'Inter', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'baseSansText', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'baseSansMono', 'Geist Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lead: 18px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-3xl: 32px;
  --text-display: 72px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 40px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-sm: 4px;
  --radius-button: 8px;
  --radius-card: 10px;
  --radius-lg: 40px;
  --radius-pill: 9999px;
}
```