Mercury Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

14tokens

9type steps

7radius steps

8pxspacing base

Mercury, in one page

Mercury feels like a private bank that happens to be a software company: quiet, precise and slightly nocturnal. The homepage lives in a deep ink-violet night ({colors.night} — #171721). Headlines are pale lavender-white ({colors.on-dark}), cards sit one shade lifted ({colors.night-raised}), and product imagery glows softly out of the dark. Move to the product and pricing pages and the whole system flips to day: a near-white canvas ({colors.canvas}), deep plum-ink text ({colors.ink}) and pale lavender feature cards ({colors.lavender}). The nav bar and footer stay in the night colour on every page, so each light page is bracketed in dark.

One colour carries the actions in both worlds: Mercury Indigo ({colors.primary} — #5266eb). It fills the "Open account" pill in the nav and hero, the annual-pricing toggle, and the brand accent in plan names. Everything else that is clickable is softer: translucent secondary pills tinted with lavender-grey, periwinkle or a 10% wash of the indigo, all with generous 40px capsule corners. The effect is calm and confident, with one saturated button and everything around it whispering.

Typography is Mercury's own custom family: arcadiaDisplay for headlines and arcadia for text, set at unusually light variable weights (360 for body copy, 420 for UI, 480 for headlines). Nothing on the page is bold in the usual sense. Headlines get presence from size and a hair of extra tracking, not weight.

Key Characteristics:

Two native surface worlds: a dark homepage ({colors.night} / {colors.night-raised}) and light product pages ({colors.canvas} / {colors.lavender}), both framed by the night nav and footer.
A single saturated action colour, {colors.primary}, on a {rounded.xl} pill.
Secondary actions as translucent capsules ({rounded.pill}) rather than outlines or grey buttons.
Custom arcadia / arcadiaDisplay type at light variable weights (360–480).
Softly rounded cards ({rounded.md}) with generous {spacing.xxl} padding and no shadows.
Page rhythm: night nav → dark or light hero → alternating card grids → centered quote → closing CTA → night footer.

Do's and don'ts

Do

Use {colors.primary} for the single most important action on a view, usually "Open account".
Make secondary actions translucent pills ({rounded.pill}): lavender-grey or periwinkle on dark, indigo or grey-violet tints on light.
Frame light pages with the {colors.night} nav and footer.
Keep type light: {typography.body-lg} at 360, UI at 420, headlines at 480.
Separate cards from the canvas with fill ({colors.lavender}, {colors.night-raised}) rather than borders or heavy shadows.
Center section headlines and give sections {spacing.section} or more of vertical space.

Don't

Don't use more than one solid {colors.primary} button in a group. Everything else stays translucent.
Don't set text in heavy bold weights. The brand never goes above 500.
Don't use hard outlined buttons or square corners on actions.
Don't put light-world ink ({colors.ink}) on night surfaces or {colors.on-dark} on the light canvas.
Don't add strong drop shadows. Elevation is tonal.
Don't introduce status greens or oranges into the chrome. They belong to product mockups, not the interface.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Mercury design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #5266eb
- on-primary: #ffffff
- periwinkle: #9cb4e8
- canvas: #fbfcfd
- surface: #ffffff
- surface-tint: #fbfbff
- lavender: #edecfb
- night: #171721
- night-raised: #1e1e2a
- ink: #28253b

Type:
- families: arcadiaDisplay, arcadia
- scale: 12, 14, 16, 18, 24, 28, 42, 52, 60
- weights: 360, 400, 420, 480, 500

Shape:
- radius: 0, 4, 8, 12, 16, 32, 40
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 8, 12, 16, 20, 24, 32, 40, 80, 128

Rules:
- Use `{colors.primary}` for the single most important action on a view, usually "Open account".
- Make secondary actions translucent pills (`{rounded.pill}`): lavender-grey or periwinkle on dark, indigo or grey-violet tints on light.
- Frame light pages with the `{colors.night}` nav and footer.
- Keep type light: `{typography.body-lg}` at 360, UI at 420, headlines at 480.
- Separate cards from the canvas with fill (`{colors.lavender}`, `{colors.night-raised}`) rather than borders or heavy shadows.
- Center section headlines and give sections `{spacing.section}` or more of vertical space.

Avoid:
- Don't use more than one solid `{colors.primary}` button in a group. Everything else stays translucent.
- Don't set text in heavy bold weights. The brand never goes above 500.
- Don't use hard outlined buttons or square corners on actions.
- Don't put light-world ink (`{colors.ink}`) on night surfaces or `{colors.on-dark}` on the light canvas.
- Don't add strong drop shadows. Elevation is tonal.
- Don't introduce status greens or oranges into the chrome. They belong to product mockups, not the interface.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages analysed: the homepage, the pricing page, and the business-banking product page.

Brand & Accent

Mercury Indigo ({colors.primary} — #5266eb): "Open account" pills, the annual-pricing toggle, the brand accent in plan names ("Plus", "Pro"), and the 10% tint behind light-world secondary pills.
On Primary ({colors.on-primary} — #ffffff): labels on indigo.
Periwinkle ({colors.periwinkle} — #9cb4e8): used at 20% opacity as the fill of the "Contact sales" pill on dark sections.

Surface

Canvas ({colors.canvas} — #fbfcfd): light page background for the product and pricing pages.
Surface ({colors.surface} — #ffffff): tier columns inside the pricing card, and the email-capture field.
Surface Tint ({colors.surface-tint} — #fbfbff): the pricing comparison card wrapper, a whisper cooler than white.
Lavender ({colors.lavender} — #edecfb): feature and product cards on light pages.
Night ({colors.night} — #171721): nav bar, homepage canvas, and footer on every page.
Night Raised ({colors.night-raised} — #1e1e2a): feature and spotlight cards on the dark homepage.

Text

Ink ({colors.ink} — #28253b): headlines and body on light pages.
Ink Secondary ({colors.ink-secondary} — #554e7b): descriptions, captions and eyebrows on light pages.
On Dark ({colors.on-dark} — #ededf3): headlines and primary text on night surfaces.
Fog ({colors.fog} — #c3c3cc): secondary text on night surfaces, nav eyebrows, and 1px rules between accordion rows on light pages.
Slate ({colors.slate} — #70707d): 1px dividers between list rows on the dark homepage.

Type scaleRead the full spec

Font Family

arcadiaDisplay: Mercury's custom display face for headlines, stats and large quotes, at weight 480 with slight positive tracking at card sizes.
arcadia: the matching text face for body copy (360–400), UI labels and buttons (420), and small uppercase eyebrows (500).

Hierarchy

Token	Family	Size	Weight	Line Height	Letter Spacing	Use
`{typography.stat}`	arcadiaDisplay	60px	480	1.1	0	Large stat numerals ("300K+")
`{typography.display}`	arcadiaDisplay	52px	480	1.1	0	Hero headlines
`{typography.heading-1}`	arcadiaDisplay	42px	480	1.15	0.42px	Section headlines
`{typography.heading-2}`	arcadiaDisplay	28px	480	1.2	0.42px	Card titles, plan names
`{typography.lead}`	arcadiaDisplay	24px	480	1.2	0.48px	Lead statements, pull quotes
`{typography.body-lg}`	arcadia	18px	360	1.35	0	Card descriptions, intro copy
`{typography.body}`	arcadia	16px	400	1.4	0	Default body copy
`{typography.ui}`	arcadia	16px	420	1	0	Buttons, nav, inputs
`{typography.ui-sm}`	arcadia	14px	420	1	0.07px	Small pills, accordion labels
`{typography.eyebrow}`	arcadia	14px	500	1	0.28px	Uppercase eyebrows ("COMPARE PLANS")
`{typography.legal}`	arcadia	12px	400	1.4	0.24px	Disclaimers, footer fine print

Principles

Light weights everywhere: body at 360, UI at 420, headlines at 480. Hierarchy comes from size and colour.
Headlines get a touch of positive tracking at card sizes instead of the usual negative tightening.
Uppercase is reserved for small eyebrows.

Note on Font Substitutes

arcadia and arcadiaDisplay are proprietary. Inter (variable, used at 350–480) is the closest open-source match for both. Keep the light weights, and add about 0.01em of tracking at display sizes to match arcadiaDisplay's open fit.

Components and layoutRead the full spec

Only Default states are documented. Variants live as separate components: entries.

Navigation

nav-bar: a 72px {colors.night} bar on every page, with 16px × 32px padding. It holds the wordmark on the left, dropdown nav-link pills in the centre, and "Log in" plus a button-primary on the right.

nav-link: transparent 40px pills ({rounded.pill}, 0 × 20px padding) in {colors.on-dark} {typography.ui} with small chevrons.

Buttons

button-primary: a {colors.primary} pill with a {colors.on-primary} {typography.ui} label, {rounded.xl} corners, 0 × 20px padding and 40px height. Used for "Open account".

button-glass-dark: a translucent lavender-grey pill (20% fill, with a 1px border at 36%) holding an {colors.on-dark} label. Used on the dark hero ("Launch demo").

button-tint-dark: a periwinkle pill at 20% opacity with an {colors.on-dark} label. Used for "Contact sales" on dark sections.

button-tint-light: an indigo pill at 10% opacity with an {colors.ink} label. Used for "Explore demo" and the in-card "Open account" on light pages.

button-outline-light: a grey-violet pill at 10% opacity with a 1px border at 22% and an {colors.ink} label. Used for "Contact sales" on light heroes.

button-small: a 32px-tall version of button-tint-light in {typography.ui-sm} with 0 × 16px padding ("Expand all").

button-icon-round: circular icon controls ({rounded.full}) for play/pause and the "+" affordance on spotlight cards.

Inputs & Forms

text-input: an email field with {typography.ui} text, 20px left padding, 46px height, and {rounded.xl} on the left edge only, so it fuses to the button beside it.

email-capture: the hero sign-up capsule, a text-input joined to a button-primary inside one rounded-full shell.

toggle-switch: a {colors.primary} pill switch beside an {colors.ink-secondary} {typography.ui} label ("Annual Pricing (15% off)").

Cards & Containers

feature-card-dark: {colors.night-raised} fill, {rounded.md} corners, {spacing.xxl} padding, a {typography.heading-2} title in {colors.on-dark} and {colors.fog} body copy. Used for homepage spotlight and feature cards.

feature-card-light: the same shape on {colors.lavender}, with {colors.ink} titles and {colors.ink-secondary} {typography.body-lg} descriptions. Used for product-platform cards.

pricing-card: a {colors.surface-tint} wrapper with {rounded.md} corners and a very faint shadow. It holds a header row with a eyebrow-label and toggle-switch, then three pricing-tier-columns.

pricing-tier-column: a white column with the plan name in {typography.heading-2} (the plan suffix in {colors.primary}), the price, a {colors.ink-secondary} description, a button-tint-light or button-primary, and an icon-led feature list.

accordion-row: a full-width row with a leading icon, a {typography.ui-sm} label, a trailing chevron, 10px vertical padding and a 1px {colors.fog} rule between rows. Used for plan comparison and FAQs.

Signature Components

eyebrow-label: uppercase {typography.eyebrow} in {colors.ink-secondary} on light pages and {colors.fog} on dark ("COMPARE PLANS").

stat-block: a {typography.stat} numeral in {colors.on-dark} over a small {colors.fog} caption, set in a row of four on the homepage.

quote-block: a centered pull quote in {typography.lead} with attribution below in {typography.body}.

logo-strip: a single row of monochrome customer wordmarks on the night canvas.

site-footer: a {colors.night} band with multi-column link lists in {colors.fog}, column heads in {colors.on-dark}, and a long block of {typography.legal} disclaimers.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

Properties: backgroundColor, activeIndicator, rounded, padding

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-mercury {--page-bg: #fbfcfd;
  --page-bg-gradient: none;
  --text-color: #28253b;
  --heading-color: #28253b;
  --link-color: #5266eb;
  --link-hover-color: #243ee6;
  --border-color: #d5d5da;
  --card-bg: #fbfcfd;
  --card-shadow: 0 1px 2px rgba(40,37,59,0.06);
  --card-hover-shadow: 0 6px 18px rgba(40,37,59,0.12);
  --header-bg: #28253b;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #fbfcfd;
  --footer-text-color: #72707f;
  --button-bg: #5266eb;
  --button-text-color: #ffffff;
  --button-hover-bg: #243ee6;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #eeeff1;
  --button-secondary-text-color: #28253b;
  --button-secondary-hover-bg: #e2e2e6;
  --button-secondary-border: 1px solid #d5d5da;
  --prompt-bg: #f0f1f3;
  --prompt-text-color: #28253b;
  --base-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

grand seiko 73.0%
life360 71.6%
lovable 70.0%

Where this came from

Source document: volt/design-md/mercury/DESIGN.md · 24.3 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.