---
version: alpha
name: Frequency Breathwork
description: Editorial wellness calm — warm off-white canvas with near-black ink, a soft sage-green accent borrowed from nature imagery, generous whitespace, large breathing type, and quiet text-link CTAs. Minimal chrome, organic spiral iconography, numbered session system (I–XII).

colors:
  # Canvas + ink
  background: "#faf8f3"
  surface: "#ffffff"
  surface-soft: "#f3efe8"
  ink: "#1a1a1a"
  ink-pure: "#000000"
  ink-secondary: "#5c574f"
  ink-muted: "#8a857b"

  # Accent — sage/forest green from nature imagery
  primary: "#3f5e44"
  primary-soft: "#6f8a72"
  accent-warm: "#c9a86a"

  # Interactive
  link: "#1a1a1a"
  link-hover: "#3f5e44"

  # Neutral scale
  warm-900: "#1a1a1a"
  warm-700: "#3d3a34"
  warm-500: "#5c574f"
  warm-300: "#a8a298"
  warm-200: "#d8d2c6"
  warm-100: "#ebe6dc"
  warm-50: "#f3efe8"

  # Borders
  border: "#e2dccf"
  border-strong: "#cfc7b6"

  # On-color
  on-primary: "#faf8f3"
  on-ink: "#faf8f3"
  on-surface: "#1a1a1a"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  card-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1.5px
  numeral:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px
  circle: 9999px

components:
  # Primary filled CTA — sage green
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.warm-900}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px

  # Outline secondary
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
    borderColor: "{colors.border-strong}"

  # Quiet text-link CTA — the brand's default
  button-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 0px
    borderColor: "{colors.ink}"

  # Session card — numbered I–XII
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  # Soft tinted card
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  # Roman-numeral badge
  badge-numeral:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.numeral}"
    rounded: "{rounded.circle}"
    padding: 8px
    width: 48px
    height: 48px

  # Eyebrow label — tracked uppercase
  label-eyebrow:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 0px

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"

  # Top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 40px
    borderColor: "{colors.border}"
---

# Frequency Breathwork Design System

## Overview

Frequency Breathwork is a wellness brand whose interface breathes. The canvas is a warm off-white (`{colors.background}`) rather than clinical pure white, immediately softening the experience and signalling calm over clinical. Near-black ink (`{colors.ink}`) carries the text at high contrast, while a single restrained accent — a muted sage/forest green (`{colors.primary}`) lifted from the brand's nature photography — appears sparingly on calls to action and numerals. Nothing competes; everything settles.

The typographic system is the soul of the brand. A high-contrast serif (Cormorant Garamond as the closest faithful match) handles all display and heading work, its elegant ascenders and generous counters reading like editorial print rather than software UI. Body copy switches to a clean neutral sans (Inter) for long-form readability. This serif-display / sans-body pairing is the editorial wellness signature: the headings feel authored and human, the body feels effortless to read.

Structurally, the page is built on whitespace. Sections are separated by enormous vertical rhythm (`{spacing.3xl}`–`{spacing.4xl}`), full-width muted nature imagery, and a numbered session system rendered in Roman numerals (I–XII). Interaction is deliberately quiet: the brand favours underlined text-link CTAs and pill buttons over loud, saturated boxes. Organic spiral and droplet iconography reinforces the breathing, grounding metaphor without ever shouting.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`) — calm, not clinical
- High-contrast serif display (Cormorant Garamond) over clean sans body (Inter)
- Single muted sage-green accent (`{colors.primary}`) used sparingly for CTAs and numerals
- Roman-numeral session system (I–XII) in serif numerals
- Quiet, underlined text-link CTAs as the default interaction
- Tracked uppercase eyebrow labels for section framing
- Massive whitespace and full-width organic photography
- Pill-radius buttons; soft, large card radii

## Colors

### Canvas & Ink
- **Warm White** (`{colors.background}`): The page canvas — off-white for warmth.
- **Pure White** (`{colors.surface}`): Card and panel surfaces that lift off the canvas.
- **Soft Surface** (`{colors.surface-soft}`): Tinted warm panels and numeral badges.
- **Ink** (`{colors.ink}`): Primary text, headings, logo — near-black, never harsh.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Eyebrow labels, captions, metadata.

### Accent
- **Sage Green** (`{colors.primary}`): Primary CTA fills, active numerals, link hover — the one brand color.
- **Soft Sage** (`{colors.primary-soft}`): Lighter green for subtle accents.
- **Warm Gold** (`{colors.accent-warm}`): Rare warm highlight for editorial flourishes.

### Neutral Scale
- **Warm 900** (`{colors.warm-900}`): Primary ink, hover fills.
- **Warm 500** (`{colors.warm-500}`): Secondary text.
- **Warm 300/200** (`{colors.warm-300}` / `{colors.warm-200}`): Muted text, dividers.
- **Warm 100/50** (`{colors.warm-100}` / `{colors.warm-50}`): Tinted surfaces.

### Borders
- **Border** (`{colors.border}`): Hairline card and section dividers.
- **Border Strong** (`{colors.border-strong}`): Outline buttons, inputs.

## Typography

### Font Family
- **Display / Headings**: `Cormorant Garamond`, with fallbacks `Georgia, serif` — a high-contrast editorial serif.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — clean and neutral.

### Hierarchy

The full type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — editorial billboard |
| `section-heading` | 44px serif section titles |
| `sub-heading` | 30px serif sub-sections |
| `card-title` | 24px serif card / session titles |
| `body-large` | 19px sans introductions |
| `body` | 16px sans reading text |
| `body-small` | 14px sans captions |
| `label` | 13px tracked uppercase eyebrow |
| `numeral` | Roman-numeral session markers |
| `button-ui` | Buttons and links |

### Principles
- **Serif authors, sans reads**: Display serif gives editorial authority; sans body gives effortless reading.
- **Generous line-height**: Body runs at 1.65–1.7 — text that breathes like the practice.
- **Tracked uppercase eyebrows**: Small labels use +1.5px tracking to frame sections quietly.
- **Roman numerals as identity**: Sessions I–XII rendered in serif numerals tie navigation to ritual.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base unit is 8px, with dramatic jumps to `{spacing.3xl}` (96px) and `{spacing.4xl}` (160px) for section rhythm.

### Grid & Container
- Max content width approximately 1200px, often narrower for reading columns
- Hero: centered single column with full-width organic imagery
- Sessions: numbered card grid, 2–3 columns collapsing to single

### Whitespace Philosophy
- **Breathing room as brand**: Massive vertical padding mirrors the breathwork itself.
- **Imagery as separator**: Full-width muted nature photos break sections instead of hard rules.
- **Quiet contrast**: Restraint everywhere — one accent, one serif, lots of air.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Sage-green pill, warm-white text. The filled CTA.
- **`button-secondary`** — Warm-white outline pill for secondary actions.
- **`button-link`** — Underlined tracked text link; the brand's quiet default CTA.

### Cards
- **`card`** — White surface, large radius, hairline warm border. Session card.
- **`card-soft`** — Tinted warm surface variant.
- **`badge-numeral`** — Circular soft-surface badge holding a serif Roman numeral.

### Inputs & Nav
- **`input`** — White surface, warm strong border, medium radius.
- **`nav-bar`** — Warm-white sticky header, hairline bottom border, quiet links.

## Do's and Don'ts

### Do
- Use the warm off-white canvas (`{colors.background}`) — never pure white for the page.
- Pair Cormorant Garamond display with Inter body.
- Reserve sage green (`{colors.primary}`) for CTAs and numerals only.
- Lean on whitespace and full-width imagery for separation.
- Use tracked uppercase eyebrow labels to frame sections.
- Favour quiet underlined text-link CTAs.

### Don't
- Don't introduce a second saturated accent — the system is single-accent.
- Don't set headings in the sans body font — serif carries display.
- Don't tighten line-height on body copy — it should breathe.
- Don't use harsh pure black (`{colors.ink-pure}`) for large text blocks.
- Don't crowd sections — whitespace IS the design.

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, imagery full-bleed |
| Tablet | 600–1024px | 2-column session grid begins |
| Desktop | 1024–1400px | Full layout, max content width |
| Large | >1400px | Centered, generous margins |

### Collapsing Strategy
- Hero serif: 64px → ~40px, retains tight tracking
- Session grid: 3-column → 2 → single
- Nav: horizontal links → hamburger
- Section spacing: 96px+ → ~48px on mobile

## Agent Prompt Guide

### Quick Color Reference
- Page background: Warm White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Primary CTA: Sage Green `{colors.primary}`
- Border: `{colors.border}`

### Example Component Prompts
- "Create a hero on warm off-white (`{colors.background}`). Headline in Cormorant Garamond 64px weight 400, letter-spacing -1px, color `{colors.ink}`. Subtitle in Inter 19px weight 400, line-height 1.7, `{colors.ink-secondary}`. Sage-green pill CTA (`{colors.primary}`, 9999px radius, 14px 32px padding) plus an underlined text link."
- "Design a session card: white surface, 16px radius, hairline `{colors.border}` border, 32px padding. Circular soft badge holding a serif Roman numeral in `{colors.primary}`. Title in Cormorant Garamond 24px weight 500."
- "Build a tracked uppercase eyebrow label: Inter 13px weight 500, +1.5px tracking, `{colors.ink-muted}`."

### Iteration Guide
1. Warm off-white canvas is the foundation — never pure white.
2. Serif for display, sans for body — keep the split strict.
3. One accent only: sage green for CTAs and numerals.
4. Whitespace and imagery separate sections, not hard rules.
5. Prefer quiet underlined link CTAs over loud filled boxes.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Frequency Breathwork. Brand names and trademarks belong to their respective owners.