# Design — carolinefarrell.com ## colour - **Palette:** ground `#F8F8EE` · ink `#425762` · accent `#C0DFE4` — cream `#F8F8EE` from the brand's reverse logo as the whole-page ground; deep slate `#425762` from the brand mark as primary ink; blueberry slate `#4F6070` from the logo wordmark for secondary type and hairlines; pale blue `#C0DFE4` from her custom quote cards for section tint panels. ## type - **Type:** display Outfit · body Plus Jakarta Sans · the move: letterspaced uppercase display titles echoing the geometry and tracking of the leaf logo wordmark. ## button - **Variant:** Underline only - **Looks:** No enclosing box or fill; a 1px rule beneath the text exactly matching the label's length. On both the cream `#F8F8EE` ground and pale blue `#C0DFE4` tint panels, the rule and label are deep slate `#425762`. The label is set in Outfit, small, sentence case. - **Why:** The direction is quiet and editorial with generous breathing room, relying on hairline structure while explicitly refusing rounded floating pills and filled commercial boxes. ## hero - **Variant:** Portrait bleeding off an edge - **How it looks:** - Desktop: Flat, on the cream `#F8F8EE` page ground, with the nav in one row across the top featuring `logo` in slate `#4F6070`. Below it, the hero band splits into halves. `portrait-01` holds the left half, flush to the left viewport edge and running off it, unbordered and unshadowed on its outer edge with its inner right side cut to a full half-round so it reads as a D pressed against the left margin; it touches neither the top nor the foot of the band. The copy holds the right half, left-aligned and vertically centred to the height of `portrait-01`: headline `pos-1` set on two lines in letterspaced uppercase Outfit at display scale in deep slate ink `#425762`, description `pos-2` set in Plus Jakarta Sans beneath it, and the underline-only text action `off-8` with its deep slate `#425762` 1px rule as the last line. No words land on the photograph; `portrait-01` and the typography each keep strictly to their half without overlap. - Phone: `portrait-01` appears first at full width, flush to the left edge with its half-round curve on the right; headline `pos-1`, description `pos-2`, and underline action `off-8` stack beneath it in reading order on the cream `#F8F8EE` ground. - **Uses:** `portrait-01` · `logo` · `pos-1` · `pos-2` · `off-8` ## about - **Variant:** Portrait running off the edge, story beside - **How it looks:** - Desktop: Flat; the band takes the deep slate ink `#425762` as its ground. `portrait-02` is plated in the right half, flush to the right edge and running off it, held in from the band's top and bottom by an even margin of ground, its two inner corners softened. In the left half, one column about as wide as the visible part of `portrait-02`: the heading `abt-1` set in letterspaced uppercase Outfit at display scale in pale blue `#C0DFE4`, defining what Caroline is to the visitor rather than stating her name; the story and clinical credentials integrated across two paragraphs `abt-2` and `abt-3` in Plus Jakarta Sans in cream `#F8F8EE`; and the page's underline button under them in cream `#F8F8EE`. The heading is the largest type in the band and `portrait-02` the largest object; nothing lands on the photograph, and the column and photo never touch. - Phone: The heading `abt-1`, the story paragraphs `abt-2` and `abt-3`, and the underline button at full width, then `portrait-02` under them, still flush to the right edge and running off it, deep slate ground `#425762` showing on its left. - **Uses:** `portrait-02` · `abt-1`, `abt-2`, `abt-3` ## offer · beat 6 - **Variant:** Numbered rows with leaders - **How it looks:** - Desktop: `work-01` fills the band full-bleed edge to edge under a dark scrim of ink `#425762`, with its ribbed plate of yoghurt bark resting in the left half where no type lands. Depth in two layers: the photo layer behind; and in the right half, top to bottom: the section heading in uppercase Outfit at the largest display scale in the band in accent `#C0DFE4` across two lines, with a one-line subheading beneath it in blueberry slate `#4F6070`; then `off-1`, `off-2`, and `off-3` arranged as stacked rows. Each row displays a two-digit numeral (01, 02, 03) at the left in accent `#C0DFE4`, the offer's name beside it in cream ground `#F8F8EE`, a dotted leader running from the name to the far right end, and an arrow link in accent `#C0DFE4` as the action; indented past the numeral sits the two-line body text for `off-1`, `off-2`, and `off-3` in cream ground `#F8F8EE`. Row to row only the offer name, leader length, and body copy change. - Phone: `work-01` stays full-bleed under the scrim; the heading, subheading, and the three offer rows stack at full width, retaining the left numerals and shortening the dotted leaders to fit. - **Uses:** `work-01` · `off-1`, `off-2`, `off-3` ## offer · beat 7 - **Variant:** Numbered rows with leaders - **How it looks:** - Desktop: `work-11` fills the band full-bleed edge to edge under a dark scrim of ink `#425762`, with its green-rimmed breakfast bowl positioned in the left half clear of text. Depth in two layers: the photo layer behind; and in the right half, top to bottom: the specialisms heading in uppercase Outfit at the largest display scale in accent `#C0DFE4` on two lines, with a one-line subheading below in blueberry slate `#4F6070`; then `off-4`, `off-5`, `off-6`, and `off-7` as stacked rows. Each row features a two-digit numeral (01, 02, 03, 04) at the left in accent `#C0DFE4`, the offer name beside it in cream ground `#F8F8EE`, a dotted leader running to the right margin, and an arrow link in accent `#C0DFE4` at the end; indented beneath the name sits the two-line description for `off-4`, `off-5`, `off-6`, and `off-7` in cream ground `#F8F8EE`. Row to row only the name, leader length, and description change. - Phone: `work-11` stays under the scrim; the heading, subheading, and the four rows stack at full width in reading order, keeping the numerals at the left and shortening the dotted leaders to fit. - **Uses:** `work-11` · `off-4`, `off-5`, `off-6`, `off-7` ## proof · beat 5 - **Variant:** Marks in rows, names beside - **How it looks:** - Desktop: a short flat band on the cream `#F8F8EE` ground. The press marks `press-bbc`, `press-telegraph`, `press-guardian`, and `press-channel4` sit in two centred rows at native size in slate ink `#425762` with even gaps. Beneath them, the track record metrics `num-1`, `num-2`, `num-3` and credentials `cred-1`, `cred-2`, `cred-3`, `cred-4` are set as two columns of small caps in deep slate `#425762` under a short two-line heading with a blueberry slate hairline rule beneath it, right-aligned in the right half of the band, leaving the left half empty. - Phone: the press marks rewrap to two per row, centred; the credentials and numbers stack into one column beneath the hairline rule. - **Uses:** `press-bbc`, `press-channel4`, `press-telegraph`, `press-guardian` · `num-1`, `num-2`, `num-3`, `cred-1`, `cred-2`, `cred-3`, `cred-4` ## proof · beat 8 - **Variant:** Quote beside a photo on paper - **How it looks:** - Desktop: flat on the cream `#F8F8EE` ground, divided in halves with a small uppercase label at the top left. In the left half, a pale blue `#C0DFE4` sheet plated on the ground with `work-02` laid flat over its lower left, both unbordered and unshadowed. In the right half, one everyday life review (`rev-1`, `rev-4`, `rev-8`, `rev-16`) set in letterspaced caps in deep slate `#425762` at a size above body, followed by the reviewer's name and role on two small lines in blueberry slate `#4F6070`; a single text control at the right edge advances to the next review. - Phone: the pale blue sheet and `work-02` collage first at full width, then the label, the quote, the attribution and the control stacked in reading order. - **Uses:** `work-02` · `rev-1`, `rev-4`, `rev-8`, `rev-16` ## proof · beat 10 - **Variant:** Quote over a darkened photo - **How it looks:** - Desktop: `work-09` fills the band edge to edge under a deep slate scrim (`#425762`), its dark chocolate pudding subject mostly lost behind the type. Centred on it, one review at a time from `rev-6`, `rev-7`, `rev-12`, `rev-17`, `rev-21` in cream `#F8F8EE` at display scale across three lines, with an open-quote mark alone above the first line, and under the last line the reviewer's name small and their specific clinical or athletic goal in pale blue `#C0DFE4`. Previous and next are two small labels turned on their side at the far left and far right edges. - Phone: `work-09` fills the screen height under the scrim, the quote centred at a smaller display size; previous and next become a row under the attribution. - **Uses:** `work-09` · `rev-6`, `rev-7`, `rev-12`, `rev-17`, `rev-21` ## footer - **Variant:** Columns around the mark - **How it looks:** - Desktop: A flat band on the cream page ground (`#F8F8EE`) in two strips. The first, tall: the `logo` lockup — the hand-drawn leaf outline above CAROLINE FARRELL over NUTRITION — centred on the page's axis in deep slate ink (`#425762`), the band's largest element. Two columns mirror either side of it: at the left, ranged left in deep slate `#425762`, the page's section anchors one per row, with the consultation booking action as an underline button beneath them; at the right, ranged right, the practice location and social follow details from `pos-1` in blueberry slate `#4F6070` over a short hairline rule (`#4F6070`), with the direct contact email under it. Both hairlines sit at one height. The second strip, thin, on a pale blue tint ground (`#C0DFE4`): the copyright notice at the left and legal links at the right in deep slate `#425762`. - Phone: One centred column on cream `#F8F8EE` — the `logo` lockup, the location and social links from `pos-1`, the page anchor links one per line, the underline action button, and the contact email over its hairline rule; the thin pale blue `#C0DFE4` strip sits last with its copyright and legal lines stacked and centred. - **Uses:** `logo` · `pos-1` ## motion - **Variant:** Sequenced text - **Signature:** trigger: load · target: hero typography (`pos-1` line 1, `pos-1` line 2, `pos-2` body copy, `off-8` underline action) · change: translate Y from 16px to 0px, opacity from 0 to 1 · duration: 750ms · easing: cubic-bezier(0.16, 1, 0.3, 1) · stagger: 120ms top to bottom (`pos-1` line 1, `pos-1` line 2, `pos-2`, `off-8`) · repeat: once · reduced: fully visible at opacity 1, translate Y 0px without delay or transition - **Beats:** none - **Hover:** trigger: hover · target: underline button 1px hairline rule · change: scale X from 1.0 to 1.06, colour from `#425762` to `#4F6070` · duration: 220ms · easing: cubic-bezier(0.16, 1, 0.3, 1) · stagger: 0ms · repeat: every time · reduced: colour changes to `#4F6070` instantly without scale · trigger: hover · target: navigation anchors, offer row arrow links, and footer links · change: opacity from 1.0 to 0.60, colour from `#425762` to `#4F6070` · duration: 180ms · easing: ease-out · stagger: 0ms · repeat: every time · reduced: colour changes to `#4F6070` instantly without opacity fade - **Why:** Staggered typographic entry on load pairs with the unmoving photographic split to establish clinical authority and unhurried consultation clarity before resting completely still. ## page - **Order:** 1 nav, 2 hero, 3 press, 4 positioning, 5 proof, 6 offer, 7 offer, 8 proof, 9 about, 10 proof, 11 pause, 12 cta, 13 footer - **Seams:** 1→2: cut 2→3: cut 3→4: cut 4→5: cut 5→6: ground change, cream `#F8F8EE` to deep slate scrim `#425762` 6→7: cut 7→8: ground change, deep slate scrim `#425762` to cream `#F8F8EE` 8→9: ground change, cream `#F8F8EE` to deep slate `#425762` 9→10: cut 10→11: ground change, deep slate scrim `#425762` to cream `#F8F8EE` 11→12: ground change, cream `#F8F8EE` to pale blue `#C0DFE4` 12→13: ground change, pale blue `#C0DFE4` to cream `#F8F8EE` - **The idea:** The hero's half-round D portrait bleeding flush left against sequenced typography carries the page's one structural gesture, allowing subsequent clinical credentials, unshadowed food plates, and consultation offers to unfold in calm editorial quiet. - **Other beats:** 1 nav: hung from an edge · `logo` at left with text map linking positioning, proof, offer, about, cta · action is `off-8` as the page's button 3 press: stacked column · editorial quotes `press-1`, `press-2`, `press-3`, `press-4`, `press-5` paired over marks `press-bbc`, `press-channel4`, `press-telegraph`, `press-guardian`, `press-independent-ie` · no photo · the page's button 4 positioning: split · `pos-3` and `pos-4` stacked in left column with `work-04` plated flush on ground in right half · unbordered unshadowed photo · the page's button 11 pause: full-bleed · four unbordered, unshadowed food plates `work-03`, `work-05`, `work-07`, `work-10` flush edge to edge across the band · no copy · no action 12 cta: stacked column · centred closing consultation proposition `off-8` on pale blue tint panel `#C0DFE4` · no photo · action is `off-8` as the page's button - **Why:** The alternating rhythm of cream, deep slate, and pale blue ground changes naturally separates high-level press credentials, detailed clinical specialisms, and quiet kitchen table evidence without relying on commercial cards or decorative clutter.