Why Canopy Corps looks the way it does
A tree-planting corps whose work is slow and local: one terrace, one yard, one block at a time, followed by two summers of watering. The site leads with homeowners requesting a free tree, then volunteers and the paid youth crew, and it treats the care that follows planting as seriously as planting day.
- Built for
- Homeowners and renters in low-canopy neighborhoods, Saturday volunteers, teenagers looking for a paid summer job, and donors who want to fund a specific tree.
- Navigation
- Split screen. Identity and navigation stay fixed on the left half while content scrolls on the right, like a printed programme.
- Pages
- Home, Request a tree, Plant days, The trees, Tree care, Youth crew, Fund a tree
- Hero
- a short action form as the hero: the one thing most visitors came to do (request a ride, ask for help, register a child) can be done before they scroll, with reassurance beside it. Variants: a = headline, reassurance and a photo on the left with the form as a raised card on the right; b = a tall photo carrying the headline, with the form and reassurance on a plain panel beside it; c = headline beside a photo, then the form laid out as one horizontal booking bar; a headline over a slow, continuous strip of captioned photographs that visitors can also drag or scroll; it pauses on hover and focus, has a pause button, and stays still for people who prefer reduced motion. Variants: a = headline and lead side by side above a strip of mixed portrait and landscape photos; b = a giant headline beneath a strip whose photos step up and down; c = two strips moving in opposite directions with the headline between them; A tall photograph on one side; on the other, the headline, a short intro and three 'next step' rows with arrows instead of a pair of buttons. Variants: a = photo bleeds off the left edge, rows show when each step happens; b = photo bleeds off the right edge, rows are numbered steps set large
Typography
Vollkorn was drawn as a sturdy everyday book face, and its name means wholemeal. It has the dependable warmth of a field guide or a seed catalog, which suits an organization that measures progress in decades. IBM Plex Sans carries the practical material, permits and watering, and Plex Mono sets species codes and trunk sizes the way they read on a nursery tag.
Color
The green is a white-oak leaf in late June, deep enough to carry white text. The gold is a honey locust in its October week, darkened to pass contrast as a link and button color. The light theme sits on a pale lichen tone; the dark theme is an evening under canopy, with the green lifted to new spring growth so it still reads.
Layout and navigation
The split screen keeps the corps' name, the planting deadline and Request a free tree fixed on the left while the right side scrolls, like a printed program. On a phone it folds to a compact header and a menu. Seven pages are named for what people come to do: request, plant, water, fund, apply.
The hero
The opening strip of photographs moves slowly through a planting season: digging, staking, watering, the shade on a finished street. It says this is physical neighborhood work before a word is read, and the headline names the real loss behind the program, the ash trees Milwaukee lost to the emerald ash borer.
Calls to action
The one fixed action is Request a free tree, because homeowners in the target neighborhoods are the people the program exists for and the request window closes. Volunteers get Dig in at a Plant Day, teenagers get Apply for the youth crew, and donors get Fund a tree, each priced in real trees.
Photography
Planting and watering photographs with real dirt on the boots, plus leafy residential streets that show what a block looks like after twenty years. Crew portraits are of the kind of people actually doing the work. No single-leaf macro shots, no forest stock.
Accessibility
Text is 17px with strong contrast in both themes, the photo strip can be paused and stands still for reduced motion, and every form field has a visible label. Plant Day pages say plainly which jobs need no bending or digging, so older neighbors and wheelchair users can sign up for registration, mulch hauling by cart or the coffee table.
Type system
- DisplayVollkornVollkorn means 'wholemeal' and was drawn as a sturdy everyday book face; it has the plain, dependable warmth of a field guide or a seed catalog.
- TextIBM Plex SansA sober, engineered sans that keeps watering schedules and permit details clear next to the bookish headings.
- AccentIBM Plex MonoSpecies codes, trunk calipers and route numbers, the way they appear on a forester's tag.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 13.8:1 | AAA |
| Body text on cards | Aa | 15.41:1 | AAA |
| Secondary text | Aa | 5.53:1 | AA |
| Links | Aa | 6.97:1 | AA |
| Button text | Aa | 8.03:1 | AAA |
| Accent label text | Aa | 5.26:1 | AA |
| Text on dark bands | Aa | 13.8:1 | AAA |
| Muted text on dark bands | Aa | 7.46:1 | AAA |
| Text on brand bands | Aa | 8.03:1 | AAA |
| Muted text on brand bands | Aa | 5.35:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.27:1 | AAA |
| Body text on cards | Aa | 13.85:1 | AAA |
| Secondary text | Aa | 6.81:1 | AA |
| Links | Aa | 9.62:1 | AAA |
| Button text | Aa | 9.99:1 | AAA |
| Accent label text | Aa | 9.57:1 | AAA |
| Text on dark bands | Aa | 16.32:1 | AAA |
| Muted text on dark bands | Aa | 8.2:1 | AAA |
| Text on brand bands | Aa | 9.99:1 | AAA |
| Muted text on brand bands | Aa | 5.86:1 | AA |
Tou VangStaff forester, Canopy Tree Corps