Mercury design system

What font does Mercury use?

Mercury’s website uses arcadia Display for headings and Arcadia for body text. arcadia Display is not on Google Fonts; the closest free match is Archivo; Arcadia is not on Google Fonts; the closest free match is Figtree.

Mercury colour palette

Mercury’s home page is dark (#171721 background, #EDEDF3 text) and uses #9CB4E8 for its main actions. Its palette: #171721, #FFFFFF, #EDEDF3, #1E1E2A, #C3C3CC, #FCFCFA.

• #171721
  56.8% · backgrounds
• #FFFFFF
  37.4% · backgrounds
• #EDEDF3
  2.5% · text
• #1E1E2A
  1.7% · backgrounds
• #C3C3CC
  1.3% · text
• #FCFCFA
  0.2% · backgrounds
• #70707D
  hairlines and grid lines
• #2A2924
  small marks
• #272735
  Surface
• #9CB4E8
  Action

Type scale

Each size the page sets text in, with its weight and line height. Mercury’s largest type is 65.34px at weight 480.

Spacing and shape

Spacing sits on a 8px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px, 72px, 80px, 112px.

Corner radii: 4px, 8px, 12px, 32px, pill. 2 shadow levels measured.

What makes Mercury look like Mercury

Almost entirely neutral: 99% of the page is painted in #171721 and #FFFFFF.

#5266EB is an accent: under 0.1% of the page, as small fills such as buttons and badges. Keep it to small areas.

#CDDDFF is an accent: under 0.1% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (65.34px arcadiaDisplay) is medium weight, not bold (480).

Mercury DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Mercury’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Mercury’s product, so use your own name, words and images.

Download Mercury DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Mercury’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&display=swap");

:root {
  --color-background: #171721; /* Background */
  --color-surface: #272735; /* Surface */
  --color-text: #EDEDF3; /* Text */
  --color-text-muted: #C3C3CC; /* Text muted */
  --color-action: #9CB4E8; /* Action */
  --color-on-action: #000000; /* On action */
  --color-ffffff: #FFFFFF; /* 37.4% of the page, as fills */
  --color-1e1e2a: #1E1E2A; /* 1.7% of the page, as fills */
  --font-body: arcadia, "Figtree", sans-serif; /* arcadia on the site; Figtree renders */
  --font-display: "arcadiaDisplay", "Archivo", sans-serif; /* arcadiaDisplay on the site; Archivo renders */
  --type-display-large: 65.34px; /* Display Large, weight 480 */
  --type-display-large-leading: 71.8784px;
  --type-display-medium: 49.35px; /* Display Medium, weight 480 */
  --type-display-medium-leading: 54.2819px;
  --type-display-small: 42px; /* Display Small, weight 480 */
  --type-display-small-leading: 48.3px;
  --type-display-small-tracking: 0.01em;
  --type-headline-large: 32px; /* Headline Large, weight 480 */
  --type-headline-large-leading: 36.8px;
  --type-headline-large-tracking: 0.015em;
  --type-headline-medium: 28px; /* Headline Medium, weight 360 */
  --type-headline-medium-leading: 33.6px;
  --type-headline-medium-tracking: 0.015em;
  --type-headline-small: 24px; /* Headline Small, weight 480 */
  --type-headline-small-leading: 28.8px;
  --type-headline-small-tracking: 0.02em;
  --type-title-large: 21.01px; /* Title Large, weight 360 */
  --type-title-large-leading: 28.3608px;
  --type-title-small: 18px; /* Title Small, weight 360 */
  --type-title-small-leading: 24.3px;
  --type-body: 16px; /* Body, weight 400 */
  --type-body-leading: 22.4px;
  --type-label: 12px; /* Label, weight 400 */
  --type-label-leading: 16.8px;
  --type-label-tracking: 0.02em;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-18: 72px;
  --space-20: 80px;
  --space-28: 112px;
  --space-32: 128px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-3xl: 32px;
  --radius-full: 9999px;
  --radius-40: 40px; /* component radius */
}

How this was measured

PikSpec’s scanner read the mercury.com home page in Chrome at 1440px wide on 14 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Mercury is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Mercury.

Similar dark designs: Aesop · Bolt · Descript · DigitalOcean · Discord · Framer

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.