Cinematic editorial banking: a full-bleed photographic dawn-landscape hero fading into deep blue-black sections, humanist Arcadia type at light weights, hairline accordions, and one periwinkle-indigo #5266eb accent on full-pill controls.
Browse Mercury in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: mercury.com (live DOM, computed styles), 2026-07-10 (desktop 1512px). Coverage: marketing home (hero + product sections). Dashboard: pending login (needs-dashboard). Responsive: breakpoints from behavior only; mobile not verified.
Cinematic, editorial fintech — a full-bleed photographic dream-hero (a desk on a misty mountain ridge at dawn) fading into deep blue-black product sections. The mood is calm, premium and aspirational rather than techy: banking reframed as a serene landscape. Structure is quiet — thin hairline dividers and vertical accordion lists do the work, with almost no boxes or shadows on the dark sections. The proprietary Arcadia typeface (a warm humanist letterform with subtle contrast) gives the whole surface a considered, magazine-like character, and a single periwinkle-indigo accent is the only saturated color. Feels: cinematic, serene, premium, editorial.
| Token | Hex | Role / usage |
|---|---|---|
| ink-950 | #171721 | Deepest section background |
| ink-900 | #1e1e2a | Card / raised panel background |
| ink-800 | #272735 | Hover fill, secondary panel |
| ink-tint | #9bb4e633 | Ghost-button fill (periwinkle @ 20%) |
| ink-tint2 | #afb4cd33 | Subtle tinted fill / divider wash |
| Token | Hex | Role / usage |
|---|---|---|
| text | #ededf3 | Primary text on dark (near-white, cool) |
| muted | #c3c3cc | Body / secondary text on dark |
| faint | #afb4cd | Tertiary, captions |
| on-light | #000000 | Text on light photo/white sections |
| Token | Hex | Role / usage |
|---|---|---|
| indigo-500 | #5266eb | Primary accent: CTA fill, active dot, links |
| periwinkle-300 | #9bb4e6 | Light accent, glow, tint base |
| periwinkle-100 | #cdddff | Faint accent tint |
| pink-300 | #fc92b4 | Rare secondary accent (small highlights) |
Rule: exactly one saturated accent — periwinkle-indigo #5266eb. Pink is a rare micro-accent only. Rule: the hero is a photograph; UI chrome floats on it transparently.
arcadiaDisplay (Mercury proprietary, humanist, subtle warmth) with system fallback.arcadia (Mercury proprietary), fallback ui-sans-serif, system-ui, sans-serif.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 51 / 56 | 480 | normal |
| Section head (h2) | 42 / 48 | 480 | +0.42px |
| Lead / subhead (p) | 21 / 25 | 480 | +0.42px |
| Body | 16 / 24 | 420 | normal |
| List item / UI | 16 / 24 | 420 | normal |
Patterns: large type stays light (420–480, never bold); near-zero to slightly-positive tracking. Headings are sentence case.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.