Why Ashworth Street looks the way it does
A website for a church that is five Sundays old. It opens with a letter, because in a new church the pastor is the first thing a visitor is really weighing up, and every page is honest about how small and new it all is.
- Built for
- Lawrenceville and Bloomfield neighbors in their twenties to forties, many of them unchurched or out of the habit, plus Christians across the city wondering whether to join a launch team.
- Navigation
- Contents column. A right-hand contents list tracks where you are on long pages, the way a well-made book or report does.
- Pages
- Start here, Sundays, Why a new church, Tuesday tables, What we believe, Help us start
- Hero
- A personal letter from the pastor or director as the opening: a greeting, two or three short paragraphs and a handwritten-style signature, with their portrait. Variants: a = the letter on a sheet with the portrait overlapping its left edge; b = an editor's-letter layout with a huge greeting, two text columns and a small captioned portrait
Typography
Literata was drawn for reading long text on screens, and here it carries a pastor's letter set like an editor's page in a neighborhood paper. IBM Plex Sans does the practical work underneath: plain and slightly industrial, like the mill buildings along the river. Isaac's signature is set in Nothing You Could Do, a loose handwriting face, and appears exactly once.
Color
The red is Lawrenceville brick, the color of every second rowhouse on Ashworth Street, and the gold is the paint on the Allegheny bridges, used only for small marks. The background is a cool stone gray, close to a Pittsburgh sky in October. Dark mode turns the brick toward the glow of a sodium streetlight.
Layout and navigation
A contents column on the right tracks where you are on each page, the way a well-made report does. Newcomers to a church plant read everything before they come, and long honest pages with a visible table of contents respect that. The one button in that column always says Come Sunday at 4:30.
The hero
The site opens with a letter from Isaac Danquah, set like an editor's letter with a huge greeting, two columns and a small portrait. A new church has no building and no history to show off. What it has is a person and a reason, so we let him say it in his own words.
Calls to action
Come Sunday at 4:30, Pull up a chair on Tuesday, Get coffee with Isaac, Join the launch team. Each one names a real thing at a real time, which matters when the church does not have a sign out front yet.
Photography
Pictures are few and modest on purpose: streets that look like Lawrenceville, a dinner table, Bibles with pencil marks. We avoided stage lights and crowds, because a church of sixty in a lodge hall should not look like an arena.
Accessibility
Body text is 17 pixels with generous line spacing and passes AAA contrast in the light theme. The contents column is a labeled landmark that screen readers can jump to, and every map has its address, parking and transit written out as plain text.
Type system
- DisplayLiterataA book face designed for long reading on screens, so a pastor's letter feels like a letter and still holds up as a headline.
- TextIBM Plex SansPlain, engineered and a little industrial, like the mill buildings along the Allegheny, with no airs.
- AccentNothing You Could DoIsaac's signature, written the way he signs the birthday cards he leaves on people's porches.
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.92:1 | AAA |
| Body text on cards | Aa | 15.25:1 | AAA |
| Secondary text | Aa | 5.57:1 | AA |
| Links | Aa | 6.19:1 | AA |
| Button text | Aa | 7.28:1 | AAA |
| Accent label text | Aa | 7.91:1 | AAA |
| Text on dark bands | Aa | 13.92:1 | AAA |
| Muted text on dark bands | Aa | 7.5:1 | AAA |
| Text on brand bands | Aa | 7.28:1 | AAA |
| Muted text on brand bands | Aa | 4.82:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.8:1 | AAA |
| Body text on cards | Aa | 13.35:1 | AAA |
| Secondary text | Aa | 6.6:1 | AA |
| Links | Aa | 7.18:1 | AAA |
| Button text | Aa | 7.47:1 | AAA |
| Accent label text | Aa | 10.21:1 | AAA |
| Text on dark bands | Aa | 15.78:1 | AAA |
| Muted text on dark bands | Aa | 8.02:1 | AAA |
| Text on brand bands | Aa | 7.47:1 | AAA |
| Muted text on brand bands | Aa | 4.85:1 | AA |