Sample

Here’s the complete brand guide extracted from the website, ready for Elementor replication:

🎨 COLOR PALETTE

Core Colors

Role	Hex	Usage
Canvas / Page Background	`#fdf8f3`	Default body background (warm beige)
Beige Mid	`#f5ede0`	Alternate section backgrounds, footer
Sage (Primary Accent)	`#8aad9f`	Primary buttons, links, accents, icons
Sage Hover	`#7a9d8f`	Button hover state
Sage Light	`#c8ddd7`	Badge backgrounds, soft accents, card tints
Lavender	`#c9c0d8`	Secondary accent, quote icons, decorative
Lavender Light	`#ede9f4`	Tinted backgrounds, badges
Warm Brown	`#7a5c48`	(defined but rarely used)
Text Primary	`#3d2f26`	Headings, primary text (deep warm brown)
Text Secondary	`#7a6a60`	Body text
Text Muted	`#a89990`	Captions, italic notes, small text
White	`#ffffff`	Cards, trust bar, button text on sage

Secondary Accent Colors (used sparingly)

Color	Hex	Usage
Deep Sage (text on light sage)	`#4a8275`	Badge text on sage backgrounds
Muted Purple	`#7a6a8a`	Badge text on lavender
Soft Purple	`#a08dc9`	Icon color for lavender cards
Dusty Rose	`#c9a0b0`	Icon color for rose cards
Terracotta	`#d4956a`	Icon color for warm cards
Peach	`#e8b99a`	Dot accent
Rose Tint	`#f5dde7`	Card background tint
Peach Tint	`#fdf0e8`	Card background tint
Warm Border	`#f0e6d8`	Navbar/footer borders
Input Border	`#e8d8c8`	Form field borders
Placeholder Text	`#c0aea0`	Form placeholders
Border Tan	`#d8c8b8`	Outline button borders
Border Warm	`#ead9c6`	Footer divider

Gradients Used

Gradient	CSS
Hero (Home)	`linear-gradient(135deg, #fdf8f3, #f5ede0, #ede9f4)`
Hero (About)	`linear-gradient(135deg, #fdf8f3, #ede9f4)`
Hero (Founder)	`linear-gradient(135deg, #fdf8f3, #f5ede0, #fdf8f3)`
Hero (Offerings/Contact)	`linear-gradient(135deg, #fdf8f3, #f5ede0)`
Hero (HowItWorks/Privacy)	`linear-gradient(135deg, #fdf8f3, #ede9f4)`
Hero (BookSession)	`linear-gradient(135deg, #fdf8f3, #f5ede0)`
Quote Section	`linear-gradient(90deg, #f5ede0, #ede9f4)`
CTA Banner	`linear-gradient(135deg, #8aad9f, #7a9d8f)`
Personal Message Card	`linear-gradient(135deg, #fdf0e8, #ede9f4)`
Closing/Reassurance	`linear-gradient(135deg, #f5ede0, #ede9f4)`
Decorative Blurs	`radial blur of #c8ddd7 at 30% opacity / #c9c0d8 at 25%`

✍️ TYPOGRAPHY

Font Family

Role	Font
All Text (Headings + Body)	`'Segoe UI', system-ui, sans-serif`

No custom Google Fonts are loaded. The site uses system fonts. For Elementor, use Segoe UI (Windows) or system sans-serif fallback. If you want a closer web-safe match, use “Nunito Sans” or “Quicksand” from Google Fonts — both have a similar warm, rounded feel.

Font Weights

Weight	Value	Usage
Light	`300`	All H1/H2 headings, hero subtitles, large body text
Regular	`400`	Body text
Medium	`500`	Nav links, buttons, labels
Semibold	`600`	H3 subheadings, card titles, footer headings

Font Sizes (Desktop / Mobile)

Element	Desktop	Mobile	Weight
H1 (Hero)	48px (`text-5xl`)	36px (`text-4xl`)	300 (Light)
H1 (Book Session)	36px (`text-4xl`)	30px (`text-3xl`)	300
H2 (Section)	36px (`text-4xl`)	30px (`text-3xl`)	300
H2 (Sub-section)	24px (`text-2xl`)	24px	300
H3 (Card title)	18px (`text-lg`)	18px	600
H3 (Small card)	16px (`text-base`)	16px	600
H3 (Privacy items)	14px (`text-sm`)	14px	600
Hero Subtitle	20px (`text-xl`)	18px (`text-lg`)	300
Body Text	16px (`text-base`)	16px	400
Body Text (compact)	14px (`text-sm`)	14px	400
Hero Body	18px (`text-lg`)	18px	300
Eyebrow / Badge	12px (`text-xs`)	12px	500, uppercase, `letter-spacing: 0.1em`
Fine Print / Captions	12px (`text-xs`)	12px	400
Nav Links	14px (`text-sm`)	14px	400/500

Line Heights

Context	Line Height
Headings	`1.1` (leading-tight)
Body text	`1.6` (leading-relaxed)
Hero headings	`1.1`

🔘 BORDER RADIUS

Element	Radius
Primary buttons	Fully pill (`9999px` / `rounded-full`)
Secondary buttons	Fully pill (`9999px`)
Form submit buttons	16px (`rounded-2xl`)
Large cards / CTA banners	24px (`rounded-3xl`)
Medium cards	16px (`rounded-2xl`)
Form inputs/textarea	16px (`rounded-2xl`)
Badges / pills	Fully pill (`9999px`)
Icon containers	12px (`rounded-xl`)
Images	24px (`rounded-3xl`)
Trust badges (numbered)	Fully pill (circle)

📐 SPACING & LAYOUT

Element	Value
Page max-width	1152px (`max-w-6xl`) — Navbar & Footer
Content max-width	768px–1024px (varies per section)
Section vertical padding	80px desktop / 80px mobile (`py-20`)
Hero vertical padding	96px desktop / 96px mobile (`py-24 md:py-36`)
Section horizontal padding	20px (`px-5`)
Card internal padding	32px (`p-8`) or 28px (`p-7`)
Grid gaps	24px (`gap-6`) to 32px (`gap-8`)
Button padding (primary)	32px x 16px (`px-8 py-4`)
Button padding (secondary)	28px x 12px (`px-7 py-3`)
Navbar height	~64px (`py-4` + content)

🎯 SHADOWS

Element	Shadow
Primary buttons	`0 10px 15px -3px rgba(138,173,159,0.2)` (sage glow)
CTA banners	`0 20px 25px -5px rgba(138,173,159,0.2)`
Cards	`0 1px 3px rgba(0,0,0,0.05)` (subtle)
Step circles	`0 1px 2px rgba(0,0,0,0.05)`
Hero hover lift	`translateY(-2px)` + larger shadow

📄 PAGE-BY-PAGE BACKGROUND MAP

Navbar (all pages)

Background: #fdf8f3 at 95% opacity + backdrop-blur(4px)
Border bottom: 1px solid #f0e6d8
Position: Sticky top

Footer (all pages)

Background: #f5ede0
Border top: 1px solid #ead9c6
Margin top: 80px

1. Home

Section	Background
Hero	`linear-gradient(135deg, #fdf8f3, #f5ede0, #ede9f4)`
Trust Bar	`#ffffff` + top/bottom border `#f0e6d8`
Value Proposition	`#fdf8f3` (transparent / page bg)
Quote	`linear-gradient(90deg, #f5ede0, #ede9f4)`
Offerings Snippet	`#fdf8f3`
How It Works Teaser	`#f5ede0`
CTA Banner	`linear-gradient(135deg, #8aad9f, #7a9d8f)` (sage gradient) + white text

2. About

Section	Background
Hero	`linear-gradient(135deg, #fdf8f3, #ede9f4)`
What This Is	`#fdf8f3`
Philosophy	`#f5ede0`
Mission & Values	`#fdf8f3`
CTA	`linear-gradient(135deg, #f5ede0, #ede9f4)`

3. The Founder

Section	Background
Hero	`linear-gradient(135deg, #fdf8f3, #f5ede0, #fdf8f3)`
Story	`#fdf8f3`
Beliefs	`#f5ede0`
Personal Message	`linear-gradient(135deg, #fdf0e8, #ede9f4)` (inside a card)
CTA	`#fdf8f3`

4. What I Offer

Section	Background
Hero	`linear-gradient(135deg, #fdf8f3, #f5ede0)`
Offerings Grid	`#fdf8f3`
Important Note	`#f5ede0` (white card inside)
Who Reaches Out	`#fdf8f3`
CTA	`linear-gradient(135deg, #8aad9f, #7a9d8f)` (sage gradient) + white text

5. How It Works

Section	Background
Hero	`linear-gradient(135deg, #fdf8f3, #ede9f4)`
Steps Timeline	`#fdf8f3`
FAQs	`#f5ede0` (white cards inside)
CTA	`#fdf8f3`

6. Privacy

Section	Background
Hero	`linear-gradient(135deg, #fdf8f3, #ede9f4)`
Trust Pillars + Policy	`#fdf8f3`
Closing Assurance Card	`linear-gradient(135deg, #f5ede0, #ede9f4)`

7. Book a Session

Section	Background
Hero	`linear-gradient(135deg, #fdf8f3, #f5ede0)`
Form	`#fdf8f3`
Reassurance Note (inside form)	`#ede9f4` (lavender light)
Success State	`#fdf8f3`

8. Contact

Section	Background
Hero	`linear-gradient(135deg, #fdf8f3, #f5ede0)`
Contact + Form	`#fdf8f3`
Reassurance Quote Card	`linear-gradient(135deg, #f5ede0, #ede9f4)`
Closing Note	`#f5ede0`

🖼️ IMAGERY

Style

Natural, soft-focus, golden-hour lighting
Textures (linen, ceramic, grass, warm walls)
Calm nature scenes (mountains, mist, soft light)
Candid warm portraits (for founder)
No clinical/medical imagery, no staged crying, no stock therapy photos

Image Treatment

Border radius: 24px (rounded-3xl)
Soft glow behind: blurred gradient (#c8ddd7 / #c9c0d8 at low opacity)
Object fit: Cover

🔘 BUTTONS

Primary Button (Sage Pill)

Background: #8aad9f
Text: #ffffff, 14px, weight 500
Border radius: 9999px (full pill)
Padding: 16px 32px (or 12px 28px for smaller)
Hover: Background #7a9d8f, translateY(-2px), shadow rgba(138,173,159,0.2)
Shadow: 0 10px 15px -3px rgba(138,173,159,0.2)

Secondary Button (Outline Pill)

Background: transparent or #ffffff
Text: #7a6a60 or #8aad9f
Border: 1px solid #e8d8c8 or #8aad9f
Border radius: 9999px
Hover: Background #f5ede0

CTA Banner Button (White on Sage)

Background: #ffffff
Text: #4a8275 (deep sage)
Border radius: 9999px
Padding: 16px 32px

Form Submit Button

Background: #8aad9f
Text: #ffffff, 14px, weight 500
Border radius: 16px (rounded-2xl)
Full width
Shadow: sage glow

🏷️ BADGES / EYEBROW LABELS

Background: #c8ddd7 at 50% opacity (or #ede9f4 for lavender variant)
Text: #4a8275 (or #7a6a8a for lavender variant)
Font size: 12px, weight 500
Text transform: UPPERCASE
Letter spacing: 0.1em
Border radius: 9999px (full pill)
Padding: 6px 16px

📋 FORM FIELDS

Background: #ffffff
Border: 1px solid #e8d8c8
Border radius: 16px
Text: #3d2f26, 14px
Placeholder: #c0aea0
Focus ring: 2px solid #c8ddd7
Padding: 12px 16px
Textarea: resize: none

This is the complete extracted brand system — colors, type, spacing, shadows, and per-page backgrounds — ready to recreate in Elementor.