For whoever rebuilds these in EzyCourse
Everything needed to reproduce the two mock-ups: the exact colours and type already running on theforestfarmacy.com, which photograph sits in which block, and the shots that are still missing.
Every value below was read off the live site on 21 August 2026, not chosen. In EzyCourse these go into Website Builder → branding variables once, and the pages inherit them.
| Role | Hex | Where it is used |
|---|---|---|
Dark brown | #342709 | Nav bar, footer, price band, some H2s |
Forest green | #2D4E28 | Default H2 colour, the offer-stack band |
Gold | #cb961f | Every call-to-action button fill |
Gold, hover | #cd9841 | Button hover, eyebrow text |
Sand | #e0c17b | Headings and links on dark backgrounds |
Taupe | #877568 | Captions, small labels, one H2 variant |
Sage | #5d6a5e | Full-width band background |
Pale green | #B2CD9C | Accent, unused in these two pages |
Bone | #F8F7F6 | Alternating section background |
Three families, all already in use on the live site and all available free from Google Fonts.
Cormorant Garamond
Page headline (H1) and pull quotes. Weight 400. On the live site the H1 runs 52px with 1.2 line height; here it scales between 2.4rem and 3.6rem.
Josefin Sans
Section headings (H2), buttons, eyebrows, small labels. Weight 400. Live site H2 is 40px / 1.2. Buttons carry 0.42px letter-spacing, which is the live site's value.
Lora
All body copy, sub-headings (H3), captions. Live site body runs 22px at 1.6 line height, weight 500 for lead paragraphs. Here body is 19px / 1.72 for long-form reading, with lead paragraphs stepped up.
Gold #cb961f, white text, 8px corner radius, Josefin Sans,
uppercase, 0.42px letter-spacing. Nav buttons use 6px radius. All taken from the live site.
| Token | Value | Use |
|---|---|---|
--maxw | 1120px | Standard content width |
--maxw-narrow | 760px | Long-form reading columns, FAQ |
--s7 | 5.5rem | Vertical padding on a standard section |
--s8 | 7rem | Vertical padding on hero and closing blocks |
--s5 | 3rem | Gap between the two halves of a split block |
| Breakpoints | 860px / 640px | Split blocks stack at 860px; card grids go single column at 640px |
Every image block uses a 10px corner radius; cards use 12px.
Sections alternate white and bone #F8F7F6, with three full-colour bands (green, brown,
sage) used to break up the sales page.
Every photograph used, where it sits, and where it came from. The CDN column is the file's address in the existing EzyCourse media library, so the same asset can be picked straight out of the library during the rebuild.
| Block | File | What it shows | Already in the media library |
|---|---|---|---|
| Reg · hero | founders-cabin-hero.jpg | Chris and Katherine seated in front of the cabin | No — press photo (ASAP Connections) |
| Reg · missing piece | chris-teaching-spawn-crowd.jpg | Chris pointing out what is happening inside a grow bag while a student watches | No — Facebook |
| Reg · who it's for | woods-workshop-group.jpg | Workshop group gathered in the woods | No — Facebook |
| Reg · story, Chris | chris-log-pile-atv.jpg | Chris inoculating logs at the log yard. Also used on the sales page's farmer block | Yes |
| Reg · story, Katherine | katherine-garden.jpg | Katherine working in the garden | Yes |
| Reg · proof | book-on-grass.jpg | The Mycelial Healer | Yes |
| Reg · closing block | students-inoculating-logs.jpg | Students inoculating logs at a farm day | Yes |
| Sales · hero | chris-teaching-straw-group.jpg | Chris spreading spawn through straw, students watching | Yes |
| Sales · opening | chris-chicken-of-woods.jpg | Chris with a wild harvest — stand-in, see section 5 | Yes |
| Sales · modules | hands-drilling-log.jpg | Hands drilling a log for inoculation | Yes |
| Sales · the kit | book-with-hen-of-woods.jpg | The book on the farm — stand-in, see section 5 | Yes |
| Sales · farm days | students-inoculating-logs.jpg | Students inoculating logs at a farm day | Yes |
| Sales · sterile lab bonus | chris-lab-plates.jpg | Chris working plates in the lab | Yes |
| Sales · founder bios | founders-selfie-woods.jpg | Chris and Katherine, close portrait | Yes |
| Sales · step 1 | hands-chisel-log.jpg | Hands inoculating a log | Yes |
| Sales · step 2 | vf-chris-grow-room-shelves.jpg | Chris in the grow room | No — frame from the Grow Room Tour video |
| Sales · step 3 | katherine-harvesting-logs.jpg | Katherine harvesting from logs | Yes |
| Sales · farmer door | chris-log-pile-atv.jpg | The working log yard | Yes |
| Sales · herbalist door | student-tincture-workshop.jpg | A student at a tincture workshop | No — Facebook |
| Sales · Katherine block | katherine-garden.jpg | Katherine on the farm | Yes |
| Sales · closing block | farm-day-straw-students.jpg | Students working the straw pile at a farm day | No — Facebook |
Photographs marked “Yes” already exist in the EzyCourse media library under account 4951 and are used on the current website. The Facebook and press shots are not in the library and will need uploading. Images larger than 1600px on the long edge were reduced to 1600px and saved as progressive JPEG; smaller originals were left at their own size and several are below that.
Seven photo slots in the two Word documents have no matching photograph anywhere in the supplied library. Because one of those slots is the proof section's five student entries, that is eleven individual images still to be found or taken. Rather than fill them with something that would misrepresent the farm, each is marked on the page with a dashed placeholder saying what the shot needs to do.
| Page and block | What is needed | Difficulty |
|---|---|---|
| Sales · the demonstration | Flood damage, a contaminated batch, or the farm mid-recovery | Archive photo, or skip the slot |
| Sales · weekly calls | A live call in progress, Zoom gallery view | One screenshot on any upcoming call |
| Sales · community | A community thread, or students on a call | One screenshot, names blurred |
| Sales · forager door | Spore prints in a drawer | Two-minute phone shot on the farm |
| Sales · proof, five entries | Photos of Diane, Pete, Chuck, Jason and Susan | Ask each student, or leave the initials-only treatment |
| Sales · the kit | The shipped kit laid out flat with the book | Ten minutes and a table. Currently a book-only stand-in |
| Sales · opening | The actual wild lobster mushroom patch, or Chris harvesting it | Currently a genuine Chris-harvesting shot standing in. The caption names the lobster patch, so this one is worth replacing |
In the source document, the offer-stack block lists the shipped kit as “liquid culture, a spore syringe, plug and sawdust spawn, grain spawn, jar lids,” while the FAQ further down lists “liquid culture, spore syringe, plug and sawdust spawn, jar lids” with no grain spawn. Both are reproduced exactly as written. One of the two needs correcting before this page goes live.
Every block on both pages is one of six shapes, and all six have a direct EzyCourse equivalent:
| Shape on the page | EzyCourse equivalent |
|---|---|
| Full-bleed hero with dark overlay | Section with a background image, plus a background overlay colour at roughly 80% opacity. Text left-aligned in a column capped at about 640px |
| Text beside an image | Two-column row. Alternate which side the image sits on down the page |
| Card grid, three or four across | Row of equal columns, each containing a heading and a paragraph, with a background and a 12px radius |
| Shaded stand-out block | A single column with the bone background and a 5px gold left border |
| FAQ | Accordion widget. One item open by default |
| Countdown | Countdown widget on the registration page. Set the target once the session time is confirmed |
The block shapes map across cleanly. Seven finer details in these mock-ups were done in CSS and have no drag-and-drop equivalent, so they either go in EzyCourse's Custom CSS panel or get approximated. None of them changes what the page says.
| Detail | What to do instead |
|---|---|
| Hero gutters computed from the viewport, so the copy lines up with the page grid while the colour runs to the edge | Use a full-width section with a fixed inner padding. The difference shows only on very wide screens |
| The hero's slightly uneven columns (about 52/48 rather than 50/50) | A plain 50/50 row is fine |
| Per-image aspect ratios, set so each photograph crops the way it should | Crop the images to the right shape before uploading, then let them display at their natural size |
| Headline sizes that scale smoothly with the window | Set a desktop size and a mobile size on the two breakpoints |
| The dark overlay on the two full-bleed closing blocks, done with a pseudo-element | EzyCourse background overlay colour at roughly 80% opacity |
| Sticky funnel header: logo left, event meta right-aligned, one button | EzyCourse header setting with the menu switched off. A funnel page carries no navigation; every menu link is an exit |
| The gold left border on stand-out blocks | Column border-left, or a background colour block if borders are not exposed |
Both pages are funnel pages, so they deliberately carry no navigation menu and no mock-up ribbon. One thing still needs replacing:
Two things to set before building anything: the branding variables from section 1, and the three Google Fonts from section 2. After that every block inherits, and the pages can be built from the two Word documents in order, top to bottom.
The clocks on the registration page are counting to 22 September 2026 at
midnight Eastern, purely as a placeholder, because the session time is still a
session time, 6:00 PM ET on Tuesday 22 September 2026, confirmed by Koen on
21 August. Both clocks on the page and every visible mention of the time now agree.
Two things still to decide: whether the shared Google Doc gets the same edit, since it still
reads [TIME]; and what the block should do once the session has passed, because
left alone it will sit on zeros rather than roll to the next monthly workshop.
The call-to-action buttons here use white text on the brand gold #cb961f, because
that is exactly what theforestfarmacy.com does today. Measured, that pairing is
2.6:1. The WCAG AA minimum for text this size is 4.5:1, so it does not pass.
This was matched deliberately rather than corrected, because the brief was to look like the
existing site. It is worth knowing about, and the fix is small if it is ever wanted: putting the
dark brown #342709 on the same gold measures 5.5:1 and passes,
with no change to the button shape, size or fill. That would be a site-wide brand decision, not
a decision about these two pages.
Everything else measured clean: sand #e0c17b on brown is
8.5:1, the muted caption tone on white is 6.0:1, every image carries descriptive alt text,
the FAQ accordions work by keyboard, and all links and buttons show a visible gold focus ring
when tabbed to.