Mood Board & Style Guide – Coaching Website (Framer Build)

These colors are final — no tweaks needed. Usage notes included.

Color Role	HEX	Usage Notes
Primary (Text)	#000000	Main body text, headings, and high-contrast elements. Always on white or light backgrounds.
Secondary Text / Divider (Warm Gray)	#F5F4F2	Section background for contrast against white. Use sparingly to differentiate sections, not as main brand color.
Accent	#A30015	For emphasis: buttons, CTAs, highlight text, key graphics (e.g., self-actualization in pyramid graphic). Avoid overuse.
Background (Light)	#FFFFFF	Primary background for most sections. Keep the site feeling clean and open.
Muted Line/Border	#E5E5E5	For subtle dividers (e.g., between blog cards, testimonial cards). Never for major contrast.

Keep typography clean, professional, and easy to read. No decorative fonts.

Headings (H1, H2, H3): Inter, Bold (Weight 700)
Body Text: Inter, Regular (Weight 400–500)
Line Height:
- Headings: 1.2–1.3
- Body: 1.5–1.6
Max Content Width: 800–900px for readability.
Text Alignment: Left-aligned (except for rare, intentional center-alignment in hero sections).

We’re pulling different strengths from each reference site:

Ali Abdaal – Strong hero section with high-quality founder image + clean copy + clear CTA.

Justin Welsh – Typography hierarchy, minimalist layout, clear use of whitespace.

Simon Sinek – Vibrant color pops, strong CTA buttons, bold section headers.

James Clear – Ultra-minimal structure, strong readability, generous spacing.