Why Vesper looks the way it does
A dark-first site for an evening church whose people work while everyone else is at brunch. It leads with the time, because the time is the whole point, and keeps the tone quiet, warm and a little late-night.
- Built for
- People roughly 22 to 35 in East Nashville and nearby: hospitality and healthcare shift workers, session musicians, grad students and newcomers to the city.
- Navigation
- Full-screen menu. Only a Menu button shows; it opens a full-screen index with large type. Keeps the first screen uncluttered.
- Pages
- Home, Sunday nights, Tables, Listen, Talk to someone, What is Vesper
- 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; a short manifesto as the opener: four to six plain declarative lines set very large, one after another, followed by a small closing paragraph and one action. Variants: a = left-aligned lines each sitting on a full-width rule; b = lines stepping in like a staircase with accented lines in the link colour and no rules; c = right-aligned lines with a vertical rule and side label, accented lines underlined with a heavy stroke
Typography
Big Shoulders Display, set in heavy capitals, comes from Chicago's industrial signage and reads like a venue marquee on Gallatin Avenue. Against it, Source Serif 4 sets the reading text at 18 pixels: calm and bookish, the voice of evening prayer. Spline Sans Mono handles times and labels like a setlist.
Color
The site opens dark. The amber is the color of sodium streetlights and candle flame, and the rose accent comes from the last light over the Cumberland. The light theme deepens the amber to burnt orange so it still passes contrast on pale gray, rather than simply inverting.
Layout and navigation
Only the logo, the Tables action and a Menu button show, and the menu opens a full-screen index in large type. The first screen stays uncluttered, like walking into a dim room, and the site has few enough pages that a full-screen menu is quick.
The hero
A block of amber carries 'SUN 7:30 PM' across the full width, because for this audience the time is the news: a church that meets after the brunch shift. The headline beneath says who it's for in four words.
Calls to action
The constant action is 'Get a seat at a Table', since a dinner in a home is how most people move from visiting to belonging. Other actions stay concrete: 'Come Sunday at 7:30', 'Listen to last Sunday', 'Talk to someone'.
Photography
Candlelight, hands passing communion, people on steps after dark. No stage lights or crowds, because the room holds 180 and feels smaller. The home page uses a numbered contact sheet, one Sunday night start to finish, shot by a member.
Accessibility
The dark theme is tuned for evening reading with off-white text rather than pure white to reduce glare, and both themes meet AA. Motion is minimal. The care page puts 988 in the first lines, and the visit page names the ramp, the hearing loop and the large-print liturgy.
Type system
- DisplayBig Shoulders DisplayDrawn from Chicago's industrial signage; tall, narrow and loud enough to read across a dark room, like a venue marquee on Gallatin Avenue.
- TextSource Serif 4A calm, bookish serif that slows the reader down, the voice of an evening liturgy rather than an event flyer.
- AccentSpline Sans MonoMonospaced times and labels read like a setlist taped to a monitor.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.16:1 | AAA |
| Body text on cards | Aa | 13.5:1 | AAA |
| Secondary text | Aa | 6.73:1 | AA |
| Links | Aa | 9.01:1 | AAA |
| Button text | Aa | 9.2:1 | AAA |
| Accent label text | Aa | 7.92:1 | AAA |
| Text on dark bands | Aa | 16.05:1 | AAA |
| Muted text on dark bands | Aa | 8.07:1 | AAA |
| Text on brand bands | Aa | 9.2:1 | AAA |
| Muted text on brand bands | Aa | 5.6:1 | AA |
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.94:1 | AAA |
| Body text on cards | Aa | 16.8:1 | AAA |
| Secondary text | Aa | 5.69:1 | AA |
| Links | Aa | 5.5:1 | AA |
| Button text | Aa | 6.03:1 | AA |
| Accent label text | Aa | 6.51:1 | AA |
| Text on dark bands | Aa | 14.94:1 | AAA |
| Muted text on dark bands | Aa | 7.81:1 | AAA |
| Text on brand bands | Aa | 6.03:1 | AA |
| Muted text on brand bands | Aa | 4.63:1 | AA |
