# Mercury Soft Fintech

짙은 네이비 캔버스 위에 페리윙클 브랜드 액센트와 부드러운 파스텔 그라디언트를 얹은 스타트업 뱅킹 미학 — 정제되고 신뢰감 있으며, 필로 라운드와 시네마틱 히어로가 특징이다.

- taxonomy: soft-futurism · fintech, soft-pastel-gradient, periwinkle-accent, dark-navy-canvas, pill-shapes, cinematic-hero, refined-trustworthy, humanist-grotesque · complexity=medium
- page types: landing, marketing, dashboard, app
- best for: 핀테크·뱅킹·결제 제품 랜딩 페이지, 스타트업 대상 SaaS 마케팅 사이트, 신뢰감이 필요한 금융 대시보드/앱 UI, 부드러운 파스텔 그라디언트 히어로 브랜드
- avoid for: 장난스러운 맥시멀리즘·강한 원색 소비자 앱, 인쇄 편집(에디토리얼) 감성의 흑백 사이트, 브루탈리즘·터미널 계열 개발자 툴, 따뜻한 종이·오가닉 라이프스타일 브랜드
- provenance: website (Online Business Banking For Startups, Small Businesses & Scaling Companies) — confidence: colors_measured=computed-css, color_roles=vision-inferred, typography=computed-css, radius=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, dark=vision-inferred, light=vision-inferred

## Design rules

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


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Mercury Soft Fintech — theme.css (generated, do not edit) */
:root {
  --radius: 12px;
  --radius-selector: 8px;
  --radius-field: 9999px;
  --font-sans: arcadia, "arcadia Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: arcadiaDisplay, "arcadiaDisplay Fallback", arcadia, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --spacing: 8px;
  --shadow: 0px 10px 16px 0px color-mix(in oklab, oklch(0.18 0.02 285) 9%, transparent);
  --ks-display-weight: 480;
  --ks-display-tracking: -0.01em;
  --background: oklch(0.988 0.003 286);
  --foreground: oklch(0.240 0.020 284.6);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.240 0.020 284.6);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.240 0.020 284.6);
  --primary: oklch(0.570 0.200 272.0);
  --primary-foreground: oklch(0.985 0.004 286);
  --secondary: oklch(0.948 0.008 286.2);
  --secondary-foreground: oklch(0.300 0.020 284);
  --muted: oklch(0.960 0.006 286);
  --muted-foreground: oklch(0.520 0.020 285.7);
  --accent: oklch(0.930 0.030 268);
  --accent-foreground: oklch(0.320 0.040 274);
  --destructive: oklch(0.585 0.207 25);
  --destructive-foreground: oklch(0.985 0.004 286);
  --border: oklch(0.910 0.010 286);
  --input: oklch(0.910 0.010 286);
  --ring: oklch(0.570 0.200 272.0);
  --chart-1: oklch(0.570 0.200 272.0);
  --chart-2: oklch(0.700 0.090 265.3);
  --chart-3: oklch(0.780 0.070 265.3);
  --chart-4: oklch(0.565 0.049 280.5);
  --chart-5: oklch(0.640 0.120 200);
}

.dark {
  --background: oklch(0.209 0.020 284.6);
  --foreground: oklch(0.948 0.008 286.2);
  --card: oklch(0.245 0.022 284.6);
  --card-foreground: oklch(0.948 0.008 286.2);
  --popover: oklch(0.270 0.024 284.6);
  --popover-foreground: oklch(0.948 0.008 286.2);
  --primary: oklch(0.570 0.200 272.0);
  --primary-foreground: oklch(0.985 0.004 286);
  --secondary: oklch(0.310 0.030 283);
  --secondary-foreground: oklch(0.948 0.008 286.2);
  --muted: oklch(0.275 0.020 284);
  --muted-foreground: oklch(0.760 0.020 285.7);
  --accent: oklch(0.345 0.045 278);
  --accent-foreground: oklch(0.948 0.008 286.2);
  --destructive: oklch(0.620 0.205 25);
  --destructive-foreground: oklch(0.985 0.004 286);
  --border: oklch(0.315 0.028 282);
  --input: oklch(0.315 0.028 282);
  --ring: oklch(0.570 0.200 272.0);
  --chart-1: oklch(0.570 0.200 272.0);
  --chart-2: oklch(0.771 0.079 265.3);
  --chart-3: oklch(0.896 0.050 265.4);
  --chart-4: oklch(0.565 0.049 280.5);
  --chart-5: oklch(0.700 0.130 200);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Mercury Soft Fintech". Fragment — assumes the style's CSS variables
     (--background, --foreground, --primary, --primary-foreground, --card, --card-foreground,
      --popover, --muted, --muted-foreground, --secondary, --accent, --border, --input, --ring,
      --chart-1..5, --radius, --radius-field, --font-sans, --font-display, --shadow, ...)
     are in scope. Tokens only; no literal colors. Dark-native canvas by design. -->
<section style="position:relative; overflow:hidden; background:var(--background); color:var(--foreground); font-family:var(--font-sans); padding:0 clamp(1.25rem,4vw,2.5rem) clamp(3rem,7vw,6rem); max-width:1200px; margin:0 auto;">

  <!-- signature soft pastel mist gradient behind the hero -->
  <div aria-hidden="true" style="position:absolute; inset:-10% -20% auto -20%; height:80%; pointer-events:none;
    background:
      radial-gradient(50% 60% at 20% 0%, color-mix(in oklab, var(--chart-3) 40%, transparent), transparent 70%),
      radial-gradient(45% 55% at 80% 10%, color-mix(in oklab, var(--chart-2) 35%, transparent), transparent 70%),
      radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 75%);"></div>

  <!-- sticky-style nav -->
  <nav style="position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0;">
    <span style="display:inline-flex; align-items:center; gap:.6rem; font-weight:480; letter-spacing:.14em; font-size:.9rem;">
      <span style="width:1.1rem; height:1.1rem; border-radius:9999px; border:1.5px solid var(--foreground);"></span>MERCURY
    </span>
    <span style="display:none; gap:.25rem;" data-nav-links>
      <a href="#" style="padding:.4rem .85rem; border-radius:var(--radius-field); color:var(--foreground); font-size:1rem; text-decoration:none;">Products</a>
      <a href="#" style="padding:.4rem .85rem; border-radius:var(--radius-field); color:var(--foreground); font-size:1rem; text-decoration:none;">Solutions</a>
      <a href="#" style="padding:.4rem .85rem; border-radius:var(--radius-field); color:var(--foreground); font-size:1rem; text-decoration:none;">Pricing</a>
    </span>
    <span style="display:inline-flex; align-items:center; gap:.9rem;">
      <a href="#" style="color:var(--foreground); font-size:1rem; text-decoration:none;">Log in</a>
      <a href="#" style="border-radius:var(--radius-field); background:var(--primary); color:var(--primary-foreground); padding:.55rem 1.2rem; font-size:1rem; font-weight:420; text-decoration:none;">Open account</a>
    </span>
  </nav>

  <!-- hero -->
  <div style="position:relative; text-align:center; padding:clamp(3.5rem,10vw,7rem) 0 clamp(2.5rem,6vw,4rem); max-width:40ch; margin:0 auto;">
    <h1 style="margin:0; font-family:var(--font-display); font-weight:480; font-size:clamp(2.75rem,5vw,4.08rem); line-height:1.06; letter-spacing:-.01em;">
      Radically different banking
    </h1>
    <p style="margin:1.25rem auto 0; font-size:1.15rem; line-height:1.5; color:var(--muted-foreground); max-width:44ch;">
      Apply online in ten minutes to experience banking unlike anything that's come before.
    </p>

    <!-- pill CTA capsule: pill input joined to pill button -->
    <div style="display:inline-flex; align-items:stretch; margin-top:2.25rem; background:color-mix(in oklab, var(--card) 70%, transparent); border:1px solid var(--border); border-radius:var(--radius-field); padding:.35rem .35rem .35rem 1.25rem; box-shadow:var(--shadow); backdrop-filter:blur(8px);">
      <input placeholder="Enter your email" style="border:none; background:transparent; color:var(--foreground); font:inherit; font-size:1rem; min-width:14rem; outline:none;">
      <a href="#" style="border-radius:var(--radius-field); background:var(--primary); color:var(--primary-foreground); padding:.7rem 1.35rem; font-size:1rem; font-weight:420; text-decoration:none; white-space:nowrap;">Open account</a>
    </div>
  </div>

  <!-- feature cards: soft rounded, gentle elevation; one pastel-gradient emphasis card -->
  <div style="position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; margin-top:1rem;">
    <article style="background:var(--card); color:var(--card-foreground); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.75rem;">
      <span style="display:inline-block; font-size:.75rem; letter-spacing:.02em; color:var(--muted-foreground); margin-bottom:.9rem;">Banking &amp; more</span>
      <h3 style="margin:0 0 .5rem; font-weight:420; font-size:1.3125rem;">Everything in one place</h3>
      <p style="margin:0; font-size:1rem; line-height:1.5; color:var(--muted-foreground);">Checking, savings, cards, and payments — precise UI, gentle by design.</p>
    </article>

    <article style="border-radius:var(--radius); box-shadow:var(--shadow); padding:1.75rem; color:var(--foreground);
      background:linear-gradient(135deg, color-mix(in oklab, var(--chart-3) 50%, var(--card)), color-mix(in oklab, var(--primary) 30%, var(--card)));">
      <span style="display:inline-block; font-size:.75rem; letter-spacing:.02em; color:var(--foreground); opacity:.8; margin-bottom:.9rem;">Featured</span>
      <h3 style="margin:0 0 .5rem; font-weight:480; font-size:1.3125rem; font-family:var(--font-display);">Mercury hits $5.2B valuation</h3>
      <p style="margin:0; font-size:1rem; line-height:1.5; opacity:.85;">Loved by 300K+ of the most ambitious companies.</p>
    </article>

    <article style="background:var(--card); color:var(--card-foreground); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.75rem;">
      <span style="display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; letter-spacing:.02em; color:var(--muted-foreground); margin-bottom:.9rem;">
        <span style="width:.45rem; height:.45rem; border-radius:9999px; background:var(--chart-2);"></span>Cards &amp; expenses
      </span>
      <h3 style="margin:0 0 .5rem; font-weight:420; font-size:1.3125rem;">Spend with confidence</h3>
      <p style="margin:0; font-size:1rem; line-height:1.5; color:var(--muted-foreground);">Issue cards, set limits, and track every dollar in real time.</p>
    </article>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/mercury.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.