Design System

The Phoenix
Lab

Visual language, type system, components, motion, and brand voice for The Phoenix Lab — a bioluminescent, cinematic dark aesthetic built around scientific authority and human longevity.

Display FontCormorant Garamond
Body FontIBM Plex Sans
Mono FontIBM Plex Mono
Accent Color#00aaff · Bioluminescent Blue
Background#000000 · Deep Black
Visual MotifDeep ocean · Bioluminescence
Version1.0 · June 2026
01

Color System

Deep Black
#000000
--color-bg
Section Alt
#040403
--color-bg-alt
Bioluminescent Blue
#00aaff
--color-accent
Accent Dim
rgba(0,170,255,.18)
--color-accent-dim
Text Primary
#ffffff
--color-text-1
Text Secondary
rgba(255,255,255,.65)
--color-text-2
Text Muted
rgba(255,255,255,.38)
--color-text-3
Border
rgba(255,255,255,.06)
--color-border
02

Typography

Hero Headline
Cormorant Garamond
400 regular + italic
clamp(48px,8.2vw,114px)
line-height: 1.0
letter-spacing: −.01em
Build the body you want to live in for the next 100 years.
Section Heading
Cormorant Garamond
400 regular
clamp(28px,4vw,56px)
line-height: 1.05
The Quick and Dirty Field Guide
to Joint Regeneration
Pull Quote
Cormorant Garamond
400 italic
clamp(20px,2.8vw,36px)
line-height: 1.35
"Most of what you've been told about your joints is not wrong — it is incomplete."
Body Copy
IBM Plex Sans
400 regular
16px
line-height: 1.75–1.9
Heather synthesizes the actual peer-reviewed literature on joint regeneration, brain optimization, and biological aging — not the headline version. Every protocol is drawn from published research with inline citations.
Section Label
IBM Plex Mono
500 medium
13px
letter-spacing: .18em
ALL CAPS
03 — Early Readers
UI Labels & Tags
IBM Plex Mono
400 regular
11–13px
letter-spacing: .10–.20em
ALL CAPS
Peer-reviewed science · Embodied practice · No shortcuts
Email Sequence
Secure checkout · Instant delivery · No subscription
03

Spacing

8px  --space-xs   Inline gaps, button icon spacing
16px--space-sm   Card internal padding, label margin
28px--space-md   Between cards, component gaps
56px--space-lg   Nav padding, section label margins
88px--space-xl   Legacy side padding (pre-updated)
140px--space-2xl   Section horizontal padding
04

Components

Buttons
Primary: accent bg, #000 text, 700 weight
Ghost: transparent, thin white border
Mono: IBM Plex Mono, uppercase, thin border
Content Card
Email Sequence
Post-Purchase Nurture
Three timed emails sent after purchase — Day 1, Day 3, and Day 7, building trust through applied science.
Protocol Block
Part 2 · Knee — Collagen Synthesis
0115g hydrolyzed collagen + 50mg vitamin C, 60 min pre-loading
02Load the joint within the collagen synthesis window
03Eccentric loading at 60% 1RM · 3 sets · 15 reps
Social Link Cards
Testimonial Card

"The collagen timing protocol alone was worth the $19. I'd been doing it wrong for two years based on outdated advice."

Early Reader · Physiotherapist
FAQ Item
Is this based on peer-reviewed research?
Every protocol is drawn from published research. Citations are inline. Evidence quality is noted where it matters.
What format is it?
PDF, delivered instantly to your email. Readable on any device. No app, no account, no subscription.
05

Motion & Atmosphere

Hero Video
Full-bleed bioluminescent jellyfish footage. Plays at 1.0× native speed — do not slow below 0.65× in browser (causes jitter).
preload="metadata" · autoplay muted loop
Section Videos
Lazy-load via IntersectionObserver at 5% threshold. Play/pause on enter/exit. Playback rate 0.65×.
preload="none" · 0.65× playbackRate
Rising Bubbles
CSS-only. 14 tiny glowing stars (2–5px), rising 35–70s cycles with horizontal sway. GPU-composited via transform only.
z-index: 89 · position: fixed
Scanline Shimmer
Fixed full-page overlay. Repeating 4px horizontal lines + a slow 14s sweeping accent glow. Uses transform not top.
z-index: 92 · 14s linear infinite
Ambient Pulse
CSS radial gradient on the Statement section. Slow 8s breathing scale + opacity cycle. Zero JS cost.
animation: ambientPulse 8s ease-in-out infinite
Reveal Animations
Elements enter with translateY(18px) → 0 + opacity 0 → 1. Staggered with rv-d1/d2/d3/d4 delay classes.
transition: 0.8s ease · delays: 0.15s increments
UI Transitions
Hover states use opacity shift (.85) or color lightening. No scale transforms on buttons. Borders fade in on card hover.
0.15s ease · opacity only
Video Overlays
Each video section has a bottom gradient fade to #000 (120px). Text blocks use rgba(0,0,0,.22) background over video.
::after gradient · no backdrop-filter
Hero Canvas
Bioluminescent particle animation on a canvas element. mix-blend-mode: screen at 55% opacity over video.
z-index: 2 · mix-blend-mode: screen
06

Brand Voice & Copy

✓ Write like this
"Most of what you've been told is not wrong — it is incomplete."
"The research shows measurable changes at 4–6 weeks. Not the pain level — that's too noisy — but the loading capacity."
"Peer-reviewed science · Embodied practice · No shortcuts"
"Every protocol is drawn from published research. Citations are inline."
✗ Avoid this
"Unlock your body's hidden potential! 🔥"
"Revolutionary breakthrough science!"
"Transform your life in just 30 days"
"Heather is a world-class expert who..."
Tone Principles
Authority Without Ego
Heather presents science as translator, not guru. The research speaks. She interprets.
Respect the Reader
"Treats me like I can handle the actual biology — because I can." Never dumb down the mechanism.
Specificity Over Hype
Cite the study. Name the window. Give the gram weight. Precision is the brand.
07

Layout System

Page Structure
Nav · fixed · z-200
Hero · 100vh · video bg
Statement · 65vh min
Guide · 2-col grid
Protocol · video bg
Voices · testimonials
Author · video bg · 2-col
Buy · video bg · CTA
Footer · 3×2 card grid
Grid Patterns Used
Guide Section
grid-template-columns: 1fr 280px
Chapters / Voice Cards
grid-template-columns: 1fr 1fr; gap: 2px
Author Section
grid-template-columns: 1fr 1fr; gap: 80px
Footer Cards
grid-template-columns: repeat(3,1fr); gap: 2px
Side padding (all sections)
140px L/R · 28px on mobile