Why Neighborhood Pantry looks the way it does
Neighborhood Pantry is a food bank site in mustard and deep teal, with a split hero, a large friendly headline and a stats band for pounds, households and volunteers. It tells a hungry visitor when to come, and tells donors what their food does.
- Built for
- Families who need groceries, volunteers, and local donors and food drives.
- Navigation
- Floating rounded pill that sits over the hero photo. On phones, a bottom tab bar plus a quick-links launcher.
- Pages
- Home, About, Visit, Get Food, Stories, Events, Give Food, Contact
- Hero
- Headline beside a framed photo, with a small inset and the next-gathering chip.
Typography
Bricolage Grotesque at extra bold sets the headline at about 90 pixels. It has a slightly rough, human character that feels hand-lettered. Karla provides body text and is plain and compact. Together they read as a community notice board.
Colour
The page is warm mustard cream (#FFF5D6) with deep teal text (#0F3B3A), a teal brand colour (#0F5E5C) and a bright mustard (#E2A610) accent. The hero sits on a sage tint. The dark theme uses a lighter gold (#F2C14E). Teal and mustard are earthy, and the pairing looks like pantry shelves and tins.
Layout and navigation
A rounded white pill nav has a teal logo tile, six links and a teal Give Food button. The page then moves through a stats band, rounded value cards and a map-like visit block. The labels are literal, including Get Food, so a person in need does not have to decode them.
The hero
The hero is split. 'No neighbor goes hungry here.' is set on three lines at left, with a short line telling people to walk in, take a cart and take what their family needs. On the right is a tall photo of a breakfast table with a garden path photo overlapping. A chip names the next Saturday produce day.
Calls to action
'Visit the pantry' is the teal primary pill and 'Donate food' is outlined. The wording covers the two main audiences. Hours appear in the eyebrow, so the visitor sees them before reading anything else.
Photography
The food photograph is bright and abundant. It shows meals rather than shelves of cans, so the pantry looks generous. A real pantry should show its own distribution room and volunteers, and never photograph people receiving food without clear consent.
Accessibility
Teal text on mustard cream is about 11.3 to 1, and white on the teal button about 7.6 to 1. The message about no forms and no judgement is stated in plain words, which lowers the barrier to entry. The dark theme is available from the header.
Type system
- DisplayBricolage GrotesqueBricolage Grotesque is warm and a little uneven, like a handwritten sign on a pantry door.
- TextKarlaKarla is compact and clear, so hours and addresses fit into narrow cards.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
