# Design skeleton — sophieclydesmith.com

## 1. Brand DNA

### Business
- **Name:** Sophie Clyde-Smith
- **What they do, for whom, where:** Business coach & mentor helping ambitious female solopreneurs start, launch, and scale purpose-driven, profitable businesses with alignment, meaning, and financial abundance.
- **Offers:** Set It Up - Group Coaching; Step It Up - 1:1 Coaching; Workshops; Power Hour; Email Community (free).
- **The one action this page exists to cause:** Get in touch via the contact page or direct message on Instagram to discuss working together.
- **Contact and socials:** Contact page: https://sophieclydesmith.com/contact/; Instagram: @sophieclydesmith (https://www.instagram.com/sophieclydesmith/); LinkedIn.

### Brand
- **Colours:** Deep pine green (#294F48), dusty rose (#ECD9D5). Derived neutrals: soft warm cream (#FAF7F5), deep forest charcoal (#1B322E).
- **Fonts:** Display: Cormorant Garamond (refined, elegant editorial serif). Body: Plus Jakarta Sans (clean, warm, contemporary sans).
- **Logo:** Circular wordmark: SOPHIE CLYDE-SMITH set in wide-letterspaced capitals running around the inside of a hand-drawn open ring (`assets/logo.webp` / `assets/favicon.webp`).

### Assets
| file | subject | px | luminance | dominant colours | plain backdrop | full-bleed at 1440 |
|---|---|---|---|---|---|---|
| `assets/logo.webp` | Circular wordmark | 1080x1080 | 0.531 | #fdfdfd (52%), #030202 (45%), #605f5f (1%) | yes (transparent) | no |
| `assets/portrait-desk.webp` | Sophie seated at light wood desk in denim jacket | 6505x3172 | 0.633 | #ced1d3 (79%), #aca9a6 (14%), #19506b (5%) | no | yes |
| `assets/portrait-standing.webp` | Sophie standing three-quarter length in white blouse | 1734x1337 | 0.667 | #adacad (61%), #c9ccd2 (24%), #bcc2ca (13%) | no | yes |
| `assets/work-workshop.webp` | Sophie leading workshop for seated women at table | 1080x1350 | 0.510 | #1f1916 (76%), #e4e0de (16%), #996f55 (7%) | no | no |
| `assets/client-logo-allbright.webp` | AllBright wordmark | 600x600 | 0.694 | #fefefe (65%), #1c1c1a (33%), #5c5c5b (1%) | yes (transparent) | no |
| `assets/client-logo-house-of-st-barnabas.webp` | The House of St Barnabas London | 512x512 | 0.935 | #fefefe (93%), #0d0d0d (4%), #5e5e5e (1%) | yes (white baked) | no |
| `assets/client-logo-huffpost.webp` | HuffPost wordmark | 1080x1080 | 0.787 | #fefefe (78%), #020202 (19%), #626262 (1%) | yes (white baked) | no |
| `assets/client-logo-jolt.webp` | jolt wordmark on indigo | 225x225 | 0.357 | #4b3dca (93%), #f8f8f8 (5%), #574fa9 (1%) | yes (indigo solid) | no |
| `assets/client-logo-live-well-london.webp` | Live Well London round mark | 539x539 | 0.858 | #fcfdfd (88%), #07161b (8%), #08869a (3%) | yes (white baked) | no |
| `assets/client-logo-sweaty-betty.webp` | Sweaty Betty London clover mark | 200x200 | 0.927 | #fefdfd (88%), #e84438 (9%), #f4a39d (2%) | yes (white baked) | no |
| `assets/client-logo-the-independent.webp` | The Independent masthead | 1080x1080 | 0.983 | #fefefe (98%), #171614 (0%), #a3a2a1 (0%) | yes (white baked) | no |
| `assets/client-logo-the-telegraph.webp` | The Telegraph masthead | 500x500 | 0.865 | #fefefe (86%), #040404 (13%), #434343 (0%) | yes (transparent) | no |
| `assets/favicon.webp` | Circular wordmark icon | 180x180 | 0.534 | #fdfdfd (53%), #040404 (44%), #9f9f9f (2%) | yes (white baked) | no |

## 2. Art direction

- **Concept:** High-end boutique mentorship atelier — combining deep pine green authority with dusty rose warmth and layered editorial photography to feel intimate, empowering, and established.
- **Palette:** Ground: warm cream (#FAF7F5), deep pine green (#294F48), and soft dusty rose (#ECD9D5); Ink: forest charcoal (#1B322E) on light grounds, warm cream (#FAF7F5) on dark grounds; Accent: dusty rose (#ECD9D5) on dark pine, pine green (#294F48) on light grounds.
- **Type:** Display: Cormorant Garamond; Body: Plus Jakarta Sans; Typographic move: one italic word in Cormorant Garamond within key headings for warmth and intentional cadence.
- **Image language:** Plated and matted rectangular frames with soft rose borders, subtle corner radii, and asymmetric overlaps reflecting an intentional, personal atelier.
- **Motion language:** Scroll reveal for narrative text and cards; marquee for press and partner credentials; hover states on interactive links and cards. Rule: marquee loops continuously; scroll reveal triggers as elements enter viewport; hover states fire on pointer interaction.
- **Layout habits:** Asymmetric two-column pairings, grounded editorial panels, overlapping image-and-text compositions, generous whitespace.
- **Why:** Signals show business change coaching tailored to ambitious women with an encouraging, grounded voice and brand assets in deep green and rose; Warm direction chosen for its human resonance and layered tactile elegance, rejecting Bold which would feel overly aggressive and transactional.

## 3. Story

| # | beat | job | copy | asset | seam to next |
|---|---|---|---|---|---|
| 1 | nav | Orient visitor, display identity, and provide instant contact access | Circular wordmark | `assets/logo.webp` | cut |
| 2 | hero | Announce Sophie's mission, establish trust, and introduce her presence | Helping Female Solopreneurs Start & Scale Purpose-Driven, Profitable Businesses | `assets/portrait-desk.webp` | ground change |
| 3 | press | Establish authority and social proof through publications and partner brands | Press and partner logos | `assets/client-logo-the-telegraph.webp`, `assets/client-logo-the-independent.webp`, `assets/client-logo-huffpost.webp`, `assets/client-logo-allbright.webp`, `assets/client-logo-sweaty-betty.webp`, `assets/client-logo-house-of-st-barnabas.webp`, `assets/client-logo-live-well-london.webp`, `assets/client-logo-jolt.webp` | ground change |
| 4 | positioning | Reassure solopreneurs at all stages that they are in the right place | "Business Coach & Mentor: helping femxle Solopreneurs..." | none | ground change |
| 5 | about | Introduce Sophie, her coaching methodology, philosophy, and personal energy | Bio: "Hey, I'm Sophie..." | `assets/portrait-standing.webp` | ground change |
| 6 | proof | Provide rich, relatable transformation stories from established clients | Testimonials: Isobel Wilson, Claudia Criswell, Verena, Tay, Lesley, Laura Bowler, Camilla, Martina | `assets/work-workshop.webp` | ground change |
| 7 | offer | Detail the four coaching programmes and practical ways to work together | Offers: Set It Up, Step It Up, Workshops, Power Hour | none | ground change |
| 8 | proof | List diverse client profiles and career transformations | Additional client roster | none | ground change |
| 9 | newsletter | Invite visitors into the free email community for tools and inspiration | Email community | none | ground change |
| 10 | cta | Drive final connection and conversation via contact and Instagram | Final call to action & contact details | none | ground change |
| 11 | footer | Conclude the page, repeat identity, copyright, and essential links | Footer sign-off and links | `assets/logo.webp` | cut |

## 4. Section specs

### 4.1 Nav
- **Layout pattern:** Hung from an edge
- **Ingredients:** Brand mark left, text links to offers and about right, primary contact CTA button.
- **Why:** Clean, quiet top bar keeping navigation effortless while reinforcing visual identity.
- **Asset and tool:** `assets/logo.webp`, resize to 54px height.
- **Motion:** Hover states on navigation links and action button.
- **Copy:** Circular wordmark; navigation labels; "Get in Touch" linking to https://sophieclydesmith.com/contact/.

### 4.2 Hero
- **Layout pattern:** Overlap
- **Ingredients:** Primary headline with italicised accent word, sub-headline, primary action button, and a large plated portrait of Sophie seated at her desk.
- **Why:** Establishes warmth, approachability, and professional polish immediately above the fold.
- **Asset and tool:** `assets/portrait-desk.webp`, crop to 16:9 ratio, resize to 1440px width.
- **Motion:** Scroll reveal on headline and portrait container; hover states on CTA button.
- **Copy:** "Helping Female Solopreneurs Start & Scale Purpose-Driven, *Profitable* Businesses" and "Business Coach & Mentor: helping femxle Solopreneurs to launch and grow their businesses w/ alignment, meaning & financial abundance."

### 4.3 Press
- **Layout pattern:** Full-bleed
- **Ingredients:** Subtle label, horizontal continuous band displaying media and corporate partner marks.
- **Why:** Rapid third-party validation creating instant credibility before diving deeper into copy.
- **Asset and tool:** `assets/client-logo-the-telegraph.webp`, `assets/client-logo-the-independent.webp`, `assets/client-logo-huffpost.webp`, `assets/client-logo-allbright.webp`, `assets/client-logo-sweaty-betty.webp`, `assets/client-logo-house-of-st-barnabas.webp`, `assets/client-logo-live-well-london.webp`, `assets/client-logo-jolt.webp`, resize each to uniform height (40px) on muted badges.
- **Motion:** Marquee looping horizontally.
- **Copy:** "Featured in & trusted by".

### 4.4 Positioning
- **Layout pattern:** Plate on ground
- **Ingredients:** Centred editorial message on deep pine green ground with dusty rose accents.
- **Why:** Creates a moment of grounding and reassurance, validating the visitor's stage of business.
- **Asset and tool:** none.
- **Motion:** Scroll reveal on text card.
- **Copy:** "Whether you're in start-up mode or you're fully established, if you're looking for practical tools, tips, insights, love and support to get you to the next level in your business… You're in the right place."

### 4.5 About
- **Layout pattern:** Side-by-side
- **Ingredients:** Plated portrait of Sophie standing in her studio left; multi-paragraph bio copy right with highlighted value propositions and signature touch.
- **Why:** Brings the human connection forward, detailing Sophie's philosophy and supportive presence.
- **Asset and tool:** `assets/portrait-standing.webp`, crop to 4:5 vertical plate, resize to 700px width.
- **Motion:** Scroll reveal as the section scrolls into view; hover states on profile frame.
- **Copy:** Bio: "Hey, I'm Sophie. I'm a business coach and mentor for ambitious female solopreneurs who are ready to create more freedom, flexibility, and financial abundance through meaningful, purpose-driven businesses. I blend mindset coaching with actionable strategies to help you develop the confidence to take meaningful steps forward and create systems that truly work for you. When we work together, you'll take bold action, launch with clarity, scale with intention, and finally create the business (and life) you've been dreaming of. Whether you're just starting out or you're ready to take your established business to the next level, I'm here with practical tools, empowering insights, and unwavering support to help you turn your vision into reality."

### 4.6 Proof
- **Layout pattern:** Split
- **Ingredients:** Left side featuring a live workshop photograph conveying real-world group energy; right side featuring client transformation testimonials with verbatim quotes, client names, titles, and company links.
- **Why:** Anchors emotional credibility through real client voices and visible in-person workshop leadership.
- **Asset and tool:** `assets/work-workshop.webp`, crop to 4:5 vertical plate, resize to 600px width.
- **Motion:** Scroll reveal on testimonial cards; hover states on external client website links.
- **Copy:** Testimonials from Isobel Wilson (Mosaic Medical), Claudia Criswell (Registered Nutritional Therapist), Verena (Girl About The Yard), and Tay (Yoga, Meditation & Hypnotherapy Teacher).

### 4.7 Offer
- **Layout pattern:** Stacked column
- **Ingredients:** Section headline, four structured offer cards (Set It Up, Step It Up, Workshops, Power Hour) detailing audience, description, and direct link.
- **Why:** Clearly categorises services from group programmes to high-touch 1:1 strategy without confusing pricing tiers.
- **Asset and tool:** none.
- **Motion:** Scroll reveal for each service card sequentially; hover states with subtle card elevation on pointer interaction.
- **Copy:**
  - Set It Up - Group Coaching: "From business basics to money mindset, we'll cover everything you need to be ready to launch a thriving business." (https://sophieclydesmith.com/set-it-up-group-programme)
  - Step It Up - 1:1 Coaching: "For established female solopreneurs ready to expand their vision, grow their business and transform their mindset." (https://sophieclydesmith.com/step-it-up/)
  - Workshops: "1/d day 1:1 workshop to gain clarity on your goals and develop a soul-based plan of action." (https://sophieclydesmith.com/soulful-business-planning/)
  - Power Hour: "High-energy power hour to get clear on a subject of your choosing e.g. vision, goals, target audience, money mindset." (https://sophieclydesmith.com/power-hour/)

### 4.8 Proof (Extended)
- **Layout pattern:** Side-by-side
- **Ingredients:** Two-column grid featuring additional deep client stories alongside the client transition roster.
- **Why:** Reinforces breadth across diverse career transitions from law, pilates, and corporate wellbeing to creative entrepreneurship.
- **Asset and tool:** none.
- **Motion:** Scroll reveal on list items and testimonial blocks.
- **Copy:** Testimonials from Lesley (Corporate Wellbeing Coach), Laura Bowler (Pilates Teacher), Camilla (Platter Business), Martina (Nutritional Therapist), and roster of worked-with clients (Lizzie — Corporate Career Development; Laura, Modern Professional — Career Development Coaching; Katarina, New Mother — Career Transition Coaching; Tay, Self-Employed Meditation and Yoga Teacher — Business Coaching; Ruth, Lawyer — Industry Transition from Law to Travel).

### 4.9 Newsletter
- **Layout pattern:** Plate on ground
- **Ingredients:** Warm dusty rose container card, heading, description, email capture form field, and submit button.
- **Why:** Captures warm leads who are not yet ready for high-touch coaching through low-friction community sign-up.
- **Asset and tool:** none.
- **Motion:** Scroll reveal on card container; hover states on submit button.
- **Copy:** "Join the Email Community" and "Curated emails for female solopreneurs filled with inspiration, tools, and confidence to help you set up, scale, and grow your online business."

### 4.10 CTA
- **Layout pattern:** Stacked column
- **Ingredients:** Deep pine green full-width band, invitation headline, direct links to contact page and Instagram.
- **Why:** Closes the journey with a clear, singular call to start a private conversation.
- **Asset and tool:** none.
- **Motion:** Scroll reveal on message block; hover states on contact and social action links.
- **Copy:** "Ready to Take the Next Step?" and "Get in Touch via https://sophieclydesmith.com/contact/ or connect on Instagram @sophieclydesmith (https://www.instagram.com/sophieclydesmith/) and LinkedIn."

### 4.11 Footer
- **Layout pattern:** Hung from an edge
- **Ingredients:** Circular wordmark mark, copyright line, and social navigation links.
- **Why:** Polished, quiet termination of the single-page layout.
- **Asset and tool:** `assets/logo.webp`, resize to 44px height.
- **Motion:** Hover states on social links.
- **Copy:** Sophie Clyde-Smith; "Business Coach & Mentor for Ambitious Female Solopreneurs"; copyright notice and social links to Instagram, LinkedIn, and Contact.