# Mercury — DESIGN.md

## Overview
Mercury is the startup-bank-for-startups brand — restrained monochrome canvas, a single warm-muted accent (mercury silver-gray), and a literary serif display (Söhne Breit / GT America serif). The brand intentionally distances itself from both legacy-bank gold/navy and consumer-fintech brightness. Type is the brand's voltage; color is barely there.

## Color
- **Primary:** `#191b1f` — Mercury Ink (used for type and CTAs)
- **Canvas:** `#fafafa` — Off-White
- **Surface alt:** `#f0eee9` — Warm Bone
- **Surface card:** `#ffffff` — White
- **Accent (muted warm):** `#c4a777` — Mercury Bronze (used sparingly on highlights and brand-mark accents)
- **Accent (signal):** `#1c7d56` — Account Green (positive balance only)
- **Ink:** `#191b1f`
- **Body:** `#52555c`
- **Hairlines:** `rgba(25,27,31,0.10)` — visible 1px borders, used generously

## Typography
- **Display:** Söhne Breit / GT Sectra Display, weight 500, tracking -0.015em, sizes 56-88px hero
- **Body:** Söhne / Inter, weight 400-500, 16-17px base, 1.55 line-height
- **Mono (financial numerals):** Söhne Mono / Berkeley Mono, 14-16px tabular-figures

## Spacing & rhythm
8-base (8/16/24/32/48/64/96). Section padding 96-128px — generous breathing. Card padding 32-40px. Hero band uses 5/7 grid (type left, dashboard mockup right).

## Motion signature
180ms ease-out on hover; signature is the slow scroll-reveal of dashboard mockups with a 400ms fade. Number transitions in financial UI use tabular-figure crossfades, not slot-machine ticks.

## Components observed
- `dashboard-screenshot-card` (real product chrome, generous padding, on warm-bone surface)
- `pricing-three-tier-card` (white cards on bone, hairline borders, mono numerals)
- `executive-profile-card` (founder portraits, serif name, role caption)
- `cta-button-ink-fill` (true ink fill, modest 8px radius)
- `treasury-yield-card` (financial product card with tabular-figure rate)
- `customer-story-band` (long-form story with serif pull-quote)

## Trademark signals
- Serif display in fintech — almost no competitor runs serif at hero scale
- Tabular-figure mono numerals — every balance, rate, yield uses tabular figures
- Warm-bone surface for major bands — never pure cream, never pure white
- Modest 8px button radius — refuses both square (cold) and pill (consumer)
- Mercury Bronze accent appears only on brand-mark moments, never as button or surface

## What they DON'T do
- No dark-mode hero
- No emoji in product copy or UI
- No saturated brand colors — restraint is the voltage
- No animation beyond fades
- No "limited time" or scarcity marketing

## Exemplar pages
- https://mercury.com/
- https://mercury.com/business-banking
- https://mercury.com/treasury
- https://mercury.com/customers

## When to reference
Reach for Mercury when the user wants a fintech surface for sophisticated buyers — founders, finance teams, mature operators. The serif-display + warm-bone + tabular-figure combination conveys "we take money seriously" without leaning into legacy-bank gold or consumer-fintech pop. Especially appropriate for B2B financial products, treasury, wealth management, premium banking.
