Why Campus Fire looks the way it does
Campus Fire is a college ministry site with a huge extended headline, a lime and black palette and a striped background. It is built for a student who decides within a few seconds whether a group is for them.
- Built for
- Undergraduates looking for a community, campus staff, and parents of first-year students.
- 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, Groups, Talks, Events, Give, Contact
- Hero
- Centred headline over a three-photo collage.
Typography
Syne ExtraBold is a very wide display face, and the headline is set at about 90 pixels across three lines. Inter handles the body text and the interface. The wide letters make the headline look like a poster, while Inter stays modest underneath.
Colour
The light theme uses off-white (#F7F8F2), near-black (#0B0C0A) and a deep olive (#2E3A00) for buttons. The dark theme is first, using black (#08090A), bright lime (#C6F432) and a hot orange-red (#FF5E3A) accent. Lime on black has the energy of a student festival and does not look like a conventional church site.
Layout and navigation
A floating white pill nav holds a circular monogram, the name in the wide face, six links and a Give pill. Diagonal stripes fill the hero background. Content below is in tinted rounded cards, and a scrolling word marquee runs between sections for movement.
The hero
The hero is centred. 'Find your people. Find your purpose.' fills three lines, with the meeting night and place in the eyebrow above it. The first photo sits below the fold. A chip counts down to Thursday night.
Calls to action
'Get connected' is a solid olive pill and 'Join Thursday' is an outlined pill. The second button gives a concrete time to show up, which students prefer to an abstract sign-up. Give is a small pill in the header.
Photography
Students are minors or near-minors in some cases, so a real build should rely on crowd shots and consented photos from events. Candid gatherings in dorm rooms and the quad work better than posed groups.
Accessibility
Near-black on off-white measures about 18 to 1 and olive buttons carry white text at about 12 to 1. The stripes in the background are light and do not reduce the contrast of the headline. The wide headline is large enough to read comfortably, though very wide letters can be slow for some readers at small sizes.
Type system
- DisplaySyneSyne ExtraBold is wide and a little strange, which is the sort of type a student group uses on its own flyers.
- TextInterInter is plain and fast to read, so event times are never a puzzle.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
