Why Cornerstone looks the way it does
Cornerstone is a traditional congregation site built around a dark, full-width photo of stained glass and a cream page that feels like a printed bulletin. It leads with service times and a first-visit path because that is what a newcomer opens a church site to find.
- Built for
- Established congregations in small towns and suburbs, including older members who want service times fast and younger families checking the church out before a first visit.
- 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, Ministries, Sermons, Events, Give, Contact
- Hero
- Full-bleed photograph with the headline set over a dark scrim.
Typography
Headlines are set in Playfair Display Bold, a high-contrast serif with the formal weight of a hymnal title page. Body copy is Source Sans 3, which stays clear at 17 to 18 pixels in sermon descriptions and event lists. The two faces separate cleanly, so a headline reads as a statement and the paragraph under it reads as information.
Colour
The page sits on cream (#FAF6EE) with deep ink brown (#2A2118) for text and a burgundy brand colour (#7A2E2A) on the Give and Plan your visit buttons. Antique gold (#C79A3B) is kept for small details such as the live status dot. Burgundy and gold are traditional church colours, so the site looks familiar to the people it serves without looking dated.
Layout and navigation
A single top bar holds the logo, six plain nav labels and one filled Give button. Under the hero sits a four-cell strip for When, Where, Sermons and First time, so service times are visible without scrolling far. Cards below use rounded corners and white surfaces on the cream background.
The hero
The hero is a full-bleed photograph of stained-glass windows under a dark overlay, with the headline 'Come as you are. Stay as family.' set large on the left. The overlay keeps the white text readable across the brightest panes of glass. A small pill underneath counts down to the next Sunday worship.
Calls to action
The main button reads 'Plan your visit' and sits beside a quieter outlined 'Watch online'. Give is always in the header in the brand burgundy. A floating Quick links button gives mobile visitors a shortcut to times, directions and giving.
Photography
The photos are warm, low-light interior shots of the sanctuary, which suit a congregation that wants to be seen as rooted and reverent. A real church would replace these with its own building and people, since regulars notice a stock photo of someone else's windows. Candid shots of coffee hour or the children's wing would soften the formality.
Accessibility
Body text on cream measures about 14.7 to 1 and the dark mode pair about 15 to 1, so long reading is comfortable. The burgundy button carries white text at more than 9 to 1. A moon button in the header switches light and dark themes, and the hero overlay protects the text over the photograph.
Type system
- DisplayPlayfair DisplayPlayfair Display gives the headline the dignity of a formal invitation, which fits a church with decades of history.
- TextSource Sans 3Source Sans 3 is plain and open, so announcements, times and addresses stay legible for readers of every age.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
