# Mercury — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Dark surfaces (product sections)
| 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 |

### Text
| 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 |

### Accent
| 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.

## 3. Typography Rules

- Display / headings: `arcadiaDisplay` (Mercury proprietary, humanist, subtle warmth) with system fallback.
- Body / UI: `arcadia` (Mercury proprietary), fallback `ui-sans-serif, system-ui, sans-serif`.
- Variable font — odd numeric weights (420 body, 480 headings). No true bold; weight tops ~500.

| 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.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: bg `#5266eb`, text `#ffffff`, radius pill (32px), h 40px, padding `0 20px`, 16px/420. Used for "Open account".
- **Ghost (on dark)**: bg `#9bb4e633` (periwinkle @ 20%), text `#ededf3`, radius pill (40px), padding `0 16–20px`, no border.
- **Text link / underlined action**: plain text `#ededf3` with 1px underline (e.g. "Launch demo").

### Inputs
- Pill email field: transparent bg, 1px border `#ededf3`, radius 32px (left side; joins a button on the right into a single pill capsule), h 46px, placeholder `#ededf3` at reduced opacity.

### Cards / panels
- Dark panels bg `#1e1e2a`, radius 12px, soft layered shadow (see §6), minimal borders.
- Ghost/tinted chips: radius 4px, bg `#afb4cd33`.

### Accordion feature list (signature)
- Vertical stack of feature rows separated by 1px hairline dividers; the open row shows a periwinkle dot bullet `#5266eb` + title + muted description; closed rows are title-only. No box — dividers only.

### Nav
- Transparent over hero (floats on photo), h 72px; logo left, center dropdown links (Products/Solutions/Resources/About + Pricing), right "Log in" text + "Open account" primary pill.

## 5. Layout Principles

- Wide, generous layout; content columns ~640px inside full-bleed sections.
- Full-bleed photographic hero fills the viewport; text centered over it.
- Dark product sections use a two-column split (heading + accordion left, product visual right).
- Section rhythm is tall and unhurried; hairline dividers rather than boxes segment content.
- Base spacing generous; 4px small radius, 12px card radius, full-pill controls.

## 6. Depth & Elevation

- Radii: small `4px`, card `12px`, controls full pill (`32–40px`), avatars full.
- Control height: buttons `40px`, inputs `46px`.
- Shadow (light cards): layered soft — `0 10px 16px rgba(28,28,35,.02), 0 6px 10px rgba(28,28,35,.04), 0 0 3px rgba(28,28,35,.09)`.
- Dark sections are near-flat: hairline dividers, almost no shadow.

## 7. Motion

- Restrained; smooth fades and cross-section color transitions as the photographic hero dissolves into the dark sections on scroll.
- Accordion rows expand/collapse; parallax-like settling of the hero photo. No aggressive motion.
- Animation library not confirmed; treat as gentle scroll-linked reveals and 200–400ms ease transitions. (Exact durations not captured.)

## 8. Backgrounds, Effects & WebGL

- **Signature**: a full-bleed cinematic photograph (misty mountain valley at dawn, desk + laptop on the ridge) as the hero background — warm apricot sky fading to cool blue mist.
- Below the fold: solid deep blue-black (`#171721`) sections; periwinkle glows/tints (`#9bb4e6` washes at low alpha) provide atmosphere.
- No canvas/WebGL observed; effects are photographic + soft gradient tints, not generated.

## 9. Do's and Don'ts

### Do
- Anchor the hero with a single cinematic, aspirational photograph; float transparent nav/CTA on top.
- Keep body text light (420) and headings light-medium (480) — never bold; use Arcadia (humanist) everywhere.
- Segment content with 1px hairline dividers and accordion lists, not boxes.
- Reserve `#5266eb` periwinkle-indigo as the only saturated accent (CTA, active dot, links).
- Use full-pill buttons and inputs; primary is solid indigo, ghost is periwinkle @ 20% on dark.
- Keep dark sections near-flat; use soft layered shadows only on light cards.

### Don't
- Don't use bold weights (700) or a techy monospace display — the type stays warm and light.
- Don't introduce a second saturated accent (pink is a micro-accent only).
- Don't box everything — prefer hairlines and open space.
- Don't add loud motion; keep transitions gentle and photographic.

## 10. Responsive Behavior

- Nav collapses to a menu on narrow widths; hero photo and headline scale down.
- Two-column dark sections stack to single column.
- Specific breakpoints not captured (desktop 1512px only).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#171721` (dark) / photographic hero · Text `#ededf3` · Muted `#c3c3cc` · Divider hairline on dark · Accent `#5266eb`
- Font: `Arcadia` / `arcadiaDisplay` (humanist; fallback ui-sans-serif) · Body: 16px/420 · Radius: pill controls / 12px card · Control height: 40px btn / 46px input
- Primary button: bg `#5266eb`, white, pill · Ghost: `#9bb4e633` fill on dark

<mercury_design_language>
Use the Mercury design language: cinematic editorial fintech. A full-bleed aspirational photograph anchors the hero (misty dawn landscape) with transparent floating nav and a solid periwinkle-indigo CTA; below, deep blue-black sections (#171721 canvas, #1e1e2a panels) carry near-white cool text (#ededf3, muted #c3c3cc). Type is the proprietary Arcadia (humanist, warm) — headings 42–51px at weight 480, body 16px at 420, never bold, sentence case, near-zero tracking. One saturated accent only: periwinkle-indigo #5266eb for CTAs, active dots and links (pink #fc92b4 is a rare micro-accent). Controls are full pills — primary button bg #5266eb white text 40px tall, ghost buttons periwinkle @ 20% (#9bb4e633) on dark; inputs are 46px pill capsules. Segment content with 1px hairline dividers and vertical accordion lists rather than boxes; keep dark sections near-flat, reserve soft layered shadows (rgba(28,28,35,.02–.09)) for light cards; radii 4px small / 12px card / full-pill controls. Motion is gentle — photographic scroll reveals and 200–400ms fades. Feels: cinematic, serene, premium, editorial. Avoid: bold 700 weights, a techy mono display, a second saturated accent, boxing everything, and loud motion.
</mercury_design_language>