## Overview
Playful and warm — a Saturday-morning cartoon sharing a booth with a family dinner. A creamy off-white canvas anchored by a deep trustworthy navy, with a full-spectrum accent family rotating through feature cards and protocol steps. Sections alternate between cream daylight and navy dusk like a chapter book. Motion (staggered reveals, card shuffles, typewriter cursor) reinforces the everyday-magic promise.
## Colors
- **Deep trust navy** (`#0B3B60`): Headings, body text on light surfaces, icon fills, philosophy backdrop.
- **Midnight navy** (`#0A1A2A`): Footer and the "telemetry" card surface — nearly black with a navy undertone.
- **Cream parchment** (`#FAF8F5`): Page canvas. Text color on dark surfaces.
- **Dusty rose pink** (`#E8A5A5`): Softness — first protocol step, hero subtitle.
- **Golden amber yellow** (`#F3AB33`): Delight — second protocol step, highlighted phrases, typewriter, text selection.
- **Warm campfire orange** (`#F26A38`): Action — CTAs only. If it isn't clickable, it isn't orange.
- **Calming spa teal** (`#5AAFAC`): Trust — hero CTA, third protocol step, live-feed indicators.
- **Bright aqua spark** (`#69C8C9`): Lively variant of teal — only on dark backgrounds.
## Typography
- **Headline Font**: Bubblegum Sans (italic, display sizes only — pure personality, never functional)
- **Body Font**: Quicksand (the workhorse — nav, buttons, headings, body)
- **Label Font**: Itim (uppercase, wide tracking — step counters, status labels)
Quicksand headings use the heaviest black weight for anchored, confident rounded letterforms. Card titles step down to bold. No thin or light weights anywhere. Headlines use snug negative tracking; Itim labels use wide tracking for "typed receipt" feel.
## Elevation
Mostly shadowless. Depth is communicated through color, motion, and layering: accent-colored protocol cards pop forward against cream, shuffle cards stack with descending scale and opacity, GSAP scroll behaviors blur and recede previous panels. The few shadows that exist are deliberate: gentle lift on shuffle cards, elevated shadow on the scrolled navbar, dramatic drop shadow under stacking protocol panels.
## Components
- **Buttons**: All pill-shaped with fully rounded ends. Hero CTA in spa teal with navy text. Navbar CTA in campfire orange with white text and a slide-reveal "Let's Go!" hover. Featured product buttons echo the orange.
- **Cards**: Generously rounded everywhere — pill for nav and status, soft for protocol panels, comfortable for feature cards. Feature cards are 400px tall in two flavors: cream-canvas with subtle border, or midnight-navy "telemetry" with glowing amber typewriter and CRT scanlines.
- **Protocol panels**: Giant soft-cornered cards in rotating accent colors (pink, amber, aqua) paired with frosted bordered visual containers.
- **Status pill**: Whisper-thin border, pulsing aqua dot with neon glow halo — the one deliberate "alive" spark.
## Do's and Don'ts
- Do alternate sections between cream daylight and navy dusk.
- Do reserve campfire orange exclusively for clickable affordances.
- Do round generously — pills for buttons/status, soft for panels.
- Do let motion carry depth instead of shadows.
- Don't introduce thin or light weights anywhere.
- Don't use Bubblegum Sans outside display headlines (never on buttons, nav, or body).
- Don't use pure white or pure black — the system is cream and navy.
- Don't add hard dividers between sections — let backgrounds and spacing separate them.