# Design — deirdreegan.com ## colour - **Palette:** ground `#FAF7F2` · ink `#263329` · accent `#708874` · highlight `#C88E8F` — ground from her linen blouse and kitchen walls; ink deepened from sage for WCAG AA readability; accent `#708874` from her owned logo; highlight `#C88E8F` from the photoshoot's dusty pink blind, clock, and watch strap. ## type - **Type:** display Cormorant Garamond · body Plus Jakarta Sans · the move: one italic word — lending gentle, poetic emphasis to transformational words (*vibrant*, *natural*, *nourish*). ## button - **Variant:** Solid pill, recoloured to its band - **Looks:** A full-round pill, filled with no border; on the light linen-cream ground (`#FAF7F2`), filled in deep forest-sage ink (`#263329`) or sage accent (`#708874`) with the label in linen-cream (`#FAF7F2`); on the deep sage band (`#708874`), filled in linen-cream (`#FAF7F2`) with the label in forest-sage ink (`#263329`); label set in Plus Jakarta Sans, medium, sentence case. - **Why:** Embraces the warm, soft, and photographic direction with organic, approachable curves while avoiding aggressive fitness-style caps and hard-edged clinical lines. ## hero - **Variant:** Portrait bleeding off an edge - **How it looks:** - Desktop: Flat, on the linen-cream ground (`#FAF7F2`), with the nav running in one row across the top carrying `logo` at the left. Below the nav, the band splits in halves. The portrait `portrait-01` holds the left half, flush to the left viewport edge and running off it: its outer left side is square where it leaves the screen and its inner right side is shaped into a full half-round, reading as a soft D-shape pressed against the left edge, touching neither the top nor the foot of the band and keeping Deirdre at the table well inside the frame. The words hold the right half on the linen-cream ground (`#FAF7F2`), left-aligned and vertically centred on the portrait's height: the headline `pos-1` set on two lines in deep forest-sage ink (`#263329`) at display scale in Cormorant Garamond with one italic word, followed by the supporting description `pos-2` and `pos-3` in Plus Jakarta Sans, and the action button `off-4` (a solid pill in sage accent `#708874` with linen-cream label `#FAF7F2`) as the last line. Nothing crosses the midline; the photo and the type each keep strictly to their half, and no words land on the photo. - Phone: `portrait-01` appears first at full width, flush to the left edge with its half-round curve on the right; the headline `pos-1`, description `pos-2` and `pos-3`, and button `off-4` stack beneath it in reading order on the linen-cream ground (`#FAF7F2`). - **Uses:** portrait-01, logo · pos-1, pos-2, pos-3, off-4 ## about - **Variant:** Portrait between two columns - **How it looks:** - Desktop: Flat on the linen-cream page ground (`#FAF7F2`). Centred at the top, an editorial title stack: `abt-1` as a small uppercase eyebrow in sage accent (`#708874`), `cred-1` as a two-line statement of practice in Cormorant Garamond ink (`#263329`), and the byline naming Deirdre Egan. Below it, opening paragraph `abt-2` is set in Plus Jakarta Sans ink (`#263329`), justified across two-thirds of the band's width. The band then divides into three balanced columns: `abt-3` holding the left text column; `portrait-03` plated in the centre on a wide cream margin with a delicate dusty pink border (`#C88E8F`); and `abt-4` followed by `abt-5` forming the right text column, with both text column tops aligned flush with the top edge of the photograph. Beneath the three columns sits the page's solid pill button in deep forest-sage ink (`#263329`) with linen-cream text (`#FAF7F2`), immediately followed by a dedicated deep sage banner (`#708874`) across the base grounding the three white accreditation marks `body-bant`, `body-cnhc`, and `body-ion` alongside their descriptors `body-1`, `body-2`, and `body-3` in linen-cream (`#FAF7F2`). - Phone: The title stack (`abt-1`, `cred-1`), opening paragraph `abt-2`, left column `abt-3`, plated `portrait-03`, right column (`abt-4`, `abt-5`), button, and deep sage accreditation banner (`body-bant`, `body-cnhc`, `body-ion`, `body-1`, `body-2`, `body-3`) stack in reading order at full width inside the page margins. - **Uses:** `portrait-03`, `body-bant`, `body-cnhc`, `body-ion` · `abt-1`, `abt-2`, `abt-3`, `abt-4`, `abt-5`, `cred-1`, `body-1`, `body-2`, `body-3` ## offer · beat 5 - **Variant:** Closed rows that open - **How it looks:** - Desktop: Flat on the warm linen-cream ground (`#FAF7F2`), split into equal halves. `portrait-02` holds the left half, plated on a generous linen-cream mat with a delicate dusty pink border (`#C88E8F`), touching no edge of the band. The right half is one column: the section heading in Cormorant Garamond display type in deep forest-sage ink (`#263329`), left-aligned, with a sage accent hairline (`#708874`) beneath it; then the four package offers (`off-1`, `off-2`, `off-3`, `off-4`) arranged as closed rows at one uniform pitch. Each row presents a two-digit numeral (`01` through `04`) and the offer name at the left, and a dusty pink plus mark at the far right, with a sage hairline under every row. Nothing else shows until a row is pressed and opens to show its body paragraph in Plus Jakarta Sans. The final hairline sits level with the foot of `portrait-02`. No action button in the band. - Phone: `portrait-02` appears first, shrunk to a small centred plate; the heading sits beneath it, followed by the four closed rows (`off-1`, `off-2`, `off-3`, `off-4`) at full width, retaining their numerals, plus signs, and dividing hairlines. - **Uses:** `portrait-02` · `off-1`, `off-2`, `off-3`, `off-4` ## proof · beat 8 - **Variant:** Three quotes in ruled columns - **How it looks:** - Desktop: a flat band on the linen-cream ground (`#FAF7F2`) holding three client reviews (`rev-1`, `rev-2`, `rev-3`) side by side in three equal columns with generous gutters, and nothing else — no heading, no photo, no star rows. Each column is built identically: a dusty pink hairline (`#C88E8F`) across its top, the client review beneath it in Plus Jakarta Sans at body size set in deep forest-sage ink (`#263329`) ranged left, followed by a second dusty pink hairline, and the attribution small beneath it. The three columns start on one level with their top hairlines aligned, reading as a clean, light-ruled three-cell table where only the length of each review varies the placement of the lower hairline. - Phone: the three columns stack in reading order (`rev-1`, `rev-2`, `rev-3`), each preserving its dusty pink top and bottom hairlines as a ruled vertical list. - **Uses:** rev-1 · rev-2 · rev-3 ## footer - **Variant:** Columns around the mark - **How it looks:** - Desktop: a flat band on the linen-cream page ground (`#FAF7F2`) in two strips. The first, tall and airy: the sage botanical lockup `logo` centred on the page's axis at native scale. Two mirrored columns flank it: at the left, ranged left in deep forest-sage ink (`#263329`), the page anchors (About, Approach, Programmes, Kind Words) one per row in Plus Jakarta Sans, with the solid pill button to book a consultation seated beneath them; at the right, ranged right, the recent nutrition journal articles (`blog-1`, `blog-2`, `blog-3`) stacked over a delicate dusty pink hairline (`#C88E8F`), with her clinic location and online practice details seated below it. The second strip, thin and framed by a subtle dusty rose rule: the copyright notice at the left and the legal privacy link at the right in muted sage type. - Phone: one centred column on `#FAF7F2` — the `logo` lockup at the top, the page navigation links, the solid pill consultation button, the journal links (`blog-1`, `blog-2`, `blog-3`) over their hairline, and the location note; the thin legal strip sits last with its copyright and privacy lines stacked. - **Uses:** `logo` · `blog-1`, `blog-2`, `blog-3` ## motion - **Variant:** Sequenced text - **Signature:** trigger: load · target: hero headline lines (`pos-1`), body copy (`pos-2`, `pos-3`), and consultation action button (`off-4`) · change: translate Y 16px to 0px, opacity 0 to 1 · duration: 850 ms · easing: cubic-bezier(0.22, 1, 0.36, 1) · stagger: 120 ms per line from top to bottom · repeat: once · reduced: translate Y 0px, opacity 1, still - **Beats:** none - **Hover:** trigger: hover · target: solid pill button · change: translate Y -2px, colour background `#708874` to `#263329` (or `#263329` to `#708874` on light grounds) · duration: 220 ms · easing: cubic-bezier(0.22, 1, 0.36, 1) · stagger: 0 ms · repeat: every time · reduced: translate Y 0px, colour background change 220 ms · trigger: hover · target: text navigation and footer links · change: colour ink `#263329` to highlight `#C88E8F` · duration: 200 ms · easing: ease-out · stagger: 0 ms · repeat: every time · reduced: colour change only - **Why:** Quiet, unhurried typography arrives line by line on load to establish kitchen-table calm and personal authority, keeping all subsequent editorial plates and consultation offers grounded and still on scroll. ## page - **Order:** 1 nav, 2 hero, 3 press, 4 positioning, 5 offer, 6 process, 7 about, 8 proof, 9 newsletter, 10 cta, 11 footer - **Seams:** 1→2: cut 2→3: cut 3→4: cut 4→5: cut 5→6: cut 6→7: cut 7→8: ground change, deep sage `#708874` to linen-cream `#FAF7F2` 8→9: cut 9→10: ground change, linen-cream `#FAF7F2` to deep sage `#708874` 10→11: ground change, deep sage `#708874` to linen-cream `#FAF7F2` - **The idea:** The sequenced load typography in the hero introduces Deirdre’s midlife promise with unhurried grace alongside her half-round portrait, while the rest of the page remains entirely still and grounded in editorial daylight. - **Other beats:** 1 nav: hung from an edge · logo at native scale with no photo · the page's button carrying off-4 · map: approach, packages, process, about, reviews, call 3 press: stacked column · press-grazia, press-greatest-hits-radio, press-top-sante, press-welwyn-hatfield-times, press-yours inline in a muted sage row · no button · press-1, press-2, press-3, press-4, press-5 4 positioning: split · work-01 plated on cream mat with delicate dusty pink border · the page's button · pos-4, pos-5, cov-1, cov-2, cov-3 6 process: side-by-side · work-02 plated on cream mat with delicate dusty pink border · the page's button · step-1, step-2, step-3, step-4 9 newsletter: plate on ground · no photo · the page's button · off-5 10 cta: stacked column · no photo · the page's button · pos-6, off-4 - **Why:** Generous linen-cream breathing room and warm, plated kitchen photography create a domestic sanctuary that makes sustainable midlife wellness feel completely attainable without diet-culture noise.