Why Green Acre looks the way it does
Green Acre is a community garden site with a scalloped pattern, a heavy green headline and a stats band for plots, school gardens and donated produce. It sells plots and workdays as clearly as a hardware store sells tools.
- Built for
- Neighbours who want a plot, volunteers for workdays and school gardens, and local sponsors.
- Navigation
- Floating rounded pill that sits over the hero photo. On phones, a bottom tab bar plus a quick-links launcher.
- Pages
- Home, About, Visit, Plots, Stories, Events, Donate, Contact
- Hero
- Centred headline over a three-photo collage.
Typography
Work Sans at extra bold sets the headline and also sets the body text. It is a wide, sturdy sans that looks practical, and the heaviest weight gives the headline a poster quality. One family keeps the page simple.
Colour
The page is pale sage (#F5F8EC) with dark green text (#1B2A14), garden green (#2F7D32) for buttons and a sunflower yellow (#F2C230) accent. The dark theme uses a lighter leaf green (#7FD17F). Green is the obvious choice, and yellow gives it a bright, sunny counterpoint.
Layout and navigation
A rounded white pill nav has a green logo tile, six links and a green Donate pill. The hero has a scalloped wave pattern, which returns as a divider between sections. Below are rounded cards for garden programs, a stats band and a group of team avatars.
The hero
The hero is centred, with 'Grow something good together.' on two lines and a sentence about renting a plot, joining a workday or learning to compost. Garden photos begin right under the fold. A chip names the next Saturday workday.
Calls to action
'Get a plot' is a green pill and 'Join a workday' is an outline. Both are things a visitor can do this month, which fits a garden that depends on regular volunteers. Donate is in the header.
Photography
The photographs are close shots of flowers and garden beds, which convey growth and colour. A real garden should show its own raised beds and gardeners, with seasonal updates so the site never looks stale in winter.
Accessibility
Dark green on pale sage is about 14 to 1, and white on the green button about 5.1 to 1. The scalloped background is low contrast, and the headline sits on it at a large size. A theme toggle is in the header.
Type system
- DisplayWork SansWork Sans Extra Bold is sturdy and a little blunt, which matches the practical work of a garden.
- TextWork SansWork Sans in regular weight for paragraphs keeps the page unified and easy to read in the sun on a phone.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
