# Apexure Design System

> High-contrast conversion architecture pairing deep midnight canvases with vibrant signal-orange calls to action.

**Source:** [https://apexure.com](https://apexure.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Apexure utilizes a high-voltage "Dark Mode" hero aesthetic that transitions into a clean, structured light-mode body. The system is anchored by **Poppins**, using heavy 700 weights for display and tight -2.25px tracking on massive 75px hero headlines. The color palette is dominated by a deep purple-ink (`#231e46`) and a high-visibility primary orange (`#f46036`) used exclusively for conversion points. Layouts rely on generous 20px-30px card padding and a consistent 20px border radius for interactive surfaces.

## Signature DNA
1. **The Conversion Orange** (`#f46036`): Used as the primary action color against dark backgrounds to create maximum focal pull for "Tell us about your project" CTAs.
2. **Tight-Tracked Display Typography**: Massive 75px Poppins headlines with aggressive negative letter-spacing (-2.25px) create a dense, authoritative editorial impact.
3. **Softened Geometry**: A consistent 20px border radius is applied to cards and surfaces, contrasting with the sharp 0px edges of the primary page sections.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary text on dark | 33 | 1.0 | `--white` |
| `{color.light}` | `#faf9f7` | Secondary section background | 9 | 1.0 | `--light` |
| `{color.border}` | `#e8e6e3` | Default card and divider borders | 15 | 0.8 | Computed |
| `{color.text.muted}` | `#555566` | Secondary body text | 15 | 0.8 | Computed |
| `{color.text.primary}` | `#444444` | Primary body text on light | 7 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#f46036` | Primary CTA background, emphasis text | 6 | 0.6 | Computed |
| `{color.brand.purple}` | `#410099` | Brand accents, icons, specific text | 22 | 1.0 | `--purple` |
| `{color.ink.deep}` | `#231e46` | Hero background, dark surface text | 24 | 0.8 | Computed |
| `{color.ink.dark}` | `#1a1a2e` | Footer background, deep text | 23 | 0.8 | Computed |
| `{color.blue.link}` | `#2878db` | Inline links, service indicators | 16 | 0.8 | Computed |
| `{color.success.bg}` | `#e8faf3` | Success badges, positive stats | 3 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Poppins | 400, 500, 600, 700 | Primary Display & Body | Poppins (Google Fonts) | OFL |
| Poppins-SemiBold | 400, 600, 700 | Section Headings | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 75px | 71.25px | -2.25px | 700 | Hero H1 | `h1.ax-hp-hero__title` |
| `{type.display.lg}` | 42px | 42px | normal | 700 | Stat numbers | `div.ax-hp-value__num` |
| `{type.h2}` | 36px | 41.4px | 1px | 700 | Section titles | `h2.ax-hp-logos__title` |
| `{type.h3}` | 27px | 31.05px | 1px | 700 | Service names | `h3.ax-hp-service__name` |
| `{type.subheading}` | 19px | 24.7px | 1px | 600 | Step titles | `h3.ax-hp-step__title` |
| `{type.body}` | 16px | 28px | normal | 400 | Standard prose | `p` |
| `{type.body.sm}` | 15px | 25.5px | normal | 400 | Hero subtext | `section.ax-hp-hero` |
| `{type.caption}` | 12px | 20.4px | normal | 700 | Client names | `div.ax-hp-rv__name` |

### Principles
1. **Display Tracking**: Large display sizes (75px) must use negative tracking (-3% of font size) to maintain visual density.
2. **Heading Rhythm**: Section headers (36px) utilize positive letter spacing (1px) to differentiate from display styles.
3. **Achromatic Body**: Running text on light surfaces strictly uses `#444444` or `#555566`, never pure black.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 10 |
| `{space.sm}` | 10px | 34 |
| `{space.md}` | 20px | 9 |
| `{space.lg}` | 30px | 17 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Main sections, layout containers | 115 occurrences |
| `{radius.card}` | 18px | Feature cards, testimonial blocks | `ax-hp-rv__card` |
| `{radius.lg}` | 20px | Standard cards, input fields | `ax-hp-example__card` |
| `{radius.pill}` | 60px | Primary CTA buttons | `a.ax-hp-btn` |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site-wide conversion action.
**Pages observed:** [https://apexure.com](https://apexure.com)
**Spec:** Background: `#f46036` / Text: `#ffffff` / Radius: `60px` / Padding: `16.5px 45px` / Typography: `15.75px`
**States observed:** Default | Hover: Captured (Visual change to saturated orange)

### Tier 2: Patterns
#### Standard Card
**Role:** Service and feature showcases.
**Pages observed:** [https://apexure.com](https://apexure.com)
**Spec:** Background: `#ffffff` / Border: `1px solid #e8e6e3` / Radius: `20px` / Padding: `30px`
**States observed:** Default | Hover: Not captured

#### Stat Block
**Role:** Trust signals and numerical proof points.
**Pages observed:** [https://apexure.com](https://apexure.com)
**Spec:** Text: `#ffffff` / Typography: `42px` (Num), `13px` (Label) / Alignment: Center

### Tier 3: Surface-specific
#### Hero Surface
**Role:** High-impact landing section.
**Pages observed:** [https://apexure.com](https://apexure.com)
**Spec:** Background: `#231e46` / Text: `#ffffff` / Padding: `90px 0px` (Vertical)

#### Footer Surface
**Role:** Site-wide navigation and lead capture.
**Pages observed:** [https://apexure.com](https://apexure.com)
**Spec:** Background: `#1a1a2e` / Text: `#ffffff` / Typography: `14px` (Links)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1170px |
| Section Padding | 80px - 100px |
| Grid Gutter | 30px |

## Do's
- Use `#f46036` exclusively for primary conversion buttons.
- Apply `-2.25px` letter spacing to any Poppins headline exceeding 70px.
- Ensure all cards use the `{radius.lg}` (20px) token for consistency.
- Maintain a minimum 30px padding inside all white surface cards.
- Use `#231e46` for dark-mode hero backgrounds to maintain brand depth.

## Don'ts
- **Wrong:** Using `#007bff` (token `--primary`) as the main CTA color. **Right:** Use `#f46036`. **Reason:** The orange is the validated conversion color; the blue token is a legacy default.
- **Wrong:** Using pure black `#000000` for body text. **Right:** Use `#444444`.
- **Wrong:** Applying border-radius to main section backgrounds. **Right:** Keep section edges sharp (0px).

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #f46036;
  --color-brand-purple: #410099;
  --color-ink-deep: #231e46;
  --color-text-body: #444444;
  --radius-card: 20px;
  --radius-pill: 60px;
  --font-main: 'Poppins', sans-serif;
}
```

## Known gaps
- Hover and Active states for secondary buttons were not captured in the source.
- Mobile-specific navigation menu transitions were not fully documented.
- Shadow tokens were not present in the CSS evidence (system relies on borders and color contrast for depth).

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | [https://apexure.com](https://apexure.com) | 1440px | 2026-06-06 |