Why Lantern Houses looks the way it does
A network of nine house churches has an unusual problem: it cannot publish its own addresses. The whole site is built around a drawn map of neighborhoods and one honest request, 'Ask for an address', so a stranger can get to someone's dinner table without anyone's home ending up on Google.
- Built for
- Portlanders who are wary of big churches, people new to the city, and potential hosts deciding whether they could open their living room once a week.
- Navigation
- Corner controls. Name in one corner, menu in the opposite corner, primary action in a third. The page itself has no header bar.
- Pages
- Home, The houses, An evening, Ask for an address, Host a house, How we're knit
- 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
Typography
Familjen Grotesk carries the headings. It is a grotesque with a little hand-cut irregularity, so it feels like a sign someone lettered by hand. Newsreader sets the body text with the warmth of a printed letter, and DM Mono handles nights and neighborhoods like a transit timetable.
Color
Deep Douglas-fir green and a lantern amber, set on a rainy blue-gray paper. Portland is overcast nine months a year, and the brightest thing on a November street is a lit window. The dark theme leans into exactly that: a near-black blue with the amber glowing.
Layout and navigation
Corner controls keep the top of each page clear for the map and photographs. The name sits in one corner, the menu in another, and 'Ask for an address' is always one tap away, because it is the only step a newcomer really has to take.
The hero
The home page opens on a drawn map of the city with nine pins: one per house, labeled by neighborhood and night, never by street address. Pointing at a house lights its pin. It answers 'is there one near me?' before anything else.
Calls to action
'Find a house near you' and 'Ask for an address' describe exactly what happens next: a host texts you their address and what is for supper. Hosting gets its own quieter action, 'Talk about hosting', because nobody should be pushed into opening their home.
Photography
Sofas, rugs, guitars and crowded tables. Every photo is of a room that could be a real living room, with people sitting down, because that is what an evening is.
Accessibility
Each house lists its stairs, pets and step-free entry so people can choose before they ask. The map is backed by a plain list that works with a keyboard and a screen reader, and the rounded pill buttons have large tap targets on phones.
Type system
- DisplayFamiljen GroteskFamiljen Grotesk has the slightly hand-cut warmth of Scandinavian street signage; set tight it reads friendly and direct, like a note taped to a front door.
- TextNewsreaderA soft, optical-size serif for the body so longer explanations feel like a letter from a host rather than a product page.
- AccentDM MonoNights, neighborhoods and times set in mono, like the labels on a bus timetable.
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 | 13.61:1 | AAA |
| Body text on cards | Aa | 15.2:1 | AAA |
| Secondary text | Aa | 5.85:1 | AA |
| Links | Aa | 6.94:1 | AA |
| Button text | Aa | 8.27:1 | AAA |
| Accent label text | Aa | 8.03:1 | AAA |
| Text on dark bands | Aa | 13.61:1 | AAA |
| Muted text on dark bands | Aa | 7.31:1 | AAA |
| Text on brand bands | Aa | 8.27:1 | AAA |
| Muted text on brand bands | Aa | 5.47:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.14:1 | AAA |
| Body text on cards | Aa | 13.72:1 | AAA |
| Secondary text | Aa | 6.74:1 | AA |
| Links | Aa | 8.78:1 | AAA |
| Button text | Aa | 9.14:1 | AAA |
| Accent label text | Aa | 10.12:1 | AAA |
| Text on dark bands | Aa | 16.2:1 | AAA |
| Muted text on dark bands | Aa | 8.14:1 | AAA |
| Text on brand bands | Aa | 9.14:1 | AAA |
| Muted text on brand bands | Aa | 5.51:1 | AA |
