mercury.com website design: fonts, colors and UI patterns

Overview

Mercury's design system presents a sophisticated dual-mode interface that serves both a dark, immersive dashboard experience and a warm, approachable marketing presence. The visual language is built on extreme contrast: deep near-black surfaces for the product interface, and soft warm off-whites for public-facing pages. Two related type families—Arcadia and Arcadia Display-Variable—carry the entire typographic load through their variable weight axes, producing everything from delicate 360-weight subheadings to crisp 480-weight headlines without switching to unrelated families. The result is a cohesive, premium fintech aesthetic that feels engineered rather than decorated—clean lines, generous whitespace, and precise weight gradations create hierarchy without relying on color variation or ornamental elements.

Colors

The color architecture operates in two distinct modes that share a common accent. The product interface uses a true dark mode with pure black canvas, elevated near-black surfaces, and cool-tinted grays for text. Marketing pages invert this to a warm off-white system with deep charcoal ink.

The dark mode dominates the product experience. Dashboard cards, account panels, and navigation all sit on pure black or near-black surfaces with high-contrast off-white text. The accent blue appears sparingly—reserved for primary actions like "Send" buttons and positive value indicators. Marketing pages shift to the warm system: off-white backgrounds with charcoal text maintain readability while feeling more approachable than the stark product interface. The transition between modes is handled through full-page context rather than mixed surfaces; a given page commits to one mode entirely.

Typography

Mercury employs two related type families from Family Type: Arcadia and Arcadia Display-Variable. Both are variable fonts that enable precise weight gradations from 360 to 480, creating distinct roles without introducing italic styles. All weights render crisply across sizes.

The weight system is intentional and narrow. Regular (400) handles body text; 420 adds slight emphasis for interactive elements like buttons and links; 480 provides clear headline presence; 360 offers an elegant, light weight for large display sizes where heavier weights would feel crude. Letter spacing tightens slightly at larger sizes to maintain optical density. Line heights stay compact for UI elements (1.0 for buttons, 1.1 for displays) and expand for reading text (1.5 for body).

Arcadia Display-Variable is available for large-scale display treatments where the dedicated display cut may offer refined proportions at extreme sizes. Verify licensing for these families before production use. Both Arcadia and Arcadia Display-Variable are available from Family Type.

Layout

The layout system relies on a consistent horizontal gutter and generous vertical rhythm. Content is constrained to a centered container with fixed side margins, creating an even frame around all content.

The base spacing unit is 0.125rem (2px), derived from the type scale step. Key layout values include:

Page containers use 0px 32px horizontal padding (2rem at 16px root), with 0px 52px margins creating an additional content inset on wider viewports. Vertical section spacing ranges from 40px (2.5rem) for tight groupings to 144px (9rem) for major page breaks. The dashboard interface shown in the hero image uses a full-bleed product screenshot within these constraints, while marketing content like the FAQ and testimonials center within the padded container.

The navigation bar spans full width with internal padding, sitting above the content container. Dashboard cards and account panels use internal padding of 1.5rem to 2rem, with 0.75rem corner radii creating subtle elevation without heavy shadows.

Visual language

Mercury's visual character is defined by restraint and precision. The interface avoids decorative elements in favor of typographic hierarchy and spatial organization. Rounded corners appear consistently but modestly—pill-shaped buttons (40px radius, effectively full pills) contrast with slightly rounded panels (12px) and sharp-edged content areas.

The dark product interface uses subtle surface elevation rather than shadows to indicate hierarchy. Cards sit on slightly lighter backgrounds than the canvas, creating depth through value rather than blur or offset. The account panel image shows this clearly: a near-black card on a pure black ground, with internal rows separated by thin dividers rather than additional background shifts.

Iconography appears as simple line or filled circles in the account panel, maintaining the geometric restraint. Partner logos in the homepage hero strip are rendered in monochrome, subordinating brand color to Mercury's controlled palette.

The warm marketing mode introduces softer edges. The FAQ section uses hairline warm borders between items rather than background shifts. Testimonials float on pure white with generous surrounding space, letting the typographic weight variation carry all emphasis. The overall impression is of a system that trusts its type and spacing to do the communicative work.

Components

Navigation bar

• Anatomy: Logo mark left, hierarchical text links center ("Products", "Solutions", "Resources", "About", "Pricing"), utility actions right ("Log in", "Open account")
• Surface: Transparent over hero content, or solid dark on product pages
• Typography: {typography.navigation} for links, {typography.button} for primary action
• Shape: Full-width bar, no border radius
• Spacing: 0.5rem between nav items, 1.25rem horizontal padding on pill buttons
• Composition: Flex row with space-between alignment, vertically centered items

Primary button

• Anatomy: Text label centered within pill shape
• Surface: {colors.accent} background, {colors.ink} text; no border
• Typography: {typography.button}
• Shape: Full pill (9999px radius)
• Spacing: 0.625rem vertical padding, 1.25rem horizontal padding
• Variants: Dark mode uses accent blue; light mode marketing pages may use dark fill

Secondary / ghost button

• Anatomy: Text label only, no background fill
• Surface: Transparent background, inherits text color from context
• Typography: {typography.button}
• Shape: Full pill radius
• Spacing: 0 1.25rem horizontal padding, minimal vertical padding
• States: Hover may apply {colors.accent-hover} background

Account card (dashboard)

• Anatomy: Header with title and actions, list of account rows with circular icons, footer with status indicator
• Surface: {colors.surface} background, {colors.border-subtle} dividers
• Typography: {typography.body} for account names, {typography.body-small} for balances
• Shape: 0.75rem corner radius
• Spacing: 1.5rem internal padding, 1rem row height
• Composition: Vertical stack with right-aligned monetary values

FAQ accordion

• Anatomy: Question text left, chevron icon right, expandable content below
• Surface: Transparent, {colors.border-warm} hairline separator between items
• Typography: {typography.body} for questions, weight 480
• Shape: No border radius on items
• Spacing: 1.5rem vertical padding per item, full-width separator
• Composition: Flex row with space-between, chevron rotates on expansion

Testimonial block

• Anatomy: Large quotation with bold lead sentence, attribution below
• Surface: Pure white or {colors.warm-canvas} background
• Typography: {typography.quote} for body, {typography.body} for attribution; lead sentence uses weight 480, remainder uses weight 360
• Shape: No border, no background fill
• Spacing: Generous vertical margins, centered alignment
• Composition: Max-width constrained text block, centered

Partner logo strip

• Anatomy: Horizontal row of monochrome partner logos, equal height treatment
• Surface: Transparent on {colors.warm-canvas}
• Typography: None
• Shape: Logos in original aspect ratios, height-normalized
• Spacing: Even horizontal distribution with 2rem gaps
• Composition: Flex row, vertically centered, wrapping allowed

Responsive behavior

The design maintains its core structure across viewports with proportional scaling. The navigation bar collapses to a hamburger menu on smaller screens, though this transition point is not visible in the supplied images. Content containers retain their 2rem horizontal padding, preventing text from touching viewport edges.

Dashboard cards reflow from multi-column layouts to single-column stacks. The account panel shown in the dark interface maintains its internal structure but may expand to full width on mobile. Typography scales down proportionally: the 5.25rem hero display should reduce to approximately 3rem on narrow viewports to prevent overflow.

The FAQ accordion remains functional at all widths, with question text wrapping naturally. Chevron icons maintain touch targets of at least 44px for accessibility. Testimonial blocks should retain centered alignment with increased side padding on mobile to preserve readable line lengths.

Practical implementation guidance

### Preserve - The strict two-mode color architecture: commit pages fully to dark or warm, never mixing card-level modes - Arcadia's weight gradations as the primary hierarchy tool; avoid introducing additional font families - Generous whitespace around testimonials and section breaks—this breathing room defines the premium feel - Pill-shaped buttons as the sole button treatment; avoid sharp-cornered or slightly-rounded alternatives - Right-aligned numerical values in financial contexts, with consistent decimal and currency formatting

### Avoid - Drop shadows on dark surfaces; use surface value changes for elevation instead - Saturated colors beyond the single accent blue; the palette is intentionally restrained - Underlined text links outside of body content; navigation and buttons rely on shape and weight - Background images or textures behind text; the system depends on flat, controlled surfaces - Mixed button styles on the same surface; the pill treatment is universal

### Recommended build order 1. Establish the dark canvas and warm canvas as root themes with CSS custom properties 2. Implement Arcadia and Arcadia Display-Variable with the full weight range (360–480) and verify rendering at all specified sizes 3. Build the navigation component with transparent and solid variants 4. Create the pill button system with primary, secondary, and ghost treatments 5. Develop dashboard cards with the surface color stack and internal spacing 6. Implement FAQ accordion with warm-mode separators and chevron animation 7. Add testimonial block with weight-shifting quote treatment 8. Finalize responsive scaling for display typography and container padding

### Accessibility - Maintain minimum 4.5:1 contrast ratios: #EDEDF3 on #000000 exceeds 15:1, and #272735 on #F6F5F2 exceeds 12:1 - Ensure the accent blue #5266EB meets 3:1 against dark surfaces for interactive elements - Provide visible focus indicators on pill buttons, likely using outline or subtle background shift - Preserve semantic heading hierarchy despite visual weight variations; the 480 weight headline should map to h2 or appropriate level - Testimonial attribution should include semantic markup for author and role

Scope note

This guide covers the homepage and pricing page surfaces visible in the supplied images, including the dashboard hero, account panel, FAQ accordion, and testimonial components. Mobile layouts, animation specifications, form states, and the full product dashboard beyond the account card are not represented. Arcadia Display-Variable is documented as a supplied family but its specific glyph set or optical sizing behavior is not visible in the extracted interface samples.

Related design patterns

• Blue hue
• Neutral hue
• Limited palette
• Accent color
• Primary text color
• Secondary text color
• Moderate density
• Finance and insurance

More website design guides

Browse website design guides by pattern and website.