Party food
Mini Fishcake Lollipops
Oven-baked tuna and potato fishcakes on sticks, coated in seeded gluten-free breadcrumbs — a firm family favourite.
20–25 mins (bake)Gluten-free
Handover
Design guide
Everything needed to rebuild this prototype with Elementor global styles and three reusable templates. Hex values are close approximations of the oklch tokens.
Logo
happy igloo
Proposed typographic refresh: lowercase Fraunces wordmark with a simple line-drawn igloo dome. The current logo could not be loaded for review — compare before deciding.
Colours
Paper (background)
#F8F4EC · oklch(0.975 0.012 80)
#F8F4EC · oklch(0.975 0.012 80)
Ink (text)
#2E2620 · oklch(0.24 0.02 45)
#2E2620 · oklch(0.24 0.02 45)
Tomato (accent / buttons)
#B5452B · oklch(0.53 0.16 35)
#B5452B · oklch(0.53 0.16 35)
Sage tint (story, tags)
#DDE8DA · oklch(0.92 0.03 140)
#DDE8DA · oklch(0.92 0.03 140)
Sage deep
#4F6A4F · oklch(0.45 0.06 145)
#4F6A4F · oklch(0.45 0.06 145)
Butter (tips panels)
#F3E6B5 · oklch(0.93 0.07 90)
#F3E6B5 · oklch(0.93 0.07 90)
Card white
#FCFAF6 · oklch(0.99 0.006 80)
#FCFAF6 · oklch(0.99 0.006 80)
Photo mat (pure white)
#FFFFFF · oklch(1 0 0)
#FFFFFF · oklch(1 0 0)
Rule / border
#DED4C6 · oklch(0.87 0.02 70)
#DED4C6 · oklch(0.87 0.02 70)
Ink on Paper ≈ 14:1; Tomato on Paper ≈ 5.3:1 (AA for text and buttons). Use Tomato for accents, not long passages.
Typography
Fraunces
Headings · Google Font · weights 400 italic, 600
Figtree
Body, UI, labels · Google Font · 400, 500, 600, 700
| Style | Font | Size | Line height |
|---|---|---|---|
| H1 | Fraunces 600 | 40 / 56 / 72px (mobile / tablet / desktop) | 1.05 |
| H2 | Fraunces 600 | 30 / 36px | 1.2 |
| H3 | Fraunces 600 | 20–22px | 1.3 |
| Body (articles) | Figtree 400 | 18px | 1.75 |
| Body (UI) | Figtree 400 | 16px | 1.5 |
| Eyebrow label | Figtree 700 uppercase | 12px, letter-spacing 0.14em, Tomato | — |
Layout, spacing & breakpoints
| Token | Value |
|---|---|
| Wide container (pages, grids) | 1240px max, 20px side padding mobile / 32px ≥768px |
| Reading container (posts, recipe card) | 720px max |
| Section spacing | 64px vertical (48px mobile) |
| Grid gap | 24px columns, 40px rows |
| Breakpoints | Mobile < 640 · Tablet 640–1023 · Desktop ≥ 1024 (Elementor: Mobile 767, Tablet 1024) |
| Corner radius | 4px on buttons, tags and photos; 6px on photo mats; pills only for filter chips |
| Minimum tap target | 44 × 44px |
Buttons, tags & image ratios
Gluten-free
| Image | Ratio |
|---|---|
| Recipe preview card | 4:5 portrait, cover |
| Recipe hero | 4:3 mobile, 4:5 desktop |
| Homepage hero | 4:3 |
| Post featured image | 16:9 (logos: contained at a fixed height — the mat padding sets the panel size) |
| Inline article image | 3:2 |
| Article list thumbnail | 1:1 |
Photo mat: every image sits on a pure white (#FFFFFF) mat — 8px padding on mobile, 12–16px on desktop (64px around logo panels), 6px corners, and a soft shadow 0 14px 30px -12px at 22% ink. Pure white, not the cream paper, so a white-background photo blends into the mat seamlessly.
Recipe preview card
Fields: featured image, category, title, excerpt (2 lines). Time and dietary tags appear only if filled in.
Content fields (WordPress)
| Field | Template | Required? |
|---|---|---|
| Title, featured image, excerpt, category, author, date | Both | Yes (image optional on posts) |
| Updated date | Both | Optional |
| Disclosure text (sponsored / gifted) | Both | Optional — hidden when empty |
| Story / body | Both | Post content |
| Makes / servings, prep, cook, oven temp | Recipe | Each optional |
| Ingredients, method, notes | Recipe | Recipe card hides if no ingredients |
| Substitutions, storage, tips | Recipe | Optional panels |
| Dietary labels | Recipe | Verified only — never assume dairy-free/vegan |
| Video URL | Recipe | Optional |
Rebuilding in Elementor
- Global styles: add the colours above as Global Colours and the type scale as Global Fonts in Site Settings; set button styles there too.
- Header & footer: Theme Builder templates (Pro). Use the Nav Menu widget with its mobile hamburger; search via the Search Form widget (Pro) or a header search icon.
- Homepage: flexbox containers — hero = 2-column container; categories = Loop Grid of a “Recipe category” taxonomy or simple Icon Box links; favourites & journal = Loop Grid (Pro) using a saved Loop Item that matches the preview card.
- Single recipe: Theme Builder Single Post template with display condition “in category Recipes”. Hero = Post Title, Post Excerpt, Featured Image, Post Info. The recipe card itself is best supplied by a recipe plugin.
- Single post: second Single template for all other posts: centred 720px container, Post Content widget styled via Global Fonts, Share Buttons (Pro) restyled to the quiet outline style, Posts widget for related.
- Disclosure box: an Elementor dynamic Text widget bound to a custom field, with “hide if empty”.
Needs Elementor Pro, a plugin or custom work
| Feature | Requirement |
|---|---|
| Theme Builder single/archive templates, Loop Grid, Posts, Share Buttons, Search Form | Elementor Pro |
| Recipe card, Jump to / Print recipe, recipe schema (Google rich results) | Recipe plugin — WP Recipe Maker (free) recommended; style its template to match |
| Tappable ‘step done’ circles in the method | WP Recipe Maker Premium or small custom JS — optional |
| Custom fields (disclosure, optional recipe extras) | ACF (free) + Elementor dynamic tags (Pro) |
| Category filter chips on the Recipes page | Loop Grid + Taxonomy Filter (Pro 3.19+) or custom |
| Migrating 199 existing posts’ recipe text into structured cards | WP Recipe Maker importer + manual review |
| Removing Google+ buttons | Delete old share plugin / Jetpack G+ settings |