mercury.com design system

---
version: alpha
name: "mercury.com"
description: "Design system extracted from https://mercury.com/ on 2026-09-28"
colors:
  background: "#171721"
  surface: "#272735"
  foreground: "#ededf3"
  muted-foreground: "#c3c3cc"
  primary: "#5266eb"
  on-primary: "#ffffff"
  border: "#e2e3ed"
typography:
  headline-display:
    fontFamily: "arcadiaDisplay"
    fontSize: "49px"
    fontWeight: 480
    lineHeight: "1.11"
  headline-lg:
    fontFamily: "arcadiaDisplay"
    fontSize: "42px"
    fontWeight: 480
    lineHeight: "1.15"
    letterSpacing: "0.42px"
  headline-md:
    fontFamily: "arcadia"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "arcadia"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: "0.24px"
  label-md:
    fontFamily: "arcadia"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: "0.24px"
  button:
    fontFamily: "arcadia"
    fontSize: "16px"
    fontWeight: 420
    lineHeight: "1"
rounded:
  none: "0px"
  2xl: "32px"
  sm: "4px"
  lg: "12px"
  md: "8px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "40px"
  9: "72px"
  10: "128px"
components:
  button-ghost:
    backgroundColor: "#171721"
    textColor: "#ededf3"
    typography: "{typography.button}"
    rounded: "40px"
    height: "40px"
    padding: "0px 20px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "32px"
    height: "40px"
    padding: "0px 20px"
  button-secondary:
    backgroundColor: "#afb2ce33"
    textColor: "#ededf3"
    typography: "{typography.button}"
    rounded: "40px"
    height: "40px"
    padding: "0px 20px"
  input:
    backgroundColor: "transparent"
    rounded: "32px"
    height: "46px"
---

# mercury.com

## Overview

Online Business Banking For Startups, Small Businesses & Scaling Companies: Everything you do with money. All in one place. Apply in 10 minutes for business banking that transforms how you operate.

Soft, well-rounded controls, one soft shadow for depth, confident display type at 49px / 480, a single blue accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 2162 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#171721` | Page background |
| surface | `#272735` | Cards, panels, raised or recessed surfaces |
| foreground | `#ededf3` | Primary text |
| muted-foreground | `#c3c3cc` | Secondary text, captions |
| primary | `#5266eb` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| border | `#e2e3ed` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#171721`, `#fcfcfa`, `#eff0f5`, `#5266eb`, `#272735`, `#cdddff`.

Gradients in use: `linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%)`.

The accent `#5266eb` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **arcadiaDisplay** for h1, h2: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **arcadia** for body, label, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | arcadiaDisplay | 49px | 480 | 1.11 | normal |
| headline-lg | arcadiaDisplay | 42px | 480 | 1.15 | 0.42px |
| headline-md | arcadia | 24px | 600 | 1.4 | normal |
| body-md | arcadia | 12px | 400 | 1.4 | 0.24px |
| label-md | arcadia | 12px | 400 | 1.4 | 0.24px |
| button | arcadia | 16px | 420 | 1 | normal |

Type scale in use: 12px, 16px, 18px, 28px, 42px, 49px. Base body size 12px.

The H1 renders at 49.3472px / 480, center aligned, up to 672px wide. Sample: "Radically different banking".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40, 72, 128 (px).
- Flex and grid gaps: 4, 12, 32, 40 px.
- Content max width: 1024px, centred.
- Breakpoints: 640px, 768px, 1024px, 1536px, 1952px.
- Header: 72px tall, relative, background `rgba(0, 0, 0, 0)`; 4 nav links at 16px / 400 (Mercury logoThe logo for Mercury, featuring a circular emblem with abstract, int · Pricing · Log in · Open account).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.05) 0px 8px 12px 0px, rgba(0, 0, 0, 0.05) 0px 12px 20px 0px`

## Shapes

- Buttons: 32px
- Inputs: 32px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, 2xl 32px, sm 4px, lg 12px, md 8px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#171721`, so place it on that colour), text `#ededf3`, border none, radius 40px, height 40px, padding 0px 20px, 16px / 420. Sample label: "Products".

### Button, primary

Background `#5266eb`, text `#ffffff`, border none, radius 32px, height 40px, padding 0px 20px, 16px / 420. Sample label: "Open account".

### Button, secondary

Background `#afb2ce33`, text `#ededf3`, border 1px solid #afb2ce5c, radius 40px, height 40px, padding 0px 20px, 16px / 420. Sample label: "Launch demo".

### Input

Height 46px, background `transparent`, border 0px solid #ededf3, radius 32px, 16px text, padding 0px 0px.

### Link

Colour `#ededf3`, no underline at rest, weight 400.

## Dark Mode

The site is dark by default and no light mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1024px | 384px | 16px | 49.3px, 1 line, center | 72px, 4 links, 1 CTA | media behind/overlapping text | 2→1 col; 3→1 col; 2→1 col | content-width |
| laptop 1024px | 712px | 280px | 16px | 38.2px, 1 line, center | 72px, 4 links, 1 CTA | media behind/overlapping text | 2→1 col; 3→1 col; 2→1 col | content-width |
| tablet 768px | 720px | 147px | 16px | 31.4px, 1 line, center | 0px, 0 links | media behind/overlapping text | 2→1 col; 2→2 col; 3→3 col | 4 full-width |
| phone 390px | 342px | 24px | 16px | 28px, 1 line, center | 0px, 0 links | media behind/overlapping text | 2→1 col; 3→1 col; 2→2 col | 15 full-width |

- H1 goes 49.3px → 28px (57%), 1 → 1 lines.
- Nav never collapses to a hamburger (0 links still visible at 390px).
- Body text stays 16px at every width.
- Phone side gutter 24px.
- 15 buttons stretch full-width on phones.
- Horizontal overflow at 1440, 1024px (the source has a responsive bug; do not copy it).

## Interaction & Motion

130 elements carry transitions; typical 0.3s with cubic-bezier(0, 0, 0.2, 1), mostly on color, background-color, border-color. 7 running keyframe animations (translateUp 0.67s 1; fadeIn 0.67s 1; fadeOutBlur 0.5s 1).

- Hover on button-primary ("Open account"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to | 0.3s | cubic-bezier(0, 0, 0.2, 1).
- Hover on button-secondary ("Open account"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to | 0.3s | cubic-bezier(0, 0, 0.2, 1).
- Hover on nav-link ("Pricing"): background transparent → #9cb4e847; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to | 0.3s | cubic-bezier(0, 0, 0.2, 1).
- Hover on input: no visible change; cursor text.
- Focus on button-primary: outline 2px solid rgb(156, 180, 232), offset 4px.
- Focus on input: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Tooltip triggers exist (16 × aria-describedby, 20 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- No dropdown menus found in the header.
- 18 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#5266eb` for actions and focus; never paint large areas with it.
- Do keep body text at 12px in arcadia and headings in arcadiaDisplay.
- Do match corner radii per element class (buttons 32px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.