Skip to main content
Back to Gallery

Mercury · Full Page

Mercury

The calmest banking interface in fintech — a lavender accent that sells trust the way a private bank sells discretion, soft-shadow layers, Arcadia. Neighbour to Revolut Business.

mercury.com/Added
Mercury Full Page — desktop screenshot

Editorial disclaimer

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

Mercury is the most composed banking interface in the fintech category — a landing that sells trust the way a private bank sells discretion, through calm rather than persuasion. We catalogued it because it resolves the hardest tension in financial design: looking premium and feeling safe at the same time, without a single loud gesture. If you are building anything that asks a founder to move money, this is the reference for how restraint reads as competence.

Design decisions observed

  • Lavender as the single brand signal — a soft indigo carries the entire accent layer where most fintech defaults to corporate blue. It reads modern and human without ever shouting, and it appears so sparingly that you trust it.
  • Elevation through whisper-soft shadow, not borders — Mercury stacks multiple low-opacity shadow layers (single-digit alpha, large blur) so cards float a millimeter off the canvas. Nothing has a hard edge; everything feels physically gentle.
  • A custom serif-adjacent display family doing the emotional work — the headings carry a quiet editorial warmth that separates Mercury from the geometric-sans monoculture of the category. The brand sounds like a person, not a dashboard.
  • Generous radii on a calm grid — 32 and 40px corners on hero surfaces make the product feel rounded, approachable, and unhurried, while a tight 4/8/12 scale keeps controls precise. Soft where it reassures, sharp where it must perform.
  • Motion that exhales rather than springs — every transition rides a decelerating ease-out curve at a third of a second. The page never snaps or bounces; it settles, which is exactly the feeling you want around money.
  • Restraint as the whole thesis — illustrations are abstract and few, copy is short, the palette is nearly monochrome with one accent. Mercury trusts that calm is the most premium signal a bank can send.

What to study

  • How a single soft-lavender accent can carry an entire fintech brand — study where it appears (and, more importantly, where it refuses to). The discipline of using one warm indigo at under 3% surface area is the lesson most money apps never learn.
  • Layered soft-shadow elevation as the alternative to borders — Mercury proves you can build depth and hierarchy with stacked low-alpha shadows alone. Learn the recipe: many layers, single-digit opacity, generous blur, zero hard line.
  • Pairing a warm display family with a calm UI sans — the editorial heading voice against the quiet body text is what makes Mercury feel human in a category obsessed with looking like a spreadsheet.
  • The decelerating motion signature — a constrained set of ease-out curves at calm durations. Notice how nothing springs; everything settles. That single choice is most of why the page feels trustworthy.

What to avoid

  • Don't read Mercury's calm as permission to go flat and lifeless — the warmth lives in the shadow softness and the display family. Strip those and you get a sterile dashboard, not a premium bank.
  • Don't over-apply the lavender accent — its power is its scarcity. The moment it becomes a fill instead of a signal, the premium read collapses into generic SaaS.
  • Don't add bouncy or spring motion to make it feel 'alive' — overshoot reads as playful, and playful is the wrong register for someone deciding where to keep their company's cash.

Taste notes

Mercury feels like a well-lit private office — everything is soft-cornered, gently shadowed, and quiet, with one warm lavender note that you notice only after you've already decided to trust the room. The interface earns its premium status by subtraction: no gradients screaming for attention, no hard borders, no motion that startles. Money design usually overcompensates with either austerity or spectacle; Mercury finds the narrow third path where calm itself becomes the luxury signal.

Lineage & references

  • Sits shoulder-to-shoulder with the modern startup-banking cohort — Ramp, Brex, and Revolut Business — but where Ramp leans operator-efficient and Brex leans corporate-bold, Mercury stakes out the calm-premium corner of that same neighborhood.
  • Part of the post-2020 'fintech as lifestyle brand' generation (alongside Wise, Monzo, and Cash App's design-forward eras) — products that treat a bank account as something with taste, not just a utility.
  • Belongs to the broader warm-minimalist SaaS lineage that Stripe and Notion seeded — restrained surfaces, soft elevation, editorial typography — but applied to the highest-trust surface of all: where founders keep their runway.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Calm-premium fintech: a near-monochrome canvas warmed by a single soft-lavender accent (#5266eb, hsl 232°). Trust is delivered through whisper-soft layered shadows instead of borders, generous corner radii (32–40px on hero surfaces, 4–12px on controls), a warm editorial display family (Arcadia Display) paired with a quiet UI sans (Arcadia), and a decelerating ease-out motion vocabulary that never springs or snaps. Restraint over spectacle, softness over edges, settling over bouncing — the whole language is designed to feel safe around money.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (near-white #ededf3 foreground on a soft dark #1e1e2a canvas, with a single lavender/indigo accent #5266eb used homeopathically — under 3% surface area), the warm typographic pairing (an editorial display family for headings + a calm UI sans for body and controls), the soft-shadow elevation model (multi-layer single-digit-opacity shadows instead of hard borders), the generous-but-bounded radius scale (4/8/12/32/40px), the calm ease-out motion curve cubic-bezier(0, 0, 0.2, 1) at 0.15–0.3s, and the restrained illustration posture across every page and component I ship. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.

Overview

Layout
Grid
Content width
Bounded
Framing
Layered
Grid strength
Soft

Color philosophy

Near-monochrome calm warmed by a single lavender-indigo accent. Foreground is near-white #ededf3 (the dominant reading layer at ~1707 measured occurrences) over a soft dark canvas #1e1e2a; the only brand color is #5266eb (slate-7, hsl 232° 79% 62%) used homeopathically. Cool neutral #70707d handles borders and metadata; a pale sky #cdddff appears as a soft tint accent. No gradients do heavy lifting — the one captured gradient is a black-to-transparent image scrim, not decoration.

Mode strategydual-paired
  • Near-white #ededf3 (the most frequent surface color) carries all primary reading — dominant foreground layer
  • Soft dark canvas #1e1e2a for dark sections; the warmth (slight violet bias, hsl 240°) keeps it from feeling clinical
  • Lavender accent #5266eb used only for focus, key emphasis, and rare brand moments — surface area kept under ~3%
  • Cool neutral #70707d (hsl 240° 5% 46%) for hairline borders, captions, and de-emphasized metadata
  • Pale sky #cdddff as a soft background tint — used for gentle highlight zones, never as a fill on text
  • Light text variant #edecfb (slight violet bias) on the darkest surfaces for harmonized contrast

Gradients (paste-ready)

linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%)

Typography rules

  • Two-family system: Arcadia Display (warm editorial display family) for headings + Arcadia (calm UI sans) for body, labels, and controls. Both self-hosted, preloaded as woff2 from the Mercury CDN — no Google Fonts.
  • Display sizes from Arcadia Display: 82.912px / 36px / 32px / 28px / 24px headings, mostly at weight 480. The warm display voice is the brand's emotional signature — never substitute a geometric sans here.
  • Body + UI from Arcadia: 16–18px reading text at weights 360 / 420 / 480 / 500; small UI labels at 12–14px. The 360 and 420 weights give the calm, slightly-light feel — do not coarsen to 400/700.
  • Letter-spacing is near-zero everywhere except display: 0.36–0.48px positive tracking on large Arcadia Display headings, and small positive tracking (0.07–0.24px) on uppercase small labels. Body tracking is normal.
  • Line-height is comfortable, not tight: ~1.35–1.5 on body (16px → 21.6px, 18px → 24.3px), ~1.1–1.15 on large display (82.912px → 91.2px). The page breathes — never crush body leading below 1.3.
  • Heading weight 480 is the signature display weight — a touch below a conventional 500. Hold this stepping; it is part of why the type reads premium rather than corporate.
  • Paragraph max ~55–65 ch at 16–18px body; bounded content rails (608px container) naturally enforce comfortable measure.

Spacing rules

  • 4px base unit. Scale: 1 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 56 / 72 / 80 px — the 1px step is reserved for hairline borders only, the real rhythm starts at 4.
  • 32px is the dominant spacing token (by far the most frequent at ~186 occurrences) — it is the default gap and section padding. Reach for it first.
  • Container max-width 1376px (xl) with a 1320px (lg) bounded variant; narrow content clusters use 608px (md) and 448px (sm) rails for comfortable reading measure.
  • Grid/flex gutters cluster at 32 and 40px for section-level layout, 12px for dense control groups, 4px for tight inline pairs — pick from the captured set, no magic numbers.
  • Section vertical rhythm leans on 40 / 56 / 72 / 80px; card padding sits at 20–32px. Generosity is the signature — do not tighten section spacing to compress the page.

Design tokens

Palette, type, and space — all agent-readable.

8 colors · hex / rgb / hsl / oklch

Save PNG
  • background
    59%
    • HEX#EDEDF3
    • RGBrgb(237, 237, 243)
    • HSLhsl(240, 20%, 94%)
    • OKLCHoklch(94.78% 0.0080 286.25)
  • foreground
    38%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • background
    1%
    • HEX#EDECFB
    • RGBrgb(237, 236, 251)
    • HSLhsl(244, 65%, 95%)
    • OKLCHoklch(94.82% 0.0201 289.08)
  • background
    1%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • background
    1%
    • HEX#1E1E2A
    • RGBrgb(30, 30, 42)
    • HSLhsl(240, 17%, 14%)
    • OKLCHoklch(24.06% 0.0228 284.56)
  • neutral
    0%
    • HEX#70707D
    • RGBrgb(112, 112, 125)
    • HSLhsl(240, 5%, 46%)
    • OKLCHoklch(54.96% 0.0200 285.72)
  • accent
    0%
    • HEX#5266EB
    • RGBrgb(82, 102, 235)
    • HSLhsl(232, 79%, 62%)
    • OKLCHoklch(57.03% 0.2003 271.98)
  • accent
    0%
    • HEX#CDDDFF
    • RGBrgb(205, 221, 255)
    • HSLhsl(221, 100%, 90%)
    • OKLCHoklch(89.64% 0.0499 265.39)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 14 nodes captured; depth capped at 6 for readability.

  • body
  • └─ div
  • └─ div
  • └─ div
  • ├─ div
  • │ └─ div
  • │ └─ Nav
  • ├─ Main
  • │ ├─ Section (×10)
  • │ └─ [+3 more]
  • ├─ div
  • │ └─ div
  • │ └─ Footer
  • └─ Section

Accessibility

WCAG contrast matrix.

40 combinations · 20 pass AA · 16 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#EDEDF3#00000018.01AAAAAA-96background on foreground
Aa
#000000#EDEDF318.01AAAAAA+96foreground on background
Aa
#000000#EDECFB17.99AAAAAA+96foreground on background
Aa
#EDECFB#00000017.99AAAAAA-96background on foreground
Aa
#FFFFFF#1E1E2A16.48AAAAAA-106background on background
Aa
#1E1E2A#FFFFFF16.48AAAAAA+103background on background
Aa
#000000#CDDDFF15.38AAAAAA+86foreground on accent
Aa
#CDDDFF#00000015.38AAAAAA-86accent on foreground

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total26Lazy loaded88%webp22jpg2unknown1png1

Hero image

https://mercury.com/_next/image?url=https%3A%2F%2Fcdn.mercury.com%2Ffem%2F_next%2Fstatic%2Fmedia%2Fhero_start_frame_xl.42d06f20.jpg&w=3840&q=75
Format
UNKNOWN
Dimensions
3840×1440
Loading
eager
srcset
yes
srcset descriptor
/_next/image?url=https%3A%2F%2Fcdn.mercury.com%2Ffem%2F_next%2Fstatic%2Fmedia%2Fhero_start_frame_sm.19c6178c.jpg&w=1920&q=75 1x, /_next/image?url=https%3A%2F%2Fcdn.mercury.com%2Ffem%2F_next%2Fstatic%2Fmedia%2Fhero_start_frame_sm.19c6178c.jpg&w=3840&q=75 2x
Page type
  • Full Page
Industry
  • fintech
  • saas
Theme
  • dark
Added
  • 2026-06-23

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.