Style Guide
This page records the current visual language used across the site. It should reflect what is already in production: colors, type, surfaces, buttons, motion, and component treatment.
Core visual rules
These are the baseline choices that show up throughout the site.
Color System
Headlines, CTAs, dark text.
Secondary brand color, gradients, accents.
Hero gradients, bullets, emphasis.
Primary action buttons and highlights.
Surface base and reverse text.
Soft section backgrounds.
Borders, dividers, inputs.
Default body text.
Typography
Current body font from globals.css.
Hero and major section headings.
Mid-page section headings.
Cards, panels, and compact labels.
Section labels and supporting cues.
Shape and depth
Primary surface treatment.
Varies by emphasis and context.
Most surfaces use a soft outline.
Used for elevation and focus surfaces.
Motion
Fade-up animation with reduced-motion fallback.
Mostly subtle, low-friction interactions.
Used on form inputs and interactive elements.
Current reusable patterns
These are the recurring building blocks used across the site today.
Buttons
Main conversion actions.
Supporting actions and dark-band CTAs.
Secondary navigation and less-prominent actions.
Used on colored hero sections.
Surfaces
Base page canvas for most content pages.
Used for secondary content and supporting blocks.
Used for hero and CTA bands.
Used for guarantee and high-contrast closing sections.
Interface elements
Common UI treatment.
Common UI treatment.
Common UI treatment.
Common UI treatment.
Common UI treatment.
Text treatment
The site leans on semibold weights, tight tracking, and clear hierarchy instead of ornament.
Live style reference
These are the actual patterns that show up in the site UI.
High-contrast intro section with reverse text and bold CTA treatment.
White surface, soft shadow, neutral border, and compact body copy.
Used for high-contrast closing sections and trust messaging.