Mercury Design System

Overview

Mercury's visual identity is built around a confident dark-mode aesthetic that positions business banking as something modern, aspirational, and fundamentally different from traditional financial institutions. The design leans into atmosphere—the deep navy {colors.canvas} background (#1e1e2a) creates an immersive canvas that makes the electric indigo {colors.primary} brand color (#5266eb) pop with genuine voltage. This isn't a cautious fintech palette; it's a statement that banking can feel like premium software.

The typography system is anchored by two proprietary typefaces from the Arcadia family: Arcadia Display carries all headline and title weight with its geometric yet warm character at a distinctive fontWeight: 480—heavier than light but never bluntly bold—while Arcadia handles body text at fontWeight: 420, a similarly precise intermediate weight that feels substantial without shouting. This refusal to default to standard 400/700 pairs is the single typographic move that defines the system's voice.

Shape language favors generous rounding—nearly every interactive element uses {rounded.pill} (9999px) or {rounded.xl} (32px)—creating a friendly, approachable counterpoint to the dark, serious canvas. The hero email input group is a signature moment: a {rounded.pill} container holding a {rounded.xl} left-side input fused to a {button-primary} on the right, creating a single compound conversion instrument.

The site operates as a marketing landing page with clear sub-system intent: the hero band converts visitors via email capture, while the navigation architecture supports exploration of Products, Solutions, Resources, About, and Pricing. A footer disclaimer bar in semi-transparent black anchors the bottom of the viewport.

Key Characteristics:

• Dark-first canvas ({colors.canvas} — #1e1e2a) with no light-mode variant visible; this is inherently a night-sky aesthetic
• Electric indigo brand voltage ({colors.primary} — #5266eb) reserved strictly for CTAs and active states
• Proprietary Arcadia typeface pair operating at non-standard weights (420 for body, 480 for display)
• Pill-shaped interactive elements ({rounded.pill}) as the dominant shape motif across buttons, nav links, and inputs
• Atmospheric full-bleed photography in the hero, treated as environmental depth rather than illustration
• Glassmorphic surface treatments using layered rgba backgrounds ({colors.accent-soft}, {colors.secondary})
• Generous vertical rhythm with {spacing.hero} (128px) padding in the hero band
• Focus-visible outlines in {colors.border-focus} brand blue for accessibility
• Transition system rooted in cubic-bezier(0.4, 0, 0.2, 1) ease-out curves at 300ms standard duration

Colors

Brand & Accent

• Primary ({colors.primary} — #5266eb): The signature electric indigo used exclusively on {component.button-primary} calls-to-action, focus rings, and active navigation states. This is the sole carrier of brand voltage.
• Primary Hover ({colors.primary-hover} — #6b7f0): Lightened indigo for hover states on primary buttons, providing clear interaction feedback without shifting hue.
• Primary Active ({colors.primary-active} — #4054d9): Deepened indigo for pressed/active states on {component.button-primary-active}, creating tactile depth.
• Primary Disabled ({colors.primary-disabled} — #3d4575): Muted desaturated navy for disabled button states, maintaining position but removing affordance.
• Accent ({colors.accent} — #cddfff): Pale ice-blue used for subtle highlights, icon fills in light contexts, and decorative accents.
• Accent Soft ({colors.accent-soft} — rgba(156, 180, 232, 0.2)): Semi-transparent lavender-blue tint applied to {component.icon-button} and {component.nav-link-active} backgrounds for glassmorphic depth.
• Secondary ({colors.secondary} — rgba(175, 178, 206, 0.2)): Cool gray-tinted translucent surface for {component.button-secondary}, {component.email-input-group} containers, and subtle panel differentiation.

Surface

• Canvas ({colors.canvas} — #1e1e2a): The foundational deep navy that coats the entire page background and {component.top-nav} bar. This is the primary environment color.
• Surface Soft ({colors.surface-soft} — #171721): One shade deeper than canvas, used for {component.card-surface} panels and elevated containers that need to recede slightly.
• Surface Strong ({colors.surface-strong} — #272735): Lighter than canvas, used for {component.pricing-card-featured} and surfaces that should advance visually.
• Surface Elevated ({colors.surface-elevated} — #39394d): Medium-light gray-navy for {component.card-elevated} and modal-style surfaces requiring clear layer separation.
• Surface Input ({colors.surface-input} — transparent): Inputs use transparent backgrounds, relying on their container ({component.email-input-group}) for visible surface definition.

Text & Ink

• Ink ({colors.ink} — #ededf3): Primary text color—a cool near-white—for headlines, body copy, and UI text on dark surfaces. Used in {component.hero-headline} and {component.top-nav}.
• Body ({colors.body} — #000000): Pure black, observed in specific {typography.body-md} instances where maximum contrast against light elements is required (rare in this dark theme).
• Muted ({colors.muted} — #c3c3cc): Mid-gray for secondary text, placeholder content, and {component.footer-disclaimer} legal copy.
• Muted Soft ({colors.muted-soft} — #f4f5f9): Very pale gray, nearly white, for the lightest text hierarchy tier—disclaimer text on darkest backgrounds.
• On Primary ({colors.on-primary} — #ffffff): Pure white text on {colors.primary} backgrounds, satisfying AA contrast requirements on CTAs.
• On Dark ({colors.on-dark} — #ededf3): Alias for {colors.ink}, used when semantic clarity helps—text sitting directly on {colors.canvas} or photographic dark areas.
• On Surface ({colors.on-surface} — #ededf3): Another alias for primary ink, used on elevated surface cards.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(237, 237, 243, 0.12)): Barely-visible dividers at 12% opacity white, used for {component.separator} rules and subtle boundary indication.
• Border Strong ({colors.border-strong} — rgba(237, 237, 243, 0.2)): More visible borders at 20% opacity, for input focus states and defined container edges.
• Border Focus ({colors.border-focus} — #5266eb): Brand-color focus rings matching {colors.primary}, providing accessible focus indication per WCAG guidelines.

Semantic

• Error ({colors.error} — #f87171): Warm red for form validation errors and destructive actions (inferred from standard semantic patterns).
• Success ({colors.success} — #4ade80): Green for confirmation states, successful transactions, and positive feedback.
• Warning ({colors.warning} — #fbbf24): Amber for cautionary messages and attention-required states.
• Info ({colors.info} — #60a5fa): Sky blue for informational tooltips and help text.
• Link ({colors.link} — #5266eb): Inline links inherit the primary brand color for consistency.
• Link Active ({colors.link-active} — #cddfff): Hover/visited state for links, lightening to the accent blue.

Typography

Font Family

The Mercury type system is built on two proprietary fonts from the Arcadia family, served as WOFF2 variable fonts with carefully constructed fallback metrics:

• Arcadia Display (arcadiaDisplay, "arcadiaDisplay Fallback"): A geometric display face with variable weights ranging 320–480. It carries all headline and title text, bringing a technical-yet-editorial character that feels simultaneously precise and approachable. The fallback maps to Arial with 102.29% ascent override and 92.89% size-adjust to preserve cap-height relationships.

• Arcadia (arcadia, "arcadia Fallback"): The companion text face covering weights 360–500, used for body copy, UI elements, navigation, and buttons. Its fallback also uses Arial, tuned with 93.24% ascent override and 101.91% size-adjust. Both faces share geometric DNA but Arcadia has more open counters for small-size readability.

Additionally, the font stack includes Tiempos Headline (tiemposHeadline) loaded for potential editorial sections—this is a serif face available in weights 300–500 with italic variants, suggesting long-form content areas may exist beyond the landing page viewport.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 480 | 1.1 | -0.02em | Hero-level display headlines (section openers) | | {typography.display-lg} | 49.3472px | 480 | 1.1 | -0.01em | Primary hero headline ("Radically different banking") | | {typography.title-md} | 42px | 480 | 1.15 | 0.42px | Section titles, major headings | | {typography.title-sm} | 28px | 480 | 1.2 | 0 | Subsection headings, card titles | | {typography.body-md} | 16px | 420 | 1.5 | 0 | Body copy, paragraph text, input values | | {typography.body-sm} | 14px | 420 | 1.5 | 0 | Secondary body text, helper text | | {typography.caption} | 12px | 480 | 1.4 | 0.24px | Legal disclaimers, tags, timestamps | | {typography.button} | 14px | 420 | 1.25 | 0 | Button labels, CTAs | | {typography.label-md} | 16px | 400 | 1.5 | 0 | Form labels, navigation items | | {typography.nav-link} | 16px | 420 | 1.5 | 0 | Top navigation links |

Principles

The most distinctive typographic choice is the intermediate weight philosophy: body text sits at 420, headlines at 480. These are deliberately non-standard values made possible by the variable font implementation. The system trusts size and color to carry hierarchy rather than weight contrast—a {typography.display-lg} headline at 49px weighs only 60 units more than body text, but the size differential (3×) and color placement (on dark canvas) do the heavy lifting. This creates a refined, European-editorial feel that avoids the bluntness of bold headlines common in American tech design.

Letter-spacing is used sparingly and purposefully: {typography.title-md} gains +0.42px tracking (approximately 1% of font size) for display presence at large sizes, while {typography.caption} gets +0.24px for legibility at small sizes. All other roles use normal (0) spacing, letting the typeface's native proportions speak.

Line heights are consistently generous: 1.1 for display (tight enough for impact), 1.15–1.2 for titles, and 1.5 for all readable text. This airiness complements the dark canvas, preventing the density that plagues many dark-mode designs.

Note on Font Substitutes

Arcadia and Arcadia Display are proprietary Mercury fonts not available via Google Fonts. For implementation without licensed access:

• Arcadia → Inter: The closest Google Font in geometric character and variable weight support. Define --font-body: 'Inter', sans-serif; and adjust weight mappings: 420 → 450, 480 → 600.
• Arcadia Display → Outfit: A geometric display alternative with similar width and open apertures. Define --font-display: 'Outfit', sans-serif; with 480 → 600.
• Tiempos Headline → Lora or Source Serif 4: For any serif sections, Lora provides comparable editorial warmth.

CSS variable pattern:

:root {
  --font-display: 'Arcadia Display', 'Outfit', sans-serif;
  --font-body: 'Arcadia', 'Inter', sans-serif;
  --font-serif: 'Tiempos Headline', 'Lora', serif;
}

Layout

Spacing System

• Base unit: 4px (the GCD of the extracted spacing distribution).
• Tokens: {spacing.xxs} (1px — hairlines and micro-adjustments), {spacing.xs} (2px — internal gaps, focus offsets), {spacing.sm} (4px — icon-text gaps, tight clusters), {spacing.md} (8px — inline element spacing), {spacing.base} (12px — list item gaps, compact padding), {spacing.lg} (16px — card internal padding), {spacing.xl} (20px — button padding, comfortable gaps), {spacing.xxl} (24px — section-internal margins), {spacing.section} (32px — the most common spacing, used 137 times for element stacks), {spacing.section-lg} (40px — major section breaks), {spacing.section-xl} (72px — between major page bands), {spacing.hero} (128px — hero vertical padding).
• Section padding (vertical): {spacing.hero} (128px) — used in {component.hero-band} to create the expansive, cinematic opening impression.
• Card internal padding: {spacing.xxl} (24px) — used in {component.card-surface} and {component.pricing-card}.
• Gutters: Navigation uses {spacing.xl} (20px) horizontal padding within the 1440px max-width container; content columns appear to use ~24–32px internal gutters.

Grid & Container

• Max content width: 1440px (extracted from main, section, and nav container widths).
• Density choice: Editorial-marketing density—generous whitespace, single-column hero text (centered or left-aligned within the container), with the photography treatment providing visual complexity rather than grid density.
• Desktop grid behavior: The hero appears to use a flexible 2-column mental grid (text column ~50-60%, imagery column ~40-50%) rather than a rigid 12-column system. Below-fold content likely shifts to feature grids (3–4 columns for product cards).
• Hero column splits: Headline, subhead, and CTA group stack vertically in a left/center text column; the desk-on-mountain photograph occupies the remaining space as a full-bleed background or right-column element.

Whitespace Philosophy

Mercury embraces editorial-airy whitespace as a luxury signal. The dark canvas amplifies the perception of space—each {spacing.section} (32px) gap feels larger than it would on white. The hero's 128px vertical padding creates a "landing" sensation, letting the mountain imagery breathe. This is not marketplace-dense; it's brand-atmosphere design where emptiness conveys confidence.

Header Architecture

|<------------------- 1440px max-width container ------------------->|
[LOGO]     [Products v] [Solutions v] [Resources v] [About v] [Pricing]   [Log in] [Open account]
16px       0 20px        0 20px        0 20px        0 20px              16px 32px    auto
           <- {rounded.xxl} pill-shaped hover zones ->

The {component.top-nav} spans full viewport width at 80px height, with content constrained to 1440px. Logo sits flush left. Five navigation triggers use pill-shaped hit areas ({rounded.xxl}). Right side contains a text-only "Log in" link and the primary {component.button-primary} CTA. Background is transparent over the hero image, transitioning to {colors.canvas} on scroll (inferred from pattern).

Hero Section

|<------------------------ 1440px container -------------------------->|
|                                                                    |
|                    "Radically different banking"                   |
|                         ({typography.display-lg})                  |
|                                                                    |
|     Apply online in 10 minutes to experience banking unlike       |
|     anything that's come before.                                   |
|                         ({typography.body-md}, {colors.muted})     |
|                                                                    |
|     [ Enter your email          ] [ Open account ] [ Launch demo ]  |
|     ^{component.text-input}      ^{component.button-primary}  ^{comp.button-secondary}|
|     \___________________________/{component.email-input-group}____/|
|                                                                    |
|     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   |
|     ~  FULL-BLEED MOUNTAIN/DESK PHOTOGRAPHY - ENVIRONMENTAL BG   ~   |
|     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   |
|                                                                    |
|     [Mercury is a fintech company, not an FDIC-insured bank....]   |
|     ^{component.footer-disclaimer} - fixed/sticky at bottom         |
|                                                                    |
|<- 128px {spacing.hero} vertical pad ->|

The hero is the signature layout moment: centered text block over atmospheric photography, with the compound email input/CTA group as the conversion focal point. The {component.footer-disclaimer} sits as a semi-transparent overlay bar at the viewport bottom.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Page base, nav bar, hero band | | 1 (Hairline) | {colors.hairline} border or 1px rule | Dividers, list separators | | 2 (Soft surface) | {colors.surface-soft} background, no shadow | Cards, panels | | 3 (Elevated) | {colors.surface-elevated} background | Featured cards, dropdowns | | 4 (Modal/Dropdown) | {extensions.shadows.md} + {colors.surface-elevated} | Modals, mega-menu panels | | 5 (Focus ring) | 2px outline {colors.border-focus} with 4px offset | All focusable elements |

Philosophy: Mercury uses color-block elevation over shadow-based depth. In dark mode, layer separation comes from luminance differences between {colors.canvas} (#1e1e2a), {colors.surface-soft} (#171721), and {colors.surface-elevated} (#39394d). Shadows exist in the system ({extensions.shadows.lg} was extracted) but are used sparingly—the one complex shadow value found combines six layered shadows for what appears to be a floating card or tooltip treatment. The overall effect is flat-graphic with selective depth moments, avoiding the "layer cake" look common in light-mode material systems.

Decorative Depth

The hero photograph (mountain landscape with desk and laptop) serves as environmental depth—it's not a card-layered illustration but an immersive background that makes the UI feel situated in physical space. The image appears to use subtle gradient overlays or backdrop-filter blur at the top edge to ensure text legibility over varying photo brightness. This photographic treatment is the single largest contributor to perceived depth on the page.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Checkboxes, tiny badges, inner corners | | {rounded.DEFAULT} / {rounded.md} | 8px | Default card radius (if used), small panels | | {rounded.lg} | 12px | Standard cards ({component.card-surface}), pricing cards | | {rounded.xl} | 32px | Input fields ({component.text-input}), large containers | | {rounded.xxl} | 40px | Navigation link hover/active zones | | {rounded.pill} / {rounded.full} | 9999px | Buttons ({component.button-primary}), nav links, tags |

The shape vocabulary is dominated by the pill/pill-adjacent tokens. Eight of eleven radius values are ≥32px, meaning nearly every interactive element is fully or substantially rounded. Only {rounded.sm} (4px) provides a sharp corner option for functional elements like checkboxes. This consistency creates a friendly, modern, app-like feel that contrasts intentionally with the serious dark canvas.

Photography Geometry

The hero image is full-bleed (edge-to-edge behind the hero band content) with no corner rounding—it's environmental, not contained. Aspect ratio appears to be approximately 16:9 or wider (cinematic landscape orientation). The desk-and-laptop subject matter is centered-left in frame, leaving the misty mountain valley as negative space behind the text column. No avatar or thumbnail imagery is visible in the viewport, so those geometries remain undefined.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal call-to-action button used for "Open account" in both the navigation bar and hero CTA group. Background {colors.primary}, white text {colors.on-primary}, {typography.button} at 14px/420 weight, fully pill-rounded ({rounded.pill}), padded 10px 24px. Transitions color at 300ms. Has active ({component.button-primary-active}), hover ({component.button-primary-hover}), and disabled ({component.button-primary-disabled}) variants. On focus, shows a {colors.border-focus} outline ring offset by 4px.

{component.button-secondary} — The ghost/outline-style alternate action, seen as "Launch demo" next to the primary CTA. Background {colors.secondary} (translucent gray), {colors.ink} text, same typography and rounding as primary. Hover state ({component.button-secondary-hover}) increases background opacity. Used when a primary action exists and a secondary path needs lower visual weight.

{component.button-ghost} — Transparent-background button for navigation links and non-CTA actions. Uses {typography.nav-link} sizing (16px vs 14px for CTAs) and {rounded.xxl} (40px) rather than full pill. Appears in the top nav for Products, Solutions, Resources, About, and Pricing triggers.

{component.nav-link-active} — The active/selected state for navigation items, shown by the circular icon button in the nav. Background {colors.accent-soft} (lavender tint), fully rounded ({rounded.pill}), sized as a 40×40px icon container. This is the only nav item using a filled background in the default state.

Cards & Containers

{component.card-surface} — Standard content card with {colors.surface-soft} background, {colors.ink} text, {typography.body-md}, {rounded.lg} (12px) corners, and {spacing.xxl} (24px) internal padding. Used for feature descriptions, testimonial blocks, or informational panels below the fold.

{component.card-elevated} — Higher-contrast card using {colors.surface-elevated} (#39394d) for situations requiring clear lift from the canvas—modals, dropdowns, or featured content. Same padding and radius as {component.card-surface}.

{component.pricing-card} — Specialized container for pricing tier information. Inherits {component.card-surface} properties but with {spacing.section-lg} (40px) padding for the denser content inside. Has a featured variant ({component.pricing-card-featured}) using {colors.surface-strong} background.

{component.hero-band} — The full-width hero section container. Background {colors.canvas}, vertical padding {spacing.hero} (128px). Contains the headline, subhead, and CTA group stacked centrally. Typography defaults to {typography.display-lg} for the headline.

{component.footer-disclaimer} — Fixed or sticky bar at viewport bottom. Semi-transparent black background (rgba(0, 0, 0, 0.6)), {colors.muted-soft} text at {typography.caption} size (12px), no rounding (full-width strip). Carries legal text about FDIC status.

{component.dropdown-trigger} — Identical specification to {component.button-ghost}; represents the navigation items with chevron indicators (Products, Solutions, etc.) that trigger dropdown menus on click/hover.

Inputs & Forms

{component.text-input} — Single-line text input field. Transparent background (relies on parent {component.email-input-group} for visibility), {colors.ink} text at {typography.label-md} (16px), {rounded.xl} (32px) with asymmetric rounding (left side only when grouped), 12px 20px internal padding, 48px height. Focus state ({component.text-input-focus}) maintains transparency and adds the {colors.border-focus} outline ring.

{component.email-input-group} — Compound container wrapping the email input and submit button into a single visual unit. Background {colors.secondary} (translucent gray), {rounded.pill} overall shape, 4px internal padding with 0 left padding (input absorbs the left interior). This creates the signature "fused input+button" pattern where the input's right edge meets the primary button's left edge seamlessly.

{component.checkbox-unchecked} / {component.checkbox-checked} — Small square toggles at 16×16px. Unchecked is transparent with {colors.muted} border; checked fills with {colors.primary} and white checkmark. Uses {rounded.sm} (4px) for slight softening.

{component.label-text} — Form field labels in {colors.muted} at {typography.caption} size, positioned above or adjacent to inputs.

Navigation

{component.top-nav} — Full-viewport-width navigation bar. Background transparent over hero (transitioning to {colors.canvas} on scroll), 80px height, {colors.ink} text, {typography.nav-link} for link text. Contains logo (left), five dropdown triggers (center-left), login link and primary CTA (right). Max content width 1440px with 32px horizontal padding.

{component.icon-button} — Circular 40×40px button with {colors.accent-soft} background and {rounded.full}. Used for user avatar or icon-only actions in the navigation area.

Signature Components

{component.hero-headline} — The "Radically different banking" H1. Transparent background, {colors.on-dark} text, {typography.display-lg} (49.3472px/480 weight). Centered in the hero text column with generous bottom margin before the subhead.

{component.hero-subhead} — Supporting paragraph below headline. {colors.muted} text at {typography.body-md}, conveying the "Apply online in 10 minutes..." message. Approximately 60–70 characters per line for readability.

{component.hero-cta-group} — Horizontal flex container holding {component.email-input-group} (with nested {component.text-input} + {component.button-primary}) and adjacent {component.button-secondary}. Spaced with {spacing.md} (8px) or {spacing.base} (12px) gap.

{component.tag-pill} — Small categorical label. {colors.secondary} background, {typography.caption} text, {rounded.pill}, 4px 12px padding. Used for feature tags, status indicators, or category badges.

{component.link-inline} / {component.link-inline-hover} — Inline text links within body copy. Default state uses {colors.link} (brand blue); hover shifts to {colors.link-active} (pale blue). No underline decoration in default state (appears to use color change only).

{component.divider} — Horizontal rule at 1px height, {colors.hairline} color, spanning full container width with margin above and below. Used between content sections.

Do's and Don'ts

Do

• Do use {colors.primary} (#5266eb) only for primary CTAs, focus indicators, and active states—never for body text, borders, or decorative elements.
• Do maintain the intermediate font weights (420 for body, 480 for display) rather than rounding to 400/500; this subtlety is central to the brand voice.
• Do apply {rounded.pill} (9999px) to all buttons—primary, secondary, and ghost—consistently across the interface.
• Do place the email input and "Open account" button inside a shared {component.email-input-group} container with {colors.secondary} background for the fused compound-input appearance.
• Do use {typography.display-lg} (49.3472px) for the hero headline exactly—not larger, not smaller, and always in {colors.on-dark} (#ededf3).
• Do reserve {colors.surface-soft} (#171721) for cards that should recede from the canvas, and {colors.surface-strong} (#272735) for cards that should advance.
• Do apply the 4px-offset {colors.border-focus} outline ring to every focusable element for consistent accessibility.
• Do keep {spacing.hero} (128px) vertical padding in the hero band—the airy openness is intentional and brand-defining.
• Do use {colors.muted} (#c3c3cc) for legal/disclaimer text in {typography.caption} (12px) to establish proper information hierarchy.
• Do treat the hero photograph as environmental background, not a contained image element—full-bleed, no border-radius, with text overlaid.

Don't

• Don't substitute {colors.link} (#5266eb) for a different blue—the link color IS the primary brand color; they're intentionally unified.
• Don't bold headlines beyond fontWeight: 480—the display face is designed to be impactful at this medium-heavy weight, and jumping to 700 would destroy the refined feel.
• Don't add drop shadows to cards in the main content area—the elevation system uses background luminance, not shadows, for layer separation in this dark theme.
• Don't use {rounded.sm} (4px) for anything other than checkboxes and micro-elements; it reads as accidentally unstyled in this otherwise generously-rounded system.
• Don't place white (#ffffff) text directly on {colors.canvas} (#1e1e2a) for body copy—always use {colors.ink} (#ededf3) which has slight coolness and is easier on the eyes in sustained reading.
• Don't expand the radius vocabulary beyond the eleven defined tokens—especially avoid inventing 6px, 10px, or 18px values that don't exist in the design language.
• Don't apply background color directly to {component.text-input}—it must be transparent, deriving its visible container from the parent {component.email-input-group}.
• Don't use transition durations shorter than 200ms or longer than 500ms; the system's cubic-bezier(0.4, 0, 0.2, 1) easing at 300ms is the established rhythm.
• Don't promote the hero's dark photographic treatment to a system-wide pattern—subsequent sections likely use solid {colors.canvas} or alternating band backgrounds.

Motion & Animation

Transition Tokens

/* Core color/property transition - standard 500ms for theme-level changes */
--transition-theme: color 0.5s cubic-bezier(0, 0, 0.6, 1), 
                     background-color 0.5s cubic-bezier(0, 0, 0.6, 1), 
                     border-color 0.5s cubic-bezier(0, 0, 0.6, 1), 
                     outline-color 0.5s cubic-bezier(0, 0, 0.6, 1);

/* Interactive transition - faster 300ms for hover/focus */
--transition-interactive: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                          background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                          border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                          fill 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                          stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Transform transition - for movement/scale */
--transition-transform: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         translate 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         scale 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Opacity transitions */
--transition-opacity-fast: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity-standard: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Layout/accordion transition */
--transition-layout: bottom 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), 
                      padding-bottom 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), 
                      translate 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);

Keyframe Animations

The extracted CSS references 21 distinct keyframe animations, indicating a motion-rich experience:

• spin — Continuous rotation for loading indicators
• wave — Undulating motion, likely for skeleton loading or decorative elements
• fadeIn — Simple opacity 0→1 entrance
• fadeOutBlur — Exit animation combining fade with blur (modal dismissals)
• fadeInTabTranslate — Tab content entrance with vertical slide + fade
• fadeInCopy — Text copy staggered reveal
• fadeOut — Simple opacity 1→0 exit
• fadeOutTabTranslate — Tab content exit with downward slide + fade
• translateUp — Vertical upward translation (scroll-triggered reveals)
• collapseDown — Accordion/expandable section closing (height + translate)
• collapseUp — Accordion/expandable section opening
• scaleIn — Entrance with scale 0.95→1 (modal/card appearance)
• scaleOut — Exit with scale 1→0.95
• slideUpAndFade — Dropdown/menu entrance from below
• slideUpMoreAndFade — Extended upward travel variant
• slideUpMoreAndFadeReverse — Reverse direction (exit upward)
• slideDownAndFade — Entrance from above (tooltips?)
• slideRightAndFade — Lateral entrance from left
• slideLeftAndFade — Lateral entrance from right
• popUp — Bouncy scale+translate entrance (attention-grabbing)

Interaction Patterns

• Scroll-triggered reveals: Content sections likely use translateUp or fadeInCopy animations triggered by IntersectionObserver as the user scrolls down the page.
• Tab switching: The navigation dropdowns and any tabbed content areas use fadeInTabTranslate/fadeOutTabTranslate paired transitions for smooth content swapping.
• Modal system: Modals enter with scaleIn (slight scale-up from 0.95) and exit with scaleOut plus fadeOutBlur for depth dismissal.
• Dropdown menus: Mega-menus under Products/Solutions/etc. use slideUpAndFade for panel appearance from the triggering element.
• Accordion/FAQ: Expandable sections use collapseDown/collapseUp with the custom cubic-bezier(0.65, 0.05, 0.36, 1) easing that has a slight overshoot for natural feel.
• Focus management: All interactive elements transition background/color at 300ms with ease-out curve; focus rings appear instantly (or near-instantly via opacity transition at 150ms).
• Hover lifts: Buttons and cards likely gain slight Y-translate on hover (inferred from --transition-transform token existence), though exact values aren't extractable from static CSS.

Imagery Style

• Photographic, not illustrative: The hero uses a real photograph (mountain landscape with desk/laptop setup), not 3D render, flat illustration, or abstract gradient art.
• Environmental/atmospheric: The image functions as immersive background rather than featured content—text overlays it, and it establishes mood ("banking from anywhere") rather than conveying specific product information.
• Color grading: The photograph appears desaturated with cool blue-gray tones, harmonizing with the {colors.canvas} dark navy palette. Warmth is limited to the golden hour sky glow, providing a subtle warmth accent against the cool UI.
• Subject matter: Remote work symbolism (desk, laptop, chair placed in nature) reinforces the "banking for startups anywhere" positioning.
• Composition: Rule-of-thirds with the desk in the lower-center/left, mountains receding into misty background, sky occupying upper third. Generous negative space behind the text column.
• Treatment: Likely has a subtle gradient overlay (dark at top, fading to photo) to ensure headline legibility. No border, no radius, no shadow—it bleeds edge-to-edge.
• Role: Single hero image visible; subsequent sections may use product screenshots, team photos, or illustration (not observable in this viewport).

Icon System

• Library: Custom SVG icons (no standard library detected in the extracted CSS classes; framework.iconLibs is empty). The Mercury logo mark (geometric circle pattern) and any UI icons are bespoke.
• Specific icons observed:
  • Mercury logo mark (left of "MERCURY" wordmark in nav)—concentric circle/gear geometry
  • Chevron down (v) — on navigation items: Products, Solutions, Resources, About
  • Possible user/account icon in the circular {component.nav-link-active} button (partially visible)
• Treatment: Icons appear to use currentColor for stroke/fill, inheriting from parent color. Size is likely 16px–20px for inline nav chevrons, 20px–24px for standalone icon buttons.
• Alignment: Inline icons center vertically with text (nav items use items-center justify). Stroke weight appears consistent at 1.5px–2px (inferred from visual proportion).

Recommended Frontend Stack

- Framework:      Next.js (App Router) — inferred from __next_f static paths and script chunks
- Styling:        Tailwind CSS v3–v4 — confirmed by utility class patterns (arcadia-ui-*, spacing/token naming)
- Fonts:          Self-hosted WOFF2 variable fonts (Arcadia, ArcadiaDisplay, tiemposHeadline) with @font-face declarations and metric-overridden Arial fallbacks
- Animation:      Tailwind transition utilities + custom keyframes (21 animations defined in stylesheet)
- Icons:          Custom SVG components (inline React components or SVG sprite)
- Component lib:  Custom (arcadia-ui-* class prefix suggests internal component library, possibly Radix-derived for accessibility primitives)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column everything; nav collapses to hamburger; hero text shrinks to {typography.title-md} (~42px); CTA group stacks vertically (input full-width, buttons full-width below); hero image may crop or zoom | | Tablet | 640px – 1024px | Two-column hero possible (text + image side-by-side); nav items may truncate or move to menu; spacing compresses to {spacing.section-lg} (40px) | | Desktop | 1024px – 1440px | Full layout as documented: 1440px container, 49px headline, horizontal CTA group, full nav visible | | Wide | > 1440px | Container maxes at 1440px and centers; additional horizontal padding may increase; hero image may show more of the photograph |

Touch Targets

• {component.button-primary}: ~160px × 40px (padding 10px 24px + text) — exceeds 44×44px minimum ✓
• {component.button-secondary}: similar dimensions — exceeds minimum ✓
• {component.text-input}: 48px height (explicit) × variable width — meets 44px minimum ✓
• {component.nav-link}: 40px height × ~100px+ width (with 20px horizontal padding) — exceeds minimum ✓
• {component.icon-button}: 40px × 40px — at the 44px threshold, may need slight increase for AAA ✓

Collapsing Strategy

• Navigation: At mobile breakpoint, the five dropdown triggers (Products, Solutions, Resources, About, Pricing) collapse into a hamburger menu, likely using a slide-out drawer or fullscreen overlay animated with slideRightAndFade.
• Hero columns: The text column and implied image column stack vertically on mobile—text first (headline, subhead, CTAs), then photograph below (or photograph becomes background with increased overlay darkness for legibility).
• Email input group: The fused input+button compound splits—input becomes full-width with {rounded.pill}, primary button becomes full-width below it, secondary button moves to a second row or becomes a text link.
• Spacing compression: Vertical padding reduces from {spacing.hero} (128px) to {spacing.section-xl} (72px) or {spacing.section-lg} (40px) on mobile.
• Typography scaling: {typography.display-lg} (49px) likely downsteps to {typography.title-md} (42px) or {typography.title-sm} (28px) on mobile to prevent overflow.
• Footer disclaimer: Remains fixed/sticky at bottom but text size may reduce further or truncate with ellipsis on narrow viewports.

Image Behavior

• Hero photograph: On desktop, full-bleed background covering the hero band. On mobile, likely switches to a cropped focal point (desk/laptop) or increases the dark overlay percentage so text remains legible over a smaller visible portion of the image. May implement object-position: center with object-fit: cover.
• Aspect ratio: Maintains ~16:9 or wider; on portrait-oriented mobile screens, the image shows only the center ~60% of the original photograph.

Iteration Guide

1. Build a Next.js landing page with Tailwind CSS that closely mimics this design system, starting with the dark {colors.canvas} background and the hero section as the first implementation target.
2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths—define these as Tailwind theme extensions or CSS custom properties. Never hard-code a hex or pixel value that has a corresponding token.
3. Set up the @font-face declarations for Arcadia, ArcadiaDisplay, and tiemposHeadline with the provided fallback metrics (ascent-override, descent-override, size-adjust) so the Arial fallback renders at the correct optical size if the WOFF2 files aren't locally available.
4. Add state variants (hover, focus, disabled, active) as separate CSS classes or Tailwind variants per your stack's conventions; this spec documents Default and Active/Pressed/Focus explicitly, plus inferred Hover.
5. When adding a new component, decide whether it belongs to the hero/conversion subsystem (dark, photographic, CTA-focused) or the content subsystem (card-based, informational, scrolling)—these have subtly different surface and spacing rhythms.
6. Variants of an existing component must live as separate frontmatter entries (button-primary-active, never nested under button-primary.states.active).
7. Implement the 21 keyframe animations as Tailwind @keyframes directives or a CSS module—they're essential to the polished feel of tab switches, modals, and scroll reveals.
8. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings will catch missing or mismatched token references automatically.
9. When in doubt about emphasis: trust size over weight (the 49px headline at weight 480 works because of scale, not heft) and luminance over shadow for depth in this dark theme (use {colors.surface-elevated} before reaching for box-shadow).
10. Test the compound {component.email-input-group} carefully—the input's right radius must be 0 (or match the button's left radius) and the button must have no left margin so they fuse visually into a single pill-shaped unit.

Font Setup

For development without access to Mercury's hosted WOFF2 files, define CSS custom properties mapping to Google Fonts approximations:

:root {
  --font-display: 'Outfit', 'Arcadia Display', sans-serif;
  --font-body: 'Inter', 'Arcadia', sans-serif;
  --font-serif: 'Lora', 'Tiempos Headline', serif;
  
  /* Weight mapping: Arcadia 420 → Inter 450, Arcadia 480 → Outfit 600 */
}

Import in your layout:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500&family=Outfit:wght@400;500;600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover background color changes, transform values (Y-lift pixels), and shadow additions for buttons/cards are not documented—implement based on the provided {component.*-hover} entries and the brand's "moderate" motion level.
• Loading skeletons/pending states: While wave and spin keyframes exist, the exact skeleton component specifications (pulse color, shimmer gradient, border-radius for skeleton lines) are not extractable from the landing page viewport.
• Form validation states beyond focus: Error ({colors.error}) and success ({colors.success}) states for inputs, including border color changes, icon injections, and helper text styling, are inferred from semantic tokens but not observed in the screenshot.
• Dashboard/authenticated surfaces: This spec covers the marketing landing page only. Internal app surfaces (dashboard, transactions table, settings panels) likely exist at subdomains or post-login routes with potentially different density, component sets, or layout constraints.
• Sub-brand palettes: If Mercury offers specialized products (Luxe tiers, Enterprise accounts, international entities) with distinct color accents, those are not visible in this viewport.
• Pixel-exact values for translucent surfaces: The {colors.accent-soft} and {colors.secondary} rgba values are extracted precisely, but how they composite over photographs or gradients at different blend modes may vary at implementation.
• Responsive breakpoint pixel values: The exact breakpoint widths (640px, 1024px, 1440px) are industry-standard inferences; Mercury's actual media query breakpoints may differ by 10–20px.
• Accessibility focus-visible specifics: The 4px outline offset for focus rings is inferred from the outline-offset-4 class observed; the exact ring width (likely 2px) and whether it uses outline or box-shadow for better visual control should be verified.
• Dropdown/mega-menu content: The navigation triggers suggest dropdown panels exist, but their internal layout (grid of links, featured cards, illustrations) is not observable from the top-level nav alone.