Mercury

A dark, atmospheric fintech-banking interface built on near-black navy canvas (#171721) with soft near-white text (#ededf3), the custom Arcadia Display typeface for headlines, and a single periwinkle-indigo CTA. The system reads as calm, premium, and photographic — a full-bleed landscape hero, pill-shaped controls (40px radius), heavily rounded lavender-gray cards (32px), and restrained monochrome type. Brand voltage comes from the Arcadia display face and the indigo \"Open account\" pill set against muted, cinematic imagery.

mercury.com

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display-xl 49.35px · 480 · 1.1

The quick brown fox jumps

display-lg 42px · 480 · 1.15

The quick brown fox jumps

title 16px · 400 · 1.5

The quick brown fox jumps

body 16px · 420 · 1.0

The quick brown fox jumps

button 16px · 420 · 1.0

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	8px
sm	12px
md	16px
ml	20px
lg	24px
xl	32px
xxl	40px
huge	56px
section	72px
section-lg	112px
section-xl	128px

Border Radius

Name	Value	Preview
xs	4px
sm	8px
md	12px
xl	32px
pill	40px

FAQ

What colors does Mercury use?: Mercury's core palette includes #5266eb, #9cb4e8, #cdddff, #415773, #ededf3. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Mercury DESIGN.md.
What font does Mercury use?: Mercury's primary typeface is Arcadia Display. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Mercury design system?: A dark, atmospheric fintech-banking interface built on near-black navy canvas (#171721) with soft near-white text (#ededf3), the custom Arcadia Display typeface for headlines, and a single periwinkle…

More like this

↓ .md ↓ All files

loading…