# Wellnesscoach.live Design System

> A clean, high-contrast wellness canvas pairing deep navy authority with vibrant violet-blue energy and generous Poppins-driven whitespace.

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

## TL;DR
Wellnesscoach.live utilizes a "monochrome-plus" system where a foundational white canvas (#ffffff) is punctuated by high-voltage violet-blue accents (#7f56d9, #0000ee). The typography is dominated by Poppins, using heavy weights (600-800) for display and medium weights (400-600) for body and UI. Deep navy (#002e4f) serves as the primary grounding color for high-importance actions and footers. The system relies on extreme border radii (9999px pills and 100px panels) and subtle inset shadows to create a soft, approachable, yet professional corporate wellness atmosphere.

## Signature DNA
1. **The Violet Voltage** (#7f56d9, #0000ee): Used for primary CTAs, active states, and key brand highlights against a pure white background to drive focus.
2. **Poppins Display Hierarchy**: Massive 62px headlines with tight tracking (-2.48px) create a bold, modern editorial feel that signals "All-in-One" scale.
3. **Pill-First Geometry**: Every interactive element, from small badges to large "Book a Demo" buttons, utilizes a 9999px radius, reinforced by large 20px-96px rounded corners on content cards.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page floor, card background, primary text | 261 | 1 | `computed_style` |
| `{color.ink.primary}` | `#000000` | Primary body text, button text | 460 | 0.8 | `computed_style` |
| `{color.ink.navy}` | `#002e4f` | Footer text, primary button background | 62 | 0.8 | `computed_style` |
| `{color.ink.muted}` | `#666666` | Secondary descriptive text | 34 | 0.8 | `computed_style` |
| `{color.surface.soft}` | `#f7f8ff` | Subtle section backgrounds | 16 | 0.8 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.blue}` | `#0000ee` | Links, active text states | 154 | 0.8 | `computed_style` |
| `{color.accent.violet}` | `#7f56d9` | Primary CTA background, brand icons | 10 | 0.6 | `computed_style` |
| `{color.accent.sky}` | `#628fd7` | Secondary text, decorative elements | 56 | 0.8 | `computed_style` |
| `{color.accent.green}` | `#4a8b49` | Success indicators, decorative (decorative_only) | 4 | 0.6 | `computed_style` |
| `{color.accent.gold}` | `#e1c40c` | Warning/Highlight backgrounds (decorative_only) | 4 | 0.6 | `computed_style` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | `#198754` | Declared BS-Green |
| `{color.error}` | `#dc3545` | Declared BS-Red |
| `{color.info}` | `#0dcaf0` | Declared BS-Cyan |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Poppins** | 500, 600, 700 | Display, Headings | Poppins (Google Fonts) | SIL Open Font |
| **poppinsextrabold** | 800 | Hero Headings | Poppins 800 | SIL Open Font |
| **Inter** | 600 | UI Labels, Sub-headings | Inter (Google Fonts) | SIL Open Font |
| **Geist** | 500 | Body-sm | Geist (Vercel) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 62px | 74.4px | -2.48px | 600 | Hero H1 | `h1.framer-text` |
| `{type.display.lg}` | 44px | 52.8px | -1.76px | 600 | Section H2 | `h2.framer-text` |
| `{type.heading.md}` | 36px | 57.6px | 0.36px | 800 | Feature H4 | `h4.header-3` |
| `{type.heading.sm}` | 24px | 28.8px | -0.96px | 600 | Card Titles | `h5.framer-text` |
| `{type.body.lg}` | 18px | 25.2px | -0.72px | 500 | Primary Body | `p` |
| `{type.body.md}` | 16px | 19.2px | -0.16px | 600 | UI Labels | `p.framer-text` |
| `{type.body.sm}` | 14px | 19.6px | -0.56px | 500 | Secondary Body | `p.framer-text` |
| `{type.caption}` | 12px | 20px | normal | 600 | Metadata | `p.framer-text` |

### Principles
1. **Negative Tracking on Display**: As Poppins increases in size, letter-spacing tightens significantly (up to -2.48px) to maintain visual density.
2. **Medium-Weight Body**: Standard body text avoids "Regular" 400, opting for 500 or 600 for better legibility against white.
3. **Navy for Authority**: Dark navy (#002e4f) is reserved for the most critical conversion points and the footer to anchor the page.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 73 |
| `{space.sm}` | 12px | 69 |
| `{space.md}` | 16px | 9 |
| `{space.lg}` | 24px | 16 |
| `{space.xl}` | 48px | 10 |
| `{space.section}` | 96px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.pill}` | 9999px | Buttons, Badges, Tags | 128 occurrences |
| `{radius.panel}` | 100px | Large section containers | 20 occurrences |
| `{radius.card.lg}` | 20px | Feature cards | 28 occurrences |
| `{radius.card.md}` | 16px | Standard cards | 24 occurrences |
| `{radius.card.sm}` | 12px | Small UI elements | 42 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `inset.violet` | `rgba(64, 92, 253, 0.2) 0px 0px 22.5px 0px inset` | Brand cards | 34 occurrences |
| `inset.deep` | `rgba(63, 92, 252, 0.3) 0px 1px 20px 2px inset` | Active cards | 10 occurrences |
| `flat` | `none` | Standard cards | 112 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action (Book a Demo)
**Pages observed:** https://wellnesscoach.live, https://wellnesscoach.live/about
**Spec:** 
- Background: `{color.accent.violet}` (#7f56d9) or `{color.ink.navy}` (#002e4f)
- Text: `{color.canvas}` (#ffffff)
- Radius: `{radius.pill}` (9999px)
- Padding: 11px 24px
- Typography: Poppins 600, 18px
**States observed:** Default | Hover: captured | Active: captured

#### Badge / Tag
**Role:** Category labeling (e.g., "Challenges", "Rewards")
**Pages observed:** https://wellnesscoach.live, https://wellnesscoach.live/pricing
**Spec:**
- Background: transparent
- Text: `{color.accent.blue}` (#0000ee)
- Radius: `{radius.pill}` (9999px)
- Border: none
- Typography: Poppins 600, 12px

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying wellness services or benefits
**Pages observed:** https://wellnesscoach.live, https://wellnesscoach.live/pricing
**Spec:**
- Background: `{color.canvas}` (#ffffff)
- Radius: `{radius.card.lg}` (20px)
- Shadow: `inset.violet` (rgba(64, 92, 253, 0.2) 0px 0px 22.5px 0px inset)
- Padding: 20px 8px 8px

#### Integration Surface
**Role:** Container for partner logos (Zoom, Teams)
**Pages observed:** https://wellnesscoach.live
**Spec:**
- Background: `{color.surface.soft}` (#f7f8ff)
- Radius: `{radius.card.md}` (16px)
- Padding: 12px

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Pricing plan selection
**Pages observed:** https://wellnesscoach.live/pricing
**Spec:**
- Background: `{color.canvas}` (#ffffff)
- Radius: `{radius.card.sm}` (12px)
- Shadow: `inset.violet`
- Typography: Poppins 600, 24px (Title)

#### Section Panel
**Role:** Large background containers for grouped content
**Pages observed:** https://wellnesscoach.live
**Spec:**
- Background: `{color.surface.soft}` (#f7f8ff)
- Radius: `{radius.panel}` (100px)
- Padding: 0px (layout driven)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 96px |
| Column Gap | 24px |
| Grid System | Flex-based 12-column |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, H1 reduced to 32px, 16px horizontal padding |
| Desktop | 1440px | Multi-column grids, 96px section spacing |

## Imagery & decoration
Wellnesscoach.live uses soft, semi-transparent violet and blue gradients behind cards. Decorative "sparkle" or "star" icons are used as section dividers. The brand avoids harsh photography, opting for UI screenshots or clean, high-contrast icons.

## Do's
- Use `#7f56d9` for the highest priority "Book a Demo" actions.
- Apply negative letter-spacing to Poppins headings above 32px.
- Use `9999px` border-radius for all buttons and interactive tags.
- Ensure all content cards have at least a `12px` border radius.
- Use `#002e4f` for footers and professional grounding elements.

## Don'ts
- **Wrong:** Using `#0d6efd` (standard Bootstrap blue) as the primary brand color. **Right:** Use `#0000ee` or `#7f56d9`. **Reason:** The brand uses a specific high-saturation violet-blue, not default system colors.
- Do not use sharp corners (0px radius) for any interactive or container elements.
- Do not use Poppins at weights below 400 for body text.
- Do not place dark navy text on violet backgrounds; maintain high contrast with white.
- Avoid using standard drop shadows; prefer the brand's signature `inset` shadows.

## Similar brands
- Headspace (soft geometry, clean type)
- Calm (generous whitespace, blue/violet palette)
- BetterUp (corporate wellness, bold Poppins-like headers)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #ffffff;
  --color-ink-navy: #002e4f;
  --color-accent-violet: #7f56d9;
  --color-accent-blue: #0000ee;
  --radius-pill: 9999px;
  --radius-card: 20px;
  --shadow-brand-inset: inset 0 0 22.5px rgba(64, 92, 253, 0.2);
  --font-display: 'Poppins', sans-serif;
}
```

## Known gaps
- Hover and active states for secondary navigation items were not fully captured in the automated crawl.
- Specific mobile breakpoint transitions for the "ROI Calculator" component were not observed.

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