# Supplerus Design System

> Corporate blue foundations punctuated by high-contrast coral-red actions and technical Proxima Nova typography.

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

## TL;DR
Supplerus utilizes a "monochrome-plus-one" system where a deep corporate navy (#00213f) and royal blue (#0c4faf) provide the structural foundation, while a vibrant coral-red (#f84549) is reserved strictly for primary conversion points. The layout is characterized by sharp 0px corners on major containers and buttons, creating a rigid, industrial feel. Typography relies heavily on Proxima Nova, utilizing extreme weight contrasts—ranging from Thin (100) for body prose to Black (900) for section headers. Large numeric indices (110px) and technical background patterns (binary/grid motifs) reinforce a systems-engineering aesthetic.

## Signature DNA
1. **Extreme Weight Contrast** (Proxima Nova 900 headers paired with Proxima Nova 100 body text creates a technical, architectural hierarchy; observed on Home and About pages).
2. **Coral-Red Punctuation** (#f84549 is used exclusively for "Call to Action" moments like "Order a call" or "Learn more" against blue or white backgrounds).
3. **Sharp Geometry** (A near-universal 0px border radius on buttons and primary cards conveys a sense of precision and stability).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary background, button text, card surfaces | 68 | 0.8 | Computed |
| `{color.navy}` | `#00213f` | Primary text, footer backgrounds | 32 | 0.8 | Computed |
| `{color.black}` | `#000000` | Secondary text, icons | 75 | 0.8 | Computed |
| `{color.gray-dark}` | `#333333` | Pricing and about page body text | 4 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#f84549` | Primary CTA buttons, borders, active states | 51 | 0.8 | Computed |
| `{color.royal-blue}` | `#0c4faf` | Section backgrounds, link text, 404 headings | 4 | 0.6 | Computed |
| `{color.steel}` | `#718b9e` | Secondary text, decorative borders | 42 | 0.8 | Computed |
| `{color.sky-light}` | `#e1eef4` | Subtle section backgrounds (decorative_only) | 4 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| ProximaNova | 100, 400, 500, 900 | Primary Display & UI | Montserrat | Licensed |
| Rubik | 300, 400, 500 | Secondary Headings | Rubik (Google) | OFL |
| Arial | 400, 500 | Fallback / Form Input | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 110px | 110px | normal | 500 | Hero numbers | `div.txt_num` |
| `{type.display-xl}` | 40px | 48px | normal | 900 | Page H1 | `h1` |
| `{type.display-lg}` | 35px | 35px | normal | 500 | Section H2 | `h2` |
| `{type.display-lg-thin}` | 35px | 35px | normal | 100 | Sub-section headers | `span.box-gray.min` |
| `{type.heading-md}` | 24px | 26.4px | normal | 500 | Card titles | `h3` |
| `{type.heading-sm}` | 20px | 36px | normal | 900 | Feature titles | `h3.txt_l` |
| `{type.body-lg}` | 18px | 27px | normal | 100 | Intro paragraphs | `div.txt_s` |
| `{type.body-md}` | 16px | 16px | normal | 100 | Nav / Header | `header.header` |
| `{type.body-sm}` | 14px | 20px | normal | 300 | Footer / Small text | `section#wrapper` |

### Principles
1. **Weight Extremes:** Use weight 900 for impact and 100 for elegance; avoid mid-weights (400/500) for long-form prose.
2. **Tight Leading on Display:** Large headers use 1:1 line-height ratios to maintain block-like density.
3. **No Tracking:** Letter spacing remains "normal" across all scales, relying on font weight for distinction.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 4 |
| `{space.sm}` | 10px | 13 |
| `{space.md}` | 15px | 19 |
| `{space.lg}` | 20px | 43 |
| `{space.xl}` | 30px | 27 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Primary Buttons, Hero sections, Cards | `button_bg`, `surface_bg` |
| `{radius.sm}` | 3px | Form inputs | `input` |
| `{radius.md}` | 5px | Secondary cards / Image containers | `Card` component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.flat}` | none | Standard UI elements | Default state |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.3) 0px 0px 30px 0px` | Floating modals or high-impact overlays | Observed on Home |

## Components

### Tier 1: Foundational

#### Primary Action (Sharp)
**Role:** Main site conversion (e.g., "Order a call")
**Pages observed:** Home, About
**Spec:** Background `#f84549` / Text `#ffffff` / Border `3px solid #f84549` / Radius `0px` / Padding `10px 20px` / Typography `{type.body-md}`
**States observed:** Default | Hover: Not captured

#### Ghost Button
**Role:** Secondary navigation or "Learn More"
**Pages observed:** Home
**Spec:** Background `transparent` / Text `#000000` / Border `3px solid #f84549` / Radius `0px` / Padding `10px 20px`
**States observed:** Default

### Tier 2: Patterns

#### Rounded Button
**Role:** Utility actions on secondary pages
**Pages observed:** Pricing, About
**Spec:** Background `rgb(217, 83, 79)` / Text `#ffffff` / Border `1px solid rgb(212, 63, 58)` / Radius `4px` / Padding `6px 12px` / Typography `14px`
**States observed:** Default

#### Text Input
**Role:** Lead generation forms
**Pages observed:** Home
**Spec:** Background `transparent` / Text `#ffffff` / Border `1px solid #ffffff` / Radius `0px` / Padding `10px` / Typography `18px Arial`
**States observed:** Default

### Tier 3: Surface-specific

#### Feature Card
**Role:** Displaying service offerings
**Pages observed:** Home
**Spec:** Background `#ffffff` / Text `#0000ee` / Radius `5px` / Padding `0px`
**States observed:** Default

#### Blue Surface Section
**Role:** High-contrast content bands
**Pages observed:** Home
**Spec:** Background `rgba(30, 104, 193, 0.9)` / Text `#ffffff` / Radius `0px` / Padding `20px 25px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1170px (standard container) |
| Section Padding | 60px - 100px vertical |
| Column Gap | 30px |

## Do's
- Use `#f84549` for all primary conversion buttons.
- Set `border-radius: 0px` for all primary layout containers.
- Pair Proxima Nova 900 with Proxima Nova 100 for section introductions.
- Use `#00213f` for footer backgrounds to anchor the page.
- Apply 3px borders to buttons to maintain a "heavy" industrial feel.

## Don'ts
- **Wrong:** Using `#0c4faf` (Royal Blue) for primary CTA buttons. **Right:** Use `#f84549`. **Reason:** Royal blue is a foundational/background color; coral-red is the conversion signal.
- Do not use rounded corners (>5px) on primary brand elements.
- Avoid using Proxima Nova 900 for body text; it is reserved for headings.
- Do not use gradients on buttons; stick to solid `#f84549`.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #f84549;
  --color-navy: #00213f;
  --color-royal-blue: #0c4faf;
  --color-white: #ffffff;
  --font-main: "ProximaNova", sans-serif;
  --radius-none: 0px;
}
```

## Known gaps
- Hover and Active states for the primary coral button were not explicitly captured in the computed styles.
- Mobile-specific navigation transitions were not fully documented due to viewport limitations.
- Success and Error semantic colors for form validation were not present in the sampled pages.