Why Selam looks the way it does
A bilingual site for an Ethiopian evangelical congregation where the parents pray in Amharic and their children mostly answer in English. Every heading, button and service time appears in both languages, and the site is organized around how the church really lives: Sunday services, Thursday home fellowships, Friday prayer and Saturday school.
- Built for
- Ethiopian and Eritrean families in Montgomery and Prince George's counties, newly arrived Ethiopians looking for a church that sounds like home, and second-generation teenagers and spouses who worship in English.
- Navigation
- Classic top bar. Logo left, pages right, one action. Familiar to every visitor.
- Pages
- Home, Sundays, Home fellowships, Saturday school, Prayer, About us, Give
- Hero
- 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; An asymmetric mosaic of five photographs with the headline locked into one cell of the grid, so the first screen shows real people before it says anything. Variants: a = headline block top-left beside one large photo, three smaller below; b = a tall photo leads and the headline sits low on the right; c = a triptych, with the headline in the middle panel between stacked photos; 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
Alegreya was drawn for literature and carries the rhythm of a broad-nib pen, which is how Ethiopic has been written for centuries, so the two scripts look related rather than pasted together. Amharic text is set in Noto Sans Ethiopic, chosen for its clear fidel at small sizes on cheap phones. Alegreya Sans, from the same family, does the body copy.
Color
The brown is a fresh coffee roast, the smell of every Ethiopian Sunday afternoon. The yellow is the adey abeba, the daisy that covers the highlands at New Year in September. The background is the cool off-white of a cotton netela rather than cream. In dark mode the roast becomes the page and the daisy yellow becomes lamplight.
Layout and navigation
A classic top bar, because many in this congregation are older, browse on phones and expect menus where menus usually are. The language switch sits in the header, and choosing አማርኛ swaps every heading, button and time without reloading the page.
The hero
The home page opens with a mosaic of photographs of people worshipping, studying in living rooms and drawing in Sunday school, with the headline locked into one cell. For a diaspora church, seeing faces that look like your family is the first and most important answer.
Calls to action
The nav button is Join a home fellowship, not Give, because the Thursday living-room groups are where newcomers actually become part of this church. Other buttons are equally specific: Enroll your child for Saturday school, Send a prayer request, Give your tithe, each in both languages.
Photography
African worship, white garments, Bibles open on sofas and children at a lesson table. We avoided generic stock crowds; where a photo shows a room, it is a room the size of this church.
Accessibility
Body text is 18px. Amharic is marked with the correct lang attribute so screen readers switch voice, and each language has its own font stack. Every color pair passes WCAG AA in both themes, and the pill buttons have a visible focus ring.
Type system
- DisplayAlegreyaA calligraphic serif with the movement of a broad pen, which sits comfortably beside hand-lettered Ethiopic.
- TextAlegreya SansThe sans from the same family, warm and open, so English and Amharic paragraphs share one tone of voice.
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.61:1 | AAA |
| Body text on cards | Aa | 17.25:1 | AAA |
| Secondary text | Aa | 5.66:1 | AA |
| Links | Aa | 9.94:1 | AAA |
| Button text | Aa | 10.98:1 | AAA |
| Accent label text | Aa | 7.53:1 | AAA |
| Text on dark bands | Aa | 15.61:1 | AAA |
| Muted text on dark bands | Aa | 8.2:1 | AAA |
| Text on brand bands | Aa | 10.98:1 | AAA |
| Muted text on brand bands | Aa | 6.97:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.85:1 | AAA |
| Body text on cards | Aa | 14.49:1 | AAA |
| Secondary text | Aa | 7.0:1 | AAA |
| Links | Aa | 10.28:1 | AAA |
| Button text | Aa | 10.43:1 | AAA |
| Accent label text | Aa | 11.32:1 | AAA |
| Text on dark bands | Aa | 16.7:1 | AAA |
| Muted text on dark bands | Aa | 8.33:1 | AAA |
| Text on brand bands | Aa | 10.43:1 | AAA |
| Muted text on brand bands | Aa | 6.01:1 | AA |