# Kape Design System

> High-contrast monochrome foundations punctuated by rounded geometric accents and a signature deep purple interactive layer.

**Source:** https://kape.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** ExpressVPN, Private Internet Access, CyberGhost, Intego, Webselenese

## TL;DR
Kape utilizes a clean, achromatic base of pure white (#ffffff) and near-black (#050505) to establish a professional corporate canvas. The system is defined by the **Baloo Tamma 2** typeface, which provides a friendly, rounded geometric character to all headings and body copy. Interactive elements and brand highlights introduce a deep purple (#5d36a9) and soft lavender (#bdaedc) palette, often paired with 100px pill-radius geometry. Section transitions are marked by generous 100px vertical spacing and subtle light-gray (#f2f4f5) surface shifts.

## Signature DNA
1. **Rounded Display Typography** (Baloo Tamma 2 used across all scales, from 75px heroes to 14px footers, creating a soft but authoritative voice. Observed on kape.com)
2. **The Purple Pivot** (Interactive CTAs and decorative "By the numbers" rings use #5d36a9 as the sole high-voltage brand signal against the monochrome base. Observed on kape.com)
3. **Geometric Accents** (Semi-transparent rectangular blocks and circular progress rings behind headings and data points. Observed on kape.com)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| ExpressVPN | #ff1c1c (inferred) | Red shield/pill | Typography | Primary Color |
| CyberGhost | #ffcc00 (inferred) | Yellow ghost icon | Typography | Primary Color |
| PIA | #006644 (inferred) | Green padlock | Typography | Primary Color |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 4 | 1 | Computed |
| `{color.ink}` | `#050505` | Primary headings and deep shadows | 4 | 1 | Computed |
| `{color.text.dark}` | `#212529` | Default body text | 21 | 1 | `--bs-dark` |
| `{color.surface.light}` | `#f2f4f5` | Section alternating background | 1 | 1 | `--bs-light` |
| `{color.text.muted}` | `#505f62` | Secondary descriptions | 31 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#5d36a9` | CTA backgrounds, active rings | 5 | 0.6 | Computed |
| `{color.primary.soft}` | `#bdaedc` | Borders, decorative underlays | 3 | 0.6 | Computed |
| `{color.link}` | `#0d6efd` | Standard web links (legacy/fallback) | 17 | 1 | `--bs-primary` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Baloo Tamma 2 | 300, 400, 500 | All (Display, Body, UI) | Baloo 2 (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 75px | 78px | -1.88px | 500 | Hero H1 | `h1` |
| `{type.display.lg}` | 50px | 60px | normal | 300 | Section H2 | `h2` |
| `{type.display.md}` | 42px | 52.08px | -0.34px | 400 | Feature titles | `span:nth-of-type(1)` |
| `{type.h3}` | 18px | 30.06px | 0.29px | 500 | Subheadings | `h3` |
| `{type.body.lg}` | 18px | 25.92px | 0.18px | 400 | Intro paragraphs | `p` |
| `{type.button}` | 18px | 25.92px | -0.18px | 500 | Primary CTAs | `a.purple-btn` |
| `{type.body}` | 16px | 24px | normal | 400 | Header/Nav | `header.site-header` |
| `{type.body.sm}` | 14px | 18.06px | 0.22px | 400 | Footer links | `footer` |

### Principles
1. **Rounded Terminals:** All type must use Baloo Tamma 2 to maintain the friendly "digital security" persona.
2. **Tight Display Tracking:** Large display sizes (75px) use negative letter-spacing (-1.88px) to maintain visual tension.
3. **Generous Body Leading:** Paragraphs use ~1.44x line-height (18px/25.92px) for high legibility on white backgrounds.

## Spacing
**Base unit:** 8px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 17 |
| `{space.md}` | 35px | 6 |
| `{space.lg}` | 50px | 5 |
| `{space.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Image containers, section blocks | 93 occurrences |
| `{radius.pill}` | 100px | Buttons, decorative UI rings | 4 occurrences |

## Elevation
Not captured in source (System is predominantly flat with 0px radius containers).

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** kape.com
**Spec:** Background `{color.primary}` (#5d36a9) / Text `{color.canvas}` (#ffffff) / Radius `{radius.pill}` (100px) / Typography `{type.button}` (18px/500)
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Data Ring
**Role:** Visualizing "By the numbers" statistics
**Pages observed:** kape.com
**Spec:** Border 2px `{color.primary.soft}` (#bdaedc) / Active Segment `{color.primary}` (#5d36a9) / Radius 100% / Padding 35px
**States observed:** Default: Captured

#### Text Underlay
**Role:** Decorative emphasis behind headings
**Pages observed:** kape.com
**Spec:** Background `{color.primary.soft}` (#bdaedc) at ~20% opacity / Radius `{radius.none}` / Positioned behind text
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Site Header
**Role:** Global navigation
**Pages observed:** kape.com
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.text.dark}` (#212529) / Font-size 16px / Padding 15px 0px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px (Standard Bootstrap Container) |
| Section Padding | 100px (Vertical) |
| Grid | 12-column flex |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; H1 scales down; padding reduced to 15px |
| Desktop | 1440px | Full horizontal nav; 100px section spacing |

## Imagery & decoration
Kape uses "Lighthouse" and "Digital Security" themed line illustrations with soft purple and yellow accents. It avoids photography, relying on vector-based storytelling to explain abstract technology concepts.

## Do's
- Use **Baloo Tamma 2** for all text levels to ensure brand consistency.
- Apply `{color.primary}` (#5d36a9) only to interactive or high-emphasis elements.
- Maintain 100px vertical spacing between major homepage sections.
- Use `{radius.pill}` for all buttons to contrast against sharp-edged image blocks.
- Keep backgrounds predominantly `{color.canvas}` (#ffffff).

## Don'ts
- **Wrong:** Using `#0d6efd` (Blue) for primary brand CTAs. **Right:** Use `#5d36a9`. **Reason:** Blue is a Bootstrap default; Purple is the Kape brand identifier.
- **Wrong:** Mixing serif fonts with Baloo Tamma 2. **Reason:** The brand is strictly geometric-rounded sans-serif.
- **Wrong:** Applying heavy drop shadows to cards. **Reason:** The system is flat/monochrome; depth is achieved through color layering, not elevation.

## Similar brands
- Proton
- Nord Security
- 1Password

## Quick start

```css
/* CSS Custom Properties */
:root {
  --kape-primary: #5d36a9;
  --kape-primary-soft: #bdaedc;
  --kape-ink: #050505;
  --kape-canvas: #ffffff;
  --kape-text-body: #212529;
  --kape-font-main: 'Baloo Tamma 2', sans-serif;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #5d36a9;
  --color-primary-soft: #bdaedc;
  --font-display: "Baloo Tamma 2";
  --radius-pill: 100px;
  --spacing-section: 100px;
}
```

## Agent prompt examples
- "Create a hero section for Kape using Baloo Tamma 2 at 75px, a #5d36a9 pill button, and a #ffffff background."
- "Design a stat card with a purple #5d36a9 progress ring and 18px Baloo Tamma 2 medium weight text."
- "Generate a section header with a soft lavender #bdaedc rectangular underlay behind the title."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Form input styles (text fields, checkboxes) were not present on the analyzed pages.
- Success/Error semantic colors were not explicitly defined in the UI.

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