Why Lumen looks the way it does
Lumen is a modern worship church site that opens on a dark photo of raised hands and a floating pill-shaped navigation bar. It uses a serif headline against a contemporary layout so the church feels current without losing warmth.
- Built for
- Young professionals, students and unchurched city residents who want to see the atmosphere of a Sunday before they walk in.
- Navigation
- Floating rounded pill that sits over the hero photo. On phones, a bottom tab bar plus a quick-links launcher.
- Pages
- Home, About, Visit, Services, Messages, Events, Give, Contact
- Hero
- Full-bleed photograph with the headline set over a dark scrim.
Typography
Fraunces at semibold sets the headlines. It is a soft, slightly wonky serif that looks editorial rather than churchy, and it holds up at the very large size used in the hero. Inter handles body copy, labels and the nav, which keeps small text sharp on dark photography.
Colour
The brand is a burnt amber (#A65709) on a warm off-white (#F6F2EA) page, with sage green (#3F6B58) as a quiet second colour. The site is set to open in its dark theme, near black (#0E0E0C) with a brighter amber (#E8A33D). Amber reads like stage light, which suits a church that centres its identity on live music.
Layout and navigation
The navigation is a white pill floating above the hero, with the Give button inside it as an amber pill. Content below is organised in tinted cards and a four-part strip for time, place, messages and first-time visitors. Everything stays in a single column of sections, so the page is quick to scan on a phone.
The hero
A full-bleed photo of worshippers with raised hands fills the first screen under a dark gradient. The headline 'Bring your whole self to worship.' runs across two lines at roughly 90 pixels. The eyebrow above it gives the neighbourhood and the Sunday time, which answers the first two questions a visitor has.
Calls to action
'Join us Sunday' is a solid amber pill and 'Live stream' is an outlined pill beside it, so the in-person visit is the clear first choice. The event chip under the buttons counts down to the next Night of Worship. Give stays visible in the top bar throughout.
Photography
The pictures are dark, grainy concert-style shots of hands and stage light. They tell a visitor what the room feels like. Faces are rarely shown, which protects privacy but means a real build should add a few clear portraits of staff so visitors know who will greet them.
Accessibility
Text is white or warm cream on a heavily darkened photo, and the dark theme's body pair measures about 17 to 1. White text on the amber button is about 5.3 to 1, which passes for normal-size text. The theme toggle in the pill nav lets visitors switch to a light page.
Type system
- DisplayFrauncesFraunces has enough personality to feel designed, and its serif shapes keep the headline warm on a black background.
- TextInterInter is neutral and sharp at small sizes, which matters for times and addresses sitting over dark imagery.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
