Why Chapel Radio looks the way it does
Chapel Radio is a podcast and media ministry site with a pink-grey hero card, a microphone photo and a big sans-serif headline. It looks like a streaming app, so listeners know what to do within a second.
- Built for
- Regular listeners of devotionals and call-in shows, new podcast subscribers, and ministries looking for a platform to syndicate teaching.
- Navigation
- Sticky frosted bar with the full menu and a Give button. On phones, a bottom tab bar plus a quick-links launcher.
- Pages
- Home, About, Visit, Shows, Podcast, Events, Support, Contact
- Hero
- Headline beside a framed photo, with a small inset and the next-gathering chip.
Typography
Space Grotesk Bold is used for the headline and body copy, with small labels in a monospace-like spacing. The shapes are geometric and technical, in keeping with audio and software. 'Listen. Learn. Share.' fits on two lines at about 90 pixels.
Colour
The page uses cool off-white (#F4F6F9) with near-black text (#0D0F14), broadcast red (#C7261A) as the brand colour and a teal (#0F7F74) accent for the live indicator. The hero panel is a soft rose tint. The dark theme is first and uses a coral red (#FF5A4E). Red is the colour of an on-air light, so it signals live content straight away.
Layout and navigation
A white bar has a red circle logo, the name, six links and a red Support button. Below are rounded content cards for shows and episodes. The structure follows podcast apps, with a clear list of shows and a latest episode, so a regular listener finds a familiar pattern.
The hero
The hero is split. On the left is the eyebrow 'On air 24/7. Free on every app.', the headline and a short line on devotionals and call-in shows. On the right is a tall photo of a microphone with a smaller concert image overlapping. A chip shows the next live show.
Calls to action
'Listen now' is a solid red button and 'All shows' is outlined. The first action plays audio, which is the reason people come. Support replaces Give in the header, which suits a listener-funded station.
Photography
The main photo is a macro shot of a microphone with soft background light, which communicates audio instantly. The overlapping concert image adds energy. A real station should add portraits of hosts, since listeners attach to voices and want a face to go with them.
Accessibility
Near-black on off-white is about 17.7 to 1, and white on the red button about 5.6 to 1. Audio content should always have transcripts, and a real build should add them next to each episode. The theme toggle supports listeners using the site at night.
Type system
- DisplaySpace GroteskSpace Grotesk looks like the interface of an audio app, which tells visitors this is a media product.
- TextSpace GroteskUsing the same family for body text keeps the interface consistent, and its clear forms help episode titles scan quickly.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
