Why Northgate looks the way it does
A website for a four-campus church where the first question is always which building, and the second is what to do with the kids. Campus and service times sit one tap from every page, and kids' pre-registration is treated as a front-door task.
- Built for
- Young families and newcomers across north Fulton and south Forsyth, most of them arriving from a search on a phone, plus regulars who want their own campus's times and a serve shift.
- Navigation
- Tabbed app bar. Pages behave like tabs in an app: a sticky segmented bar under a compact header.
- Pages
- Home, Campuses, First Sunday, Kids & Students, Watch, Serve, Give
- 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; livestream-first: the opening screen is the stream itself, with a live or next-stream badge and countdown, a play control, the service chapters and a route to past services, for churches whose online congregation is as real as the room. Variants: a = headline above a large screen with the chapter list in a side panel; b = a full-width cinematic screen with the headline over it and chapters running beneath as a strip; c = headline and a chapter timeline in a left column beside the screen; Three doors instead of one headline: visitors pick the path that fits them (for example New here, Need help, Want to help)
Typography
Red Hat Display for headings, Red Hat Text for reading and Red Hat Mono for times and labels. One family in three cuts keeps four campuses visibly the same church, and the mono gives service times the steadiness of a departure board. The display face has open, round letters that still read on a lobby screen at the back of a high-school auditorium.
Color
The red comes from Georgia clay along GA-400 in the cuts by the Windward exit, deepened until white type on it passes AA. It sits on a cool blue-gray because the buildings are modern and the photography is full of stage light. Marigold is held back for small highlights. In dark mode the red lifts toward coral and the background goes to the navy of a darkened auditorium.
Layout and navigation
A tabbed bar works like the church app most members already use, with seven tabs that stay put under a compact header. Big multisite sites tend to hide things in mega-menus, and here every section is one tap away on a phone. The nav button always says Pick your campus, because that is the decision every visitor has to make first.
The hero
Three doors replace a headline: a first Sunday, kids and students, and serving. Each is a real photograph from the kind of room it leads to. Directly underneath, one table shows every service at every campus, so nobody has to open four pages to compare times.
Calls to action
The words describe the task: Pick your campus, Pre-register your kids, Tell us you're coming, Find a serve shift. Kids' pre-registration has a hero form of its own, because parents told us the check-in line was the most stressful five minutes of a first visit.
Photography
Real rooms with stage light, kids' classrooms with chairs that fit them, volunteers in team shirts. We avoided the arena-crowd silhouettes that make every large church look the same. Campus pastors are shown as people, smiling and out of costume.
Accessibility
Every text pairing passes WCAG AA in both themes. The schedule is a real table with headers, the tabs are a labeled navigation landmark, and the live stream lists its captions and chapter times as text. Buttons are at least 44 pixels tall for thumbs in a parking lot.
Type system
- DisplayRed Hat DisplayA friendly geometric sans with open counters that stays clear on a lobby screen, a campus sign and a phone in the parking lot.
- TextRed Hat TextThe text cut of the same family, drawn with more space for small sizes, so four campuses read as one voice.
- AccentRed Hat MonoService times, campus codes and labels, set like a departure board.
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.32:1 | AAA |
| Secondary text | Aa | 5.74:1 | AA |
| Links | Aa | 5.46:1 | AA |
| Button text | Aa | 5.31:1 | AA |
| Accent label text | Aa | 9.45:1 | AAA |
| Text on dark bands | Aa | 15.61:1 | AAA |
| Muted text on dark bands | Aa | 8.16:1 | AAA |
| Text on brand bands | Aa | 5.31:1 | AA |
| Muted text on brand bands | Aa | 4.61:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.96:1 | AAA |
| Body text on cards | Aa | 14.45:1 | AAA |
| Secondary text | Aa | 7.0:1 | AAA |
| Links | Aa | 7.53:1 | AAA |
| Button text | Aa | 7.68:1 | AAA |
| Accent label text | Aa | 11.11:1 | AAA |
| Text on dark bands | Aa | 16.85:1 | AAA |
| Muted text on dark bands | Aa | 8.42:1 | AAA |
| Text on brand bands | Aa | 7.68:1 | AAA |
| Muted text on brand bands | Aa | 4.99:1 | AA |
