Mercury Design System

Overview

Mercury's marketing surface opens on a deep indigo-black "#171721" — a near-black tinted with violet at oklch h≈284, never pure "#000000" — overlaid with atmospheric mountain photography that bleeds into the hero. Inverted text "#ededf3" carries the entire reading surface, with "#c3c3cc" as the secondary register and "#272735" doing the hairline work. The single brand voltage, indigo "#5266eb", appears exactly once per band as the "Open account" pill — --surface-primary in Mercury's CSS variable layer, used as fill on the CTA and as --text-primary for inline links. Two pale-periwinkle accents, "#9cb4e8" and "#cdddff", appear in gradient washes and product-mockup highlights but are kept off interactive elements. The light track exists — --background-default is "#fbfcfd" — but the authenticated dashboard product is where it runs, not the marketing top of funnel.

Inverted canvas as signature: Where most business-banking sites (Stripe, Brex, Wise) default to a white marketing surface with indigo accents, Mercury runs the inverse and trusts atmospheric photography to do the warmth. The dark canvas is not a dark-mode toggle; it is the default state of the brand. Weight 420 as quiet signal: Mercury's body register sits at the non-standard weight 420 — between Arcadia's regular (400) and medium-equivalent (480) — a typographic tell that the brand has commissioned a proprietary type system rather than pulled a stock weight off Google Fonts. Positive-tracked display: Display sizes 28–65px carry +0.42px to +0.48px letter-spacing, the inverse of the negative-tracked Sohne/Inter convention that dominates fintech. Arcadia Display is the brand's editorial register, allowed to breathe.

Key Characteristics:

• Dark canvas as default — every marketing surface lives on "#171721", with the light "#fbfcfd" reserved for the authenticated dashboard.
• Single voltage CTA — indigo "#5266eb" fills the "Open account" pill (--surface-primary), one filled button per band, never two.
• Arcadia at weight 420 — Mercury's body register is the non-standard 420, sitting between conventional regular and medium weights.
• Positive 0.42–0.48px letter-spacing on display — Arcadia Display headings track outward, inverting the negative-tracked fintech default.
• 32px pill radius for CTAs on a 4px base — the radius scale collapses to four values (4 / 8 / 12 / 32) plus a 40px softened card variant.
• Atmospheric mountain photography — the hero ships as a wide horizontal photograph bleeding into "#171721", not a CSS gradient.
• Scene cards — product mockups composite as "#1e1e2a" elevated panels (--surface-inverted) with 12px corners, rather than the bordered white cards of the Stripe-era convention.

Colors

Source pages: home (/), top nav and hero, the "Everything you do with money" scene strip, the 300K+ testimonial band, the four-card product feature grid.

Brand & Accent

• Indigo ({colors.primary} — "#5266eb") — frequency 3 (bg). Used as --surface-primary, --text-primary, --border-primary, --border-focus, --surface-magic. Reserved for the "Open account" pill and inline link emphasis — Mercury's load-bearing voltage.
• Indigo Hover ({colors.primary-hover} — "#4354c8") — frequency 0 on the captured surface. Lives in --surface-primary-hover and --surface-magic-hover; the warmer indigo on CTA hover.
• Indigo Active ({colors.primary-active} — "#3442a6") — frequency 0. Lives in --surface-primary-active; the pressed-state lift, two stops deeper than primary.
• Indigo Soft ({colors.primary-soft} — "#5266eb") — applied at roughly 10% alpha (background-color: rgba(82, 102, 235, 0.1)). The --surface-emphasized fill on soft tag pills and inline emphasis chips.
• Accent Periwinkle ({colors.accent-periwinkle} — "#9cb4e8") — frequency 6 (bg 2, border 13). The pale-blue decorative accent in mockup highlights and the brand's secondary atmospheric color.
• Accent Mist ({colors.accent-mist} — "#cdddff") — frequency 3 (bg). Lighter periwinkle for gradient washes and the softer product-mockup highlights.

Surface

• Canvas ({colors.canvas} — "#171721") — the marketing default. Deep violet-tinted near-black; the theme-color meta token, never pure black.
• Canvas Elevated ({colors.canvas-elevated} — "#1e1e2a") — frequency 7 (bg). --surface-inverted; the lifted panel color on scene cards, testimonial blocks, and product mockup chrome.
• Canvas Light ({colors.canvas-light} — "#fbfcfd") — the authenticated-dashboard default. Reserved for inputs, the email-capture pill, and the rare light-track marketing surface.
• Surface Default ({colors.surface-default} — "#ededf3") — frequency 614. --surface-default; the inverted-light panel fill on feature cards when the brand needs a light interlude.
• Surface Secondary ({colors.surface-secondary} — "#f4f5f9") — --background-secondary; the cooler off-white sub-fill on stacked light cards.
• Surface Hover ({colors.surface-hover} — "#dddde5") — --surface-default-hover; the press lift on light surface cards.

Text

• Ink Default ({colors.ink-default} — "#ededf3") — --text-default-inverted; carries all reading text on the dark canvas. Off-white, slightly cool, never pure "#ffffff".
• Ink Emphasized ({colors.ink-emphasized} — "#1e1e2a") — frequency 7 (bg). --text-emphasized; the dark text token used when the brand inverts onto a light surface.
• Ink Subdued ({colors.ink-subdued} — "#c3c3cc") — frequency 225. --text-subdued-inverted; helper text, captions, footer copy, table labels.
• Ink Disabled ({colors.ink-disabled} — "#70707d") — --text-disabled; mid-gray neutral, only for unavailable controls.

Hairlines

• Hairline ({colors.hairline} — "#272735") — --border-emphasized; the 1px border on scene cards against the dark canvas. Just lifted from the canvas, intentionally low-contrast.
• Hairline Subdued ({colors.hairline-subdued} — "#c3c3cc") — --border-default-inverted; the lighter hairline on inverted-light cards.

Semantic

• Error ({colors.error} — "#d03275") — --text-error, --icon-error, --border-error. A pink-magenta, never red — the brand's deliberate inversion of the universal validation-red default.

Typography

Font Family

Mercury runs two proprietary families: arcadia for body, UI, and captions, and arcadiaDisplay for headings and the hero. Both ship as variable fonts with non-standard weights — 360 (light-display), 400 (regular), 420 (UI default), and 480 (display medium). The 420 weight is the brand's quiet typographic signature — neither regular nor medium, the kind of weight you only get when you commission a custom type system.

When Arcadia is unavailable, fall back to Inter Variable at weight 420 with positive 0.4px tracking on display sizes — Inter's variable axis is the closest open-source analogue to Arcadia's modulation, though it lacks the slight serif-leaning silhouette of the Arcadia Display tier. Avoid Helvetica, Roboto, and SF Pro — all three are too geometric for Mercury's slightly humanist Arcadia look.

Hierarchy

Principles

• Weight 420 carries UI. The button, nav, input, and email-capture pill all render at 16px / 420. Bumping to 500 reads as too institutional; dropping to 400 reads as too generic.
• Positive tracking on display. Display tiers carry +0.42px to +0.48px letter-spacing at 28–42px sizes, inverting the negative-tracked fintech default. The hero at 49px and the wide-breakpoint 65px revert to 0 tracking.
• Two-family economy. Arcadia handles every UI surface; arcadiaDisplay handles every heading 24px and up. Don't mix Arcadia regular into display sizes or arcadiaDisplay into body sizes.
• Hero disclaimer is caption type. The "Mercury is a fintech company, not an FDIC-insured bank" line at the bottom of the hero renders at 12px / 400 / +0.24px — the same caption token used for footer fine print.

Note on Font Substitutes

Arcadia is proprietary and not licensed for redistribution. Inter Variable at weight 420 with letter-spacing: 0.4px on display tiers is the closest open-source analogue. For body sizes, Inter at weight 420 is the canonical substitute; for display sizes, Inter at 480 with positive tracking approximates the Arcadia Display rhythm.

Layout

Spacing System

• Base unit: 4px, with 12px / 20px / 32px doing most of the mid-range work.
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 20px · {spacing.lg} 32px · {spacing.xl} 40px · {spacing.2xl} 72px · {spacing.3xl} 112px.
• Section padding: 72–112px vertical on marketing surfaces (--hero-padding-default 72px, --layout-padding-lg 112px); 32–40px on dashboard / product surfaces.
• Card internal padding: 32px on scene cards and feature cards; 20px on compact product-mockup cards; 40px on the testimonial card.
• Nav padding: 0px 32px horizontal — the --column-gap-listings 32px is the brand's repeating horizontal rhythm.

Grid & Container

• Mercury's CSS layer declares --grid-max-width: 1952px and --grid-total-columns: 16 with --grid-gutters: 32px — a 16-column grid is wider than the Stripe-era 12-column default.
• --navbar-height: 72px, --navbar-banner-height: 49px, --subnav-height: 48px — the chrome stacks predictably.
• Pricing collapses 4-up → 2-up → 1-up at 1024 / 768 breakpoints.

Whitespace Philosophy

Mercury runs vertical air generously — the hero --hero-padding-default is 72px and major section gaps run 112px. Inside cards the rhythm tightens to 32px. The dark canvas does the heavy lifting; whitespace is what holds the photography and the scene cards apart, not borders.

Elevation & Depth

Decorative Depth

The atmospheric photography IS Mercury's depth system on the hero. The mountain image bleeds into "#171721" with no harsh edge, creating a horizon that reads as depth without a literal gradient. Below the fold, the brand switches to surface-ladder elevation — --surface-default "#171721" at level 0, --surface-inverted "#1e1e2a" at level 1, hairlines "#272735" doing the rest. Drop shadows are reserved for the rare floating panel above a scene card and stay subtle.

Shapes

Border Radius Scale

Photography Geometry

The hero atmospheric photograph runs full-bleed edge to edge with no rounded corners. Product UI scene composites sit inside {rounded.md} 12px containers. Customer logo strips (Supabase, Linear, Lovable, partiful, ElevenLabs, phantom, Bogey Bros) render as plain wordmarks against {colors.canvas} with no card chrome — the brand trusts the logos themselves to do the visual work.

Components

Buttons

button-primary — the system-wide CTA, exactly one filled pill per band.

• Background {colors.primary} ("#5266eb"), text {colors.on-primary} ("#ffffff"), type {typography.body-default} (16px / 420), padding 0 20px, height 40px, rounded {rounded.lg} 32px.
• Hover state button-primary-hover shifts background to {colors.primary-hover} ("#4354c8"); pressed state button-primary-pressed to {colors.primary-active} ("#3442a6").

button-secondary — the outline-style alternative on the dark canvas.

• Background {colors.canvas} ("#171721"), text {colors.ink-default} ("#ededf3"), 1px {colors.hairline} border, same pill geometry as primary.

Inputs & Forms

email-capture-pill — the hero email-capture pill with the embedded "Open account" CTA.

• Background {colors.canvas-light} ("#fbfcfd"), text {colors.ink-emphasized}, type {typography.body-default} (16px / 420), padding 0 0 0 20px, height 46px, rounded {rounded.lg} 32px. The filled button-primary sits flush-right inside the pill — the brand's signature double-component.

text-input — standard form field.

• Background {colors.canvas-light}, text {colors.ink-emphasized}, 1px {colors.hairline-subdued} border, padding 0 20px, height 46px, rounded {rounded.lg} 32px.
• Focus state text-input-focused: border swaps to {colors.primary} ("#5266eb").

Navigation

top-nav — full-width nav floating over the atmospheric hero photography.

• Background {colors.canvas} ("#171721", or transparent on first paint), text {colors.ink-default}, padding 0 32px, height 72px (--navbar-height). Logo wordmark on the left, primary nav (Products, Solutions, Resources, About, Pricing) center, Log in plus button-primary on the right.

nav-link — individual nav cell.

• Type {typography.body-relaxed} (16px / 400), padding 8px 12px, height 32px, rounded {rounded.xs} 4px. Hover lifts to a 10%-opacity indigo background.

Cards & Containers

card-scene — product mockup scene card on the dark canvas.

• Background {colors.canvas-elevated} ("#1e1e2a"), text {colors.ink-default}, padding 32px, rounded {rounded.md} 12px, 1px {colors.hairline} border. Contains nested mini-mockups: account table, transaction row, transfer rule strip.

card-product-mockup — compact product-feature card (Cards, Bills, Invoicing, Receipts).

• Background {colors.canvas-elevated}, padding 20px, rounded {rounded.md}. Renders a single product screenshot above a 2-line label and 3-line description.

card-feature-light — feature card on the inverted-light surface track.

• Background {colors.surface-default} ("#ededf3"), text {colors.ink-emphasized} ("#1e1e2a"), padding 32px, rounded {rounded.md}. Used sparingly — the brand prefers the dark scene-card.

card-testimonial — customer testimonial block with quote, photo, name, and title.

• Background {colors.canvas-elevated}, type {typography.body-lg} (21px / 360), padding 40px, rounded {rounded.md} 12px. Contains a category pill ("SaaS"), a 4-line quote, a photo, and a 2-line attribution.

Pills, Tags, and Chips

pill-tag-soft — soft indigo tag, the only place the indigo voltage runs as a fill outside of the CTA.

• Background {colors.primary-soft} ("#5266eb") at 10% alpha, text {colors.primary} ("#5266eb"), type {typography.caption}, padding 4px 8px, rounded {rounded.sm} 8px.

Signature Components

hero-disclaimer — the fine-print line beneath the atmospheric hero ("Mercury is a fintech company, not an FDIC-insured bank…").

• Background {colors.canvas}, text {colors.ink-subdued}, type {typography.caption} (12px / 400 / +0.24px), padding 0 32px, height 41px (--hero-disclaimer-height). Width capped at --hero-disclaimer-width 950px.

logo-strip-cell — customer-logo strip cell.

• Background {colors.canvas}, padding 20px, no card chrome. Each wordmark sits flat against the dark canvas at roughly equal optical weight.

footer — site-wide footer.

• Background {colors.canvas} ("#171721"), text {colors.ink-subdued} ("#c3c3cc"), type {typography.caption}, padding 112px 32px. Holds product / company / resources / legal columns plus the FDIC-bank disclosure.

link-inline — inline link emphasis on the dark canvas.

• Text {colors.primary} ("#5266eb") rendered in {typography.body-relaxed}, no underline by default; underline on hover.

Do's and Don'ts

Do

• Reserve {colors.primary} ("#5266eb") for filled CTAs, inline links, and focus rings — one filled pill per band.
• Default every marketing surface to {colors.canvas} ("#171721") with {colors.ink-default} ("#ededf3") text — the dark canvas is the brand, not a dark-mode toggle.
• Render display tiers at weight 480 with positive 0.42–0.48px tracking — the outward-tracked Arcadia Display is the typographic signature.
• Use the 420 weight for UI body (buttons, nav, inputs) — the non-standard weight is part of the brand identity.
• Pair every product feature with a scene card on {colors.canvas-elevated} ("#1e1e2a") at {rounded.md} 12px — the brand argues "look at the actual product."
• Treat the atmospheric mountain photography as the hero's depth medium; below the fold, switch to surface-ladder elevation.

Don't

• Don't use "#000000" anywhere as a fill or text color — Mercury's "black" is "#171721" or "#1e1e2a"; pure black breaks the violet-tinted color logic.
• Don't use "#ffffff" as a marketing text color — the dark canvas pairs with {colors.ink-default} ("#ededf3"), a slightly cool off-white. Pure white is reserved for --text-on-primary on indigo fills only.
• Don't render body-default at weight 400 or 500 — the brand specifically uses weight 420. Snapping to a stock weight removes the typographic tell.
• Don't apply negative letter-spacing to display sizes — Mercury's display tracks positive (+0.42px to +0.48px). The negative-tracked default reads as Stripe / Sohne, not Mercury.
• Don't fill {colors.accent-periwinkle} ("#9cb4e8") or {colors.accent-mist} ("#cdddff") on buttons or interactive surfaces — they are decoration-only, scoped to gradient washes and mockup highlights.
• Don't use a 16px or 20px corner radius on cards — the brand's scale collapses to 4 / 8 / 12 / 32 / 40, with 12px doing all the mid-range card work.
• Don't render {colors.error} ("#d03275") as a conventional red — the brand specifically uses pink-magenta for error states, and swapping in a red hex breaks the violet-tinted color logic of the whole system.

Responsive Behavior

Breakpoints

Touch Targets

• Pill buttons at 40px height hit ≥ 40×40px on desktop; on mobile the brand bumps the email-capture pill to 46px to maintain comfortable thumb-targets.
• Form fields stay at 46px minimum height across all breakpoints.

Collapsing Strategy

• Display tiers stair-step 65 → 49 → 42 → 32 → 28px through the breakpoints.
• The atmospheric mountain photography re-crops on mobile to keep the horizon line visible; the desk-and-chair foreground simplifies away.
• Product mockup grid stair-steps 4-up → 2-up → 1-up.
• Top-nav inline links collapse into a hamburger drawer at <768px; the button-primary "Open account" CTA stays visible.

Known Gaps

• Dashboard semantic palette: loading states, transaction-status pills, balance-change deltas, and the green/red financial-direction colors live inside the authenticated dashboard product (app.mercury.com) and are not part of this marketing-system spec.
• Hover state colors for nav and cards: only the button hover (button-primary-hover) and active (button-primary-pressed) states are documented. Card and nav hover specs were not reliably extractable from the captured marketing surfaces.
• Atmospheric hero photography stops: the mountain image is treated here as photography, not a CSS gradient. The precise tonal map of the photograph (horizon hue, sky-to-fog ratio, fog-to-canvas blend) is not tokenized.
• Sub-brand accents: Mercury Treasury, Mercury Personal, Mercury Venture Debt each carry small accent shifts on top of the core indigo system; only the consolidated marketing palette is captured here.
• Motion specs: the scene-card hover lift, the email-capture pill focus transition, and the testimonial carousel auto-advance use --default-transition-duration 0.15s with --ease-in-out cubic-bezier(0.4,0,0.2,1), but the full motion token set (stagger durations, spring physics) is not captured.
• Frosted-glass surface: the brand declares --surface-frosted and --background-frosted as low-alpha glass-blur layers atop a slate-violet base, but the frosted-panel composition (where it's used, what sits behind it) was not visible on the captured home surface, so the panel is not tokenized in the components block.