---
title: "Mercury design system"
variant: extended
source: https://mercury.com/
captured_at: 2026-10-12
theme: dark
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/mercury-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mercury · Design System

> Quiet dark surfaces, vivid blue action, clear financial tools.

**Theme:** dark · **Industry:** fintech · **Source:** https://mercury.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mercury’s homepage pairs a near-black indigo canvas with restrained typography and vivid blue account-opening actions. Spacious feature sections, customer proof and product-interface imagery make business banking feel software-native.

## North star

Keep the deep indigo canvas uninterrupted and use restrained bright accents to make the banking product and next action unmistakably clear.

## Overview

The page is anchored by a continuous deep indigo canvas (#171721), creating a quiet backdrop for pale text and product demonstrations. White appears in the announcement strip and other inverse elements, while brighter blue is reserved for the primary account-opening action. Arcadia provides the main interface typography; Arcadia Display gives headings a softer, spacious editorial character. The layout moves through generous, mostly dark section bands, with centered statements and logo proof alternating with split product features and compact multi-column modules. Product imagery shows financial interfaces and supporting illustrations rather than lifestyle photography, keeping the product itself central. Cards use a slightly lifted dark surface and fine muted borders instead of prominent shadows. The overall contrast is controlled: bright text and accents are focused on navigation, key actions, section headings and selected interface details, while supporting copy stays muted.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Indigo | `#171721` | `--color-midnight-indigo` | brand | Dominant page canvas and continuous background across the homepage sections. |
| Soft Porcelain | `#ededf3` | `--color-soft-porcelain` | neutral | Primary headings, navigation labels, links, button text and high-contrast details on dark backgrounds. |
| Pure White | `#ffffff` | `--color-pure-white` | surface | Announcement strip and inverse or light surfaces; also used for text on the blue primary CTA. |
| Silver Haze | `#c3c3cc` | `--color-silver-haze` | neutral | Muted supporting copy, card text and subdued footer information. |
| Mercury Blue | `#5266eb` | `--color-mercury-blue` | accent | Primary Open account action; the most prominent saturated interface accent. |
| Slate Hairline | `#70707d` | `--color-slate-hairline` | semantic | Fine card and component borders that define edges without breaking the dark surface. |
| Graphite Edge | `#4e4f5f` | `--color-graphite-edge` | semantic | Subtle secondary button and interface outlines, including details in product UI. |
| Shadow Indigo | `#2b2b3a` | `--color-shadow-indigo` | surface | Low-contrast supporting interface details and dark product mockup elements. |
| Raised Night | `#1e1e2a` | `--color-raised-night` | surface | Raised news and content cards against the primary canvas. |

### Semantic aliases

`--color-canvas` → `#171721` (Midnight Indigo) · `--color-surface` → `#ffffff` (Pure White) · `--color-surface-2` → `#1e1e2a` (Raised Night) · `--color-text` → `#ededf3` (Soft Porcelain) · `--color-text-muted` → `#c3c3cc` (Silver Haze) · `--color-border` → `#70707d` (Slate Hairline) · `--color-accent` → `#5266eb` (Mercury Blue) · `--color-on-accent` → `#ffffff` (Pure White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ededf3` | `#171721` | 15.25:1 | AAA |
| `#ededf3` | `#ffffff` | 1.17:1 | fail |
| `#ededf3` | `#1e1e2a` | 14.13:1 | AAA |
| `#c3c3cc` | `#171721` | 10.16:1 | AAA |
| `#c3c3cc` | `#ffffff` | 1.75:1 | fail |
| `#c3c3cc` | `#1e1e2a` | 9.42:1 | AAA |
| `#5266eb` | `#171721` | 3.78:1 | AA-large |
| `#5266eb` | `#ffffff` | 4.71:1 | AA |
| `#5266eb` | `#1e1e2a` | 3.5:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| arcadia | `--font-body` | webfont | 400, 360, 420, 480, 700 | Body copy, navigation, buttons, links, captions and supporting labels. | Inter |
| arcadiaDisplay | `--font-display` | webfont | 480, 360 | Display headlines and section headings. | DM Sans |

- **arcadia:** Use mostly light-to-regular weights; keep case natural and tracking restrained, with compact button and navigation labels.
- **arcadiaDisplay:** Use a soft display style at measured medium weights, open line spacing and subtle positive tracking on section headings.

### Type scale — Perfect Fourth (ratio ≈ 1.295, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 65.5px | 480 | 1.1 | 0 | — | arcadiaDisplay | Large opening or major campaign headlines. |
| h1 | 42px | 480 | 1.15 | 0.01em | — | arcadiaDisplay | Primary page headline and key top-level statements. |
| h2 | 32px | 480 | 1.15 | 0.015em | — | arcadiaDisplay | Major feature and section headings. |
| h3 | 28px | 360 | 1.2 | 0.015em | — | arcadiaDisplay | Subsection and feature-card headings. |
| h4 | 24px | 480 | 1.2 | 0.02em | — | arcadiaDisplay | Smaller feature titles and content-card headings. |
| body | 18px | 360 | 1.35 | 0 | — | arcadia | Feature explanations, testimonials and supporting paragraphs. |
| caption | 12px | 400 | 1.4 | 0.02em | — | arcadia | Footnotes, disclaimers and compact legal labels. |
| button | 16px | 420 | 1 | 0 | — | arcadia | Primary and secondary action labels. |
| nav | 16px | 420 | 1 | 0 | — | arcadia | Header navigation and footer navigation labels. |
| link | 16px | 420 | 1 | 0 | — | arcadia | Inline actions, resource links and disclosures. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 72, 128 px.
- Section rhythm 32px · element gap 32px · card padding 32px · max content width 1024px.

The measured content max width is 1024px, with a spacious density and a consistent 8px-based spacing system. A long single-page sequence keeps the same dark canvas while changing alignment by content: centered brand statements, split feature/product presentations, and three-column benefit groups. Navigation spans the top; later footer content uses multiple columns. Sections have generous breathing room, with measured 32px section and element gaps and 32px card padding. Keep copy blocks readable and avoid crowding product imagery.

## Shape & elevation

- Radius: button `4px` · card `12px` · media `50%` · nav `4px` · link `4px` · xs `4px` · sm `8px` · md `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface favors flat, dark surfaces over noticeable shadows. Separate raised content with the measured #1e1e2a card surface and fine #70707d or #4e4f5f outlines. Layering is most visible in product mockups and the lighter announcement strip; keep the page itself visually calm.

## Imagery

Product-interface imagery is the defining visual: dark banking dashboards, cards and account views appear beside feature copy. The opening section includes media, while later blocks mix interface images and small illustrations. Use clean, controlled crops and keep mockups visually integrated with the dark canvas. Customer logos and interface graphics provide proof and detail; avoid introducing unrelated lifestyle photography or decorative imagery.

## Components

### Announcement strip

A narrow white band above the dark navigation, with centered announcement copy and a small directional cue.

### Primary account CTA

Use #5266eb with white text for the Open account action; the measured component has a pill-like rendered shape.

### Top navigation

Place the Mercury mark at left, product and company links across the center, and login plus account action at right.

### Product feature split

Pair concise copy and feature selectors with a larger banking-interface mockup; maintain generous space around both.

### Benefit modules

Use three-column groups for getting started, payments and financial benefits, with headings, short descriptions and product visuals.

### News cards

Show press highlights on #1e1e2a cards, with muted borders, restrained text and consistent interior padding.

### Footer and disclosures

Arrange grouped navigation links in columns, then separate dense legal text with a fine horizontal rule.

### Measured component styles

- **Primary button** (“Open account”): background #5266eb · text #ffffff · radius 32px · padding 0px 20px · 420 16px arcadia
- **Secondary button**: background #353643 · text #ededf3 · border 1px solid #4e4f5f · radius 3.35544e+07px · padding 0px · 420 16px arcadia
- **Link** (“not an FDIC-insured bank”): transparent background · text #ededf3 · radius 4px · padding 0px · 400 12px arcadia
- **Card** (“Mercury hits $5.2B valuation”): background #1e1e2a · text #000000 · radius 12px · padding 32px · 400 16px arcadia
- **Navigation item** (“Products Solutions Resources About Prici”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px arcadia

## Do

- Use #171721 as the dominant canvas across the page.
- Reserve #5266eb for the primary account-opening action.
- Keep headings pale and supporting text visibly muted.
- Pair banking-product visuals with the feature they explain.
- Use measured spacing to preserve a spacious rhythm.
- Keep card edges subtle and shadows understated.

## Don't

- Do not add bright section backgrounds absent from the page.
- Do not use the accent blue as a large decorative field.
- Do not crowd product mockups with surrounding copy.
- Do not style every link as a primary button.
- Do not introduce heavy shadows or thick borders.
- Do not substitute lifestyle imagery for product-led visuals.

## Agent prompt

Build a new Mercury-style fintech page with a continuous Midnight Indigo (#171721) canvas. Use Soft Porcelain (#ededf3) for clear headings and navigation, Silver Haze (#c3c3cc) for supporting copy, and Mercury Blue (#5266eb) only for the main action. Use Arcadia-like sans typography, with a softer display face for large editorial headings. Keep the layout spacious within the measured 1024px content width: alternate centered proof statements with split feature-and-dashboard sections and compact multi-column benefit groups. Use dark interface imagery that feels integrated into the canvas. Raise selected cards with Raised Night (#1e1e2a), defining their edges with restrained Slate Hairline (#70707d). Keep the header simple, actions easy to identify, section transitions calm, and the footer organized into link columns followed by dense disclosures.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered opening heading and hero media within the dark canvas. | primary account action, product demonstration, feature selector | dark canvas, centered heading, banking interface media |
| 2 | product-showcase | Continuation of the opening product presentation, retaining a single dark section band. | interactive product demo, feature exploration | dark canvas, interface-led media |
| 3 | logo-cloud | Centered customer statement above a horizontal line of logos. | social proof, brand recognition | centered heading, logo row, dark canvas |
| 4 | testimonials | Three-column testimonial and feature area with customer imagery. | customer quote, credibility through attribution | three-column grid, portrait or brand imagery, dark canvas |
| 5 | feature-split | Two-column feature presentation with product imagery beside explanatory content. | feature explanation, product demonstration | split layout, card interface imagery, dark canvas |
| 6 | testimonials | Single-column customer quote within an open, spacious section. | testimonial, named attribution | large quote, minimal decoration |
| 7 | feature-grid | Three aligned benefit columns with headings, descriptions and supporting media. | scan benefits, start application | three-column grid, feature illustrations, action links |
| 8 | feature-grid | Three-column financial benefit section with supporting product visuals. | compare benefits, explore product links | three-column grid, benefit headings, product imagery |
| 9 | feature-split | Two-column product-and-copy area with feature descriptions. | feature discovery, product demonstration | split layout, dashboard imagery, dark canvas |
| 10 | stats | Centered statement above four horizontally aligned proof points. | trust through metrics, scan company proof | centered heading, four-column statistics |
| 11 | feature-grid | Three-column protection explanation with supporting visuals. | explain coverage, explore protection details | three-column layout, illustrative media, inline link |
| 12 | content-feed | Three-column grid of press or news cards. | browse press highlights, open related coverage | raised dark cards, card links, news headings |
| 13 | cta | Centered banking statement above business and personal account pathways. | open account, contact sales, choose audience | centered heading, two-column choices, text links |
| 14 | footer | Multi-column footer navigation with groups of product, platform and resource links. | browse site categories, find account and help links | four-column grid, grouped link lists, dark canvas |
| 15 | footer | Two-column disclosure block with a heading, horizontal divider and dense legal copy. | review banking disclosures, access linked policies | small legal text, fine divider, two-column layout |

## Source CSS custom properties (selected)

```css
--wipeOut-duration: .15s;
--tab-fade-duration: .3s;
--media-tab-fade-duration: .5s;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mercury-com