# Intelepeer Design System

> Enterprise-grade automation anchored in deep navy depth and high-contrast electric blue accents.

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

## TL;DR
Intelepeer utilizes a "Deep Sea" palette where the primary canvas is white (#ffffff) but the brand identity is defined by a heavy navy foundation (#090b28, #141654). High-voltage electric blue (#0273eb) and vibrant purple (#7839f3) serve as functional and decorative accents, often appearing in gradients or as primary CTA fills. Typography is strictly **Roboto**, favoring light weights (300) for body and heavy weights (700) for display, creating a technical, legible atmosphere. Components feature generous radii (28px for buttons, 10px-20px for cards) and deep, soft shadows that suggest a layered, modern SaaS interface.

## Signature DNA
1. **The Navy Anchor** (#090b28): Large-scale section backgrounds and hero footers use near-black navy to ground the white content blocks, creating a premium enterprise feel (Homepage hero, Footer).
2. **Rounded Technicality**: A consistent 28px "Super-pill" radius is applied to all primary buttons and panel containers, softening the rigid grid of the enterprise data (Pricing cards, CTA buttons).
3. **Roboto Weight Contrast**: The system jumps between Roboto 300 for long-form description and Roboto 700 for 70px display headers, avoiding the "middle" weights to maintain high visual hierarchy.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | #ffffff | Primary canvas, card background, button text | 66 | 1.0 | `--bs-white` |
| `{color.navy.deep}` | #090b28 | Section backgrounds, primary text | 22 | 0.8 | Computed |
| `{color.navy.mid}` | #141654 | Surface backgrounds, button text | 33 | 0.8 | Computed |
| `{color.gray.light}` | #f2f2f6 | Subtle section backgrounds | 3 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.blue.electric}` | #0273eb | Primary CTA background, link text | 91 | 0.8 | Computed |
| `{color.slate.text}` | #4f5e78 | Default body text, secondary icons | 195 | 0.8 | Computed |
| `{color.purple.vibrant}` | #7839f3 | Accent text, decorative gradients | 39 | 0.8 | Computed |
| `{color.navy.alt}` | #20355a | Surface backgrounds, secondary text | 97 | 0.8 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto | 300, 400, 500, 600, 700 | Heading, Display, UI | Roboto (Google Fonts) | Apache 2.0 |
| Helvetica | 300, 400, 600 | Body, Form Inputs | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 70px | 90px | normal | 700 | Hero Headlines | `p:nth-of-type(1)` |
| `{type.display.lg}` | 48px | 52px | -1px | 400 | Section Headers | `h1.wp-block-heading` |
| `{type.heading.md}` | 36px | 400px | -1px | 400 | Sub-section Headers | `h2.wp-block-heading` |
| `{type.heading.sm}` | 24px | 31.2px | 0.1px | 300 | Feature Titles | `p:nth-of-type(1)` |
| `{type.body.lg}` | 18px | 25px | 0.1px | 300 | Lead Paragraphs | `p` |
| `{type.body.md}` | 16px | 24px | normal | 300 | Default Body | `section.bs-section` |
| `{type.body.sm}` | 14px | 14px | normal | 600 | Button Labels | `a.bs-pro-button__container` |
| `{type.caption}` | 12px | 15px | 2px | 600 | Overlines / Badges | `span` |

### Principles
1. **Light Body Weight**: Default body text uses Roboto 300, providing a clean, airy feel against high-density information.
2. **Tight Display Tracking**: Large headers (36px+) use negative letter spacing (-1px) to maintain visual tension.
3. **High Contrast Labels**: Captions and overlines use 2px tracking with weight 600 for maximum legibility at small scales.

## Spacing
**Base unit:** 4px (Inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 64 |
| `{space.sm}` | 12px | 35 |
| `{space.md}` | 20px | 47 |
| `{space.lg}` | 40px | 88 |
| `{space.xl}` | 80px | 23 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 6px | Form Inputs | Text Input component |
| `{radius.md}` | 10px | Standard Cards | Pricing cards |
| `{radius.lg}` | 20px | Feature Cards | Large feature blocks |
| `{radius.pill}` | 28px | Buttons, Panels | Rounded Button component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.deep}` | rgba(20, 22, 84, 0.1) 0px 10px 40px 0px | Floating Cards | Feature cards on white |
| `{shadow.soft}` | rgba(20, 22, 84, 0.12) 0px 0px 1px 0px, ... | Pricing Tiers | Pricing page cards |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** Homepage, Pricing
**Spec:** 
- Background: `{color.blue.electric}` (#0273eb) or Transparent
- Text: `{color.white}` (#ffffff) or `{color.blue.electric}` (#0273eb)
- Radius: `{radius.pill}` (28px)
- Padding: 14px 31px
- Typography: `{type.body.md}` (16px, 600)
**States observed:** Default | Hover: Captured (opacity shift) | Active: Captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** Pricing
**Spec:**
- Background: Transparent
- Border: 1px `{color.gray.border}` (rgba(190, 192, 209, 0.5))
- Radius: `{radius.sm}` (6px)
- Padding: 8px 20px
- Typography: Helvetica 16px

### Tier 2: Patterns

#### Feature Card
**Role:** Showcasing platform benefits
**Pages observed:** Homepage
**Spec:**
- Background: Transparent / White
- Radius: `{radius.md}` (10px)
- Shadow: `{shadow.deep}`
- Text: `{color.slate.text}` (#4f5e78)

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:**
- Background: `{color.white}` (#ffffff)
- Radius: `{radius.md}` (10px)
- Shadow: `{shadow.soft}`
- Padding: 40px

### Tier 3: Surface-specific

#### Navy Section
**Role:** High-impact content transitions
**Pages observed:** Homepage
**Spec:**
- Background: `{color.navy.deep}` (#090b28)
- Padding: `{space.xl}` (80px)
- Text: `{color.white}` (#ffffff)

#### Light Surface
**Role:** Subtle content grouping
**Pages observed:** Homepage, Pricing
**Spec:**
- Background: `{color.gray.light}` (#f2f2f6)
- Padding: `{space.xl}` (80px)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding | 80px |
| Card Gap | 20px - 40px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, 70px display type reduces to ~40px |
| Desktop | 1440px | Multi-column grids (3-up or 4-up) |

## Imagery & decoration
- **Gradients**: Subtle blue-to-purple gradients used in background patterns and icons.
- **Iconography**: Thin-stroke (1px-1.5px) line icons in electric blue.
- **Photography**: Professional environmental shots with cool-toned overlays.

## Do's
- Use **Roboto 300** for all descriptive body text to maintain the "light" brand feel.
- Apply the **28px radius** to all primary call-to-action buttons.
- Ground light pages with at least one **Deep Navy (#090b28)** full-width section.
- Use **#0273eb** for all interactive links and primary buttons.
- Maintain **80px vertical spacing** between major content sections.

## Don'ts
- **Don't** use middle-weight Roboto (400/500) for display headers; stick to 700 or 300.
- **Don't** use sharp corners (0px radius) for interactive components or cards.
- **Don't** use pure black (#000000) for backgrounds; use Deep Navy (#090b28).
- **Don't** mix the electric blue (#0273eb) with other primary colors like red or orange unless for semantic errors.

## Similar brands
- **Twilio**: Similar developer-focused SaaS aesthetic with blue accents.
- **Genesys**: Enterprise CX focus with clean, high-contrast layouts.
- **Dialpad**: Modern AI communications with rounded UI elements.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-navy-deep: #090b28;
  --color-blue-electric: #0273eb;
  --color-slate-text: #4f5e78;
  --color-white: #ffffff;
  --radius-pill: 28px;
  --radius-card: 10px;
  --font-primary: 'Roboto', sans-serif;
  --shadow-deep: 0px 10px 40px 0px rgba(20, 22, 84, 0.1);
}
```

## Known gaps
- **Hover States**: Specific hex values for button hover states were not explicitly declared in tokens, though visual shifts were observed.
- **Mobile Navigation**: The transition of the top-nav to a mobile hamburger menu was observed but specific mobile padding tokens were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://intelepeer.com | 1440px | 2026-06-06 |
| Pricing | https://intelepeer.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://intelepeer.com | 390px | 2026-06-06 |