# Mercaux Design System

> High-contrast retail technology canvas anchored by a signature teal primary and light-weight geometric typography.

**Source:** https://mercaux.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Mercaux utilizes a clean, high-contrast foundation of pure white (#ffffff) and deep charcoal (#1a1f25), punctuated by a vibrant teal primary (#00b19d). The system relies heavily on the Proxima Nova family, specifically favoring the 300 weight for display and body text to maintain a technical, airy feel. Components feature soft 8px to 12px radii for controls, while larger content containers use a 20px radius. Layouts are characterized by generous vertical spacing (up to 128px) and a "monochrome plus one" color strategy where teal is the only persistent chromatic signal.

## Signature DNA
1. **The Teal Pulse** (#00b19d is used as the exclusive chromatic driver for CTAs, text highlights, and borders, creating a singular focal point against achromatic backgrounds.)
2. **Light-Weight Display** (Headlines consistently use `proxima_nova_extrabold` or `proxima_novalight` at a 300 weight even at 60px sizes, prioritizing elegance over visual "heaviness".)
3. **Soft-Geometric Containers** (A strict hierarchy of radii—8px for buttons and 20px for cards—softens the technical precision of the typography.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, surface fill | 73 | 1.0 | computed_style |
| `{color.black}` | `#000000` | Primary text, footer background | 127 | 0.8 | computed_style |
| `{color.charcoal}` | `#1a1f25` | Dark surface backgrounds, secondary text | 7 | 0.6 | computed_style |
| `{color.off-white}` | `#f8f9fa` | Subtle section backgrounds | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#00b19d` | CTAs, active states, text highlights | 13 | 0.8 | computed_style |
| `{color.slate}` | `#343d49` | Secondary UI text | 15 | 0.8 | computed_style |
| `{color.silver}` | `#d6dce4` | Card borders, dividers | 9 | 0.6 | computed_style |
| `{color.gray-muted}` | `#cbc9c9` | Decorative text, disabled states | 36 | 0.8 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| `proxima_nova_rgregular` | 300, 500 | Body, UI Labels, Buttons | Montserrat | Proprietary |
| `proxima_novalight` | 300 | Display, Sub-navigation | Montserrat Light | Proprietary |
| `proxima_nova_extrabold` | 300 | Hero Display | Montserrat ExtraBold | Proprietary |
| `proxima_nova_rgbold` | 300 | Section Headings | Montserrat Bold | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 60px | 74px | normal | 300 | Hero titles | `h2.title-block.font-left` |
| `{type.display.lg}` | 48px | 68px | normal | 300 | Section headers | `h2.font-size.font-always-left` |
| `{type.heading.md}` | 36px | 48px | normal | 300 | Feature labels | `div.label` |
| `{type.heading.sm}` | 24px | 42px | normal | 300 | Subtitles | `div.main-subtitle` |
| `{type.body.lg}` | 20px | 36px | normal | 300 | Intro paragraphs | `p` |
| `{type.body.md}` | 18px | 32px | normal | 300 | Standard body | `p` |
| `{type.ui.md}` | 16px | 16px | 0.16px | 500 | Navigation items | `div.menu-item.link` |
| `{type.ui.sm}` | 14px | 16px | 0.14px | 300 | Footer/Sub-nav | `a.menu-item.link` |
| `{type.caption}` | 12px | 12px | normal | 300 | Metadata | `div.block.block-index` |

### Principles
1. **Weight Uniformity:** Despite family name variations (extrabold, light), the rendered weight is consistently 300 for all large-scale type.
2. **Tight UI Tracking:** Interactive elements (14px-16px) utilize positive letter-spacing (0.14px-0.16px) to maintain legibility on dark backgrounds.
3. **Teal Emphasis:** Color #00b19d is applied to specific words within a display block to create visual hierarchy without changing font weight.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xxs}` | 4px | 9 |
| `{space.xs}` | 6px | 52 |
| `{space.sm}` | 12px | 51 |
| `{space.md}` | 24px | 29 |
| `{space.lg}` | 60px | 5 |
| `{space.xl}` | 128px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp sections, footers | 155 occurrences |
| `{radius.control}` | 8px | Buttons, input fields | 56 occurrences |
| `{radius.surface}` | 12px | Small cards, badges | 6 occurrences |
| `{radius.card}` | 20px | Main feature cards | 20 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All observed components | Component array "shadow: none" |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** pricing, about
**Spec:** Background: #00b19d | Text: #ffffff | Border: 2px solid #00b19d | Radius: 8px | Padding: 0px 24px | Typography: 20px/300
**States observed:** Default: captured | Hover: not captured

#### Rounded Button (Outline)
**Role:** Secondary action / Ghost button
**Pages observed:** home, pricing, about
**Spec:** Background: transparent | Text: #ffffff | Border: 2px solid #ffffff | Radius: 8px | Padding: 0px 24px | Typography: 18px/300
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Navigation Item
**Role:** Top-level site navigation
**Pages observed:** home, pricing, about
**Spec:** Background: transparent | Text: #ffffff | Radius: 8px | Padding: 12px 0px 6px | Typography: 16px/500
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Feature Card
**Role:** Content grouping for solutions
**Pages observed:** home
**Spec:** Background: #ffffff | Text: #1a1f25 | Border: 1px solid #d6dce4 | Radius: 20px | Padding: 0px | Typography: 12px/300
**States observed:** Default: captured

#### Content Surface (Large)
**Role:** Hero or section background container
**Pages observed:** home, pricing, about
**Spec:** Background: #ffffff | Text: #1a1f25 | Radius: 12px | Padding: 60px 128px | Typography: 12px/300
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px (implied by viewport) |
| Section Vertical Padding | 60px - 128px |
| Card Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding-inline reduced to 16px; font sizes for display scale down. |

## Imagery & decoration
Mercaux uses high-quality photography of retail environments and store associates. Decorative elements include soft, blurred background "blooms" in teal and purple, and clean line-art icons for vertical categories (Apparel, Footwear, Beauty).

## Do's
- Use #00b19d for all primary interactive triggers.
- Maintain a weight of 300 for all Proxima Nova display headings.
- Apply an 8px radius to all buttons.
- Use #ffffff as the primary canvas for content-heavy sections.
- Ensure 128px of vertical breathing room between major homepage sections.

## Don'ts
- Do not use bold weights (>500) for display typography.
- Do not apply drop shadows to cards; use #d6dce4 borders for definition instead.
- Do not use teal (#00b19d) for body text; reserve it for highlights and CTAs.
- Do not mix 8px and 20px radii on the same component level.
- Do not use pure black (#000000) for secondary UI text; use #343d49.

## Similar brands
- Adyen
- Shopify Plus
- Contentstack
- Manhattan Associates

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #00b19d;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-charcoal: #1a1f25;
  --color-border: #d6dce4;
  
  --font-main: "proxima_nova_rgregular", sans-serif;
  --font-display: "proxima_nova_extrabold", sans-serif;
  
  --radius-control: 8px;
  --radius-card: 20px;
  
  --space-section: 128px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #00b19d;
  --color-surface-dark: #1a1f25;
  --font-sans: "proxima_nova_rgregular";
  --radius-card: 20px;
  --spacing-section: 128px;
}
```

## Agent prompt examples
- "Create a hero section with a #ffffff background, a 60px heading in Proxima Nova 300 weight, and a primary teal button with an 8px border radius."
- "Design a feature card with a 1px #d6dce4 border, 20px corner radius, and no box shadow."
- "Generate a navigation bar using #ffffff text on a transparent background with 16px Proxima Nova 500 weight links."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Error and Success semantic colors were not present on the analyzed marketing pages.
- Specific mobile breakpoint triggers (px values) were inferred from viewport samples.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://mercaux.com | 1440x900 | 2026-06-06 |
| Pricing | https://mercaux.com/pricing | 1440x900 | 2026-06-06 |
| About | https://mercaux.com/about | 1440x900 | 2026-06-06 |