# Wistia Design System

> High-contrast cobalt and white canvas punctuated by a playful, multi-chromatic pastel palette and hyper-rounded geometry.

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

## TL;DR
Wistia utilizes a deep cobalt primary (`#000933`) against a clean white foundation, creating a professional yet accessible video-software aesthetic. The system is defined by extreme pill-shaped geometry (84px radii) for primary actions and large-scale panels. While the core UI is monochrome, the brand injects "voltage" through a specific secondary palette of soft pastels (mint `#afe5a4`, peach `#ffc8b8`, lavender `#f2ccff`) used as categorical backgrounds and decorative accents. Typography pairs the geometric sans-serif **Walsheim** for high-impact display moments with **Inter** for dense functional UI and body prose.

## Signature DNA
1. **The Super-Pill** (84px border-radius applied to buttons and small feature tags, creating a distinctively soft, friendly silhouette across `wistia.com` and `wistia.com/pricing`).
2. **Categorical Pastels** (A systematic use of low-saturation background fills like `#afe5a4` and `#ffc8b8` to differentiate product features or pricing tiers without breaking the high-contrast cobalt hierarchy).
3. **Walsheim Display** (The use of Walsheim at weight 300 for large-scale headlines, providing a light, airy contrast to the bold, heavy weights used in functional UI).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary page background, button text | 261 | 0.8 | Computed Style |
| `{color.cobalt.deep}` | `#000933` | Primary text, headings, borders | 676 | 0.8 | Computed Style |
| `{color.cobalt.light}` | `#f5f6ff` | Subtle section backgrounds, pricing table borders | 139 | 0.8 | Computed Style |
| `{color.gray.muted}` | `#a1a3aa` | De-emphasized secondary text | 19 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.blue.action}` | `#2a49e5` | Primary CTA background | 47 | 0.8 | Computed Style |
| `{color.blue.navy}` | `#222e67` | Dark footer background, secondary buttons | 6 | 0.6 | Computed Style |
| `{color.mint}` | `#afe5a4` | Feature category background (Hosting) | 7 | 0.6 | Computed Style |
| `{color.peach}` | `#ffc8b8` | Feature category background (Creation) | 5 | 0.6 | Computed Style |
| `{color.lavender}` | `#f2ccff` | Feature category background (Marketing) | 4 | 0.6 | Computed Style |
| `{color.lemon}` | `#eff18e` | Feature category background (Automation) | 4 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Walsheim | 300, 400, 600, 700 | Display, Headings | Jost | Proprietary |
| Inter | 400, 500, 600, 700 | Body, UI Labels, Tables | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 56px | 67.2px | normal | 700 | Hero Subtitles | `p.HeroSharedComponents__HeroSubtitle` |
| `{type.display.lg}` | 54px | 67.5px | normal | 300 | Main Page Titles | `h1.TitleTag` |
| `{type.display.md}` | 40px | 48px | normal | 600 | Section Headers | `h2` |
| `{type.heading.md}` | 32px | 38.4px | normal | 600 | Feature Titles | `h3` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 600 | Accordion Headlines | `h4.AccordionHeadline` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Standard Prose | `section.SectionWrapper` |
| `{type.body.md}` | 16px | 22.4px | normal | 400 | Small Body Text | `p.styles__BodySm` |
| `{type.label.sm}` | 14px | 16.8px | normal | 700 | Table Headers | `th#key-features-header` |
| `{type.caption}` | 12px | 16.8px | normal | 600 | Category Chips | `a.PricingCard__CategoryChip` |

### Principles
1. **Weight Contrast:** Headlines frequently toggle between weight 300 (light) for a modern feel and 700 (bold) for functional urgency.
2. **Tight Display:** Large display sizes (40px+) maintain a strict 1.2x line-height ratio to keep headlines cohesive.
3. **Inter for Data:** All tabular data and pricing grids switch exclusively to Inter for maximum legibility at small sizes.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 357 |
| `{space.sm}` | 16px | 36 |
| `{space.md}` | 24px | 42 |
| `{space.lg}` | 40px | 293 |
| `{space.xl}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.card}` | 20px | Pricing cards, testimonial blocks | `PricingCard` |
| `{radius.panel}` | 32px | Comparison grid containers | `ComparisonGrid` |
| `{radius.pill}` | 84px | Primary buttons, category badges | `Button__ButtonBackground` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(204, 213, 255, 0.5) 0px 1px 10px 0px` | Hover states on cards | Pricing page hover |

## Components

### Tier 1: Foundational

#### Primary Action Button
**Role:** Main call-to-action (Sign up, Start trial)
**Pages observed:** `wistia.com`, `wistia.com/pricing`
**Spec:** Background `{color.blue.action}` (#2a49e5) / Text `{color.white}` (#ffffff) / Radius 84px / Font 18px 600
**States observed:** Default | Hover: Captured

#### Category Badge
**Role:** Labeling feature groups (Creation, Hosting)
**Pages observed:** `wistia.com/pricing`
**Spec:** Background `{color.peach}` (#ffc8b8) / Text `{color.cobalt.deep}` (#000933) / Radius 84px / Padding 4px 8px / Font 12px 700

### Tier 2: Patterns

#### Pricing Card
**Role:** Plan selection
**Pages observed:** `wistia.com/pricing`
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.cobalt.light}` (#f5f6ff) / Radius 20px / Padding 24px
**States observed:** Default | Featured: 2px border (#fa0c00)

#### Accordion
**Role:** FAQ and secondary information disclosure
**Pages observed:** `wistia.com/pricing`
**Spec:** Text `{color.cobalt.deep}` (#000933) / Typography `{type.heading.sm}` (24px 600) / Border-bottom 1px (#f5f6ff)

### Tier 3: Surface-specific

#### Comparison Grid Header
**Role:** Sticky navigation within pricing tables
**Pages observed:** `wistia.com/pricing`
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.cobalt.deep}` (#000933) / Font 14px 700

#### Dark Footer
**Role:** Global site navigation
**Pages observed:** `wistia.com`, `wistia.com/about`
**Spec:** Background `{color.blue.navy}` (#222e67) / Text `{color.white}` (#ffffff) / Padding 80px 64px

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 80px |
| Column Gap | 24px |

## Do's
- Use `#2a49e5` for the primary "Start" or "Sign up" action.
- Apply the `84px` pill radius to all interactive buttons.
- Use Walsheim Light (300) for headlines exceeding 50px.
- Use pastel backgrounds (`#afe5a4`, `#ffc8b8`) only for content categorization, never for primary buttons.
- Maintain high contrast between `#000933` text and `#ffffff` backgrounds.

## Don'ts
- **Wrong:** Using a sub-brand accent color like `#afe5a4` for a primary CTA background. **Right:** Use `#2a49e5`. **Reason:** Pastels are for surface categorization, not primary actions.
- Do not use sharp corners (0px) for any interactive element.
- Avoid using Walsheim for body copy; stick to Inter for readability.
- Do not use `#0000ee` for body text; it is reserved for specific link states.

## Quick start

```css
/* CSS Variables */
:root {
  --wistia-cobalt: #000933;
  --wistia-blue-action: #2a49e5;
  --wistia-white: #ffffff;
  --wistia-mint: #afe5a4;
  --wistia-peach: #ffc8b8;
  --wistia-radius-pill: 84px;
  --wistia-font-display: "Walsheim", sans-serif;
  --wistia-font-body: "Inter", sans-serif;
}
```

## Known gaps
- Hover state hex codes for primary buttons were not explicitly captured in the computed style evidence.
- Mobile-specific breakpoint transitions for the pricing grid were not fully documented in the source.
- Semantic "Success" and "Warning" colors were not present in the analyzed marketing pages.