Why Shelter looks the way it does
Shelter is a homeless outreach site that puts the need first. It has a plain blue palette, a serif headline that says 'No one should sleep outside tonight.' and a stats band with beds, meals and housing outcomes.
- Built for
- People in crisis who need a bed tonight, social workers referring clients, volunteers, and donors who want to see results.
- Navigation
- Sticky frosted bar with the full menu and a Give button. On phones, a bottom tab bar plus a quick-links launcher.
- Pages
- Home, About, Visit, Programs, Stories, Events, Donate, Contact
- Hero
- Headline beside a framed photo, with a small inset and the next-gathering chip.
Typography
Libre Baskerville Bold sets the headline, a sturdy book serif with a steady rhythm that reads as serious and trustworthy. Source Sans 3 handles body text and is clear at small sizes, which matters for hours and addresses. The pairing looks professional without feeling corporate.
Colour
A pale blue-grey (#F3F7FB) is the page, with deep navy text (#12263F), a firm blue (#1B4F8C) for buttons and one warm orange (#E08A1E) accent. Blue signals reliability, and the orange marks things that need attention. The dark theme uses a lighter sky blue (#7FB0E8).
Layout and navigation
A white bar has the name, six links and a blue Donate button. Below the hero, a stats band reports 48 beds nightly, 21,000 meals a year and 312 moved into housing. Cards use thin outlines. The design avoids ornament so that hours and phone numbers stay easy to find.
The hero
The hero is split. The left side holds the headline in four lines and a short line telling people to call or walk in, with no referral needed. On the right is a tall city photo at sunset with a smaller crowd photo overlapping. A chip tells people when lunch is served next.
Calls to action
'Get help' is the first button and it is a solid blue, with 'Volunteer' beside it. Getting help is placed before giving, because a person in need should not have to look for it. Donate is in the header for those who want it.
Photography
A city street at dusk suggests the setting without showing an individual in distress. People in crisis should never be photographed for decoration, so a real site should use consented portraits of staff and volunteers, and keep clients anonymous.
Accessibility
Navy on pale blue measures about 14 to 1, and white on the blue button about 8 to 1. The call-to-help text is clear, short and in plain language. Reading level is low on purpose, and the theme toggle supports people using phones at night.
Type system
- DisplayLibre BaskervilleLibre Baskerville has a calm authority that suits a message people must trust in a hard moment.
- TextSource Sans 3Source Sans 3 is easy to read on cheap phones in poor light, which is where many visitors will be.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
