# Design — cookeatjoy.co.uk ## colour - **Palette:** ground `#FFFFFF` · ink `#1A1815` · accent `#E12D79` (pink — wordmark, primary CTAs, script accents) · secondary accent `#27AEAD` (teal — "By Ela" tags, section eyebrow badges) · tertiary highlight `#DC522D` (orange — pricing callouts, spice highlights) · ground wash `#D9C819` (apron yellow — workshop feature cards, highlight ribbons) — all sampled directly from the owned logo artwork and workshop aprons. ## type - **Type:** display Recoleta · body Plus Jakarta Sans · the move: mixed weights in one line, balancing bold editorial serif headlines with vibrant pink script-inspired italic emphasis. ## button - **Variant:** Solid pill, recoloured to its band - **Looks:** A full-round pill with no border; on ground `#FFFFFF`, filled in accent pink `#E12D79` with the label in `#FFFFFF`; on yellow `#D9C819` ground-wash bands, filled in ink `#1A1815` with the label in `#FFFFFF`; the label set in Plus Jakarta Sans, body size, semibold weight, sentence case. - **Why:** Embraces the soft, joyful, mid-loud warmth and photographic kitchen energy while spending the signature brand pink directly on the primary booking action. ## hero - **Variant:** Portrait bleeding off an edge - **How it looks:** - Desktop: flat, on ground `#FFFFFF`, the nav in one row across the top. Below it 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 side is square where it leaves the screen and its inner right side forms a full half-round, reading as a D pressed against the edge, touching neither the top nor the foot of the band. Ela sits centred in the frame behind her spice bowls and masala tin, looking directly forward. The words hold the right half on ground `#FFFFFF`, left-aligned and vertically centred to the portrait’s height: the headline `pos-1` set on two lines at display scale in Recoleta in ink `#1A1815` with accent pink `#E12D79` italic emphasis; below it the description `pos-2` in Plus Jakarta Sans body size in ink `#1A1815`; and directly underneath, the primary booking action button in solid accent pink `#E12D79` with white text. Nothing crosses; the photo and the words each keep to their half. - Phone: `portrait-01` sits first at full width, flush to the left edge with its inner half-round curved on the right; the headline `pos-1`, description `pos-2`, and the pink booking button stack beneath it on ground `#FFFFFF`. - **Uses:** `portrait-01` · `pos-1`, `pos-2` ## about - **Variant:** Portrait running off the edge, story beside - **How it looks:** - Desktop: flat; the band takes the ink `#1A1815` 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, with its two inner left corners rounded. In the left half, one column about as wide as the visible part of the portrait: a heading in display Recoleta using `abt-1` that introduces Ela as the host and teacher, with mixed-weight italic emphasis in accent pink `#E12D79`; the story in two paragraphs in body Plus Jakarta Sans in ground `#FFFFFF`, weaving her 18 years of teaching credentials from `cred-2` directly into the prose; and the page's solid pill button in accent pink `#E12D79` with `#FFFFFF` label under the text. The heading is the largest type in the band and `portrait-02` is the largest object; nothing lands on the photograph, and the words and photo never touch. - Phone: the heading, the story (`abt-1`, `cred-2`), and the button sit at full width in reading order, followed by `portrait-02` underneath them, flush to the right edge and running off it, with ink ground `#1A1815` showing on its left. - **Uses:** portrait-02 · abt-1, cred-2 ## offer · beat 4 - **Variant:** Section name across the seam - **How it looks:** - Desktop: the band before ends in a warm photo scrim and this band is in ink `#1A1815`. The offer's name `off-1`, set at display scale in Recoleta in ground `#FFFFFF`, sits across the seam between them — most of the letters on the scrim, their bottoms on the ink band — spanning nearly the full width of the screen. Under it, flat on `#1A1815`: the square workshop photo `environment-05` plated with soft corners to the right of centre; the section heading in Recoleta display scale centred across two lines; one short centred introductory paragraph in Plus Jakarta Sans; the body copy of `off-1` arranged in two columns; and the page's solid pill button in accent `#E12D79` positioned under the first column. - Phone: the name `off-1` sits just under the top edge at full width; `environment-05`, the heading, body copy, and the `#E12D79` pill button stack in reading order. - **Uses:** environment-05 · off-1 ## offer · beat 5 - **Variant:** Section name across the seam - **How it looks:** - Desktop: the preceding band ends in a photo edge and this band sits in ink `#1A1815`. The single offer name `off-2`, the largest type in the band in Recoleta in ground `#FFFFFF`, spans across the upper boundary seam. Flat on the dark ground below: the tall column photo `environment-02` plated with soft corners right of centre; the question heading in Recoleta centered in white; a short intro line; the descriptive copy for `off-2` set in Plus Jakarta Sans in two balanced columns; and the primary solid pill button in accent `#E12D79` anchored beneath the first column. - Phone: `environment-02` sits at top, followed by the heading, the copy for `off-2`, and the full-width `#E12D79` pill button stacking in reading order. - **Uses:** environment-02 · off-2 ## offer · beat 6 - **Variant:** Two keyline plans - **How it looks:** - Desktop: flat, on page ground `#FFFFFF`. The section heading in display Recoleta is centred at the top in ink `#1A1815`. Under it, the two offers `off-3` and `off-9` sit as side-by-side equal keyline boxes stroked in accent pink `#E12D79` with no fill; inside each box, centred top to bottom: the offer name in Recoleta, the rate callout in tertiary orange `#DC522D` as the largest element, the session duration in Plus Jakarta Sans, a concise description, and the page's solid pill button in `#E12D79` with white text at the foot. - Phone: the two keyline boxes for `off-3` and `off-9` stack in vertical order at full width. - **Uses:** work-03 · off-3, off-9 ## offer · beat 7 - **Variant:** Outlined frames stacked on the dark half of the photo - **How it looks:** - Desktop: one layer over another. In the background, group photo `environment-04` spans edge to edge at full bleed, with the smiling apron-clad attendees positioned on the left half and the darker kitchen ambient tones filling the right half. In front, on that right half, the two offers `off-5` and `off-6` sit as two outlined rectangular frames stroked in a hairline of ground `#FFFFFF` with no fill, stacked with a narrow gap between them. Inside each frame, left-aligned: the offer name in display Recoleta, two lines of descriptive body in Plus Jakarta Sans in `#FFFFFF`, and the solid pill button in accent `#E12D79` centred at the foot of each frame. - Phone: `environment-04` stands full width above; the two outlined frames for `off-5` and `off-6` stack vertically beneath on ground `#FFFFFF`, stroked in ink `#1A1815` with dark text and `#E12D79` buttons. - **Uses:** environment-04 · off-5, off-6 ## offer · beat 8 - **Variant:** Two keyline plans - **How it looks:** - Desktop: flat, on page ground `#FFFFFF`. The section heading in display Recoleta is centred at the top in ink `#1A1815`. Below it, the two dining offers `off-4` and `off-7` are presented as equal keyline boxes in a single row, stroked in secondary teal `#27AEAD` with no background fill; inside each box, centred from top to bottom: the offer title in Recoleta, the starting price in orange `#DC522D`, the format specification, the descriptive details in Plus Jakarta Sans, and the solid pill button in `#E12D79` at the bottom. - Phone: the keyline boxes for `off-4` and `off-7` stack vertically at full width. - **Uses:** environment-01 · off-4, off-7 ## offer · beat 12 - **Variant:** Two keyline plans - **How it looks:** - Desktop: flat, on ground-wash apron yellow `#D9C819`. The menu heading in display Recoleta is centred at the top in ink `#1A1815`. Under it, the menu pathways `off-8` and `off-10` sit as two equal keyline boxes stroked in ink `#1A1815` with ground `#FFFFFF` fill; inside each, centred top to bottom: the menu tier name in Recoleta, the course breakdown, the dish descriptions in Plus Jakarta Sans, and the solid pill button recoloured to ink `#1A1815` with `#FFFFFF` lettering. - Phone: the boxes for `off-8` and `off-10` stack in vertical order at full width on `#D9C819`. - **Uses:** work-02 · off-8, off-10 ## proof · beat 10 - **Variant:** Credentials in prose, three photos on the seam - **How it looks:** - Desktop: A dark flat band in ink `#1A1815`. Centred in the upper half, `cred-1` in small tracked caps in secondary accent teal `#27AEAD`, and under it `abt-2` on a narrower measure in ground `#FFFFFF`, also centred — Ela's 18 years of secondary school teaching credentials set in warm, reassuring prose. The lower half holds `environment-06` plated straight on the dark ground, centred on the vertical axis as a tall column portrait of students in yellow aprons, overshooting the band's foot and landing into the following white ground `#FFFFFF` band to straddle the seam. - Phone: `cred-1` and `abt-2` stay centred and expand to full mobile measure; `environment-06` stays centred below them, scaled to screen width while still straddling the bottom seam. - **Uses:** `environment-06` · `abt-2`, `cred-1` ## proof · beat 11 - **Variant:** Quote over a darkened photo - **How it looks:** - Desktop: `environment-08` fills the band edge to edge under a dark scrim tinted in ink `#1A1815`, its subjects seated at the feast table off centre. Centred on it in ground `#FFFFFF`, one review from `rev-1`, `rev-2`, `rev-3` displays at large scale in Recoleta across three lines, with an open-quote mark alone above the first line; under the last line, the reviewer's name sits in small Plus Jakarta Sans and their role smaller in accent pink `#E12D79`. One review is shown at a time; previous and next are two small labels turned on their side at the far left and far right edges, midway down the band. - Phone: `environment-08` fills the screen height under the scrim with the active quote centred at readable scale; previous and next controls become a horizontal row beneath the reviewer's attribution. - **Uses:** `environment-08` · `rev-1`, `rev-2`, `rev-3` ## footer - **Variant:** Legal line on a bright strip under the dark band - **How it looks:** - Desktop: Two bands stacked, flat. The upper band takes the ink `#1A1815` as its ground from edge to edge and holds the page map in three parts on one row: a link column at the left mapping the beats under a small Plus Jakarta Sans uppercase heading, the brand lockup `logo` centred on the axis, and the location and get-in-touch details `off-11` at the right under its own heading, the two columns mirrored about the lockup and set well inboard of the margins in ground-white `#FFFFFF` text. Under it, a thin strip in the accent pink `#E12D79` runs the full width, no taller than a line, carrying the legal line centred in small, tracked white caps so the page finishes on its brightest, most joyful signature colour. - Phone: Stacks: the page link column, the `logo` lockup, and the contact details `off-11`, all centred on the ink `#1A1815` ground; the accent pink `#E12D79` strip remains at the foot with the legal line wrapping across two lines. - **Uses:** `logo` · `off-11` ## motion - **Variant:** Sequenced text - **Signature:** trigger: load · target: hero headline `pos-1` lines, description `pos-2`, and primary booking pill button · change: translate Y from 16px to 0px, opacity from 0 to 1 · duration: 600 ms · easing: cubic-bezier(0.16, 1, 0.3, 1) · stagger: 120 ms, top line down to CTA button · repeat: once · reduced: translate Y 0px, opacity 1 immediately - **Beats:** none - **Hover:** trigger: hover · target: solid pill buttons (`#E12D79` and `#1A1815`) · change: scale from 1 to 1.03, translate Y from 0px to -2px · duration: 220 ms · easing: cubic-bezier(0.16, 1, 0.3, 1) · stagger: none · repeat: every time · reduced: scale 1, translate Y 0px, immediate background tint shift · trigger: hover · target: nav links, footer text links, and testimonial controls · change: colour to accent pink `#E12D79` · duration: 180 ms · easing: ease-out · stagger: none · repeat: every time · reduced: immediate colour shift to `#E12D79` - **Why:** Introduces Ela’s warm kitchen hospitality through a buoyant, sequenced typographic hero greeting before settling the rest of the rich culinary photography into a clear, confident still. ## page - **Order:** 1 nav · 2 hero · 3 positioning · 4 offer · 5 offer · 6 offer · 7 offer · 8 offer · 9 about · 10 proof · 11 proof · 12 offer · 13 cta · 14 footer - **Seams:** 1→2: cut 2→3: cut 3→4: ground change, `#FFFFFF` to ink `#1A1815`, with offer title `off-1` straddling the boundary across the photo edge and dark band 4→5: cut 5→6: ground change, ink `#1A1815` to `#FFFFFF` 6→7: ground change, `#FFFFFF` to full-bleed photo `environment-04` 7→8: ground change, full-bleed photo `environment-04` to `#FFFFFF` 8→9: ground change, `#FFFFFF` to ink `#1A1815` 9→10: cut 10→11: ground change, ink `#1A1815` to full-bleed photo scrim `environment-08`, with column portrait `environment-06` straddling the seam 11→12: ground change, full-bleed photo scrim `environment-08` to ground-wash apron yellow `#D9C819` 12→13: ground change, apron yellow `#D9C819` to `#FFFFFF` 13→14: ground change, `#FFFFFF` to ink `#1A1815` - **The idea:** The hero's half-round D-profile portrait bleeding off the viewport edge paired with sequenced typography lands Ela’s buoyant warmth and hospitality immediately, letting the subsequent workshop cards and feasts remain clean, structured, and easy to book. - **Other beats:** 1 nav: hung from the top edge · no photo · maps 4–8 (workshops), 9–10 (about), 11 (reviews), and 13–14 (contact) using `pos-4` and `logo` · the page's solid pill button in accent `#E12D79`. 3 positioning: side-by-side · rectangular flat-lay `work-01` plated cleanly in the right half on ground `#FFFFFF` beside `pos-3` and `pos-4` in the left half · the page's solid pill button in accent `#E12D79`. 13 cta: stacked column · full-width rectangular kitchen photo `environment-07` plated above centred copy `abt-3` on ground `#FFFFFF` · the page's solid pill button in accent `#E12D79`. - **Why:** Delivers a clear, sunlit progression from class formats to Ela’s 18-year teaching story and social proof, removing friction before the final booking call.