---
name: Mercury
description: "A strong example of how premium fintech branding can use editorial photography and refined typography to stand out in a crowded market."
version: alpha

colors:
  background: "#171721"
  primary: "#EDEDF3"
  secondary: "#C3C3CC"
  tertiary: "#5266EB"
  neutral: "#C3C3CC"
  bg-soft: "#1E1E2A"
  bg-quiet: "#9CB4E8"
  line: "rgba(237,237,243,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 42px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 420
    letterSpacing: "0.24px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.42px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Premium fintech interface combining cinematic photography with refined, humanist typography.

*A premium fintech startup that blends editorial photography with clean SaaS UI to project reliability and modern innovation.*

## Colors

Deep, muted dark backgrounds with high-contrast light text and a single vibrant blue accent.

- **Background (`#171721`)** — uses `bg` token
- **Primary text (`#EDEDF3`)** — uses `ink` token
- **Secondary text (`#C3C3CC`)** — uses `ink-soft` token
- **Accent (`#5266EB`)** — uses `accent` token
- **Muted (`#C3C3CC`)** — uses `muted` token
- **Borders (`rgba(237,237,243,0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Use transitional-serif for prominent display headlines to establish a premium editorial tone.
- Use humanist-sans for body text and navigation to ensure high readability and a friendly demeanor.
- Avoid decorative or overly stylized typefaces that might detract from the refined aesthetic.

## Layout

Full-bleed photographic hero followed by constrained grid sections.

*Rhythm:* Standard 4px base grid with specific horizontal and vertical padding increments.

## Elevation & Depth

- 0px 0px 6px 0px rgba(86, 86, 118, 0.1)
- Borders: 1px solid rgba(237,237,243,0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary buttons with a solid blue (#5266EB) background and white text.
- **card:** Large feature cards with rounded corners (12px) and soft, subtle shadows.
- **chip:** Not prominently featured in the visible sections.
- **input:** Integrated inline form with a transparent background, rounded pill shape, and placeholder text.
- **hero:** Full-viewport height, background image with centered serif headline and inline form.

## Do's and Don'ts

**Don't:**
- don't use bright, saturated backgrounds — screenshot shows deep, muted dark backgrounds instead.
- don't use purely geometric or grotesque sans-serif for headlines — screenshot shows a refined transitional serif font.
- don't use sharp, boxy corners — screenshot shows consistently rounded corners (4px to pill-shaped).
- don't use multiple competing accent colors — screenshot shows a single dominant blue (#5266EB) accent.
- don't use dense, cluttered layouts — screenshot shows generous whitespace and centered alignment.
- don't use harsh, high-contrast borders — screenshot shows very subtle, semi-transparent dividers.

---

## System Prompt (paste into AI agent)

```
A premium fintech SaaS design system characterized by deep, muted dark backgrounds and a single vibrant blue accent. It features a mix of transitional-serif for display headlines and humanist-sans for body text, creating an editorial yet modern feel. The layout is clean and spacious, utilizing generous whitespace and centered alignment. Key colors include a dark navy background (#171721), light off-white text (#EDEDF3), and a signature blue (#5266EB) for primary actions. Critical constraints: maintain the refined, uncluttered aesthetic; avoid multiple accent colors; and ensure high readability through proper type contrast and spacing.
```