---
version: alpha
name: "mercury.com"
description: "Design system extracted from https://mercury.com/ on 2026-10-28"
colors:
  background: "#171721"
  surface: "#353644"
  surface-2: "#20202c"
  foreground: "#ededf3"
  muted-foreground: "#c3c3cc"
  primary: "#5266eb"
  on-primary: "#ffffff"
  border: "#70707d"
typography:
  headline-display:
    fontFamily: "arcadiaDisplay"
    fontSize: "49.3472px"
    fontWeight: 480
    lineHeight: "54.2819px"
  headline-lg:
    fontFamily: "arcadiaDisplay"
    fontSize: "28px"
    fontWeight: 480
    lineHeight: "33.6px"
    letterSpacing: "0.42px"
  headline-md:
    fontFamily: "arcadia"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "1.4"
  body-md:
    fontFamily: "arcadia"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "16.8px"
    letterSpacing: "0.24px"
  label-md:
    fontFamily: "arcadia"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
  button:
    fontFamily: "arcadia"
    fontSize: "16px"
    fontWeight: 480
    lineHeight: "21.6px"
rounded:
  none: "0px"
  2xl: "32px"
  sm: "4px"
  lg: "12px"
  md: "8px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "40px"
  9: "72px"
  10: "128px"
components:
  button-ghost:
    backgroundColor: "#171721"
    textColor: "#ededf3"
    typography: "{typography.button}"
    rounded: "40px"
    height: "40px"
    padding: "0px 20px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "32px"
    height: "40px"
    padding: "0px 20px"
  button-secondary:
    backgroundColor: "#afb2ce33"
    textColor: "#ededf3"
    typography: "{typography.button}"
    rounded: "40px"
    height: "40px"
    padding: "0px 20px"
  input:
    backgroundColor: "transparent"
    rounded: "32px"
    height: "46px"
---

# mercury.com

## Overview

Online Business Banking For Startups, Small Businesses & Scaling Companies: Everything you do with money. All in one place. Apply in 10 minutes for business banking that transforms how you operate.

Soft, well-rounded controls, one soft shadow for depth, confident display type at 49.3472px / 480, a single blue accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 2061 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("Business banking & more"), rest
- `screenshots/c-button-1--focus.png`: Button 1 ("Business banking & more"), focus
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--active.png`: Icon button 1, active
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("not an FDIC-insured bank"), rest
- `screenshots/c-link-1--focus.png`: Text link 1 ("not an FDIC-insured bank"), focus
- `screenshots/c-link-1--active.png`: Text link 1 ("not an FDIC-insured bank"), active
- `screenshots/c-text-input-1--rest.png`: Text input 1, rest
- `screenshots/c-text-input-1--focus.png`: Text input 1, focus
- `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled
- `screenshots/c-text-input-1--filled.png`: Text input 1, filled
- `screenshots/c-checkbox-1--rest.png`: Checkbox 1, rest
- `screenshots/c-checkbox-1--hover.png`: Checkbox 1, hover
- `screenshots/c-checkbox-1--focus.png`: Checkbox 1, focus
- `screenshots/c-checkbox-1--disabled.png`: Checkbox 1, disabled
- `screenshots/c-checkbox-1--checked.png`: Checkbox 1, checked
- `screenshots/c-fieldset-1--rest.png`: Fieldset / form section 1 ("Opt out"), rest
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Pricing"), rest
- `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Pricing"), hover
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Pricing"), focus
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Products"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Products"), hover
- `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by menu-button "Products"
- `screenshots/c-menu-button-1--open.png`: Menu / dropdown trigger 1 ("Products"), open (trigger)
- `screenshots/c-tabs-1--rest.png`: Tabs 1, rest
- `screenshots/c-tabs-1--selected.png`: Tabs 1, another tab selected
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Business Checking & Savi"), rest
- `screenshots/c-card-1--rest.png`: Card 1 ("$1B in annualized revenu"), rest
- `screenshots/c-feature-item-1--rest.png`: Feature item (icon + title + text) 1 ("Mercury for businessFor "), rest
- `screenshots/c-feature-item-1--hover.png`: Feature item (icon + title + text) 1 ("Mercury for businessFor "), hover
- `screenshots/c-stat-1--rest.png`: Stat / metric 1 ("450K+Entrepreneurs love "), rest
- `screenshots/c-list-1--rest.png`: Styled list 1 ("Mercury is a fintech com"), rest
- `screenshots/c-accordion-1--rest.png`: Accordion / disclosure 1 ("Apply online in 10 minut"), rest
- `screenshots/c-accordion-1--open.png`: Accordion / disclosure 1 ("Apply online in 10 minut"), closed
- `screenshots/c-avatar-1--rest.png`: Avatar 1, rest
- `screenshots/c-blockquote-1--rest.png`: Blockquote 1 ("Unlike most financial in"), rest
- `screenshots/c-image-1--rest.png`: Image / figure 1, rest
- `screenshots/c-newsletter-form-1--rest.png`: Newsletter / signup form 1 ("Enter your emailOpen acc"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#171721` | Page background |
| surface | `#353644` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#20202c` | Secondary surface |
| foreground | `#ededf3` | Primary text |
| muted-foreground | `#c3c3cc` | Secondary text, captions |
| primary | `#5266eb` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| border | `#70707d` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#171721`, `#353644`, `#5266eb`, `#20202c`, `#ededf3`, `#cdddff`.

Gradients in use: `linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%)`.

The accent `#5266eb` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **arcadiaDisplay** for h1, h2: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **arcadia** for body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | arcadiaDisplay | 49.3472px | 480 | 54.2819px | normal |
| headline-lg | arcadiaDisplay | 28px | 480 | 33.6px | 0.42px |
| headline-md | arcadia | 24px | 400 | 1.4 | normal |
| body-md | arcadia | 12px | 400 | 16.8px | 0.24px |
| label-md | arcadia | 16px | 400 | 24px | normal |
| button | arcadia | 16px | 480 | 21.6px | normal |
- headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight.

Type scale in use: 12px, 16px, 18px, 28px, 42px, 49px. Base body size 12px.

The hero heading (h1) renders at 49.3472px / 480, center aligned, up to 672px wide. Sample: "Radically different banking".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40, 72, 128 (px).
- Flex and grid gaps: 4, 8, 12, 32, 40 px.
- Content max width: 1024px, centred.
- Breakpoints: 640px, 768px, 1024px, 1536px, 1952px.
- Header: 72px tall, relative, background `rgba(0, 0, 0, 0)`; 4 nav links at 16px / 400 (Mercury logoThe logo for Mercury, featuring a circular emblem with abstract, int · Pricing · Log in · Open account).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.05) 0px 8px 12px 0px, rgba(0, 0, 0, 0.05) 0px 12px 20px 0px`

## Shapes

- Buttons: 32px
- Inputs: 32px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, 2xl 32px, sm 4px, lg 12px, md 8px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#171721`, so place it on that colour), text `#ededf3`, border none, radius 40px, height 40px, padding 0px 20px, 16px / 420. Sample label: "Products".

### Button, primary

Background `#5266eb`, text `#ffffff`, border none, radius 32px, height 40px, padding 0px 20px, 16px / 420. Sample label: "Open account".

### Button, secondary

Background `#afb2ce33`, text `#ededf3`, border 1px solid #afb2ce5c, radius 40px, height 40px, padding 0px 20px, 16px / 420. Sample label: "Launch demo".

### Input

Height 46px, background `transparent`, border 0px solid #ededf3, radius 32px, 16px text, padding 0px 0px.

### Link

Colour `#ededf3`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (29 of 87 in the checklist, 41 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 20 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost, primary, ink-icon-right, ink | focus, disabled | "Business banking & more" |
| Icon button | ink, ink | focus, active, disabled |  |
| Text link | underlined, underlined, underlined | focus, active | "not an FDIC-insured bank" |
| Text input | outlined-icon-right | focus, disabled, filled |  |
| Checkbox | native | hover, focus, disabled, checked |  |
| Field label | other, right | rest only | "Enter your email" |
| Fieldset / form section | default | rest only | "Opt out" |
| Header / navbar | default | rest only | "Mercury logoThe logo for Mercu" |
| Navigation link | plain, plain | hover, focus | "Pricing" |
| Menu / dropdown trigger | ghost | hover, open | "Products" |
| Tabs | plain | selected |  |
| Footer | default | rest only | "BankingBusiness Checking & Sav" |
| Footer link | plain | rest only | "Business Checking & Savings" |
| Card | filled-with-media | rest only | "$1B in annualized revenue and " |
| Feature item (icon + title + text) | filled | hover | "Mercury for businessFor $0/mon" |
| Stat / metric | default | rest only | "450K+Entrepreneurs love us" |
| Styled list | default | rest only | "Mercury is a fintech company, " |
| Accordion / disclosure | aria, aria | rest only | "Apply online in 10 minutesFree" |
| Avatar | 1024px-rounded | rest only |  |
| Blockquote | default | rest only | "Unlike most financial institut" |
| Image / figure | aspect-1.5, aspect-1.5, aspect-1.5 | rest only |  |
| Video / media embed | default | rest only |  |
| Icon | filled-40px | rest only |  |
| Newsletter / signup form | default | rest only | "Enter your emailOpen accountOp" |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Combobox / custom select, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Testimonial / quote card, List row / menu row, Table, Table row, Avatar stack, Divider, Code block / inline code, Keyboard key, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Search results / listing row, Content container.

## Dark Mode

The site is dark by default and no light mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1024px | 384px | 16px | 49.3px, 1 line, center | 72px, 4 links, 1 CTA | media behind/overlapping text | 2→1 col; 3→1 col; 2→1 col | content-width |
| laptop 1024px | 712px | 280px | 16px | 38.2px, 1 line, center | 72px, 4 links, 1 CTA | media behind/overlapping text | 2→1 col; 3→1 col; 2→1 col | content-width |
| tablet 768px | 720px | 147px | 16px | 31.4px, 1 line, center | 0px, 0 links | media behind/overlapping text | 2→1 col; 2→2 col; 3→3 col | 4 full-width |
| phone 390px | 342px | 24px | 16px | 28px, 1 line, center | 0px, 0 links | media behind/overlapping text | 2→1 col; 3→1 col; 2→2 col | 15 full-width |

- H1 goes 49.3px → 28px (57%), 1 → 1 lines.
- No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified.
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 24px.
- 15 buttons stretch full-width on phones.
- Horizontal overflow at 1440, 1024px (the source has a responsive bug; do not copy it).

## Interaction & Motion

131 elements carry transitions; typical 0.3s with cubic-bezier(0, 0, 0.2, 1), mostly on color, background-color, border-color. 8 running keyframe animations (translateUp 0.67s 1; fadeIn 0.67s 1; fadeOutBlur 0.5s 1).

- Hover on button-primary ("Open account"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to | 0.3s | cubic-bezier(0, 0, 0.2, 1).
- Hover on button-secondary ("Open account"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to | 0.3s | cubic-bezier(0, 0, 0.2, 1).
- Hover on nav-link ("Pricing"): background transparent → #9cb4e847; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to | 0.3s | cubic-bezier(0, 0, 0.2, 1).
- Hover on input: no visible change; cursor text.
- Focus on button-primary: outline 2px solid rgb(156, 180, 232), offset 4px.
- Focus on input: outline 1px none rgb(16, 16, 16).
- Tooltip triggers exist (16 × aria-describedby, 20 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- No dropdown menus found in the header.
- 18 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#5266eb` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 12px in arcadia and headings in arcadiaDisplay.
- Do match corner radii per element class (buttons 32px, cards 0px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from page-wrapper; large surface colors remain in the palette.