# Mercury — Design Reference

> A midnight bank lit by one soft periwinkle pill

**Theme:** dark · **Measured from:** mercury.com (English, 1440 px)

Mercury looks like a bank at dusk. The hero is a full-bleed cinematic photo (a desk alone on a misty hilltop) under a dark top-down fade, and everything after it sits on an ink-blue `#171721`. Text is never white: headings are a pale lavender `#ededf3`, body is a soft `#c3c3cc`, and the type uses unusual in-between weights (360, 420, 480) that feel calm rather than bold. There is one action color, periwinkle `#5266eb`, always as a fully rounded pill. Structure comes from thin gray hairlines and quiet dark panels, not from color; the few light surfaces are off-white artwork tiles inside feature cards. No shadows anywhere.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Periwinkle | `#5266eb` | Primary action: the "Open account" pill — the only saturated color |
| Midnight | `#171721` | Page canvas after the hero |
| Lavender White | `#ededf3` | Headings and emphasized text — never pure white |
| Mist Gray | `#c3c3cc` | Body copy, nav links, descriptions |
| Frost | `#f4f5f9` | Text on photos, lightest highlights |
| Pewter | `#70707d` | Solid divider lines |
| Haze | `#afb2ce` | Secondary button: 20% fill, 36% border |
| Panel | `#1e1e2a` | Dark product UI panels |
| Panel Raised | `#272735` | Rows and hovers inside panels |
| Ice Blue | `#cdddff` | Small tinted highlights inside product UI |

**Hero overlay:** `linear-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 40%, transparent 100%)` over the photo so the nav and headline stay readable. The photo's muted pinks and greens are imagery, not palette.

## Typography

**arcadiaDisplay** for headlines and **arcadia** for text (both proprietary). Substitutes: **Inter Tight** 400/500 for display and **Inter** (variable) for text, from Google Fonts.

- Weights sit between the usual steps: **480** for headlines, **360** for large lead text, **400** body, **420** buttons.
- Display sizes get slight **positive** tracking (about `+0.01em`): 42px → 0.42px, 32px → 0.48px.
- Section headlines are short, two lines, sentence case: "Everything you do with money. All in one place."

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 49px | 480 | 1.1 | 0 |
| Heading | 42px | 480 | 1.15 | 0.42px |
| Heading small | 32px | 480 | 1.15 | 0.48px |
| Subheading | 28px | 360 | 1.2 | 0.42px |
| Title | 24px | 480 | 1.2 | 0.48px |
| Body large | 18px | 360 | 1.35 | 0 |
| Body | 16px | 400 | 1.4 | 0 |
| Button | 16px | 420 | 1 | 0 |
| Caption | 12px | 400 | 1.4 | 0.24px |

## Shape and spacing

- **Buttons and inputs:** full pills (32–40px radius on 40–46px tall controls).
- **Cards and panels:** 12px radius; small chips and tags 4px.
- **Base unit:** 4px. Scale: 4, 8, 12, 20, 32, 48, 80, 160.
- **Content width:** about 1024px, centered, with generous side margins.
- **Section gap:** about 160px.
- **Shadows:** none. Separate with hairlines and surface steps.

## Components

### Primary button
Periwinkle `#5266eb` fill, white text, 32px radius (pill), padding `0 20px`, 40px tall, arcadia 420 at 16px. No shadow, no icon. Label: "Open account".

### Secondary button
Haze at 20% `rgba(175,178,206,.2)` fill, Lavender White text, 1px `rgba(175,178,206,.36)` border, 40px radius, same size as the primary. Label: "Launch demo".

### Email capture
A translucent pill input (32px radius, 46px tall) with "Enter your email" placeholder, and the Periwinkle "Open account" pill nested inside its right end. The secondary pill sits 8px to the right of the whole group.

### Navigation
Transparent over the hero photo. Logo mark plus spaced-out uppercase "MERCURY" wordmark left; centered links (Products, Solutions, Resources, About with chevrons, Pricing) in Frost 16px; "Log in" as text and the Periwinkle pill at the right.

### Feature accordion
Left column: a two-line headline, then a stack of rows separated by Pewter hairlines. The active row shows a small dot, a Lavender White title and a Mist Gray paragraph; inactive rows show only the title. Right column: a dark Panel mockup (accounts list with balances, small superscript cents) that changes with the active row.

### Feature card
Off-white artwork tile (12px radius) showing one product fragment (a virtual card, a bill, an invoice form, an upload bar), then a 16px/480 Lavender White title and a Mist Gray description below, directly on Midnight. Laid out 2×2.

### Testimonial carousel
Full-width photo of a founder, 12px radius, a small category chip top-left, the quote in white bottom-left with name and title, and three thin progress bars below as pagination.

## Do

- Keep the canvas `#171721` and text in lavender-tinted grays.
- Use Periwinkle only for the primary pill.
- Make every button and input a full pill.
- Use the in-between weights (360/480) instead of regular/bold.
- Separate content with thin hairlines and dark panel steps.
- Open with a single full-bleed, atmospheric photo.

## Don't

- Don't use pure white text or pure black backgrounds.
- Don't add drop shadows or glows.
- Don't use square or slightly rounded buttons.
- Don't introduce bright secondary colors; the page is near-monochrome.
- Don't set headlines bold or with negative tracking.
- Don't use gradients as decoration (only the dark overlay on the hero photo).

## Layout

Centered hero over a full-bleed photo: transparent nav, a 49px headline "Radically different banking", an 18px subline, then the email pill with the nested primary button and the "Launch demo" pill. After that the page turns Midnight: a two-column feature accordion with a product panel, a centered 42px social-proof headline over a row of customer logos and a testimonial carousel, a 2×2 grid of feature cards, a centered pull quote, and more two-column feature rows. Text columns are narrow; whitespace is generous.

## Agent prompt guide

- Text: `#ededf3` · Body: `#c3c3cc` · Dividers: `#70707d`
- Canvas: `#171721` · Panels: `#1e1e2a` · Raised: `#272735`
- Action: `#5266eb` · Secondary: `rgba(175,178,206,.2)` with `rgba(175,178,206,.36)` border

Example prompts:

1. "Primary button: background #5266eb, white text, 32px radius, padding 0 20px, 40px tall, Inter 420 16px, no shadow."
2. "Section headline on #171721: Inter Tight 480 42px, line-height 1.15, letter-spacing 0.42px, color #ededf3; body below in Inter 360 18px #c3c3cc."
3. "Feature accordion: rows separated by 1px #70707d lines; active row has a small dot, a #ededf3 title and a #c3c3cc paragraph; a #1e1e2a panel with 12px radius on the right shows the matching product UI."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-periwinkle: #5266eb;
  --color-midnight: #171721;
  --color-lavender-white: #ededf3;
  --color-mist-gray: #c3c3cc;
  --color-frost: #f4f5f9;
  --color-pewter: #70707d;
  --color-haze: #afb2ce;
  --color-panel: #1e1e2a;
  --color-panel-raised: #272735;
  --color-ice-blue: #cdddff;

  /* Fonts */
  --font-display: 'arcadiaDisplay', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'arcadia', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 49px;
  --text-display--line-height: 1.1;
  --text-display--font-weight: 480;
  --text-heading: 42px;
  --text-heading--line-height: 1.15;
  --text-heading--letter-spacing: 0.42px;
  --text-heading--font-weight: 480;
  --text-heading-sm: 32px;
  --text-heading-sm--line-height: 1.15;
  --text-heading-sm--letter-spacing: 0.48px;
  --text-heading-sm--font-weight: 480;
  --text-subheading: 28px;
  --text-subheading--line-height: 1.2;
  --text-subheading--letter-spacing: 0.42px;
  --text-subheading--font-weight: 360;
  --text-title: 24px;
  --text-title--line-height: 1.2;
  --text-title--letter-spacing: 0.48px;
  --text-title--font-weight: 480;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.35;
  --text-body-lg--font-weight: 360;
  --text-body: 16px;
  --text-body--line-height: 1.4;
  --text-body--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1;
  --text-button--font-weight: 420;
  --text-caption: 12px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0.24px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 32px;
  --radius-inputs: 32px;
  --radius-cards: 12px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1024px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-periwinkle: #5266eb;
  --color-midnight: #171721;
  --color-lavender-white: #ededf3;
  --color-mist-gray: #c3c3cc;
  --color-frost: #f4f5f9;
  --color-pewter: #70707d;
  --color-haze: #afb2ce;
  --color-panel: #1e1e2a;
  --color-panel-raised: #272735;
  --color-ice-blue: #cdddff;

  /* Fonts */
  --font-display: 'arcadiaDisplay', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'arcadia', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 49px;
  --text-display--line-height: 1.1;
  --text-display--font-weight: 480;
  --text-heading: 42px;
  --text-heading--line-height: 1.15;
  --text-heading--letter-spacing: 0.42px;
  --text-heading--font-weight: 480;
  --text-heading-sm: 32px;
  --text-heading-sm--line-height: 1.15;
  --text-heading-sm--letter-spacing: 0.48px;
  --text-heading-sm--font-weight: 480;
  --text-subheading: 28px;
  --text-subheading--line-height: 1.2;
  --text-subheading--letter-spacing: 0.42px;
  --text-subheading--font-weight: 360;
  --text-title: 24px;
  --text-title--line-height: 1.2;
  --text-title--letter-spacing: 0.48px;
  --text-title--font-weight: 480;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.35;
  --text-body-lg--font-weight: 360;
  --text-body: 16px;
  --text-body--line-height: 1.4;
  --text-body--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1;
  --text-button--font-weight: 420;
  --text-caption: 12px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0.24px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 32px;
  --radius-inputs: 32px;
  --radius-cards: 12px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1024px;
}
```

---

*Measured from https://mercury.com/ on 2026-10-28 by Faundr. Inspired by Mercury; not its official design system and not affiliated with Mercury.*