Mercury DESIGN.md

Overview

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.

Colors

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.

Typography

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

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.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 40px · {spacing.section} 80px · {spacing.section-lg} 128px.
• Cards pad {spacing.xxl} and pills pad 20px horizontally. Sections are separated by {spacing.section} to {spacing.section-lg} of vertical space on every page.

Grid & Container

• Content is centered in a column of roughly 1100–1200px. Headlines are narrower (~600px) and centered.
• Feature cards run in 2- and 3-up grids. The pricing card is a 3-column comparison table about 900px wide.
• Split sections pair a text column with a product mockup.

Whitespace Philosophy

Generous vertical space and centered headlines give every section a calm, gallery-like pace. Cards rely on fill colour rather than borders to separate from the canvas.

Responsive Strategy

Breakpoints

Touch Targets

Pills are 40px tall and the email capture is 46px. On touch devices, pad hit areas to 44px.

Collapsing Strategy

• Nav dropdown pills collapse into a menu. The "Open account" pill stays visible.
• Card grids reflow 3 → 2 → 1 columns.
• Headline sizes are fluid and scale with the viewport.
• The email capture stacks the field above the button on narrow screens.

Image Behavior

Product mockups and illustrations sit inside rounded cards ({rounded.md}) or float on the canvas. Hero photography on the homepage is full-bleed and fades into the night canvas.

Elevation & Depth

Depth is almost entirely tonal: cards lift by one step of colour, not by shadow. The only shadows are hair-thin, low-opacity stacks under the pricing card and floating product mockups.

Decorative Depth

The dark homepage uses luminous, softly-lit 3D illustrations (glowing orbs, light trails, fingerprint patterns) that give the night canvas atmosphere without gradients in the UI chrome itself.

Shapes

Border Radius Scale

Photography Geometry

Product screenshots and illustrations sit in {rounded.md} or {rounded.lg} frames. Hero photography is full-bleed. Customer logos appear as a flat monochrome strip.

Components

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

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — feature-card shape + medium shadow.

• Properties: backgroundColor, rounded, padding, typography

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.