Why Upper Room looks the way it does
Upper Room is an independent campus ministry for students at a historically Black university in Durham. Most of what it does happens on three nights and one Sunday morning, so the site is built around those times and the practical things a freshman without a car needs: a ride to church, a study in their own hall and someone to talk to.
- Built for
- First-years and transfer students looking for a church home away from home, upperclassmen who lead the studies, worried parents, and alumni who come back every Homecoming.
- Navigation
- Tabbed app bar. Pages behave like tabs in an app: a sticky segmented bar under a compact header.
- Pages
- Home, Thursdays, Sunday van, Dorm studies, Talk to someone, Alumni
- Hero
- a two-tone split: one half is a solid block of the brand colour carrying a giant date, time or short word (such as SUN 10:30), and the other half holds the headline, a short lead, the main action and a photo. Variants: a = block on the left at full height with the giant type stacked, content and photo on the right; b = the block runs across the top with the giant type on one line, and headline, lead and photo sit in columns beneath; c = a narrow block on the left, the text in the middle and a photo bleeding off the right edge; 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
Typography
Darker Grotesque at 800 is short, wide-shouldered and loud, the kind of lettering you see on a homecoming flyer taped to a dorm door. Figtree keeps the body copy relaxed and very legible on a cracked phone screen. Space Mono sets the times, rooms and van stops so they look like a class schedule, which is how students already scan for when things happen.
Color
The violet comes from choir robes and the stoles at Sunday service, and the marigold from the lamp in the upstairs front window that students use as a landmark at night. The neutrals are warm with a slight rose bias rather than gray. In dark mode the violet lifts to a soft lilac so it stays readable on a near-black plum, and the marigold is kept for small signals.
Layout and navigation
The tabbed app bar behaves like the apps students live in: six tabs, always in reach, with the one practical action (booking a van seat) pinned beside them. Pages are short and each one answers one question, so nobody has to scroll past history to find the Thursday address.
The hero
The opening screen is a block of violet carrying THU 8:30 in huge type, because the time is the single fact a new student needs. The headline and a short, honest description sit in the middle column, and a photo of students praying in the front room bleeds off the right edge, so the first thing you see is people your age in a real living room.
Calls to action
Every button says exactly what will happen: Come up Thursday, Book a van seat, Join a dorm study, Text a chaplain. The giving button is aimed at alumni and names a real, small thing (finals-week breakfast) instead of a general appeal.
Photography
Young Black students in living rooms, libraries and choir lofts, never stock crowds under stage lights. Portraits of student leaders are warm and close, and the choir photographs carry the gospel tradition many students grew up in.
Accessibility
Text contrast meets WCAG AA in both themes, every time is written out in full, and the van form works with a keyboard and screen reader. The Talk to someone page puts the 988 crisis line and campus counseling hours above the fold, because some visitors arrive at 2 AM.
Type system
- DisplayDarker GrotesqueDarker Grotesque has the squat, punchy shapes of a step-show banner or a homecoming flyer, and it still reads cleanly at phone size.
- TextFigtreeFigtree is round, friendly and very legible, close to how students actually text each other.
- AccentSpace MonoTimes, room numbers and van stops set like a printed class schedule.
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.94:1 | AAA |
| Body text on cards | Aa | 17.6:1 | AAA |
| Secondary text | Aa | 5.83:1 | AA |
| Links | Aa | 9.11:1 | AAA |
| Button text | Aa | 10.06:1 | AAA |
| Accent label text | Aa | 10.15:1 | AAA |
| Text on dark bands | Aa | 15.94:1 | AAA |
| Muted text on dark bands | Aa | 8.25:1 | AAA |
| Text on brand bands | Aa | 10.06:1 | AAA |
| Muted text on brand bands | Aa | 6.41:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.97:1 | AAA |
| Body text on cards | Aa | 14.5:1 | AAA |
| Secondary text | Aa | 7.01:1 | AAA |
| Links | Aa | 8.66:1 | AAA |
| Button text | Aa | 8.82:1 | AAA |
| Accent label text | Aa | 11.7:1 | AAA |
| Text on dark bands | Aa | 16.81:1 | AAA |
| Muted text on dark bands | Aa | 8.4:1 | AAA |
| Text on brand bands | Aa | 8.82:1 | AAA |
| Muted text on brand bands | Aa | 5.42:1 | AA |