# Mercury — DESIGN.md

Premium fintech marketing with cinematic landscape imagery, quiet editorial typography, cobalt account CTAs and clean business pricing tables.

Independent reference guide from public Incognito captures. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-10-01

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **modern geometric sans / Inter-like**. A family name is not a bundled font licence. Use an available, licensed sans-serif pairing or system fallbacks.

## Marketing — Premium banking and business finance

### Observed palette
- Light canvas: #ffffff
- Ink: #252536
- Muted text: #6c6c78
- Cobalt action: #5367f1
- Cobalt highlight: #6b7cff
- Deep disclosure bar: #191825
- Misty landscape wash: #b8c3d6

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline | ~42–56px / tight | 500–600 | tight |
| Section / pricing heading | ~40–52px / tight | 500–600 | tight |
| Body / supporting copy | 16–18px / 1.45 | 400 | normal |
| Nav / button label | 13–14px | 500–600 | normal |

### Layout & hierarchy
- The homepage overlays a translucent navigation on a cinematic mountain landscape and centres “Radically different banking”, email capture, Open account and Launch demo actions.
- Pricing moves to a white editorial layout with “Pricing that fits your business”, a short $0/mo explanation, Annual Pricing (15% off), and Mercury / Mercury Plus / Mercury Pro comparison columns.
- The feature slot is the approved scrolled-home showcase: a dark Mercury navigation over a distinct laptop dashboard scene on the same landscape visual language.

### Components & behavior
- Primary CTA: cobalt rounded pill with white label (Open account).
- Secondary CTA: translucent or pale outlined pill (Launch demo).
- Pricing comparison: bordered white table card with plan columns and stacked benefit copy.
- Disclosure: fixed-looking deep charcoal fintech disclosure strip across the lower capture; keep required banking language legible.

## Scope
This is a marketing-only, logged-out capture (home, pricing and the scrolled-home product showcase). No product dashboard session, login, signup submission, credentials, payment or authenticated state was captured. The feature capture is a distinct PageDown-scrolled home product showcase, not the top-of-home hero.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, keep overlay text readable over imagery, and let pricing comparisons scroll horizontally on small screens.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Top announcement strip and Mercury navigation over a misty mountain scene; centred Radically different banking headline, email field, Open account / Launch demo actions and lower fintech disclosure. Screenshot: captures/mercury-marketing-home.jpg.
- Pricing: White page with Mercury navigation, Pricing that fits your business headline, annual discount toggle and Mercury / Mercury Plus / Mercury Pro comparison card. Screenshot: captures/mercury-marketing-pricing.jpg.
- Feature / product showcase: Distinct PageDown-scrolled home scene with Mercury navigation and a laptop dashboard over the mountain landscape; it is not a logged-in dashboard capture. Screenshot: captures/mercury-marketing-feature.jpg.