# Wipster Design System

> High-contrast collaborative canvas using vibrant emerald accents against deep ink foundations and structured Gibson typography.

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

## TL;DR
Wipster employs a high-energy "monochrome-plus" system where a vibrant Emerald Green (#00c65e) serves as the primary action signal against a foundation of deep Obsidian (#000000) and cool Slate backgrounds (#f2f5f8). The typography is anchored by **canada-type-gibson**, utilizing heavy weights (700) for massive display headers and medium weights (500) for section titles. Components are characterized by a mix of sharp 0px containers and soft 4px-6px rounded buttons, often accompanied by deep, soft shadows (20px blur) to create a layered, modern SaaS aesthetic.

## Signature DNA
1. **Emerald Action Voltage** (The use of #00c65e as the exclusive high-confidence primary color for conversion points like "Start free trial" and "See all case studies" across all pages).
2. **Gibson Display Hierarchy** (Massive 60px bold headers in canada-type-gibson that dominate the hero sections, establishing a structured, professional creative tool feel).
3. **Elevated Emerald Pills** (Primary buttons use a specific combination of #00c65e background, 4px radius, and a `0px 10px 20px` soft shadow to lift actions off the flat canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.obsidian}` | `#000000` | Primary text, footer backgrounds, button text | 253 | 0.8 | computed_style |
| `{color.slate.light}` | `#f2f5f8` | Section backgrounds, pricing card surfaces | 126 | 0.8 | computed_style |
| `{color.charcoal}` | `#444444` | Secondary body text | 83 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Surface backgrounds, primary button text | 37 | 0.8 | computed_style |
| `{color.ink}` | `#222222` | Navigation and header text | 15 | 0.8 | computed_style |
| `{color.silver}` | `#cccccc` | Borders, disabled states, secondary surfaces | 9 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.emerald}` | `#00c65e` | Primary CTA background, "Most Popular" badges | 6 | 0.6 | computed_style |
| `{color.cobalt}` | `#3574e3` | Secondary CTA background (Pricing page) | 4 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| canada-type-gibson | 400, 500, 700 | Primary Brand & Headings | Montserrat | Commercial |
| Open Sans | 600 | UI Labels / Buttons | Open Sans | Google Fonts |
| Helvetica | 700 | Alternative Display | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 60px | 66px | normal | 700 | Hero H1 | `h1` |
| `{type.display.lg}` | 50px | 57.5px | normal | 700 | Hero Sub-headers | `span#hs_cos_wrapper_widget...` |
| `{type.display.md}` | 40px | 44px | 500 | normal | Section Headers | `h2` |
| `{type.heading.lg}` | 37px | 40.7px | normal | 400 | Sub-section heads | `h3` |
| `{type.heading.md}` | 28px | 30.8px | normal | 500 | Feature titles | `h4` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 400 | Secondary headers | `p.secondary-header` |
| `{type.body.lg}` | 18px | 23.4px | normal | 400 | Primary body copy | `p` |
| `{type.body.md}` | 16px | 20.8px | normal | 400 | Small body / footer | `p` |
| `{type.ui.button}` | 16px | 18.4px | normal | 600 | CTA Labels | `a#hs-button...` |

### Principles
1. **Tight Line Heights:** Display type maintains a tight 1.1 ratio (60px/66px) for a compact, high-impact look.
2. **Weight Contrast:** Heavy use of 700 weight for brand-level messaging contrasted with 400 weight for descriptive prose.
3. **Sans-Serif Exclusivity:** The system is entirely sans-serif, leaning on geometric (Gibson) and humanist (Open Sans) forms.

## Spacing
**Base unit:** 5px (inferred from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 118 |
| `{space.sm}` | 15px | 9 |
| `{space.md}` | 25px | 19 |
| `{space.lg}` | 50px | 10 |
| `{space.xl}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main sections, footer, sharp cards | 371 occurrences |
| `{radius.sm}` | 4px | Primary Emerald Buttons | Rounded Button component |
| `{radius.md}` | 6px | Secondary Cobalt Buttons | Observed on Pricing page |
| `{radius.lg}` | 12px | Feature/Pricing Cards | Card component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.1) 0px 10px 20px 0px` | CTA Buttons, Pricing Cards | Rounded Button component |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Primary site-wide conversion
**Pages observed:** https://wipster.io, https://wipster.io/pricing, https://wipster.io/about
**Spec:** 
- Background: `{color.emerald}` (#00c65e)
- Text: `{color.white}` (#ffffff)
- Radius: `{radius.sm}` (4px)
- Padding: 18px 25px
- Typography: `{type.ui.button}` (16px / 600)
- Shadow: `{shadow.deep}`
**States observed:** Default | Hover: captured (visual darkening) | Focus: not captured | Active: not captured | Disabled: not captured

#### Rounded Button (Secondary)
**Role:** Pricing-specific actions
**Pages observed:** https://wipster.io/pricing
**Spec:** 
- Background: `{color.cobalt}` (#3574e3)
- Text: `{color.white}` (#ffffff)
- Radius: `{radius.md}` (6px)
- Padding: 12px 24px
- Typography: `{type.heading.sm}` (24px / 400)
- Shadow: `{shadow.deep}`

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product benefits
**Pages observed:** https://wipster.io/pricing, https://wipster.io/about
**Spec:** 
- Background: `{color.slate.light}` (#f2f5f8)
- Radius: `{radius.lg}` (12px)
- Padding: 0px (internal content handles spacing)
- Border: none

#### Navigation Bar
**Role:** Global header
**Pages observed:** https://wipster.io, https://wipster.io/pricing
**Spec:** 
- Background: transparent or `{color.white}`
- Text: `{color.ink}` (#222222)
- Height: ~80px (implied)
- Font: canada-type-gibson

### Tier 3: Surface-specific

#### Pricing Toggle
**Role:** Switch between annual/monthly billing
**Pages observed:** https://wipster.io/pricing
**Spec:** 
- Background: `{color.obsidian}` (#000000)
- Text: `{color.white}` (#ffffff)
- Font: `{type.body.lg}` (18px / 700)
- Radius: 9999px (pill)

#### Footer
**Role:** Global site map
**Pages observed:** All
**Spec:** 
- Background: `{color.obsidian}` (#000000)
- Text: `{color.white}` (#ffffff)
- Padding: 50px 0px
- Link Color: `{color.silver}` (#cccccc)

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1200px (approx) |
| Section Padding | 100px (vertical) |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; H1 scales to ~32px; buttons become full-width. |

## Imagery & decoration
Wipster uses dark, atmospheric backgrounds for hero sections, often featuring abstract geometric shapes (circles, rectangles) in muted tones to provide depth. Product screenshots are framed within clean, 12px rounded cards. The brand avoids complex gradients, preferring solid color blocks and high-contrast text.

## Do's
- Use `{color.emerald}` (#00c65e) for all primary conversion buttons.
- Set main page headers in **canada-type-gibson** at 700 weight.
- Apply `{shadow.deep}` to buttons to ensure they "float" above the canvas.
- Maintain a clear distinction between `{color.obsidian}` backgrounds and `{color.white}` text for maximum legibility.
- Use `{radius.lg}` (12px) for all product-related cards and containers.

## Don'ts
- **Wrong:** Using `{color.cobalt}` (#3574e3) for the main "Start free trial" button on the homepage. **Right:** Use `{color.emerald}` (#00c65e). **Reason:** Emerald is the primary brand signal; Cobalt is reserved for secondary pricing tiers.
- **Wrong:** Applying rounded corners to the main section backgrounds. **Right:** Keep section backgrounds at `{radius.none}` (0px).
- **Wrong:** Using a serif font for body copy. **Right:** Use canada-type-gibson or Open Sans.
- **Wrong:** Mixing different shadow styles on a single page. **Right:** Stick to the `{shadow.deep}` (20px blur) for all elevated elements.

## Similar brands
- Frame.io
- Vimeo
- Dropbox
- Slack

## Quick start

### CSS Custom Properties
```css
:root {
  --wipster-emerald: #00c65e;
  --wipster-cobalt: #3574e3;
  --wipster-obsidian: #000000;
  --wipster-slate-light: #f2f5f8;
  --wipster-font-primary: 'canada-type-gibson', sans-serif;
  --wipster-radius-sm: 4px;
  --wipster-radius-lg: 12px;
  --wipster-shadow-deep: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-emerald: #00c65e;
  --color-cobalt: #3574e3;
  --color-obsidian: #000000;
  --color-slate-light: #f2f5f8;
  --font-gibson: "canada-type-gibson";
  --shadow-deep: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  --radius-lg: 12px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Wipster Emerald #00c65e with a 4px border radius and a 20px blur soft shadow."
- "Design a pricing card with a #f2f5f8 background, 12px rounded corners, and a 28px Gibson medium weight title."
- "Generate a hero section with a #000000 background and a 60px bold Gibson header in white."

## Known gaps
- Hover and active states for secondary buttons were not fully captured in the pricing page evidence.
- Specific mobile breakpoint values (e.g., 768px, 1024px) were not explicitly declared in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://wipster.io | 1440px | 2026-06-06 |
| Pricing | https://wipster.io/pricing | 1440px | 2026-06-06 |
| About | https://wipster.io/about | 1440px | 2026-06-06 |