Mercury

Mercury sets large arcadiaDisplay headlines on a dark deep indigo canvas. Indigo (#5266eb) is reserved for actions, on buttons with 32px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 4px, with 12px and 8px on smaller elements.

mercury.com ↗

Colors

Indigo

#5266eb

Primary actions and links

Pale Indigo

#ededf3

Secondary accent and highlights

Deep Indigo

#171721

Page canvas

Void

#000000

Headlines and body copy

Silver Mist

#c3c3cc

Supporting colour

Soft Deep Indigo

#1e1e2a

Supporting colour

Bone White

#fcfcfa

Surface or divider

Soft Bone White

#ffffff

Surface or divider

Deep Bone White

#f4f5f9

Surface or divider

Type scale

DisplayRadically different bankingarcadiaDisplay · 49px · 480

HeadingLoved by 300K+ of the most ambitious entrepreneurs on the planetarcadiaDisplay · 42px · 480

SubheadingBusiness banking & morearcadia · 16px · 400

BodyPricingarcadia · 16px · 420

NavMercury logoThe logo for Mercury, featuring a circular emblem with abstract, interconnectearcadia · 16px · 400

Buttons

Open accountOpen accountButtonOpen account

Style reference measured from the public page at mercury.com on 2026-10-12 for design education. Mercury and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Mercury — Style Reference
> Mercury sets large arcadiaDisplay headlines on a dark deep indigo canvas. Indigo (#5266eb) is reserved for actions, on buttons with 32px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 4px, with 12px and 8px on smaller elements.

**Theme:** dark · **Source:** https://mercury.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Indigo | `#5266eb` | `--color-accent` | Primary actions and links |
| Pale Indigo | `#ededf3` | `--color-secondary` | Secondary accent and highlights |
| Deep Indigo | `#171721` | `--color-canvas` | Page canvas |
| Void | `#000000` | `--color-ink` | Headlines and body copy |
| Silver Mist | `#c3c3cc` | `--color-surface-1` | Supporting colour |
| Soft Deep Indigo | `#1e1e2a` | `--color-surface-2` | Supporting colour |
| Bone White | `#fcfcfa` | `--color-surface-3` | Surface or divider |
| Soft Bone White | `#ffffff` | `--color-surface-4` | Surface or divider |
| Deep Bone White | `#f4f5f9` | `--color-surface-5` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | arcadiaDisplay | 49px | 480 | 1.10 | 0 |
| Heading | arcadiaDisplay | 42px | 480 | 1.15 | 0.010em |
| Subheading | arcadia | 16px | 400 | 1.50 | 0 |
| Body | arcadia | 16px | 420 | 1.00 | 0 |
| Nav | arcadia | 16px | 400 | 1.50 | 0 |

Font families on the page: arcadia, arcadiaDisplay. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 4px, 12px, 8px, 40px, 32px
- Primary button: background `#5266eb`, text `#ffffff`, radius 32px, padding 0px 20px, 16px / 420

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer