Why Greater Bethel looks the way it does
Greater Bethel is a West Baltimore congregation with a hundred and fifty-nine years of history and a lot of members over seventy. The site honours that history without becoming a museum, and its main action is a ride to church.
- Built for
- Long-time members and their families, many of them seniors; neighbors in Druid Heights and Upton; descendants and historians looking for the church's story.
- Navigation
- Centred masthead. The name sits centred like a printed masthead; pages run underneath. Signals heritage and calm.
- Pages
- Home, Worship, Church Van, Our History, Ministries, Sermons, Giving
- Hero
- a short action form as the hero: the one thing most visitors came to do (request a ride, ask for help, register a child) can be done before they scroll, with reassurance beside it. Variants: a = headline, reassurance and a photo on the left with the form as a raised card on the right; b = a tall photo carrying the headline, with the form and reassurance on a plain panel beside it; c = headline beside a photo, then the form laid out as one horizontal booking bar; a drawn neighbourhood map as the opener, with numbered pins for each stop or campus and a list of names, addresses and times beside it; pointing at a list item lights up its pin. Built for mobile pantries, multi-site churches and bus routes. Variants: a = map on the left, headline and stop list on the right; b = headline across the top, a wide map, and the stops as columns beneath; c = a route: stops as a connected timeline beside a map with the path drawn between pins; A single verse or sentence set enormous as the opening statement, with its reference, a short supporting line and one action. Variants: a = the quote fills the width with a hanging quotation mark; b = the quote beside a tall photograph; c = the reference becomes the architecture, with the book name and a giant outlined chapter and verse in the left column
Typography
Libre Caslon Display is a single elegant weight, so it is set large and given air rather than made bold. Caslon is the face of the Declaration and of early Black newspapers like Freedom's Journal, which suits a church founded by freedmen two years after the war. The body is Libre Caslon Text at 18px, so the site reads like a well-printed order of service, and Schibsted Grotesk sets the labels, dates and times the way a hymn board sets its numbers.
Color
The red is Baltimore brick, the row houses along Druid Hill Avenue and the church's own 1874 walls. The green is the copper patina on the steeple cap, used for links and small accents. The background is the soft gray-white of the marble front steps that every house on the block once scrubbed on Saturdays. In the dark theme the brick warms to a terracotta pink so it still reads on a near-black with a violet cast.
Layout and navigation
A centred masthead sets the church's name like the top of a printed bulletin, with the pages running underneath in a single calm row. There are no dropdowns and no hidden menus on desktop. Everything a member looks for on a Saturday night is one click from the masthead.
The hero
The opening is Habakkuk 2:2, the verse carved over the 1911 doors, set beside a photograph of the Gospel Choir in their anniversary robes. It tells a visitor what kind of church this is before any button does, and it is the verse the congregation reads aloud every Founders' Day.
Calls to action
The masthead button is 'Ride the church van' because the single biggest reason members miss Sunday is getting there. The ride page opens with the request form itself. 'Worship with us at 10:45' names the hour, and giving lives on its own page.
Photography
Photographs are of Black congregations in robes, at the pulpit and in Bible study, including a woman pastor, since this congregation has been led by one since 2015. Older faces lead, because they lead here: the van section shows a driver, not a stock couple. The history page uses the few archive-feeling images we have and says plainly that the album is still being scanned.
Accessibility
Body text is 18px with contrast above 9:1. Phone numbers are written out in full on every page because many members would rather call than click. The van form asks only for what a driver needs and offers a phone number right beside it.
Type system
- DisplayLibre Caslon DisplayCaslon was the type of the American founding documents and of the first Black-owned newspapers; at display size it has the dignity of a cornerstone.
- TextLibre Caslon TextThe text cut of the same Caslon, so the whole page reads like one well-printed order of service.
- AccentSchibsted GroteskA news grotesque for labels, times and dates, the way a hymn board or a bulletin masthead sets its numbers.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.46:1 | AAA |
| Body text on cards | Aa | 17.1:1 | AAA |
| Secondary text | Aa | 5.66:1 | AA |
| Links | Aa | 7.81:1 | AAA |
| Button text | Aa | 8.64:1 | AAA |
| Accent label text | Aa | 7.13:1 | AAA |
| Text on dark bands | Aa | 15.46:1 | AAA |
| Muted text on dark bands | Aa | 8.13:1 | AAA |
| Text on brand bands | Aa | 8.64:1 | AAA |
| Muted text on brand bands | Aa | 5.55:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.51:1 | AAA |
| Body text on cards | Aa | 14.07:1 | AAA |
| Secondary text | Aa | 6.92:1 | AA |
| Links | Aa | 8.68:1 | AAA |
| Button text | Aa | 8.97:1 | AAA |
| Accent label text | Aa | 9.72:1 | AAA |
| Text on dark bands | Aa | 16.52:1 | AAA |
| Muted text on dark bands | Aa | 8.29:1 | AAA |
| Text on brand bands | Aa | 8.97:1 | AAA |
| Muted text on brand bands | Aa | 5.52:1 | AA |
HabakkukMake It Plain