Mercury — design system & UI screens

Fintech · 4 screens · 35 sections · mercury.com

Banking built for startups.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/product/mercury.

Decoded design system

Mercury's decoded design system: background #171721, text #ECECEE, accent #5266EB, link #353644, primary #323649; type scale h1 49px / h2 42px / body 18px; 8px spacing base; 4px base radius. The single interactive/action color is #5266EB — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#171721`
surface	`#23232D`
border	`#36363F`
text	`#ECECEE`
text_muted	`#9B9BA0`
primary	`#323649`
accent	`#5266EB`
link	`#353644`
secondary	`#5266EB`
button_bg	`#5266EB`
button_text	`#FFFFFF`

Using these colors

Action color #5266EB — the single interactive color; only on things you click or must notice, never large fills.
primary #323649, link #353644 are visually the same color (Δ8) — treat as one role (the action color).
accent, secondary, button_bg are all #5266EB — one role, not several (the action color).
accent #5266EB — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

Heading: Arcadia Display
Body: Arcadia
h1: 49px
h2: 42px
body: 18px

Spacing

base unit: 8px
scale: 2px, 4px, 8px, 12px, 16px, 20px, 24px, 25px, 32px, 40px

Radii

base: 4px
button: 32px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 300ms · 500ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · cubic-bezier(0, 0, 0.2, 1)
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--color-orange-base-800`	`#38231a`
`--color-green-magic-400`	`#77c599`
`--color-orange-magic-400-alpha-3`	`#fc9b6f33`
`--color-neutral-base-50`	`#fbfcfd`
`--color-green-magic-400-alpha-3`	`#77c59933`
`--color-blue-magic-400`	`#77becf`
`--color-red-magic-600-alpha-5`	`#d0327538`
`--surface-input-active`	`#fbfcfd`
`--color-neutral-magic-400-alpha-5`	`#afb2ce5c`
`--color-orange-magic-600`	`#c45000`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #4354C8
primary focus: background #4354C8 · outline 2px solid rgb(156, 180, 232)

Layout (measured)

container max-width: 1020px
nav: 72px relative, backdrop blur(10px)
common grid: 16 columns

Motion choreography (measured)

Load order: div.pointer-events-none → div.group/content×2 → div.pointer-events-none×2 → div.group/content → div.group/asset-container×4 → small.block×2

Scroll reveal: 3 elements rest at opacity 0, animate in over 300ms.

Stagger: div ×6 — 600ms apart.

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Input (measured)

height 46px · radius 32px 0px 0px 32px

Responsive (measured)

breakpoints: 640px · 768px · 1024px · 1280px · 1536px
mobile (390px): hero 28px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →