# Leadr Design System

> Corporate blue precision meets clean white space, anchored by high-contrast navy surfaces and sharp geometric card layouts.

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

## TL;DR
Leadr utilizes a structured "Azure and Zodiac" palette, pairing a primary corporate blue `#335aa8` with deep navy surfaces `#0c1f44`. The system is built on a foundation of light gray `#eaecf0` and pure white `#ffffff` backgrounds, creating a high-contrast environment for data-heavy management tools. Typography is strictly Arial, favoring semi-bold weights (600) for large display headers and medium weights (500) for interactive elements. Component geometry is defined by a dual-radius system: 8px for controls and 16px for content cards, maintaining a professional yet accessible aesthetic.

## Signature DNA
1. **The Zodiac Surface** (The use of deep navy `#0c1f44` as a full-width section background to transition between light content areas, often housing white or light blue text.)
2. **Azure Primary Actions** (Primary CTAs and key brand moments consistently use `#335aa8`, providing a stable, trustworthy focal point against both white and navy backgrounds.)
3. **Geometric Card Containers** (Content is organized into 16px rounded cards with 1px borders in `#eaecf0` or `#dfeefa`, creating clear information hierarchy in feature grids.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Primary surface, button text | 59 | 0.8 | computed_style |
| `{colors.gray-100}` | `#eaecf0` | Page background, borders | 12 | 1.0 | `--gray--100` |
| `{colors.gray-950}` | `#121212` | Primary text | 1 | 1.0 | `--gray--950` |
| `{colors.gray-500}` | `#6d6d6d` | Muted body text | 6 | 1.0 | `--gray--500` |
| `{colors.blue-zodiac-50}` | `#f1f7fd` | Subtle card background | 4 | 1.0 | `--blue-zodiac--50` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.azure-800}` | `#335aa8` | Primary button BG, brand text | 13 | 1.0 | `--azure--800-main` |
| `{colors.blue-zodiac-950}` | `#0c1f44` | Dark section background | 11 | 1.0 | `--blue-zodiac--950` |
| `{colors.light-blue}` | `#00acf0` | Text emphasis, icons | 8 | 1.0 | `--light-blue` |
| `{colors.azure-100}` | `#dfeefa` | Card borders (decorative) | 9 | 1.0 | `--azure--100` |
| `{colors.blue-zodiac-900}` | `#10295b` | Secondary dark surface | 3 | 1.0 | `--blue-zodiac--900` |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{colors.error}` | `#c42e31` | Validation/Alerts (`--red--600`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Arial | 300, 400, 500, 600, 700 | All roles | Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 96px | 108px | normal | 600 | Statistical highlights | `div.option_numbers-text` |
| `{type.display-h1}` | 50px | 60px | normal | 600 | Hero headlines | `h1.heading-style-h1` |
| `{type.heading-lg}` | 36px | 44px | normal | 600 | Section titles | `span.red-text` |
| `{type.heading-md}` | 30px | 40px | normal | 400 | Sub-headlines | `p.text-size-large` |
| `{type.heading-sm}` | 20px | 30px | normal | 600 | Card titles | `p.text-weight-semibold` |
| `{type.body-lg}` | 18px | 28px | normal | 400 | Intro paragraphs | `p.text-size-regular` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body | `p.text-size-small` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Nav, footer links | `div.navbar-component` |
| `{type.caption}` | 12px | 18px | normal | 500 | Labels | `div.text-lable-footer` |

### Principles
1. **Arial-Only Execution**: The system relies entirely on Arial, using weight shifts (400 to 600) to create hierarchy rather than typeface pairings.
2. **Tight Display Leading**: Large display sizes (96px) use a tight 1.125x line height to maintain visual density.
3. **Semibold Authority**: Primary headings consistently use weight 600, avoiding the "heavy" look of 700 or 800.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 14 |
| `{space.sm}` | 16px | 10 |
| `{space.md}` | 24px | 21 |
| `{space.lg}` | 32px | 3 |
| `{space.xl}` | 48px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 113 occurrences |
| `{radius.control}` | 8px | Buttons, inputs | `Rounded Button` component |
| `{radius.card}` | 16px | Content cards | `Card` component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | All cards and buttons | Components array |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Primary site actions (Get a Demo, Subscribe)
**Pages observed:** https://leadr.com
**Spec:** Background `{colors.azure-800}` (#335aa8) / Text `{colors.white}` (#ffffff) / Radius 8px / Padding 10px 20px / Font 16px 500
**States observed:** Default | Hover: captured

#### Rounded Button (Outline)
**Role:** Secondary actions (Watch Tour)
**Pages observed:** https://leadr.com
**Spec:** Background transparent / Text `{colors.azure-800}` (#335aa8) / Border 1px `{colors.azure-800}` / Radius 8px / Padding 0px 24px / Font 18px 500
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Benefit and pillar grids
**Pages observed:** https://leadr.com
**Spec:** Background `{colors.white}` (#ffffff) / Border 1px `{colors.gray-100}` (#eaecf0) / Radius 16px / Padding 24px / Font 14px
**States observed:** Default | Hover: not captured

#### Dark Card
**Role:** High-emphasis content on navy surfaces
**Pages observed:** https://leadr.com
**Spec:** Background `{colors.blue-zodiac-900}` (#10295b) / Border none / Radius 16px / Padding 32px 24px
**States observed:** Default | Hover: not captured

### Tier 3: Surface-specific
#### Soft Card
**Role:** Secondary content blocks
**Pages observed:** https://leadr.com
**Spec:** Background `{colors.blue-zodiac-50}` (#f1f7fd) / Border 1px `{colors.azure-100}` (#dfeefa) / Radius 16px / Padding 16px 24px 24px
**States observed:** Default

#### Nav Surface
**Role:** Global navigation bar
**Pages observed:** https://leadr.com
**Spec:** Background `{colors.white}` (#ffffff) / Border none / Radius 0px / Padding 0px 24px / Font 14px 400
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px (approx) |
| Section Padding | 74px (vertical) |
| Grid Gap | 24px |

## Imagery & decoration
- **Logo Strip**: Grayscale logos of partners/clients using `#6d6d6d`.
- **Product UI Mockups**: Clean browser frames with subtle internal shadows (not on container).
- **Iconography**: Circular badges in Azure or Light Blue containing white glyphs.

## Do's
- Use `#335aa8` for all primary interactive elements.
- Apply `16px` radius to all content-containing cards.
- Use Arial 600 for display headings at `50px` or `96px`.
- Maintain `24px` padding inside all card components.
- Transition between light sections using `#0c1f44` full-width bands.

## Don'ts
- **Wrong:** Using `#00acf0` (Light Blue) for primary buttons. **Right:** Use `#335aa8`. **Reason:** Light blue is reserved for text emphasis and icons.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders in `#eaecf0`. **Reason:** The system is flat and border-driven.
- **Wrong:** Mixing serif fonts with Arial. **Right:** Arial-only.
- **Wrong:** Using sharp corners for buttons. **Right:** Always use `8px` radius.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #335aa8;
  --color-surface-dark: #0c1f44;
  --color-bg-gray: #eaecf0;
  --color-text-main: #121212;
  --radius-card: 16px;
  --radius-control: 8px;
  --font-main: "Arial", sans-serif;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly tokenized in the evidence.
- Mobile-specific spacing scale (e.g., section padding reduction) was not captured.
- Shadow values were listed as "none" for all observed components, suggesting a purely flat design or very subtle hairlines.