# Mercury Design System

> High-contrast financial utility anchored by a deep periwinkle primary and expansive, cool-toned grayscale surfaces.

**Source:** https://mercury.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Mercury utilizes a "monochrome-plus" strategy where a single high-voltage periwinkle (`#5266eb`) punctuates a sophisticated palette of deep obsidian (`#1e1e2a`) and cool off-white (`#ededf3`). The system relies on the **Arcadia** and **ArcadiaDisplay** type families, characterized by generous tracking in display sizes and a custom weight of 480 for headings. Layouts are airy and structured, using large corner radii (up to 40px) on feature cards to soften the technical precision of the banking interface. Component density is comfortable, favoring large touch targets and clear semantic separation between interactive elements and content surfaces.

## Signature DNA
1. **The Periwinkle Pulse** (`#5266eb`): Used as the exclusive chromatic signal for primary actions, focus states, and "magic" surfaces across all pages.
2. **Arcadia 480 Weight**: A non-standard semi-bold weight (480) applied to the ArcadiaDisplay family, creating a distinct typographic texture that is neither bold nor medium.
3. **Hyper-Radii Panels**: Large-scale containers use 32px to 40px border radii, creating a "pill-container" aesthetic that distinguishes Mercury from traditional sharp-edged fintech.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--text-default` | `#272735` | Primary text, dark icon strokes | 218 | 1.0 | Computed Style |
| `--surface-default` | `#ededf3` | Page background, secondary buttons | 162 | 1.0 | `--surface-default` |
| `--surface-inverted` | `#1e1e2a` | Dark mode sections, emphasized text | 9 | 1.0 | `--surface-inverted` |
| `--background-default`| `#ffffff` | Input fields, elevated cards | 9 | 1.0 | `--background-default`|
| `--text-subdued` | `#535461` | Secondary body, captions | 122 | 1.0 | `--text-subdued` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--surface-primary` | `#5266eb` | Primary CTA background, focus border | 21 | 1.0 | `--surface-primary` |
| `--surface-frosted` | `#707393` | Decorative borders, muted inputs | 5 | 1.0 | `--surface-frosted` |
| `accent-periwinkle-light`| `#afb2ce` | Decorative surface (decorative_only) | 14 | 0.8 | Rendered |
| `accent-sky-soft` | `#9cb4e8` | Decorative surface (decorative_only) | 6 | 0.6 | Rendered |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| arcadia | 360, 400, 420, 480, 500 | Body, UI Labels | Inter | Custom/Licensed |
| arcadiaDisplay | 360, 480 | Headlines, Display | Public Sans | Custom/Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-2}` | 65px | 71.8px | normal | 480 | Hero headlines | `p.arcadia-display-2` |
| `{type.h1}` | 57px | 62.7px | normal | 480 | Page titles | `h1.grid` |
| `{type.h2}` | 42px | 48.3px | 0.42px | 480 | Section headers | `h2.grid` |
| `{type.h3}` | 32px | 36.8px | 0.48px | 480 | Sub-sections | `p.grid` |
| `{type.body-lg}` | 18px | 24.3px | normal | 480 | Lead paragraphs | `p.grid` |
| `{type.body}` | 16px | 24px | normal | 400 | Default copy | `section.relative` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Table headers | `thead.sticky` |
| `{type.caption}` | 12px | 16.8px | 0.24px | 480 | Small labels | `span.arcadia-body-5-strong` |

### Principles
1. **Optical Tracking**: Display sizes (42px+) use normal tracking, while sub-headings (24px-32px) use positive tracking (0.42px-0.48px) to maintain airiness.
2. **The 480 Rule**: Headlines almost exclusively use weight 480; weight 500 is reserved for specific UI emphasis.
3. **Inverted Contrast**: On dark surfaces (`#1e1e2a`), text defaults to `#ededf3` rather than pure white to reduce vibration.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.2}` | 8px | 53 |
| `{space.3}` | 12px | 14 |
| `{space.5}` | 20px | 18 |
| `{space.6}` | 24px | 31 |
| `{space.8}` | 32px | 26 |
| `{space.18}`| 72px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.pill}` | 9999px | Primary Buttons | Observed on main CTAs |
| `{radius.panel-lg}` | 40px | Pricing/Feature Cards | `Card` component |
| `{radius.panel-md}` | 32px | Hero Cards | `Card` component |
| `{radius.control}` | 12px | Small UI Surfaces | `Surface` component |
| `{radius.input}` | 4px | Form Fields | `radii` scale |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background: `#5266eb` / Text: `#ffffff` / Radius: `9999px` / Typography: Arcadia 480
**States observed:** Default: `#5266eb` | Hover: `#4354c8` | Active: `#3442a6` | Disabled: `#70707d`

#### Surface
**Role:** Generic UI container
**Pages observed:** All
**Spec:** Background: `transparent` / Text: `#000000` / Radius: `12px` / Border: `0px`
**States observed:** Default | Hover | Active: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product benefits
**Pages observed:** Pricing, About
**Spec:** Background: `rgba(82, 102, 235, 0.1)` / Text: `#272735` / Radius: `40px` / Padding: `0px 20px`
**States observed:** Default: Captured

#### Hero Card
**Role:** Main visual container in hero sections
**Pages observed:** Home, Pricing
**Spec:** Background: `#5266eb` / Text: `#ffffff` / Radius: `32px` / Padding: `0px 20px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Comparison of plans
**Pages observed:** Pricing
**Spec:** Background: `#ededf3` / Text: `#000000` / Radius: `12px` / Padding: `32px`
**States observed:** Default: Captured

#### Inverted Surface
**Role:** Dark mode content blocks
**Pages observed:** Home
**Spec:** Background: `#1e1e2a` / Text: `#ededf3` / Radius: `0px` / Border: `1px solid #ededf3`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 72px |
| Card Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text scales to ~49px |
| Desktop | 1440px | Multi-column grid (up to 4-up cards) |

## Imagery & decoration
Mercury uses high-fidelity photography of workspaces (desks, laptops) often set against natural, atmospheric backgrounds (mountains, mist). UI elements are frequently "frosted" or use subtle transparency (`rgba(82, 102, 235, 0.1)`) to layer information without heavy shadows.

## Do's
- Use weight 480 for all ArcadiaDisplay headlines.
- Apply `#5266eb` only to the primary action on a screen.
- Use 40px corner radii for large feature containers.
- Maintain a `#ededf3` background for secondary content blocks.
- Pair periwinkle accents with cool-toned grays (`#707393`).

## Don'ts
- **Wrong:** Using `#5266eb` for body text. **Right:** Use `#272735`. **Reason:** Contrast and legibility.
- **Wrong:** Using sharp corners (0px) for interactive cards. **Right:** Use 12px or 32px. **Reason:** Brand geometry is rounded.
- **Wrong:** Defaulting to pure white backgrounds for all sections. **Right:** Alternate with `#ededf3`. **Reason:** Mercury's "monochrome" depth relies on off-white layering.

## Similar brands
- Linear (Typographic precision, dark mode depth)
- Ramp (Fintech utility, structured grids)
- Wealthfront (Clean, high-contrast financial UI)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --mercury-primary: #5266eb;
  --mercury-primary-hover: #4354c8;
  --mercury-bg-page: #ededf3;
  --mercury-bg-dark: #1e1e2a;
  --mercury-text-main: #272735;
  --mercury-text-subdued: #535461;
  --mercury-radius-lg: 40px;
  --mercury-radius-pill: 9999px;
}
```

## Agent prompt examples
- "Create a primary button using the Mercury style: periwinkle background #5266eb, white text, 9999px border radius, and Arcadia weight 480."
- "Design a feature card with a 40px corner radius, a background of rgba(82, 102, 235, 0.1), and #272735 text."
- "Generate a section header using ArcadiaDisplay at 42px with a weight of 480 and 0.42px letter spacing."

## Known gaps
- Shadow tokens were not explicitly captured in the CSS variables, though subtle elevation is visible in screenshots.
- Specific mobile-only font size tokens were inferred from scaling rather than direct variable mapping.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://mercury.com | 1440x900 | 2026-06-06 |
| Pricing | https://mercury.com/pricing | 1440x900 | 2026-06-06 |
| About | https://mercury.com/about | 1440x900 | 2026-06-06 |