Why Second Helping looks the way it does
A regional food bank whose public site has two very different audiences: people who need groceries this week, and the volunteers, farmers, agencies and donors who make that possible. The first screen is a search for help, in English or Spanish, and everything else comes after it.
- Built for
- Families and seniors looking for food in Spokane and four rural counties, Spanish-speaking households, warehouse volunteers, partner pantries, farmers and donors.
- Navigation
- Tabbed app bar. Pages behave like tabs in an app: a sticky segmented bar under a compact header.
- Pages
- Home, Find food, Volunteer, Food drives, Partner agencies, Give
- Hero
- A 'What do you need today?' search that filters real services as you type, for organisations whose visitors arrive with an urgent need
Typography
Rubik's softly rounded corners let headlines be big and bold without feeling like a government notice, and its accented capitals hold up in Spanish. Red Hat Text was drawn for reading at small sizes; at 18px it keeps addresses, hours and eligibility notes easy to scan on an old phone.
Color
The palette comes from the Palouse harvest that fills the warehouse every fall: a deep beet red for the brand and a wheat gold accent. Neutrals carry a faint rose tint so the page feels warm rather than clinical. In the dark theme the beet becomes a lighter radish pink so links and buttons still clear contrast.
Layout and navigation
Pages behave like tabs in an app, with a sticky bar under a compact header, because most visitors arrive on a phone and move between Find food and the hours. The language switch sits beside the action button on every page and swaps every line, not just the headings.
The hero
The opener asks 'What do you need today?' and filters real services as you type: groceries this week, a box for seniors, weekend food for kids, a mobile market in a rural town. Typing 'leche' or 'diapers' works. Someone in a hurry should not have to understand how a food bank works to get dinner.
Calls to action
The fixed action is Find food near you, because that is the most urgent reason anyone visits. Supporters get specific asks further down: Pick a warehouse shift, Start a food drive, Give a meal. The giving page converts dollars to meals at the food bank's real buying rate.
Photography
Warehouse and distribution photographs: produce boxes, volunteers sorting, a van loading for a mobile market. Portraits match who actually lives in the region, including a Palouse farmer who donates lentils. No photos of people being handed food, out of respect for those who receive it.
Accessibility
Every line exists in English and Spanish, and the switch remembers the visitor's choice. Contrast passes in both themes, tap targets are large, the open-now status is worked out live from the hours, and each site says whether it is step-free, whether ID is needed (it never is) and which languages volunteers speak.
Type system
- DisplayRubikRubik's slightly rounded corners make big, bold headlines feel friendly instead of institutional, and its accented capitals hold up well in Spanish.
- TextRed Hat TextA warm, open sans built for reading at small sizes, with complete Spanish accents and clear numerals for addresses and hours.
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.21:1 | AAA |
| Body text on cards | Aa | 16.91:1 | AAA |
| Secondary text | Aa | 5.93:1 | AA |
| Links | Aa | 7.45:1 | AAA |
| Button text | Aa | 8.29:1 | AAA |
| Accent label text | Aa | 7.73:1 | AAA |
| Text on dark bands | Aa | 15.21:1 | AAA |
| Muted text on dark bands | Aa | 8.0:1 | AAA |
| Text on brand bands | Aa | 8.29:1 | AAA |
| Muted text on brand bands | Aa | 5.34:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.7:1 | AAA |
| Body text on cards | Aa | 14.18:1 | AAA |
| Secondary text | Aa | 6.97:1 | AA |
| Links | Aa | 8.06:1 | AAA |
| Button text | Aa | 8.35:1 | AAA |
| Accent label text | Aa | 11.17:1 | AAA |
| Text on dark bands | Aa | 16.71:1 | AAA |
| Muted text on dark bands | Aa | 8.42:1 | AAA |
| Text on brand bands | Aa | 8.35:1 | AAA |
| Muted text on brand bands | Aa | 5.25:1 | AA |
