Why Hollow Oak looks the way it does
A site for a small unprogrammed Quaker meeting that has to explain, gently and without jargon, what happens in an hour of silence. Everything is pared back: one typeface pair, two quiet colors, generous space, and no decoration that a plain-dressing Friend of 1850 would have raised an eyebrow at.
- Built for
- Curious neighbors, Antioch and Wright State students, seekers coming from other churches, and the meeting's own forty or so regular attenders and members.
- 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, Meeting for Worship, What Friends hold, First Day School, Peace and witness, The meetinghouse
- Hero
- 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
Spectral at a light weight carries the headlines. It was drawn for long reading on screens, and at 300 it reads like a well-set Quaker pamphlet. Source Sans 3 does the work underneath: plain, open and unremarkable on purpose, the way Friends talk about plainness of speech.
Color
The palette comes from iron-gall ink and undyed linen: a blue-black slate for links and actions, a soft gray-green paper for the background, and one note of oak-leaf ochre used sparingly. The dark theme moves to a night-time slate with the ink lifted to a pale blue so links stay legible.
Layout and navigation
The overlay menu keeps the first screen empty except for the words. A Quaker meeting is mostly waiting, and the site starts the same way: one button, a lot of space, and the full list of pages one tap away when you want it.
The hero
The opening is a short manifesto of plain statements, each on its own ruled line, because the most common question a first-time visitor has is 'what actually happens?' Five sentences answer it before any photograph or sermon could.
Calls to action
The main action is 'Sit with us on First Day'. It uses the meeting's own word for Sunday and the verb people actually do. The secondary actions ('Find the meetinghouse', 'Write to the clerk') name a real person and a real building.
Photography
Very few people appear, and none of them are performing. Woodland paths from the Glen, morning fog over the meadow, Wendell's bicycle shop, children outdoors at First Day School. There is no photo of a pulpit or a stage because the meetinghouse has neither. The one gap is the meetinghouse itself: we have left the woodland in that slot until someone can photograph the barn and the benches in winter light.
Accessibility
Body text is set at 18px with a 62-character measure. Every link is underlined, so nothing depends on color alone. The menu traps focus while open and returns it to the button when closed, and the meeting's hearing-loop and step-free details are written out in full on the meetinghouse page.
Type system
- DisplaySpectralSpectral is a book face drawn for reading on screens; at a light weight it is quiet enough to sit beside long stretches of white space without raising its voice.
- TextSource Sans 3A plain, open sans with no mannerisms, chosen so the body copy stays out of the way of the words.
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.05:1 | AAA |
| Body text on cards | Aa | 14.31:1 | AAA |
| Secondary text | Aa | 5.6:1 | AA |
| Links | Aa | 8.29:1 | AAA |
| Button text | Aa | 9.67:1 | AAA |
| Accent label text | Aa | 4.73:1 | AA |
| Text on dark bands | Aa | 13.05:1 | AAA |
| Muted text on dark bands | Aa | 7.13:1 | AAA |
| Text on brand bands | Aa | 9.67:1 | AAA |
| Muted text on brand bands | Aa | 6.29:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 13.93:1 | AAA |
| Body text on cards | Aa | 12.63:1 | AAA |
| Secondary text | Aa | 6.38:1 | AA |
| Links | Aa | 9.0:1 | AAA |
| Button text | Aa | 9.62:1 | AAA |
| Accent label text | Aa | 9.51:1 | AAA |
| Text on dark bands | Aa | 15.05:1 | AAA |
| Muted text on dark bands | Aa | 7.7:1 | AAA |
| Text on brand bands | Aa | 9.62:1 | AAA |
| Muted text on brand bands | Aa | 5.68:1 | AA |
