Why Spoke & Wheel looks the way it does
A co-op site that works like the whiteboard by the shop door: what's on this week comes first, in big type, with the countdown to the next open shop. Everything else (earning a bike, donating one, volunteering) is one tap away on a slim icon rail.
- Built for
- Tucson commuters who can't afford a shop repair, students, kids and parents, refugees and new arrivals who need a way to get to work, and the volunteer mechanics who keep the place open.
- Navigation
- Slim icon rail. A narrow fixed rail with a vertical wordmark leaves the full width for photography and type.
- Pages
- This week, Fix your bike, Earn a bike, Give a bike, Volunteer, Rides & classes
- Hero
- This week's schedule is the hero: day columns with what is on, so regulars and newcomers see when to come before anything else
Typography
Azeret Mono runs from hairline to black, so headings are set very heavy, like a frame serial number stamped into steel, and secondary lines are set light. Overpass, drawn from American highway signs, carries the reading text. Together they look like a well-organized parts wall.
Color
The site opens in its dark theme, because most people check it in the evening before a 5 PM shop night. The amber is a sodium streetlight on 4th Avenue at dusk and the turquoise is the trim on a Barrio Viejo door. The light theme swaps to a sun-bleached caliche ground with a deep turquoise for links, which holds contrast in bright desert light.
Layout and navigation
A slim icon rail keeps every page in reach without a header bar, leaving the full width for the week's schedule. Icons are paired with labels, and the rail turns into a plain menu on phones.
The hero
The week itself is the hero: seven columns, each with what's on that day, today's column highlighted, and a countdown to the next open shop. Regulars only need that one screen, and newcomers learn when to show up before anything else.
Calls to action
The main action is 'Come to open shop' because that's the one thing almost everyone here does first. 'Sign up for Earn-a-Bike' is for people who need a bike, not a repair, and 'Drop off a bike' gives every carport in Tucson a use for the bike that's been sitting there since 2019.
Photography
Hands, wheels and grease: people truing wheels, women in a workshop with a bike between them, a kid learning to ride. Real mechanics doing real repairs, and no lycra racing shots, because almost nobody here rides for sport.
Accessibility
Both themes pass WCAG AA for all text. The rail icons always have text labels. The weekly schedule is real text in day columns, so screen readers read each day in order, and the countdown is written in plain words.
Type system
- DisplayAzeret MonoAzeret Mono is a monospace with real weight range, so it can be as heavy as a stamped frame number or as light as a parts-bin label.
- TextOverpassOverpass comes from US highway signage, the lettering every Tucson cyclist reads on the way down Speedway, and it sits comfortably next to a mono.
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 | 14.68:1 | AAA |
| Body text on cards | Aa | 13.26:1 | AAA |
| Secondary text | Aa | 6.64:1 | AA |
| Links | Aa | 8.66:1 | AAA |
| Button text | Aa | 9.2:1 | AAA |
| Accent label text | Aa | 8.83:1 | AAA |
| Text on dark bands | Aa | 15.89:1 | AAA |
| Muted text on dark bands | Aa | 8.08:1 | AAA |
| Text on brand bands | Aa | 9.2:1 | AAA |
| Muted text on brand bands | Aa | 5.6:1 | AA |
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 13.21:1 | AAA |
| Body text on cards | Aa | 15.17:1 | AAA |
| Secondary text | Aa | 5.79:1 | AA |
| Links | Aa | 5.78:1 | AA |
| Button text | Aa | 7.03:1 | AAA |
| Accent label text | Aa | 4.99:1 | AA |
| Text on dark bands | Aa | 13.21:1 | AAA |
| Muted text on dark bands | Aa | 7.17:1 | AAA |
| Text on brand bands | Aa | 7.03:1 | AAA |
| Muted text on brand bands | Aa | 4.75:1 | AA |
