Why Clean Tide looks the way it does
A cleanup coalition whose whole year runs on one weekly ritual: a truck, a pile of buckets and a 7:30 start before the sand gets hot. The site is built to get someone from curious to standing on the right beach on Saturday morning, and to give schools, churches and companies a way to take on a stretch of shore for a year.
- Built for
- First-time volunteers, families earning service hours, school and company groups, and neighbors who have spotted a dumped sofa in the bayou.
- Navigation
- Floating dock. Navigation floats in a dock at the bottom of the screen, where thumbs and eyes already are.
- Pages
- Home, Cleanups, Adopt, The tally, Report, Crew
- 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 big headline with a slow, pausable line of words running across the page (real needs, or things people say), plus one photograph; the line stands still for visitors who prefer reduced motion. Variants: a = headline beside a portrait photo, with the moving line underneath; b = headline first, then the moving line set huge, then a wide photo beside the intro; c = headline and intro side by side over a full-width photo with the moving line laid along its lower edge
Typography
Climate Crisis was designed to show warming seas, and its wide capitals carry the weight of a stencilled truck door or a park sign. It is far too loud for paragraphs, so headlines stay short and everything else is set in Rethink Sans, a calm grotesque that stays legible in direct sun. DM Mono handles weights, tide times and site codes, the way they are written on the weigh-in clipboard.
Color
The green is the color of the water off Pensacola Beach on a still morning, deepened until white text passes contrast on it. The yellow comes from the beach warning flags and the five-gallon buckets every volunteer carries. The light theme sits on a sea-glass white rather than sand beige; the dark theme is the bay at 6 AM, with the green lifted to a brighter shallows tone so it still reads.
Layout and navigation
Most visitors open the site on a phone in a parking lot, trying to find the right access point. The floating dock keeps the six pages under the thumb, and Pick a Saturday sits in the top bar on every page. Pages are short and stacked; nothing important hides behind a menu.
The hero
The opening photograph is a family cleanup on the bay side, with the running line along its lower edge listing what volunteers actually pulled out this season: a shopping cart from Bayou Texar, six miles of fishing line, a toilet seat. It is funny and a bit appalling, and it explains the work faster than a mission statement.
Calls to action
Every button names a concrete job: Pick a Saturday, Adopt a stretch of shore, Report a mess, Fund a cleanup kit. The giving ask is tied to equipment because that is honestly where the money goes; a kit of grabber, bucket and gloves costs $18.
Photography
People working on the shoreline: families on the bay, kids with trash bags, a young man with the white bucket on the Gulf side. The site cards use plain views of the water at each access point, so a first-timer recognizes the place when they pull in. No sad-turtle imagery; the tone is a Saturday morning with neighbors.
Accessibility
Body text is 17px with strong contrast in both themes, the ticker pauses on hover and stands still for reduced motion, and the cleanup pages say plainly which sites have beach wheelchairs, Mobi-mats and step-free access. Heat and lightning rules are written out in full rather than left to a disclaimer.
Type system
- DisplayClimate CrisisClimate Crisis was drawn to visualise warming seas, and its wide, heavy capitals read like the stencil on the side of a county truck.
- TextRethink SansA clean, slightly narrow grotesque that keeps long safety notes readable on a phone in bright sun.
- AccentDM MonoWeights, tide times and site codes, set like the labels on the weigh-in clipboard.
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 | 14.32:1 | AAA |
| Body text on cards | Aa | 16.09:1 | AAA |
| Secondary text | Aa | 5.67:1 | AA |
| Links | Aa | 5.75:1 | AA |
| Button text | Aa | 6.47:1 | AA |
| Accent label text | Aa | 9.14:1 | AAA |
| Text on dark bands | Aa | 14.32:1 | AAA |
| Muted text on dark bands | Aa | 7.63:1 | AAA |
| Text on brand bands | Aa | 6.47:1 | AA |
| Muted text on brand bands | Aa | 4.63:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.65:1 | AAA |
| Body text on cards | Aa | 12.84:1 | AAA |
| Secondary text | Aa | 6.66:1 | AA |
| Links | Aa | 8.86:1 | AAA |
| Button text | Aa | 9.75:1 | AAA |
| Accent label text | Aa | 11.76:1 | AAA |
| Text on dark bands | Aa | 16.18:1 | AAA |
| Muted text on dark bands | Aa | 8.24:1 | AAA |
| Text on brand bands | Aa | 9.75:1 | AAA |
| Muted text on brand bands | Aa | 5.86:1 | AA |
