# Big Breath — Design System & Homepage Blueprint

Domain: bigbreathe.co
Client: Big Joe (Joseph Fauria)
Date: 2026-05-15

---

## Design Goal

This is not a website. It is a cinematic entry point into Big Joe's world. The visitor should feel something before they read anything. The experience mirrors what breathwork does: it slows you down, draws you inward, and delivers clarity. Every scroll reveals intention.

---

## Color System

### Base (Dark Foundation)
--bb-void:        #060D1A   /* near-black, deepest bg */
--bb-navy:        #0B1428   /* primary background */
--bb-navy-mid:    #0D1B3E   /* cards, lifted surfaces */
--bb-navy-lift:   #112244   /* hover states, borders */

### Energy (Electric Blue — the particle layer)
--bb-electric:    #1B6FD8   /* primary accent, CTA bg */
--bb-bright:      #4A9FE8   /* hover, active states */
--bb-ice:         #6AB4F5   /* secondary text highlight */
--bb-mist:        #A0C8FF   /* soft glows, icon fills */

### Foreground
--bb-white:       #FFFFFF   /* primary text, wordmark */
--bb-white-70:    rgba(255,255,255,0.70)  /* body text on dark */
--bb-white-40:    rgba(255,255,255,0.40)  /* muted labels, captions */
--bb-white-10:    rgba(255,255,255,0.08)  /* subtle card borders */

### Utility
--bb-line:        rgba(74,159,232,0.20)   /* dividers, grid lines */
--bb-glow:        rgba(27,111,216,0.35)   /* particle/button glow */

---

## Typography

### Display (Cormorant Garamond — wispy, editorial, cursive feel)
- Hero heading: Cormorant Garamond, Italic, 700, clamp(3.5rem, 8vw, 7rem)
- Section heading: Cormorant Garamond, Italic, 600, clamp(2rem, 4vw, 3.5rem)
- Pull quote: Cormorant Garamond, Italic, 400, clamp(1.5rem, 3vw, 2.25rem)

### Body (Inter — clean contrast to the wispy display)
- Body: Inter, 400, 1rem, line-height 1.7
- Label/eyebrow: Inter, 500, 0.75rem, letter-spacing 0.15em, uppercase
- CTA/nav: Inter, 600, 0.875rem

### Pairing Rule
Every section: one Cormorant Garamond headline (italic, light) + Inter body. Never both at the same weight. The contrast is the design.

---

## Motion System

### Entry
- Page load: canvas particle system initializes at 0 opacity, fades in over 1.2s
- Hero wordmark: translates from Y+40px to Y:0, opacity 0→1, staggered per word, 800ms, ease-out-expo
- Hero subhead: 200ms delay after wordmark, same translate
- Particles respond to mouse position (subtle parallax, max 20px shift)

### Scroll Triggers (GSAP ScrollTrigger)
- Each section block fades in + rises 30px as it enters viewport
- Particle density decreases as user scrolls past hero (scrub: true)
- Stats counter: number increments when section enters view
- Logo bar: continuous horizontal scroll marquee, pauses on hover

### Performance Rules
- Particles: canvas-based (tsParticles or vanilla canvas), max 80 particles on mobile, 200 desktop
- All animations: respect prefers-reduced-motion (disable translate/particles, keep fades)
- No video autoplay — use poster frames + play-on-click

---

## Homepage User Flow

### 1. HERO — "Take a Big Breath"
Full viewport. Navy void background. Particle system active (blue bokeh matching logo). 

Layout:
- Center-anchored wordmark rises on load: "Take a Big Breath" in Cormorant Garamond Italic
- Subhead: "Breathwork for those who demand more from life." (Inter, white-70)
- Two CTAs: [Book a Session] (electric blue filled) + [Watch the Story] (ghost/outline)
- Scroll indicator: animated breath-pulse dot at bottom center

Goal: Stop the scroll. Make them feel the room shift.

### 2. SOCIAL PROOF BAR — Partners
Full-width marquee. White logos at 60% opacity on dark navy strip.
NFL | NFLPA | Olympics | UCLA Bruins | Airbnb | Pepsi | Lincoln | GMC | Remedy Place | Kachava | Hoag

Eyebrow label: "TRUSTED BY" in Inter 500 uppercase tracking.
No heading. The logos speak.

### 3. WHAT IS BIG BREATH — The Philosophy
Two-column. Left: large Cormorant Garamond pull quote. Right: 3-paragraph body copy.

Pull quote (left): "Between work and life, most people's nervous systems are on the fritz. Breath is the fastest way back."

Right column body:
- What breathwork does scientifically (cortisol, focus, recovery)
- Why Big Breath is different: former NFL athlete, not a wellness influencer
- Who it's for: athletes, executives, teams, anyone seeking edge

Subtle animated line separator between columns (draws in on scroll).

### 4. MEET BIG JOE — The Human
Full-bleed section. Dark navy. Left: large portrait photo (one of the headshots from .planning). Right: his story.

Headline: "Big Joe" in Cormorant Garamond Italic, massive.
Eyebrow: "FOUNDER & GUIDE"

Copy beats:
1. NFL career → ankle injury → rock bottom
2. 2018: began breathwork daily. Changed everything.
3. 7 years, multiple certifications, 15,000+ people guided
4. 143K followers — built through results, not marketing
5. Countries: 15+ across every continent

Stat row (animated counters):
  15,000+ People Guided | 15+ Countries | 7 Years of Practice | 143K Community

### 5. THE EXPERIENCE — Services
Three cards on dark navy, each with electric blue top accent line.

Card 1: Breathwork Sessions
"30, 60, or 120-minute immersive breath journeys. Group or curated."
→ [Explore Sessions]

Card 2: Corporate Wellness
"Built for teams. Backed by science. A win for your organization."
→ [Corporate Programs]

Card 3: Private 1-on-1
"Intentional, breath-led coaching for high performers."
→ [Book Private Session]

Below the cards: two more (Keynotes | Retreats & Live Experiences) as secondary text links.

### 6. GLOBAL REACH — Impact
Dark section. Particle background at low opacity.
Headline (Cormorant Garamond): "Every continent. Every level of performance."
World map graphic (SVG, dots on guided countries) or simple country name list.

Countries: USA, Mexico, Canada, Netherlands, France, Indonesia, Costa Rica, Saudi Arabia, UAE, Colombia, Greece, Japan, Sweden, Turkey, Saint Barthélemy

### 7. TESTIMONIALS
Three-column card grid. Cards: navy-lift bg, blue left-border accent.
Quote text in Cormorant Garamond Italic. Attribution in Inter.

"As soon as I walked into the room, I felt protected and safe." — Brian Godfrey, Los Angeles
"I didn't know the power of my breath. The experience was life-changing." — Maria Muleta, Colombia
"Big Breath transformed our team." — Mark Thompson

### 8. CTA CLOSE — Book the Experience
Full-bleed. Electric blue background (the only section not on navy).
Headline: "Ready to take a Big Breath?" — Cormorant Garamond, white.
Subhead: "Sessions available in-person and worldwide." — Inter.
Button: [Book a Session] white on blue | [Email Us] ghost

Contact: Hello@bigbreath.co

---

## Inner Page Pattern

All inner pages:
- Compact hero: navy bg, page title in Cormorant Garamond Italic, breadcrumb in Inter
- Content blocks: same token set, white-70 body on navy
- CTA strip at bottom of every page (book / contact)

---

## Service Page Structure (each)

1. Hero: service name + one-sentence promise
2. What it is: 2-3 paragraphs
3. Session formats (30/60/120 min where applicable)
4. Who it's for
5. What to expect
6. 1 testimonial
7. CTA

---

## Files to Build (in order)

1. tokens.css — color + type system (done)
2. index.html — homepage
3. about.html — Big Joe story (expanded)
4. services/index.html — services overview
5. services/breathwork-sessions/index.html
6. services/corporate-wellness/index.html
7. services/private-sessions/index.html
8. services/keynotes/index.html
9. services/retreats/index.html
10. contact/index.html
