Skip to content
Library

Mercury. Alpine banking at blue hour.

  • Finance
  • Dark theme
  • 9 colors
  • 2 typefaces

Mercury operates in an alpine banking aesthetic: a near-black canvas (#171721) sets a cinematic, observatory-like atmosphere where content surfaces float as subtly lighter graphite cards. The interface is overwhelmingly monochromatic — ivory text on onyx, with a single vivid cobalt (#5266eb) acting as the only chromatic punctuation, reserved exclusively for the primary 'Open account' action. Typography carries the weight of expression: a custom display face at intermediate weight 480 (neither bold nor light) paired with a refined body face at weight 400, creating a voice that is confident but never loud. Components are flat and borderless, relying on the 12px-radius graphite card lift and pill-shaped controls to define structure rather than shadows. The full-bleed photographic hero — misty mountains with a solitary desk — establishes aspiration before the product UI takes over, and every subsequent surface maintains that hushed, premium darkness.

Screenshot of Mercury
Captured from mercury.com on October 11, 2026

Mercury design system

Mercury

Brand1

  • Violet action color for filled buttons, selected navigation states, and focused conversion moments.

Neutrals8

  • Dominant page background, hero overlay base, footer and section canvases

  • Elevated card and section surfaces — one step lighter than the canvas to create quiet separation

  • Secondary button fills, inline form backgrounds, subtle interactive surfaces

  • Medium-weight dividers and structural borders between content blocks

  • Muted body copy, helper text, secondary labels — reduced hierarchy without losing legibility

  • Light hairline borders, ghost-button outlines, input edges — light-on-dark border

  • Primary text, icons, nav items, ghost-button strokes and text — the dominant foreground color across the system

  • Text and icon fills on cobalt primary buttons for maximum contrast

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pure White on Cobalt

4.71 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.