# Zenlove Design System

> High-contrast emotional wellness anchored by vibrant crimson waves and deep navy typography on a clean white canvas.

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

## TL;DR
Zenlove utilizes a high-energy "monochrome plus accent" system where a saturated crimson (#e63142) acts as the primary emotional driver. The interface is grounded by a deep navy ink (#07214c) for all primary text and navigation, providing high legibility (15.8:1 contrast) against the pure white (#ffffff) background. Visual rhythm is established through organic, wave-like section dividers and generous 45px vertical padding. Typography is exclusively Nunito, leaning on weight 400 for display and 600-700 for structural emphasis, creating a friendly yet authoritative wellness atmosphere.

## Signature DNA
1. **The Crimson Wave** (The hero section and testimonial bands use a soft organic wave divider in #e63142 to break the grid, observed on the homepage and pricing pages).
2. **Navy-on-White Authority** (Primary communication uses #07214c text on #ffffff surfaces, avoiding standard blacks for a softer, more premium "ink" feel).
3. **Rounded Iconography** (Feature blocks use 1px stroke icons contained within soft-edged squares, reinforcing the "Zen" approachable aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, card surface, primary text on dark | 46 | 1.0 | Computed Style |
| `{color.navy}` | `#07214c` | Primary text, headings, button text | 142 | 0.8 | Computed Style |
| `{color.gray.dark}` | `#3a3a3a` | Secondary text, input labels | 18 | 1.0 | `--ast-global-color-1` |
| `{color.gray.light}` | `#e6e6e6` | Default borders, subtle dividers | 3 | 1.0 | `--ast-global-color-6` |
| `{color.blue.soft}` | `#e9eff9` | Secondary section backgrounds | 11 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.crimson}` | `#e63142` | Hero background, testimonial bands, brand voltage | 7 | 0.6 | Computed Style |
| `{color.slate}` | `#6a7a94` | Deemphasized body text | 49 | 0.8 | Computed Style |
| `{color.teal}` | `#4ba086` | Decorative icon borders (decorative_only) | 8 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Nunito | 100, 400, 500, 600, 700 | All headlines, body, and UI | Nunito (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 48px | 67.2px | normal | 400 | Page titles | `h1.page-title` |
| `{type.h2}` | 32px | 41.6px | normal | 600 | Section heads | `h2.elementor-heading-title` |
| `{type.h3}` | 26px | 32px | normal | 500 | Post/Card titles | `h2.bdpp-post-title` |
| `{type.h4}` | 24px | 31.2px | normal | 600 | Icon box titles | `h3.elementor-icon-box-title` |
| `{type.body.lg}` | 19px | 32.3px | normal | 400 | Intro paragraphs | `p:nth-of-type(1)` |
| `{type.body}` | 17px | 31.5px | normal | 400 | Default body | `header#masthead` |
| `{type.nav}` | 16px | 29.7px | normal | 400 | Menu links | `a.menu-link` |
| `{type.caption}` | 13px | 24.7px | normal | 400 | Small metadata | `span` |

### Principles
1. **Headlines are never heavy.** Even at display sizes (48px), Nunito stays at weight 400 to maintain a gentle brand voice.
2. **Navy is the new Black.** All primary reading paths use #07214c for better harmony with the crimson accent.
3. **Generous Leading.** Body text uses a ~1.8x line-height ratio (17px/31.5px) to ensure a relaxed reading experience.

## Spacing
**Base unit:** 5px (derived)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 6 |
| `{space.sm}` | 15px | 15 |
| `{space.md}` | 20px | 24 |
| `{space.lg}` | 30px | 9 |
| `{space.xl}` | 45px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Primary sections, testimonial blocks | 226 occurrences |
| `{radius.input}` | 2px | Form fields | `Text Input` component |
| `{radius.card}` | 20px | Floating feature cards | `Card` component |
| `{radius.pill}` | 100px | Social icons, decorative dots | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.5) 0px 0px 10px 0px` | Feature cards on white | `Card` component |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** Search and contact form fields
**Pages observed:** /pricing, /about
**Spec:** Background `#fafafa` / Text `#666666` / Border 1px `#dddddd` / Radius 2px / Padding 12px 15px / Typography 17px
**States observed:** Default: captured | Hover/Focus: not captured

#### Surface (Standard)
**Role:** Default content section
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#07214c` / Border 1px `#e6e6e6` / Radius 0px / Padding 45px 0px
**States observed:** Default: captured

### Tier 2: Patterns

#### Card
**Role:** Featured content or testimonials
**Pages observed:** Homepage
**Spec:** Background `#ffffff` / Text `#07214c` / Border 0px / Radius 20px / Padding 10px / Shadow `{shadow.card}`
**States observed:** Default: captured

#### Rounded Button
**Role:** Social media links and pagination dots
**Pages observed:** Homepage
**Spec:** Background `#555555` / Text `#07214c` / Border 0px / Radius 100% / Padding 0px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Hero Surface
**Role:** Brand-heavy entry sections
**Pages observed:** Homepage
**Spec:** Background `#e63142` / Text `#07214c` / Border 0px / Radius 0px / Padding 0px
**States observed:** Default: captured

#### Secondary Surface
**Role:** Alternating content bands
**Pages observed:** Homepage
**Spec:** Background `#e9eff9` / Text `#07214c` / Border 0px / Radius 0px / Padding 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px (standard container) |
| Section Padding | 45px (vertical) |
| Element Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Wave dividers stack vertically; text aligns center; nav collapses to hamburger. |
| Desktop | 1440px | 3-column grid for features; horizontal navigation. |

## Imagery & decoration
- **Organic Waves:** Used as section transitions between #e63142 and #ffffff.
- **App Mockups:** High-fidelity mobile frames showing the internal app UI are central to the hero.
- **Grayscale Logos:** Partner and media logos (Le Monde, Elle) are rendered in pure grayscale to avoid clashing with the crimson brand color.

## Do's
- Use `#07214c` for all primary headings to maintain brand authority.
- Apply `{radius.card}` (20px) to elements that require a "friendly" or "soft" feel.
- Use `#e9eff9` as a background for sections that need to feel distinct but less intense than the crimson hero.
- Maintain a line-height of at least 1.8x for body copy.
- Use grayscale for third-party logos.

## Don'ts
- **Wrong:** Using pure black `#000000` for body text. **Right:** Use `#07214c`. **Reason:** Pure black is too harsh against the wellness-focused crimson/white palette.
- **Wrong:** Using bold Nunito (700+) for display titles. **Right:** Use weight 400. **Reason:** The brand relies on a gentle, non-aggressive display style.
- **Wrong:** Applying shadows to every card. **Right:** Only use `{shadow.card}` on white-on-white elements to provide necessary depth.

## Similar brands
- Headspace (soft geometry, friendly type)
- Calm (generous whitespace, high-contrast accents)
- Bloom (rounded UI, wellness-focused palette)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #e63142;
  --color-ink: #07214c;
  --color-canvas: #ffffff;
  --color-surface-soft: #e9eff9;
  --font-main: 'Nunito', sans-serif;
  --radius-card: 20px;
  --shadow-subtle: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
```

## Agent prompt examples
- "Create a feature section for Zenlove using a 3-column grid, Nunito 24px semi-bold headings in #07214c, and 17px body text with 1.8 line-height."
- "Generate a testimonial card with a 20px border radius, a subtle 10px blur shadow, and a pure white background."
- "Design a hero section with a crimson #e63142 background and an organic wave transition to a white section below."

## Known gaps
- Hover and Active states for primary buttons were not captured in the automated crawl.
- Mobile navigation transition details (animation speed/type) are missing.
- Specific success/error semantic tokens were not found in the global CSS scope.

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