# Wishpond Design System

> Deep indigo canvases meeting vibrant purple accents, anchored by high-contrast Geist typography and soft-radius floating panels.

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

## TL;DR
Wishpond utilizes a "Deep Night" aesthetic, where a primary indigo base (`#09005c`) provides the foundation for high-energy purple (`#6e01bb`) and electric blue (`#6ec1e4`) accents. The system relies heavily on the **Geist** typeface for a technical, modern feel, often paired with **Manrope** for softer display moments. Layouts are characterized by generous vertical spacing and "Surface" components that use large border radii (up to 50px) and subtle, wide-spread shadows (`rgba(0, 0, 0, 0.08) 0px 0px 20px 0px`). Interactive elements are consistently pill-shaped or heavily rounded, creating a friendly but professional SaaS atmosphere.

## Signature DNA
1. **The Indigo Canvas** (The use of `#09005c` as both a primary text color on white and a full-bleed section background creates a high-contrast, authoritative foundation. Seen on Homepage and Pricing.)
2. **Geist Display Hierarchy** (Heavyweight Geist at 45px-50px for data and headers provides a "dev-tool" precision to the marketing site. Seen across all analyzed pages.)
3. **Soft-Depth Panels** (White cards with 10px-20px radii and 20px blur shadows float over both light and dark backgrounds to organize complex feature sets. Seen on Homepage and Pricing.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary canvas, button text, card background | 75 | 1.0 | `--wp--preset--color--white` |
| `{color.ink}` | `#333333` | Primary body text | 125 | 1.0 | `--uael-as-text-color` |
| `{color.black}` | `#000000` | Deep backgrounds, footer, shadows | 13 | 1.0 | `--wp--preset--color--black` |
| `{color.light-gray}` | `#f5f5f5` | Section backgrounds, secondary text | 26 | 1.0 | `--uael-as-bg-light` |
| `{color.border}` | `#d9d9d9` | Default dividers and UI borders | 5 | 1.0 | `--uael-as-border-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#09005c` | Hero backgrounds, primary headings | 34 | 0.8 | Computed Style |
| `{color.vivid-purple}` | `#6e01bb` | Primary CTA buttons, active states | 13 | 0.8 | Computed Style |
| `{color.electric-blue}` | `#6ec1e4` | Secondary accents, text links | 13 | 0.8 | Computed Style |
| `{color.soft-purple}` | `#e9deff` | Badge backgrounds, icon plates | 8 | 0.6 | Computed Style |
| `{color.lavender}` | `#bba6fe` | Decorative borders, soft surfaces | 7 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Geist** | 300, 500, 600 | Primary Display, Buttons, Data | Geist Sans | SIL Open Font |
| **Manrope** | 300, 400, 600 | Secondary Display, Subheaders | Manrope | SIL Open Font |
| **-apple-system** | 400 | Default Body | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-xl}` | 70px | 70px | normal | 400 | Hero Headlines | `h2.elementor-heading-title` |
| `{text.display-lg}` | 50px | 50px | normal | 600 | Section Headers | `h2.elementor-heading-title` |
| `{text.data-lg}` | 45px | 45px | normal | 600 | Counters/Numbers | `span.elementor-counter-number-prefix` |
| `{text.heading-md}` | 25px | 25px | normal | 600 | Sub-section heads | `h2.elementor-heading-title` |
| `{text.button}` | 20px | 20px | normal | 600 | Primary CTAs | `a.elementor-button` |
| `{text.body}` | 16px | 24px | normal | 400 | Running text | `section.elementor-element` |
| `{text.body-sm}` | 15px | 15px | normal | 500 | Captions, labels | `span.elementor-heading-title` |
| `{text.caption}` | 11px | 11px | normal | 600 | Overlines, badges | `h3.elementor-heading-title` |

### Principles
1. **Display weights are bold.** Headlines consistently use 600 weight to maintain authority against dark backgrounds.
2. **Geist for Interaction.** All buttons and navigational elements use Geist to signal "utility" and "modernity."
3. **Tight Display Leading.** Large headers use a 1:1 ratio (e.g., 70px size / 70px height) for a compact, impactful look.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 18 |
| `{space.sm}` | 12px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Full-width sections | 161 occurrences |
| `{radius.sm}` | 5px | Form inputs | Computed Style |
| `{radius.md}` | 10px | Feature cards | 54 occurrences |
| `{radius.lg}` | 20px | Pricing cards | 20 occurrences |
| `{radius.xl}` | 30px | Container panels | 5 occurrences |
| `{radius.pill}` | 50px | Primary buttons, large surfaces | 28 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.natural}` | `rgba(0, 0, 0, 0.08) 0px 0px 20px 0px` | Standard feature cards | Homepage |
| `{shadow.soft}` | `rgba(227, 227, 227, 0.63) 0px 0px 20px 0px` | Cards on light backgrounds | Homepage |
| `{shadow.deep}` | `rgba(0, 2, 63, 0.06) 0px 0px 20px 0px` | Subtle depth on indigo | Pricing |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#6e01bb` / Text: `#ffffff` / Radius: `50px` / Typography: `Geist 600 20px`
**States observed:** Default | Hover: `{captured}` | Focus: `{not captured}`

#### Feature Card
**Role:** Organizing product benefits
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Radius: `10px` / Shadow: `rgba(0, 0, 0, 0.08) 0px 0px 20px 0px`
**States observed:** Default | Hover: `{not captured}`

### Tier 2: Patterns

#### Pricing Tier
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Border: `1px solid #d9d9d9` / Radius: `20px` / Padding: `32px`
**States observed:** Default | Active: `{captured}`

#### Industry Icon Plate
**Role:** Visual category markers
**Pages observed:** Homepage
**Spec:** Background: `#e9deff` / Radius: `50%` / Padding: `10px` / Icon color: `#6e01bb`
**States observed:** Default

### Tier 3: Surface-specific

#### Indigo Section
**Role:** High-impact hero/transition
**Pages observed:** Homepage, About
**Spec:** Background: `#09005c` / Text: `#ffffff` / Radius: `0px`
**States observed:** Default

#### Floating Nav
**Role:** Global navigation
**Pages observed:** Homepage, Pricing
**Spec:** Background: `rgba(255, 255, 255, 0.1)` / Backdrop-filter: `blur(10px)` / Radius: `50px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1140px |
| Section padding | 80px - 100px (vertical) |
| Grid columns | 12-column desktop |
| Gutter | 20px |

## Imagery & decoration
Wishpond uses abstract, fluid gradients in the background of hero sections, primarily blending `#09005c` with lighter purples. It avoids sharp-edged photography in favor of UI mockups that sit within the `{radius.md}` card pattern.

## Do's
- Use **Geist 600** for all numerical data and primary headers.
- Apply `{radius.pill}` (50px) to all primary buttons.
- Use `#09005c` for full-width section backgrounds to create brand "anchors."
- Ensure cards on white backgrounds use the `{shadow.soft}` (`rgba(227, 227, 227, 0.63)`) shadow.
- Keep display leading tight (1.0) for headers above 40px.

## Don'ts
- **Wrong:** Using a 4px radius on primary buttons. **Right:** Use 50px pill. **Reason:** Wishpond's interactive language is strictly rounded.
- **Wrong:** Using `#007cba` (WordPress blue) as the primary brand color. **Right:** Use `#09005c`. **Reason:** The deep indigo is the core brand identifier.
- **Wrong:** Setting body text in Geist. **Right:** Use `-apple-system` or Manrope. **Reason:** Geist is reserved for headers and UI controls.
- Do not use sharp corners (0px) for any element containing content (cards, buttons, inputs).
- Do not use saturated red or green for non-semantic decorative elements.

## Similar brands
- **LogiNext** (Deep indigo palettes)
- **Linear** (Geist typography and dark-mode precision)
- **Attentive** (Bold purple accents on dark foundations)

## Quick start

### CSS Custom Properties
```css
:root {
  --wp-primary: #09005c;
  --wp-accent: #6e01bb;
  --wp-blue: #6ec1e4;
  --wp-ink: #333333;
  --wp-white: #ffffff;
  --wp-radius-card: 10px;
  --wp-radius-pill: 50px;
  --wp-shadow-standard: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  --font-display: 'Geist', sans-serif;
  --font-body: 'Manrope', sans-serif;
}
```

## Known gaps
- Hover states for secondary buttons were not fully captured in the automated trace.
- Mobile-specific typography scale for tablet viewports is missing.
- Exact hex for the "Success" semantic green was not present in the analyzed pages.

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