# Mercury Soft Fintech

## Overview
A soft-futurist startup-banking aesthetic extracted from Mercury's product landing. A dark navy canvas carries near-white text, a single periwinkle brand accent, and gentle pastel gradients. The tone is refined, calm, and trustworthy — banking that feels premium without shouting. Where a brutalist site divides with hard rules, Mercury divides with breath: soft shadows, thin borders, and generous pill shapes.

## Colors & Roles
Canvas is a measured dark navy (`background` oklch 0.209 0.020 285, #171721) — the site's dominant, area-weighted color, so dark is canonical. `foreground` is near-white #ededf3; `muted-foreground` a soft gray #c3c3cc. The one chromatic brand is periwinkle `primary` (oklch 0.570 0.200 272, #5266eb) — the measured "Open account" button — reserved for primary CTAs, focus `ring`, and emphasis (`chart-1`). Measured low-frequency pastel blues (#9cb4e8, #cdddff) are not roles; they surface only as gradient and as `chart-2`/`chart-3` data signals. Elevation is a tonal ladder: background → `card` (0.245) → `popover` (0.270). Light mode is a refined lavender-tinted white counterpart (app/dashboard tone) that keeps the same periwinkle brand.

## Typography Rules
Humanist grotesque (Arcadia family), split into body (`arcadia`) and display (`arcadiaDisplay`). Measured: H1 49.35px / weight 480 / line-height ≈1.1; H2 42px / 480 / tracking ≈0.01em; body 16px / 400 / line-height 24px. Headings use weight 480 with near-neutral tracking (slightly negative to ~0) — deliberately restrained, not the extreme tight tracking of developer-tool styles. Body is 400. Screenshot inspection confirms the display cut is a warm humanist **sans** (no serifs). Arcadia is commercial; the Google-Fonts fallback is Inter throughout (body and display).

## Layout Principles
Max content width ~1200px on a 12-column / 24px-gutter grid. Hero is center-aligned (title, subtext, pill CTA capsule); feature sections alternate copy / UI preview. Vertical rhythm is airy: section gaps `clamp(5rem, 10vw, 9rem)`. Whitespace and the pastel gradient give the hero room to breathe.

## Depth & Elevation
Soft, not flat. Measured card shadows are multi-layer and very low opacity (rgba(28,28,35,0.02) 0 10 16, 0.04 0 6 10, 0.09 0 0 3) — wide, gentle, barely-there. Use them on floating elements (cards, popovers, pill CTAs) only. Heavy/dark drop shadows are banned. Surfaces also separate by thin borders and subtle background tonal steps.

## Shapes
Generous rounding is signature. Buttons and inputs are pills (radius 32–40px); the hero email field pairs a left-pill input (32px 0 0 32px) with a pill CTA into one capsule. Cards use 12px radius; small selectors 8px. Nothing is sharp-cornered.

## Effects & Gradient
The signature is a soft, low-saturation pastel mist gradient at the hero (lavender → peach → soft blue, #9cb4e8/#cdddff family) blending into a cinematic photographic image. The body background stays a flat dark navy — gradients appear only at the hero and accent sections. Backdrop-blur on the sticky nav and the hero CTA capsule. No grain, no noise.

## Component Stylings
- **Button**: primary = periwinkle fill + white text, pill radius, padding 0 20px, 16px/420. Hover brightens slightly + tiny lift; focus = 2px periwinkle ring. Nav links are ghost pills.
- **Card**: `card` background (one step lighter than canvas), 1px border, 12px radius, 24–32px padding, soft wide shadow. Emphasis cards may fill with a pastel gradient.
- **Input**: pill-shaped, translucent fill + 1px border, padding 0 20px, `muted-foreground` placeholder; focus border → `ring`.
- **Nav**: sticky, translucent backdrop-blur. Left wordmark (MERCURY, wide tracking), center dropdown links (16px), right "Log in" text + periwinkle "Open account" pill.

## Motion
Calm and trustworthy: opacity fades + 8–16px slides, 150–500ms; hover does a subtle brightness/tint shift and a small pill lift. A slow gradient drift is allowed. No bounce, spring overshoot, or heavy parallax.

## Do's and Don'ts
**Do:** keep dark navy as the canonical canvas; reserve periwinkle for CTAs, focus, and one emphasis per view; make buttons/inputs pills and cards 12px; float elements on soft, wide, low-opacity shadows; let a pastel gradient breathe at the hero.
**Don't:** use saturated primaries/neon or many competing colors; use hard dark drop shadows or sharp zero-radius corners; flood the screen with periwinkle; add bounce/spring/parallax motion.

## Responsive Behavior
The 12-column grid collapses to a single column on mobile; display type scales via `clamp()`. The hero CTA capsule can stack input above button. Nav collapses to a menu at narrow widths.

## Agent Prompt Guide
> Build this in the 'Mercury Soft Fintech' style: dark navy canvas (#171721), near-white text, one periwinkle accent (#5266eb) for CTAs/focus only, pill buttons & inputs (radius 32–40px), 12px cards with soft low-opacity multi-layer shadows, a gentle pastel gradient hero (lavender → soft blue) over a cinematic image, humanist-grotesque headings at weight 480 with near-neutral tracking, backdrop-blur sticky nav. Palette stays navy + periwinkle + pastel; motion is calm. Author a light mode as a lavender-tinted white counterpart with the same periwinkle brand.

## Known Gaps / Confidence
Colors, typography, and radii are `computed-css` (measured via Playwright walk). Color-role assignment, taxonomy, motion, and layout are `vision-inferred` from the light-mode homepage screenshots. The site has **no native dark mode** — the measured canvas is already dark navy, so the dark set is authentic for background/foreground/primary but its `card`/`popover`/`border`/`secondary`/`accent` tonal steps were synthesized from the single measured background (labeled `vision-inferred`). The light set is a synthesized counterpart reflecting Mercury's app tone, not a captured page. Arcadia is a commercial typeface; the Google-Fonts fallbacks (Inter / Fraunces) are the practical reproduction default. Pastel chart-5 (soft cyan) is a derived data-signal color, not measured. `destructive` (red) is a conventional derived value — Mercury shows no error/destructive red on the captured pages.