Why Iron Road Riders looks the way it does
Iron Road Riders is a Daytona Beach motorcycle ministry: Saturday rides, a 24-hour breakdown line, a tent on Main Street during Bike Week and Biketoberfest, and escorts for riders' funerals. The site looks like a rally poster pasted on a shop wall, and it treats the people at the bar next to the tent as the audience.
- Built for
- Riders in Volusia and Flagler counties, many of whom haven't been inside a church in years, plus visitors who pass the tent during Bike Week and families arranging a rider's funeral.
- Navigation
- Slim icon rail. A narrow fixed rail with a vertical wordmark leaves the full width for photography and type.
- Pages
- Ride, Rides, The tent, Roadside help, Last ride, Patch in
- Hero
- A tall typographic poster: the headline stacks down the left in mixed weights, italics and outlines, with a rotated side label and a photo panel. Variants: a = side label, stacked headline, then a tall photo on the right; b = photo panel on the left and the lines stepping in from the right, label on the far edge; c = the lines are pasted like strips over the edge of a large photo
Typography
League Gothic in capitals comes from the wood-type gothics on speedway programs and rally flyers stapled to telephone poles on Beach Street. It is set very large on a steep 1.36 scale, because this audience reads posters, not paragraphs. Chivo carries the body with a little mechanical weight, and Space Mono labels the ride times and phone numbers like stamped metal.
Color
Dark comes first: road tar and a leather-jacket brown-black, with a hot orange-red taken from a Daytona sunset on the hood of a tank and the amber of a turn signal for small accents. The light theme is sun-bleached concrete in a shop forecourt, with the red darkened to rust so it stays legible. Nothing chrome-blue, nothing that looks like a dealership.
Layout and navigation
A slim icon rail on the left leaves the whole width for big type and road photographs, and the vertical wordmark reads like the side of a trailer. Six pages, each named the way riders talk: Rides, The tent, Roadside help, Last ride, Patch in.
The hero
The home page opens with a poster for the tent at Biketoberfest, because in October that is where most people meet the ministry. The stacked lines list what's actually in the tent (cold water, hot coffee, a tire gauge, a prayer) so a visitor knows the deal before anyone mentions church.
Calls to action
"Ride with us Saturday" is the main action, because a ride is the easiest yes for a stranger. The rest are practical: call the breakdown line, find the tent, request a funeral escort, ask about patching in. The giving action is "Stock the tent", tied to cases of water and coffee rather than a general fund.
Photography
Riders in leather on open roads, parades and group shots by the bikes, with real variety in age, race and gender, because the ministry's women riders are a third of the Saturday pack. Where a photo is from a trip outside Florida, the caption says so.
Accessibility
The display face is only used for headings, never paragraphs. The breakdown number is written out in full on every page and in the footer, as a tappable link. Contrast is checked in both themes, and the poster headline is real text for screen readers rather than an image.
Type system
- DisplayLeague GothicLeague Gothic is a revival of the old wood-type condensed gothics on rally posters, speedway programs and tank decals, tall and loud without shouting.
- TextChivoChivo is a grotesque with a bit of mechanical heft, so paragraphs feel like they were set by the same shop that printed the posters.
- AccentSpace MonoA monospaced label face for mile counts, ride times and phone numbers, like stamped steel on a VIN plate.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.63:1 | AAA |
| Body text on cards | Aa | 14.34:1 | AAA |
| Secondary text | Aa | 6.83:1 | AA |
| Links | Aa | 5.29:1 | AA |
| Button text | Aa | 5.3:1 | AA |
| Accent label text | Aa | 10.16:1 | AAA |
| Text on dark bands | Aa | 16.35:1 | AAA |
| Muted text on dark bands | Aa | 8.15:1 | AAA |
| Text on brand bands | Aa | 5.3:1 | AA |
| Muted text on brand bands | Aa | 4.64:1 | AA |
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.41:1 | AAA |
| Body text on cards | Aa | 16.35:1 | AAA |
| Secondary text | Aa | 5.55:1 | AA |
| Links | Aa | 5.58:1 | AA |
| Button text | Aa | 6.25:1 | AA |
| Accent label text | Aa | 5.91:1 | AA |
| Text on dark bands | Aa | 14.41:1 | AAA |
| Muted text on dark bands | Aa | 7.57:1 | AAA |
| Text on brand bands | Aa | 6.25:1 | AA |
| Muted text on brand bands | Aa | 4.64:1 | AA |
