# Design — sophieclydesmith.com ## colour - **Palette:** ground #FAF7F5 · ink #294F48 · accent #ECD9D5 — ground is a soft bone canvas to support transparent line assets; ink is her owned deep pine green (#294F48) for all primary type and structural borders; accent is her owned dusty rose (#ECD9D5) used for section floods and secondary highlights; dark contrast ground is deep pine green (#294F48) with white/rose ink. ## type - **Type:** display IvyPresto Display · body Neue Haas Grotesk · the move: a headline crossing the photo, pairing crisp Roman titles with select italic emphasis. ## button - **Variant:** Outline pill - **Looks:** A full-round pill with a 1px outline in deep pine green (#294F48) and no fill on bone (#FAF7F5) and dusty rose (#ECD9D5) bands; on dark pine (#294F48) bands, a 1px outline in bone (#FAF7F5) with no fill; the label in Neue Haas Grotesk, small, uppercase, tracked, in ink on light bands and in bone on dark bands. - **Why:** Delivers quiet conversational authority and editorial restraint, echoing the circular brand emblem while reserving dusty rose for ambient section floods rather than filled actions. ## hero - **Variant:** Headline huge across the photo - **How it looks:** - Desktop: `portrait-desk` fills the hero band edge to edge across the 1440px viewport and the full height of the screen, softened under a subtle warm tone scrim so the daylight office scene reads as an expansive editorial backdrop. Depth sits in three layers: `portrait-desk` at the back, with Sophie seated in the upper centre; the scrim; and the headline (`pos-1`, `pos-2`) set in display serif (IvyPresto Display) in ground bone (#FAF7F5) with select italic emphasis, centred both horizontally and vertically across the band on two lines, stretching wide across the negative space to cross Sophie's lower torso while leaving her face and upper desk completely clear. At the foot of the frame, a single text link (`off-1`) sits centred in ground bone (#FAF7F5). The site navigation sits in its own band above the photo on ground bone (#FAF7F5), touching no part of the image. - Phone: `portrait-desk` fills the screen width; the headline (`pos-1`, `pos-2`) adjusts to three centred lines crossing the lower half of the image; the link (`off-1`) rests at the foot. - **Uses:** `portrait-desk` · `pos-1`, `pos-2`, `off-1`, `off-2`, `off-3`, `off-4` ## about - **Variant:** Room photo behind, panel over it - **How it looks:** - Desktop: on the bone ground (#FAF7F5), two rectangles overlapping by a sliver. From the back: the ground; a solid dusty rose panel (#ECD9D5), flush to the left edge and running off it, two-thirds of the width; over its right end, `portrait-standing` standing in for the grid, flush to the right edge and running off it, with zero border-radius. The photo starts above the panel's top and stops above its bottom, so the bone ground shows as a step above the panel and another below the photo. The panel carries the greeting `abt-1` in deep pine ink (#294F48), the title `abt-2` as the largest type in IvyPresto Display, the coaching story and credentials `abt-3` and `abt-4` in Neue Haas Grotesk, and the outline pill button `abt-5`; nothing lands on `portrait-standing`. - Phone: `portrait-standing` first, at full width inside a margin, then the panel at full width on dusty rose (#ECD9D5) with the greeting `abt-1`, the title `abt-2`, the story `abt-3` and `abt-4`, and the outline pill button `abt-5` — the overlap gone, the two stacked in that order. - **Uses:** `portrait-standing` · `abt-1`, `abt-2`, `abt-3`, `abt-4`, `abt-5` ## offer · beat 6 - **Variant:** Closed rows that open - **How it looks:** - Desktop: flat, on the bone ground (#FAF7F5), split in halves. The photograph `work-workshop` holds the left half, plated cleanly with sharp right-angled corners, touching no edge of the band. The right half is one column: the section heading in IvyPresto Display at display scale, the largest type in the band, left-aligned in deep pine ink (#294F48), with a hairline rule under it; then the four offers (`off-1`, `off-2`, `off-3`, `off-4`) as closed rows at one pitch, each with a two-digit numeral (01 through 04) and the offer's name at the left and a plus sign at the far right, a hairline rule under every row. Nothing else shows until a row is pressed and it opens to reveal its body copy. The last hairline rule sits level with the foot of `work-workshop`. No action button in the band. - Phone: `work-workshop` first, scaled to a small centred picture; the heading under it, then the rows for `off-1`, `off-2`, `off-3`, and `off-4` at full width. - **Uses:** `work-workshop` · `off-1`, `off-2`, `off-3`, `off-4` ## proof · beat 7 - **Variant:** Three quotes in ruled columns - **How it looks:** - Desktop: a flat band on the bone ground (#FAF7F5) holding three reviews (`rev-2`, `rev-3`, `rev-7`) side by side in three equal columns with even gutters, set in deep pine green ink (#294F48) and nothing else — no heading, no photo, and no marks. Each column is built identically: a 1px pine hairline rule across its top, the review text beneath it in Neue Haas Grotesk at body size ranged left to the column width, a second 1px pine hairline rule directly beneath the quote, and the reviewer's name and role small under it in Neue Haas Grotesk. The three columns align to a single top baseline so the top hairlines run at one continuous height; the second hairlines and column footings finish at varying depths determined by each quote's length. - Phone: the three columns stack vertically in reading order at full width, each retaining its top and bottom pine hairlines to form a clean ruled list of three. - **Uses:** — · rev-2, rev-3, rev-7 ## footer - **Variant:** Columns around the mark - **How it looks:** - Desktop: A flat band on the bone ground (#FAF7F5) in two strips. The first, tall and unhurried: the circular brand emblem (`logo`) sits centred on the page's vertical axis at native scale as the band's visual anchor. Two columns mirror on either side: at the left, ranged left in deep pine ink (#294F48), the page anchors mapping the beats above, with the outline pill button resting below them; at the right, ranged right, a short closing note on business mentorship and mindset coaching for female founders, with a secondary back-to-top anchor over a fine pine hairline rule. The second strip, thin and quiet on a dusty rose (#ECD9D5) ground: the copyright line flush left in small deep pine caps (#294F48), with standard legal anchors flush right. - Phone: One centred column on bone (#FAF7F5) — the circular emblem (`logo`) first, followed by the mentorship note, the page anchors stacked one per line, the outline pill button, and the hairline rule with back-to-top anchor; the thin dusty rose (#ECD9D5) legal strip sits last with its copyright and legal lines stacked. - **Uses:** `logo` ## motion - **Variant:** Pinned cover at one seam - **Signature:** trigger: scroll progress over the beat (0% to 100% scroll depth of hero) · target: Hero container (`portrait-desk` and headline) and About container · change: Hero pins fixed at translate Y 0px while About translates Y from 100vh to 0px to cover the hero completely, hero releasing once covered · duration: 100vh scroll distance · easing: linear · stagger: none · repeat: every time · reduced: Hero and About stack statically in natural document flow with no pinning or vertical translation - **Beats:** Beat 6 Offer — trigger: click · target: offer row body copy container (`off-1` through `off-4`) · change: clip from inset(0 0 100% 0) to inset(0 0 0% 0), opacity 0 to 1 · duration: 350ms · easing: cubic-bezier(0.16, 1, 0.3, 1) · stagger: none · repeat: every time · reduced: offer body visible immediately at opacity 1 with clip inset(0 0 0% 0) - **Hover:** trigger: hover · target: outline pill button · change: colour background transparent to #294F48, colour text #294F48 to #FAF7F5 (on pine band: background transparent to #FAF7F5, text #FAF7F5 to #294F48) · duration: 240ms · easing: cubic-bezier(0.16, 1, 0.3, 1) · stagger: none · repeat: every time · reduced: instant colour change with 0ms duration · trigger: hover · target: text links and navigation anchors · change: opacity 1 to 0.6 · duration: 180ms · easing: cubic-bezier(0.16, 1, 0.3, 1) · stagger: none · repeat: every time · reduced: instant opacity change with 0ms duration - **Why:** The full-bleed daylight desk portrait commands undivided focus across the viewport before the dusty rose about panel glides up over it in one weighted, deliberate editorial seam. ## page - **Order:** 1 nav, 2 hero, 3 press, 4 positioning, 5 about, 6 offer, 7 proof, 8 newsletter, 9 footer - **Seams:** 1→2: cut 2→3: ground change, full-bleed photo (`portrait-desk`) to bone (#FAF7F5) 3→4: cut 4→5: cut 5→6: cut 6→7: cut 7→8: ground change, bone (#FAF7F5) to deep pine green (#294F48) 8→9: ground change, deep pine green (#294F48) to bone (#FAF7F5) - **The idea:** The ultra-wide desk portrait carrying the display headline edge-to-edge across Sophie's negative space establishes authority up front, so the rest of the page remains quiet, unboxed, and strictly structured by fine hairline rules. - **Other beats:** 1 nav: side-by-side · no photo · `logo` at left, links mapping about (5), offer (6), proof (7), and newsletter (8) at right, with the page's button 3 press: side-by-side · no photo · `press-1` through `press-8` with `client-logo-allbright` through `client-logo-the-telegraph` aligned between hairline rules 4 positioning: stacked column · no photo · `pos-3` centred in display serif 8 newsletter: stacked column · no photo · `off-5` centred on deep pine green (#294F48) with the page's button - **Why:** Immediate visual prestige and third-party press validation establish trust before introducing Sophie's philosophy, transparent offers, and evidence of client transformation.