Why Civic Spark looks the way it does
Civic Spark is a volunteer network site that behaves like a product landing page. It has a peach split hero, a plain sans headline and a count of open shifts, so a visitor can sign up in a couple of taps.
- Built for
- Residents looking for local volunteering, and organisations that want to post opportunities.
- 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, Shifts, Stories, Events, Sign up, Contact
- Hero
- Headline beside a framed photo, with a small inset and the next-gathering chip.
Typography
Space Grotesk Bold sets the headline at about 85 pixels. It has a technical, slightly quirky style, and it looks like a modern app. Inter handles body text and the interface. Small labels use wide spacing to give a monospace feel.
Colour
The page is white (#FFFFFF) with near-black text (#141414), vivid orange (#E85D04) for buttons and deep blue-green (#264653) as an accent. The hero sits on a peach tint. The dark theme uses a lighter orange (#FF8A3D). Orange suggests energy and the dark teal keeps it grounded.
Layout and navigation
A white bar has an orange logo tile, six links and an orange Sign up pill. The page is built from tinted rounded cards and stat counters for 540 open shifts, 120 organisations and 9,800 hours given. The structure mirrors a software service, so it is familiar to people who book things online.
The hero
The hero is split. '540 open shifts this week' is the eyebrow, followed by 'Small acts. Big town.' on two lines and a sentence about signing up in two taps. On the right is a tall photo of volunteers packing food with a smaller handshake photo overlapping. A chip names the next volunteer meetup.
Calls to action
'Find a shift' is an orange pill and 'Post an opportunity' is outlined. They serve volunteers and organisations. The sign-up pill in the header repeats the main action.
Photography
The photograph shows real volunteers at work, with masks and gloves, which is more convincing than a posed group. Faces are partly covered. A real network should ask for consent and show a range of causes.
Accessibility
Near-black on white is about 18 to 1. Orange buttons use dark labels and measure about 5 to 1 against them, while white on this orange would be only about 3.5 to 1. The shift list should be keyboard-friendly in a real build.
Type system
- DisplaySpace GroteskSpace Grotesk feels like a modern app, which helps visitors trust that sign-up will be quick.
- TextInterInter is neutral and clear, so shift times, places and tasks scan easily.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
