Raise the Roof Builders

Why it looks this way.

Typography

Headlines are Teko in capitals, a squared condensed face with the look of lumber stamps and job-site signage, which lets the hero number run nearly the full width of the screen. Body text is Overpass, based on the Highway Gothic of interstate signs: plain, sturdy, and easy for older eyes. Overpass Mono sets dates and start times like a tape measure.

• Teko headlines
• Overpass body text
• Overpass Mono labels

Color

Brand red is the color of Alabama clay and the rust on old Birmingham iron; the accent is hard-hat yellow, used sparingly for the moments that matter. The background is a cool concrete gray with a hint of green instead of a warm cream. In the dark theme yellow takes over as the main color, like a site light at dusk.

• Page #ECEEEB
• Cards #FFFFFF
• Text #17191B
• Brand #A3361C
• Accent #F2B705

Layout

A two-tier header: the thin top strip carries the three facts people phone the office to ask (when build days start, the repair line, when applications open), and the main bar holds six pages and the Check if you qualify button. Square corners, thick rules and flat cards keep the whole site feeling built rather than decorated.

Pages: Home, Get repairs, Volunteer, This season, Sponsor a build, Our crew

Hero

The opener is a single number, 12,180 volunteer hours last year, set across the full width in Teko and counted up once when it appears, with homes, roofs and ramps beneath it. Hours are honest evidence of the thing that makes this organization work: ordinary people turning up on Saturdays. For a homeowner deciding whether to trust strangers on their roof, the 642 homes beneath it does the rest.

Calls to action

The header button reads Check if you qualify, because homeowners are the reason the organization exists and many are unsure whether they can ask. The hero's button reads Sign up for a Saturday. Giving is worded as a concrete object, Sponsor a ramp, with a price beside it.

Photography

Volunteers mid-work in hard hats, and homeowners shown as themselves, never as a before-and-after. We kept to a handful of build photos and used each once; in a real build they should be the crew leaders' own phone pictures from Ensley and Pratt City porches. We avoided staged hammer-and-smile shots and any photo of a damaged house that would embarrass the people who live there.

Accessibility

Body text is 17px with roomy line height and a 66-character measure, and every pairing passes WCAG AA in both themes. The repair application asks plain questions and offers a phone number at the top, because many homeowners would rather talk. The counting number respects reduced-motion settings.