# Design Reference - Mercury
> Mountain Top Command Center

## Source
- Original site: https://mercury.com
- Captured: 2026-04-11T17:45:14.206Z

## Tags
- dark-mode
- fintech
- spacious
- single-accent
- atmospheric
- custom-typography
- minimalist
- professional

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Mercury Blue | `#5266eb` | brand | Primary CTA buttons — the single, vivid accent in a muted palette, focusing user action. |
| Ghost Blue | `#cdddff` | accent | Secondary button backgrounds, hover states — a desaturated, ethereal blue suggesting interaction. |
| Deep Space | `#171721` | neutral | Outermost page background layer, providing depth. |
| Midnight Slate | `#1e1e2a` | neutral | Primary page and section backgrounds. |
| Graphite | `#272735` | neutral | Subtle button backgrounds and interactive surfaces. |
| Lead | `#70707d` | neutral | Borders, dividers, subtle UI accents. |
| Starlight | `#ededf3` | neutral | Primary text color for headlines, body, and navigation. |
| Silver | `#c3c3cc` | neutral | Secondary text, footer copy, disabled states. |
| Pure White | `#ffffff` | neutral | Text on primary CTA buttons (#5266eb). |

## Typography
- role: All major headlines. Use of the light 360 weight at large sizes is a signature choice creating authority through restraint, not volume.; sizes: 21px, 24px, 28px, 32px, 42px, 49px, 65px; family: arcadiaDisplay; weight: 360, 480, 530; lineHeight: 1.10-1.20; substitute: Inter, Manrope; letterSpacing: Subtle positive tracking (0.01-0.02em) for an open feel.; fontFeatureSettings: "ss01" on
- role: Body copy, UI labels, navigation, legal text, and smaller headings. The workhorse font for all content and interface text.; sizes: 12px, 14px, 16px, 18px, 21px; family: arcadia; weight: 360, 400, 420, 480; lineHeight: 1.20-1.50; substitute: Inter, Manrope; letterSpacing: Subtle positive tracking (0.005-0.02em) for readability.; fontFeatureSettings: "ss01" on

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "0px",
      "inputs": "32px",
      "buttons": "32px, 40px",
      "containers": "4px"
    },
    "elementGap": "12-32px",
    "sectionGap": "80-120px",
    "cardPadding": "",
    "pageMaxWidth": "1200px"
  },
  "radius": {
    "cards": "0px",
    "inputs": "32px",
    "buttons": "32px, 40px",
    "containers": "4px"
  }
}
```

## Component Patterns
- name: Hero Email CTA
- name: Feature List — Everything in one place
- name: Button Group — Primary + Secondary + Ghost
- name: Primary Pill Button; role: The main call-to-action on the page.
- name: Header Pill Button; role: The secondary call-to-action in the navigation bar.
- name: Ghost Nav Link; role: Navigation items and non-primary links in the header.
- name: Hero Email Input; role: The email capture field in the hero section.
- name: Interactive Feature Link; role: Selectable items in a feature list.
- name: Footer Link; role: Tertiary links in the page footer.

## Do
- Use 'arcadiaDisplay' at a light weight (360) for all major headlines to maintain an airy, sophisticated tone.
- Reserve the 'Mercury Blue' (#5266eb) accent exclusively for primary, action-oriented CTAs.
- Employ the deep neutral palette (#171721, #1e1e2a) for all backgrounds to create a focused, immersive environment.
- Utilize extreme corner radii (32px, 40px) for all primary and secondary buttons, creating a signature 'pill' shape.
- Maintain high contrast with 'Starlight' (#ededf3) text on dark backgrounds for all primary content.
- Use generous vertical spacing (80px+) between content sections.
- Differentiate interactive list items with a simple 1px bottom border in 'Lead' (#70707d).

## Don't
- Don't use 'Mercury Blue' (#5266eb) for text, backgrounds, or decorative elements.
- Don't use heavy font weights (>530) for any typography.
- Don't apply shadows for elevation. Use color and opacity shifts instead.
- Don't introduce new saturated colors. The palette is monochrome plus one blue accent.
- Don't use small corner radii on buttons. They should always be pills.
- Don't use 'Pure White' (#ffffff) for body text; reserve it for text on the primary blue CTA.
- Don't create dense, cluttered layouts. Prioritize breathing room.