Mercury

Overview

Mercury is a fintech platform reimagining business banking for ambitious entrepreneurs and scaling companies. The design system embodies 'Aspirational Minimalism'—pairing sophisticated dark surfaces (surface: #171721, on-surface: #ededf3) with a vibrant primary blue accent (#5266eb) that commands attention on CTAs and interactive elements. The aesthetic communicates trust through restraint and innovation through the bold, rounded primary button treatment (border-radius: 32px, padding: 12px 24px). The brand personality is direct, confident, and human-centered: we speak to founders in their language, avoiding jargon while celebrating their ambition. Voice example: 'Banking built for founders who move fast—apply in 10 minutes, not 10 days.'

Colors

The color system anchors on a dark, professional foundation (surface #171721, surface-container #1c1c23) that evokes financial seriousness while remaining approachable. Primary (#5266eb) is the signature accent—a saturated, medium-toned blue used exclusively on CTAs, active states, and brand moments; it appears on the 'Open account' button (rgb(82, 102, 235)) and all primary interactions. Secondary (#fc92b4), a warm magenta, provides emotional warmth and is reserved for highlights, badges, and supporting accent moments. Tertiary (#f8d6c7), a soft warm beige, is used sparingly for tertiary actions and decorative surfaces. The on-surface palette (#ededf3 for primary text, #c3c3cc for secondary text) ensures 7+ contrast ratios on dark backgrounds. Surface-container variants (#0a0a0f to #31313

Typography

The type system uses two custom typefaces—arcadiaDisplay (fontWeight 320–480) for headlines and arcadia (fontWeight 360–500) for body text—creating a distinctive, modern voice. Display (60px, fontWeight 480, lineHeight 68px, letterSpacing -0.02em) anchors hero moments like 'Radically different banking.' Headline-lg (45px, fontWeight 480) is used for major section titles. Body-md (16px, fontWeight 420, lineHeight 24px) is the workhorse for interface copy and maintains legibility at small sizes. Label-md (14px, fontWeight 420) is applied to button text and form labels. All headline text uses negative letter-spacing (-0.015em to -0.02em) to tighten the distinctive custom typeface and reinforce premium positioning. Body text maintains standard letter-spacing (0em) for readability. On dark back

Layout

Mercury uses a 12-column responsive grid with a fixed container max-width of 1280px, centered with gutter spacing of 32px on desktop. The page rhythm follows a 'breathing' model: hero section (full viewport height with background imagery), followed by content sections separated by lg spacing (40px) for visual rest. The hero input field (borderRadius 32px 0 0 32px, padding 0 0 0 20px) and adjacent 'Open account' button (borderRadius 32px, padding 0 20px) form a cohesive call-to-action unit. Sections use md spacing (24px) for internal padding and sm spacing (12px) for component-level gaps. The layout prioritizes whitespace and breathing room—no section is cramped. Mobile breakpoints compress gutter to 16px and reduce section spacing to md (24px) to maintain rhythm on smaller screens.

Elevation & Depth

Depth is achieved through a layered surface stack and subtle shadows rather than aggressive drop-shadows. Level 1 (Base): surface (#171721) with optional grain texture overlay (opacity 0.2, background-image: linear-gradient + SVG noise). Level 2 (Standard Card): surface-container (#1c1c23) with 1px border at outline-variant (#49494f) and box-shadow 0 4px 12px rgba(0, 0, 0, 0.08). Level 3 (Elevated/Hover): surface-container-high (#26262e) with box-shadow 0 8px 24px rgba(0, 0, 0, 0.15). Interactive elements (buttons, inputs) use no shadow by default; on hover, they shift to the next surface leve

Shapes

The shape philosophy is 'Rounded Accessibility'—curves are used strategically to soften the formal banking aesthetic and signal friendliness without sacrificing professionalism. Buttons use full border-radius (9999px / 32px) to create pill-shaped CTAs that feel inviting and modern (e.g., 'Open account' button, 'Launch demo'). Input fields also use full radius (borderRadius 32px) to match button treatment and create visual cohesion in form groups. Cards and containers use lg radius (1rem / 16px) for a balanced, approachable look. Smaller UI elements (badges, list items) use md radius (0.75rem /

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses primary (#5266eb) background, on-primary white text, full border-radius (32px), and padding 12px 24px for a 48px total height. On hover, the background shifts to primary-container (#3d4fd1) with a smooth transition (150ms cubic-bezier(0.4, 0, 0.2, 1)). The button-secondary variant uses a semi-transparent white background (rgba(255, 255, 255, 0.15)) with a 1px border at rgba(255, 255, 255, 0.2) and on-surface text; hover state increases background opacity to 0.25. Both variants use label-md typography (14px, fontWeight 420).

Containers & Surfaces Cards (card component) use surface-container (#1c1c23) background, lg border-radius (16px), md padding (24px), and a 1px border at outline-varia

Do's and Don'ts

**Do**

• Do use primary (#5266eb) exclusively for CTAs, active states, and brand moments—never on passive surfaces or body text.
• Do apply full border-radius (32px) to buttons and inputs to maintain the rounded, approachable aesthetic.
• Do use the surface-container stack (surface #171721 → surface-container #1c1c23 → surface-container-high #26262e) to create depth without relying on shadows alone.
• Do maintain 7+ contrast ratios between on-surface (#ededf3) and surface (#171721) for accessibility.
• Do use arcadiaDisplay with negative letter-spacing (-0.02em) for headlines to reinforce the premium, distinctive brand voice.

**Don't**

• Don't use secondary (#fc92b4) or tertiary (#f8d6c7) on primary CTAs—reserve them for badges, accents, and supporting moments.
• Don't apply box-shadow to buttons or inputs by default; use surface-level shifts and border changes for state feedback instead.
• Don't use border-radius values smaller than md (12px) on interactive elements—the brand relies on rounded, friendly shapes.
• Don't mix arcadia and arcadiaDisplay within a single headline; use arcadiaDisplay exclusively for display and headline scales.
• Don't apply text-shadow to body text on light backgrounds; reserve it for small labels (label-sm, label-md) on dark surfaces to prevent haloing.