Why Deep Well looks the way it does
Most water charities count wells drilled. Deep Well Partners counts wells still pumping, because a third of hand pumps across East Africa break within a few years. The site is built around that one honest number and the unglamorous work that keeps it high: mechanics, spare parts and a tool yard in East Lubbock.
- Built for
- West Texas churches and oilfield families, retired drillers and tradespeople, and donors who want proof that their well still works.
- Navigation
- Slim icon rail. A narrow fixed rail with a vertical wordmark leaves the full width for photography and type.
- Pages
- Home, Wells, The yard, Drill trips, Give, Who we are
- Hero
- One impact number is the hero (for example meals served this year), with a line naming the unit, a sentence of context, a row of three supporting figures and one photograph. The number counts up once when it first comes into view. Variants: a = the number spans the full width above the photo and figures; b = photo on the left, number and a ledger of figures on the right; c = the number sits on a coloured panel that overlaps the bottom of a wide photograph
Typography
Chivo at 800 weight is set tight and large, like lettering stencilled on a rig. Newsreader carries the body copy so the long explanations read like a careful report rather than a brochure. JetBrains Mono sets every well ID, depth and yield, so the numbers look like they came off an inspection sheet, which they did.
Color
Two colors from the work itself: deep well-water blue and the safety yellow painted on every rig and pump stand. The neutrals lean cool, the color of caliche dust on a Lubbock pickup. In dark mode the blue lifts toward clear water and the yellow is kept for small signals only.
Layout and navigation
The icon rail stays put on the left so a donor can jump to the well list or the yard at any point. It suits a site with six clear destinations and lots of tables, where a top bar would compete with the data.
The hero
The hero leads with 412: the wells that pumped water at their last inspection. The yellow panel overlaps the photo the way a tag is wired to a pump handle. The supporting figures admit the 26 under repair, because honesty about broken wells is the whole point.
Calls to action
The main action is Fund a repair, not Build a well, because repairs are what this ministry actually needs most. Secondary actions are physical and local: Bring tools to the yard, Apply for a drill trip.
Photography
Water at the pump, people carrying jerrycans, children drinking. We avoid close-up pity shots and use the yard's own volunteers for the Lubbock pages.
Accessibility
Square buttons with thick outlines are easy targets for older hands. The live tables are real tables with headers, and the yellow is never used for text on the light background.
Type system
- DisplayChivoA blunt, heavy grotesque with the plainness of stencilled lettering on a rig mast or a pump housing.
- TextNewsreaderA sturdy text serif that reads like a well-kept field report beside the heavy headlines.
- AccentJetBrains MonoWell IDs, depths and yields set like an inspection log.
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 | 14.59:1 | AAA |
| Body text on cards | Aa | 16.12:1 | AAA |
| Secondary text | Aa | 5.9:1 | AA |
| Links | Aa | 6.18:1 | AA |
| Button text | Aa | 7.21:1 | AAA |
| Accent label text | Aa | 9.39:1 | AAA |
| Text on dark bands | Aa | 14.59:1 | AAA |
| Muted text on dark bands | Aa | 7.74:1 | AAA |
| Text on brand bands | Aa | 7.21:1 | AAA |
| Muted text on brand bands | Aa | 4.81:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.54:1 | AAA |
| Body text on cards | Aa | 13.87:1 | AAA |
| Secondary text | Aa | 6.82:1 | AA |
| Links | Aa | 8.01:1 | AAA |
| Button text | Aa | 8.11:1 | AAA |
| Accent label text | Aa | 11.54:1 | AAA |
| Text on dark bands | Aa | 16.4:1 | AAA |
| Muted text on dark bands | Aa | 8.23:1 | AAA |
| Text on brand bands | Aa | 8.11:1 | AAA |
| Muted text on brand bands | Aa | 5.1:1 | AA |