Mercury DESIGN.md

Design System Inspiration of Mercury

Overview

Visual Theme & Atmosphere

Mercury brings business banking and financial operations into one interface: accounts, payments, invoices, bill pay, spend monitoring and cash-flow information. Its company page describes banking becoming the nucleus of those operations. It is a fintech company whose banking services are provided through partner banks. Company

The measured homepage presents that software through a cinematic landscape: a desk, chair and laptop sit above a misty river valley. A centered headline, pale lettering and rounded actions occupy the sky, while the landscape imagery supplies most of the visual complexity. Dark #171721 sections and #1e1e2a surfaces continue below it. Indigo #5266eb anchors the account action; softer translucent surfaces support navigation and the demo. The expansive scene, centered type and compact actions give the measured homepage its editorial spaciousness.

Mercury’s design thinking has developed alongside its expanding product. Its December 2025 emotional-resonance essay describes a framework shared by product and marketing teams, with a chosen feeling guiding each journey. In March 2026 it explained why its public demo shows the real, evolving product without a signup gate. The useful design reference is both expressive presentation and an accessible route to evaluating the software. Emotional resonance, public demo

Primary tasks visible on this surface are opening an account, entering an email, launching a demo and exploring products and pricing. The captured page is the English homepage, mercury.com/, with HTML lang="en".

Brand Narrative

Mercury was founded in 2017 by Immad Akhund, Jason Zhang and Max Tagher. Its launch post is dated April 16, 2019 and announces the move out of private alpha. That post describes practical interface goals: a short money-sending flow, searchable transactions and accessible account details, alongside better financial insight. Founders and history, launch

The company’s March 2025 announcement traces expansion from accounts to a corporate card and financial software for bills, invoices, accounting and employee expenses, and reported more than 200,000 business customers at that time. Today’s company page describes managing payments, spend and cash flow together. The design reference should support that breadth without assuming a particular dashboard arrangement. Product evolution, company

The 2026 demo essay supplies a concrete expression of respect for prospective customers: let people inspect the working product and make their own decision. That position is supported by the homepage’s demo link. Demo rationale

Principles

Mercury’s emotional-resonance framework names five foundational categories: Trust, Clarity, Connection, Momentum and Transcendence. Teams choose a primary feeling for a journey, consider where a person begins emotionally, and question design choices that fail to serve the intended outcome. The essay treats those intentions as hypotheses to check through research. Framework

The open-demo essay adds a second documented practice: give prospective customers an ungated view of the actual product as it evolves. Practice

Personas

Verified audience segments include technology startups, venture-capital firms, ecommerce companies and other small businesses. No individual persona was verified. Audience evidence

Colors

The survey enumerated 402 computed root custom properties and 472 declared properties. Roles below distinguish the rendered dark homepage from root theme definitions; the light values do not establish a separate dashboard measurement.

The hero demo uses rgba(175, 178, 206, 0.2) with a 1px solid rgba(175, 178, 206, 0.36) border. Hover raises the fill alpha to 0.28; pressing raises it to 0.36. The circular news action uses the same alpha sequence with periwinkle channels: rgba(156, 180, 232, 0.2), rgba(156, 180, 232, 0.28) and rgba(156, 180, 232, 0.36).

The CSS also contains beige, orange, green, blue and purple palette families. The dark neutral homepage is one application of a broader theme vocabulary, and periwinkle supports actions alongside the primary indigo.

Typography

The loaded faces expose weight ranges, rather than only four static cuts. Mercury’s theme names 300, 360, 400, 420, 480 and 500, plus --font-weight-medium: 530; a declared weight does not prove a loaded face supports it. The six sampled controls use 16px / 420 / arcadia, a 16px line height and normal tracking. The survey’s footer links use 16px/420 with 20px line height; its opt-out label uses 12px/480 with 16.8px line height.

The following are CSS declarations, not additional computed measurements. The homepage H1 carries .arcadia-display-3, which declares font-size: clamp(2rem,.75rem + 3.126vw,4.563rem), weight 480, 110% line height and zero tracking. This fluid display rule replaces a fixed hero recipe. Base rules for .arcadia-heading-1 declare display-family text at 1.75rem, 480, 120% line height and .015em tracking; .arcadia-body-1 declares text-family 1rem, 360, 135% line height and zero tracking. These class rules should be read with their responsive CSS, rather than treated as a complete product type scale. Theme CSS

Layout

The desktop root declares --grid-total-columns: 16, --grid-max-width: 1952px, --grid-gutters: 32px and --grid-margins: 32px. Its navigation is 72px high. The viewport shows a centered hero message above the email-and-action group, with the landscape scene occupying the remainder of the first screen.

The numeric spacing vocabulary includes 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224 and 240px. The utility spacing multiplier is --spacing: 1px, so this is not evidence for a universal 8px base. At the measured width, --gap-xs is 12px, --gap-sm 24px, --gap-md and --gap-lg 32px, --gap-xl 40px, --gap-2xl 72px and --gap-3xl 112px. Those are root values, not measurements of every gap on the page.

For the sampled actions, retain 20px horizontal padding, 40px height and 32px or 40px corner radii. The email field is taller at 46px and shares its visual container with the account button. The 4px checkbox corners are a separate treatment.

Responsive Behavior

The opened production stylesheet contains root adjustments at min-width: 40rem, 48rem, 64rem, 80rem, 96rem and 122rem. These are declared rules; the rendered probe covered the desktop viewport only.

The H1 class uses the fluid clamp(...) declaration in §3. Mobile navigation behavior, touch targets, dashboard sidebar collapse and table reflow were not tested. Responsive declarations

Elevation & Depth

All six sampled control surfaces have box-shadow: none. The hero demo link and the email wrapper instead use translucent neutral fills, 1px translucent borders and backdrop-filter: blur(20px). The news action sits on an opaque #1e1e2a ancestor. Reproduce those material differences without adding an unmeasured shadow scale.

The hero image supplies visible spatial depth through the desk in the foreground and the valley behind it. No floating-dashboard-card shadow or universal gradient pair was established by this capture.

Motion & Easing

The five sampled action controls declare a 0.3s colour/surface transition with cubic-bezier(0, 0, 0.2, 1). The computed property list includes color, background-color, border-color, outline-color, text-decoration-color, fill, stroke and the gradient custom properties. Preserve the timing where rebuilding those measured action states; it is not a universal modal or route-transition specification.

The input itself declares all 0s ease 0s. Its visible state change occurs on its wrapper, for which no separate raw transition string was recorded. All state samples settled for 900ms; the tool reported longest in-scope transitions of 300ms for the hero/navigation controls and 500ms for the news action’s comparison scope. Those waits are measurement metadata, not additional motion tokens.

Reduced-motion behavior, modal entrances, money updates and scroll choreography were not verified.

Components

These are public homepage controls measured at 1440×1000. Link destinations were not followed and the email stayed empty. Every row has measured interaction states, detailed in §14.

The Products chevron SVG measures 14×14px; the news arrow SVG measures 14×16px. The measured news link is the small arrow action inside a card, so it is recorded as a button-style link rather than a harvested card. No search input appeared among the 120 surveyed interactive elements; the email input is identified as email. The hero form’s submit button was surveyed at 40px high, 32px radius and 16px/420, but its states were not independently probed.

The survey also records a 20×20px checkbox at 4px radius. This supports that corner value in a specific context, rather than a universal button or input radius. Badge, dialog, toast, toggle and dashboard-card recipes were not verified.

States

Every hover below has :hover === true; every pressed snapshot has :active === true; all focus snapshots were reached by a real Tab walk and have :focus-visible === true. No focus change persisted after blur. #9cb4e8 is an authored solid outline here, rather than a browser auto ring.

The account link’s descendant count also changed from two to eight during interaction, including a canvas; that DOM difference does not establish a separate visual animation recipe. Label ink stayed at its rest value in the compared snapshots. The input itself retains its own transparent fill and lack of border: its parent owns the measured visual changes.

The comparison includes each control and its pseudo-elements, descendants and their pseudo-elements, and three ancestor levels. No change claim extends to canvas/video pixels, external sprite contents, closed shadow roots, cross-origin frames or siblings. Empty, loading, error, success and disabled product states were not exercised.

Do's and Don'ts

Implementation guidance derived from the measured surface:

• Preserve the primary action’s indigo rest, hover and pressed sequence; retain white lettering across those states.
• Use the periwinkle focus outline and the measured offset. Apply the email indication to the wrapper that owns the frosted surface.
• Keep the demo action translucent, bordered and blurred over imagery; keep its text pale.
• Match each control’s geometry. The account link uses 32px corners, while the demo and navigation items use 40px.
• Keep declared-only font faces out of rendered specimens. Use the loaded text and display faces for the measured homepage roles.
• Treat light-theme definitions, disabled/error colours and responsive CSS as definitions until their corresponding surfaces or states are measured.

Voice & Tone

The homepage pairs the differentiating headline “Radically different banking” with short action labels: “Open account” and “Launch demo”. The email placeholder names the requested information directly. The visible regulatory disclosure distinguishes Mercury’s fintech role from the banks that provide banking services.

For this surface, use concise action verbs and make the next step explicit. This is an editorial reading of the captured homepage copy.

Agent Prompt Guide

“Build a Mercury-inspired public banking hero using a full landscape image with a desk in the foreground. Center the headline above an email group. Use loaded arcadiaDisplay for the headline and arcadia for controls. Make the navigation account link 40px high, 32px radius, 0px 20px padding and 16px/420 text. Its fill sequence is #5266eb → #4354c8 → #3442a6; keep the label #ffffff. Keyboard focus uses the hover fill plus a 2px solid #9cb4e8 outline offset by 4px.”

“For the hero demo link, use 40px height and radius, rgba(175, 178, 206, 0.2) fill, a 1px border in the same channels at alpha 0.36, and 20px backdrop blur. Raise fill alpha to 0.28 on hover and 0.36 while pressed. Set the label to #ededf3. Draw the same periwinkle focus outline with a 4px offset.”

These prompts describe the measured marketing surface. Product layouts, account data and transactional feedback require their own evidence.