# Leadrat Design System

> High-contrast monochrome utility meets geometric precision, punctuated by a singular teal-green accent.

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

## TL;DR
Leadrat utilizes a strict monochrome foundation where deep blacks (`#000000`) and slate grays (`#7e868c`) define the structural hierarchy. The system is anchored by the **Outfit** typeface, using heavy weights (700) for display and medium weights for UI controls. A vibrant teal-green (`#50bea7`) serves as the primary action color for high-priority CTAs, while secondary actions utilize white-on-black or outlined treatments. Layouts are characterized by large border radii (12px to 24px) and generous internal padding, creating a modular, card-based interface that feels both technical and accessible.

## Signature DNA
1. **The Action Teal** (The use of `#50bea7` as the exclusive "Book A Demo" or "Get Quote" color against dark backgrounds, observed on the Homepage and Pricing pages).
2. **Geometric Rounded Modules** (Consistent use of 12px and 24px radii for cards and containers, creating a "soft-tech" aesthetic across all analyzed views).
3. **Outfit Display Hierarchy** (Heavy 700-weight Outfit headers at 48px paired with high-contrast white text on dark canvases).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary background, button fills, display text | 6 | 1.0 | `--ast-global-color-1` |
| `{color.white}` | `#ffffff` | Primary text on dark, card backgrounds, button text | 116 | 1.0 | `--ast-global-color-5` |
| `{color.slate}` | `#7e868c` | Secondary body text, card borders | 249 | 1.0 | `--ast-global-color-3` |
| `{color.charcoal}` | `#2f373d` | Input labels, tertiary text | 14 | 1.0 | `--ast-global-color-2` |
| `{color.smoke}` | `#edeef0` | Secondary button text, code blocks | 10 | 1.0 | `--ast-code-block-background` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.teal}` | `#50bea7` | Primary CTA background, success indicators | 12 | 0.8 | Computed Style |
| `{color.indigo}` | `#3b3573` | Pricing button text (decorative_only) | 15 | 0.8 | Computed Style |
| `{color.orange}` | `#f45a2a` | Brand signal / hover states (decorative_only) | 6 | 1.0 | `--ast-global-color-0` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Outfit** | 300, 400, 500, 600, 700 | Heading, Display, UI | Outfit (Google Fonts) | SIL Open Font |
| **Montserrat** | 400, 600, 700 | Secondary Heading | Montserrat (Google Fonts) | SIL Open Font |
| **Lato** | 400, 700 | Primary Body | Lato (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 48px | 47px | 0.1px | 700 | Hero Headlines | `h2.elementor-heading-title` |
| `{type.display.lg}` | 46px | 46px | normal | 600 | Counter Numbers | `span.elementor-counter-number-prefix` |
| `{type.heading.md}` | 37px | 48.1px | normal | 700 | Section Headers | `h2.elementor-heading-title` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 700 | Sub-section titles | `h2.elementor-heading-title` |
| `{type.body.lg}` | 18px | 15px | normal | 700 | Tab Titles | `span.e-n-tab-title-text` |
| `{type.body.md}` | 17px | 31.5px | normal | 400 | Standard Prose | `p` |
| `{type.button}` | 15px | 15px | normal | 700 | CTA Labels | `a.elementor-button` |
| `{type.caption}` | 14px | 26px | normal | 400 | Icon Box Descriptions | `p.elementor-icon-box-description` |

### Principles
1. **Heavy Display Weight:** Headlines must use Outfit at weight 700 to maintain brand authority.
2. **High-Contrast Body:** Body text on dark backgrounds must stay at `#ffffff` or `#7e868c`, never dropping below 4.5:1 contrast.
3. **Tight Display Leading:** Large display sizes (48px) use tight line heights (approx 1.0x) to create compact text blocks.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 75 |
| `{space.sm}` | 10px | 15 |
| `{space.md}` | 20px | 22 |
| `{space.lg}` | 35px | 6 |
| `{space.xl}` | 75px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 8px | Secondary Buttons | Homepage Hero |
| `{radius.md}` | 12px | Content Cards | About Page |
| `{radius.lg}` | 20px | Primary Buttons | Homepage CTA |
| `{radius.xl}` | 24px | Section Containers | Pricing Cards |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.base}` | `rgba(0, 0, 0, 0.5) 0px 0px 10px 0px` | Floating Buttons | Homepage Chat/CTA |

## Components

### Tier 1: Foundational

#### Primary Action Button
**Role:** High-priority conversion (Book A Demo)
**Pages observed:** Homepage, About
**Spec:** Background `#50bea7` / Text `#ffffff` / Radius 8px / Padding 16px 32px / Typography Outfit 700 (15px)
**States observed:** Default | Hover: captured

#### Secondary Button
**Role:** Navigational actions (Get Quote)
**Pages observed:** Homepage, Pricing
**Spec:** Background `#000000` / Text `#ffffff` / Border 3px `#141414` / Radius 20px / Padding 15px 35px
**States observed:** Default | Active: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Service or feature description
**Pages observed:** About, Pricing
**Spec:** Background `#1b1e25` / Text `#7e868c` / Radius 12px / Padding 10px / Border 0px
**States observed:** Default: captured

#### Pricing Tier Card
**Role:** Plan comparison
**Pages observed:** Pricing
**Spec:** Background `#ffffff` / Text `#7e868c` / Radius 24px / Padding 20px / Shadow none
**States observed:** Default: captured

### Tier 3: Surface-specific

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Homepage, Pricing
**Spec:** Background `#ffffff` / Text `#2f373d` / Border 1px `#dddddd` / Radius 0px / Typography Outfit 400 (20px)
**States observed:** Default | Active (Blue background `#0693e3` observed on active state): captured

#### Dashboard Tab Bar
**Role:** Interface navigation
**Pages observed:** Homepage, About
**Spec:** Background `#000000` / Text `#ffffff` / Radius 24px / Padding 75px 20px 50px
**States observed:** Active (Blue fill `#0693e3`): captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 75px (Vertical) |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, 100% width buttons, Hamburger menu |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), Horizontal nav |

## Imagery & decoration
Leadrat uses high-fidelity product screenshots with 24px rounded corners as the primary visual interest. Decorative elements are limited to simple geometric icons and the occasional use of the brand's orange (`#f45a2a`) for small UI signals.

## Do's
- Use **Outfit 700** for all section headers.
- Apply **24px radius** to all primary page containers.
- Reserve **#50bea7** for the single most important action on the page.
- Maintain a **#000000** background for hero sections to emphasize the product screenshots.
- Use **#7e868c** for all secondary body text to maintain hierarchy.

## Don'ts
- **Don't** use sharp corners (0px) for buttons or cards; the brand is defined by its rounded geometry.
- **Don't** use the accent teal (`#50bea7`) for body text or non-interactive elements.
- **Don't** mix Montserrat and Outfit within the same text block; keep Montserrat for secondary headings only.
- **Don't** use sub-brand colors (like the orange `#f45a2a`) as the primary button background; this is reserved for the parent teal.

## Similar brands
- Linear (High-contrast monochrome + dark mode)
- Vercel (Geometric precision + black/white foundation)
- Framer (Card-based layout + heavy typography)

## Quick start

```css
/* CSS Variables */
:root {
  --leadrat-black: #000000;
  --leadrat-white: #ffffff;
  --leadrat-slate: #7e868c;
  --leadrat-teal: #50bea7;
  --leadrat-radius-card: 24px;
  --leadrat-radius-btn: 20px;
  --font-display: 'Outfit', sans-serif;
}
```

## Agent prompt examples
- "Generate a pricing card using a #ffffff background, 24px border radius, and Outfit 700 for the price text."
- "Create a primary CTA button with #50bea7 background, white text in Outfit 700, and 8px border radius."
- "Design a dark mode hero section with #000000 background and a centered headline in Outfit 700 at 48px."

## Known gaps
- Hover states for secondary buttons were not fully captured in the automated trace.
- The specific transition timing for accordion animations was not recorded.
- Form validation error states (semantic red) were not observed on the analyzed pages.

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