# Leapxpert Design System

> High-fidelity enterprise messaging governance anchored by deep navy surfaces, vibrant blue primary actions, and ultra-soft pill geometry.

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

## TL;DR
Leapxpert utilizes a high-contrast "Dark Mode" aesthetic for its primary brand presence, leaning heavily on a deep navy foundation (#01101f) and pure white text (#fcfcfd). The system’s primary energy is derived from a saturated blue (#0066ff) used for critical CTAs, often paired with a secondary light blue border (#49a3ff). Typography is exclusively Montserrat, favoring semi-bold weights (600) for both headings and body links to maintain legibility against dark backgrounds. Layouts are characterized by generous internal card padding (60px) and extreme border radii (up to 100px) that soften the technical, governed nature of the product.

## Signature DNA
1. **Deep-Sea Enclosures** (Large feature sections use a nested card pattern with a 48px radius and a background of #003366 at 20% opacity, creating a layered glass effect on the navy canvas.)
2. **Hyper-Radiused Pills** (All interactive elements, from 14px buttons to large 100px-radius panels, avoid sharp corners to signal a "safe" and "governed" environment.)
3. **Luminous Outlines** (Secondary actions and cards use thin 1px or 2px borders in #49a3ff or #99c2ff to define boundaries without adding heavy fills.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#01101f` | Primary page background (Dark) | 1 | 0.9 | brand_page |
| `{color.surface}` | `#fcfcfd` | Primary text and light surface background | 67 | 1.0 | computed_style |
| `{color.ink.dark}` | `#000000` | Footer text and deep shadows | 2 | 1.0 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#0066ff` | Primary CTA background | 6 | 0.6 | computed_style |
| `{color.link}` | `#0052cc` | Interactive text and button labels | 98 | 0.8 | computed_style |
| `{color.border.active}` | `#49a3ff` | Button and card borders | 7 | 0.6 | computed_style |
| `{color.border.soft}` | `#99c2ff` | De-emphasized button borders | 3 | 0.6 | computed_style |
| `{color.surface.tint}` | `#003366` | Semi-transparent card overlays | 3 | 0.6 | computed_style |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Montserrat | 400, 500, 600, 700 | All headings, body, and UI | Montserrat (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 37px | 43.03px | normal | 600 | Rotating hero text | `span.word-rotate` |
| `{type.h2}` | 30px | 37.05px | normal | 600 | Section headers | `h2.desktop` |
| `{type.h3}` | 24px | 32px | normal | 600 | Resource titles | `p.ip-resource-content-title2` |
| `{type.subheading}` | 19px | 22.08px | normal | 700 | Feature subheads | `h3` |
| `{type.body.lg}` | 17px | 26px | normal | 400 | Hero description | `section.hero` |
| `{type.body}` | 16px | 24px | normal | 600 | Inline links | `a.ip-resource-content-link` |
| `{type.button}` | 14px | 20.30px | -0.285px | 500 | Primary blue buttons | `a.btn.btn-blue` |
| `{type.caption}` | 12px | 18px | normal | 600 | Overline labels | `p.ip-resource-content-title` |

### Principles
1. **Semi-bold Defaulting:** Links and interactive labels use weight 600 to ensure high-contrast visibility against dark backgrounds.
2. **Negative Tracking on UI:** Small buttons (14px) employ -0.285px to -0.304px letter spacing for a tighter, more technical appearance.
3. **Tight Heading Leading:** Large display type maintains a line-height ratio of ~1.16x to keep multi-line headers compact.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 31 |
| `{space.sm}` | 12px | 11 |
| `{space.md}` | 16px | 30 |
| `{space.lg}` | 20px | 8 |
| `{space.xl}` | 50px | 3 |
| `{space.section}` | 60px | 5 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Footer sections, layout containers | occurrences: 124 |
| `{radius.sm}` | 8px | Form controls, small cards | occurrences: 3 |
| `{radius.lg}` | 48px | Main feature cards | occurrences: 3 |
| `{radius.pill}` | 74px | Primary buttons | occurrences: 7 |
| `{radius.full}` | 100px | Large secondary buttons | occurrences: 4 |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{elev.glass}` | `inset 0 4px 4px rgba(255,255,255,0.16), 0 0 20px rgba(255,255,255,0.2)` | Feature cards on dark backgrounds | Card component |

## Components

### Tier 1: Foundational

#### Primary Blue Button
**Role:** Main CTA (Book a demo)
**Pages observed:** https://leapxpert.com
**Spec:** Background `#0066ff` / Text `#fcfcfd` / Border `1px #99c2ff` / Radius `100px` / Padding `12px 30px` / Typography `{type.button}`
**States observed:** Default: Captured | Hover: Not captured

#### Ghost Button (White)
**Role:** Secondary CTA (Watch video)
**Pages observed:** https://leapxpert.com
**Spec:** Background `#fcfcfd` / Text `#0052cc` / Border `2px #49a3ff` / Radius `74px` / Padding `12px 18px` / Typography `13.5px`

### Tier 2: Patterns

#### Feature Card (Dark)
**Role:** Highlighting core platform capabilities
**Pages observed:** https://leapxpert.com
**Spec:** Background `rgba(0, 51, 102, 0.2)` / Text `#fcfcfd` / Border `0px` / Radius `48px` / Padding `60px 20px` / Shadow `{elev.glass}`

#### Resource Card (Light)
**Role:** Blog and news items
**Pages observed:** https://leapxpert.com
**Spec:** Background `#fcfcfd` / Text `#0066ff` / Border `0px` / Radius `8px` / Padding `50px 20px`

### Tier 3: Surface-specific
*Not captured in source.*

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (estimated from desktop screenshots) |
| Section Padding | 60px vertical |
| Grid | Flexbox with 20px-30px gaps |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Hero text centers; button groups stack vertically; card padding reduces. |
| Desktop | 1440px | Multi-column feature grids; horizontal navigation visible. |

## Imagery & decoration
Leapxpert uses high-fidelity 3D renders of mobile devices surrounded by floating app icons (WhatsApp, iMessage, WeChat) to visualize connectivity. Backgrounds often feature subtle radial gradients that transition from deep navy (#01101f) to slightly lighter blues to create depth behind cards.

## Do's
* Use `#0066ff` for primary actions to ensure visibility on dark canvases.
* Apply `{radius.pill}` (74px+) to all buttons to maintain brand softness.
* Set body links to weight 600 Montserrat for accessibility.
* Use `#fcfcfd` (off-white) instead of pure `#ffffff` for large text blocks to reduce glare.
* Maintain 60px vertical padding between major content sections.

## Don'ts
* **Wrong:** Using `#0066ff` for page backgrounds. **Right:** Use `#01101f`. **Reason:** The saturated blue is an action color, not a surface color.
* **Wrong:** Applying sharp corners to feature cards. **Right:** Use `48px` radius. **Reason:** Sharp corners contradict the "governed/safe" brand DNA.
* **Wrong:** Using weight 400 for small navigation links. **Right:** Use weight 500 or 600. **Reason:** Thin weights disappear against the dark navy background.
* Do not use the sub-brand accent colors (if any) as the primary background for parent brand pages.

## Similar brands
* Cloudflare (Dark mode technical surfaces)
* Vercel (High-contrast monochrome with radius-heavy UI)
* Intercom (Rounded geometry and blue-centric action patterns)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #01101f;
  --color-surface: #fcfcfd;
  --color-primary: #0066ff;
  --color-border-active: #49a3ff;
  --radius-card: 48px;
  --radius-pill: 100px;
  --font-main: 'Montserrat', sans-serif;
}
```

## Agent prompt examples
* "Generate a hero section for Leapxpert using a #01101f background, Montserrat weight 600 headings in #fcfcfd, and a primary pill button with #0066ff background and 100px radius."
* "Create a feature card pattern with a 48px border radius, 60px internal padding, and a subtle white inset shadow per the Leapxpert elevation spec."
* "Design a secondary button with a 2px border of #49a3ff, white background, and #0052cc text."

## Known gaps
* Hover and active states for buttons were not explicitly captured in the computed style evidence.
* Mobile-specific typography scale (font-size changes) was not fully documented in the provided evidence.
* Semantic colors (Success/Error) were not present on the analyzed homepage.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://leapxpert.com | 1440px / 390px | 2026-06-06 |