Warm Coaching Business

---
title: "Warm Coaching Business"
slug: coaching-business-warm
bestFor: "Career coaches, consultants, therapists, and 1:1 service providers"
aestheticFamily: "Warm / Approachable"
description: "A soft, human, trust-building site for someone who sells their judgment and time — warm palette, generous whitespace, and copy designed to lower the friction of booking a call."
---

# DESIGN.md — Warm Coaching Business

## Brand essence
A site that feels like sitting in a sunlit room across from someone who's done this 200 times. Warm without being saccharine. Calm authority. The visitor should leave feeling, "I trust this person," not "this person has a good website."

## Color palette
- `--cream`: `#FBF6EE` — page background
- `--cream-deep`: `#F4ECDD` — alternating sections, card fills
- `--ink`: `#2B2118` — body text (warm near-black, not cool)
- `--ink-soft`: `#6F6557` — secondary text
- `--terracotta`: `#C2553A` — primary accent (buttons, links)
- `--terracotta-soft`: `#E8C7B9` — hover surfaces, badge fills
- `--sage`: `#7A8A6E` — secondary accent (used on badges, "now booking" indicator)
- `--ochre`: `#D4A24C` — single tertiary highlight, used sparingly on quote marks and "featured in" line

The whole palette stays warm-temperature. No blues, no cool grays.

## Typography
- **Display**: a soft contemporary serif (e.g., Fraunces, Cooper, Domaine Display). Weight 400–600.
- **Body**: a humanist sans (e.g., Inter, Geist Sans, Söhne) at 17–18px.
- **Accent / handwriting**: a single signature script (e.g., Caveat) used ONLY for the coach's signature beneath the bio. Nowhere else.

Type scale:
- H1: 60 / 66, weight 500, serif
- H2: 36 / 44, weight 500, serif
- H3: 22 / 30, weight 500, serif (or 600 sans for utility headings)
- Body: 18 / 30, sans
- Small: 15 / 24, sans

Hierarchy rules:
- Headings use serif for emotional moments (hero, testimonials, story sections).
- Headings use sans for functional moments (pricing, FAQ, contact).
- Body is always sans for readability.

## Spacing & layout
- Container: 960px max-width, 24px horizontal padding mobile.
- Single-column hero, 2-column for "About me" (portrait left, story right at >=900px).
- Section vertical padding: 112px desktop, 72px mobile (more breathing room than a SaaS page).
- 8px base unit. Card padding 32px (more than minimal SaaS — feels less utilitarian).
- Border radius: 16 for cards, 999 for buttons (pill-shaped, more inviting than rectangular).

## Component patterns
- **Navigation**: 72px tall, transparent over hero, sticky with `--cream` background and 1px `--cream-deep` bottom border on scroll. Wordmark in serif, 3 sans links, "Book a free intro call" pill button in `--terracotta`.
- **Hero**: serif H1 left-aligned, soft photographic portrait of the coach right-aligned (warm lighting, real, not corporate). One CTA: "Book a free 20-min intro call." A small `--sage` badge above the headline: "Now booking April clients."
- **Buttons**:
  - Primary: `--terracotta` fill, white text, pill radius (999), 14px/28px padding, no hard shadow. Hover: `--terracotta` darkens 8%, lifts 1px.
  - Secondary: `--cream` fill, 1.5px `--terracotta` border, terracotta text, pill radius.
  - Tertiary: text-only with `--terracotta` underline.
- **Cards** (offerings, packages): `--cream-deep` fill, no border, 16px radius, 32px padding. Subtle shadow only `0 1px 0 rgba(43,33,24,.04)`.
- **Form fields**: pill-shaped (radius 999) for short inputs, 12px radius for textareas. `--cream-deep` fill at rest, white fill on focus, 2px `--terracotta` focus ring.
- **Testimonial**: large `--ochre` opening quotation mark in serif, italic quote in body, 56px circular avatar + name + one-line context below. Whole block on `--cream-deep` with 32px padding.
- **Pricing**: 3-tier comparison, middle tier elevated with `--terracotta-soft` background. Prices in serif weight 400 (gentler than bold).
- **FAQ**: accordion using `<details>`, plus-icon rotates on open, no hard borders — just `--cream-deep` divider.

## Motion
- Easing: `cubic-bezier(0.32, 0.72, 0, 1)` — soft, settled.
- Durations: 250ms hover, 600ms entrance reveals.
- Scroll reveals: gentle fade + 16px upward, on H2 and image entries. Never on body paragraphs.
- Buttons: lift on hover, no scale on press (feels more confident than bouncy).
- No looping background motion. Stillness signals trust.

## Imagery / iconography
- Real photography: warm natural light, neutral backgrounds, candid (not stock-corporate). Soft focus on background, sharp on subject.
- One signature portrait of the coach above the fold.
- Icons: Lucide rounded variant if available, 1.5px stroke, in `--ink-soft` or `--terracotta`. Used sparingly — no icon-per-bullet.
- Subtle hand-drawn underline (SVG) under the most important phrase in the headline, in `--ochre`. ONE per page.

## Voice & tone
First-person, warm, plainspoken. "I work with people who…" not "Helping ambitious professionals…" Acknowledge fear before promising a result. Specific, not aspirational. No "transform your life." Yes "you'll leave the next conversation knowing what to ask for."

## What to AVOID
- No corporate-stock smiling-headset photography.
- No bright primary colors (true blue, true red, true yellow).
- No tech-feeling sans-serif headings.
- No glassmorphism, no gradients.
- No "Sign up for my 7-figure transformation."
- No animated background blobs.
- No emoji peppered through copy (one per page maximum, intentional).
- No fake urgency timers.