Mercury fintech banking landing page by mercury.com

mercury.com · Empty states · Minimal · Monochrome screenshot

Design analysis

A long dark-mode landing page that alternates between dense product-proof sections and airy, emotionally toned statements, giving the scroll a deliberate rhythm. Deep navy-black grounds everything; a serif display face carries the big statements while a grotesque sans handles UI, body and the extensive legal footnotes. Product UI screenshots and photography anchor the proof sections, while cream-tinted abstract 3D renders (spheres, cones, fingerprint, toggle) carry the brand-feel sections, all wrapped in hairline-bordered rounded cards with a single blue accent reserved for primary CTAs.

Prompt preview

## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789138980717-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789060045894.webp
- Design on Kage: https://kage.design/designs/mercury-empty-state

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type, imagery). Wait for the answers before writing any code. Everything below is a design language to apply to *their* product — not a template of the reference site.

## Page structure

Build a single long marketing page, top to bottom:

1. **Announcement strip** — a light, full-width bar above the nav with one short line of copy and an inline link; visually inverted (light on dark page) so it reads as a ticker.
2. **Navigation** — translucent dark bar: wordmark left, 5 text links centre,