Why Pulse looks the way it does
Pulse is a student ministry site with a black background, huge condensed uppercase headlines and a tilted confetti photo. It is loud on purpose, because teenagers will leave a site that looks like their parents' church.
- Built for
- Middle and high school students in grades 6 to 12, and the parents who check the site before letting their kids go.
- 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, Students, Messages, Events, Give, Contact
- Hero
- Poster-style block in the brand colour with oversized type beside a photo.
Typography
Anton, a tall condensed display face, is set in capitals at about 150 pixels and fills the left half of the hero. Work Sans carries body copy and the small monospace-style labels. The extreme difference in scale between headline and paragraph gives the page a poster feel.
Colour
The dark theme is first. Black (#0B0B0B) is the base, white is the text, and acid lime (#D7FF3F) is the brand colour with a hot red-orange (#FF5A3D) accent. The light theme flips to off-white with a red accent (#D6381B). Lime on black is a recognisable youth-culture combination, and it stands apart from the usual church palette.
Layout and navigation
A plain top bar carries the logo, six links and a Give button, then the page goes full-width black with fine diagonal stripes. Cards are outlined with hard edges and no rounding, which gives a brutalist look. The structure is simple, so the loud type is the only thing a visitor has to process.
The hero
The hero is a poster. 'YOUR GENERATION. YOUR MOVE.' is stacked across three lines in white, with a rotated photo of confetti under stage lights tilted at the right edge. The tilt gives the page movement without needing animation.
Calls to action
'Get on the list' is a red-orange rectangle and 'Watch highlights' is an outlined rectangle. A student can join without a long form. Give is a small black button in the header, kept out of the way because students are not the audience for it.
Photography
The photos are high-energy concert and stage shots, with confetti and coloured light. They show an event rather than a classroom. Because students are minors, a real build should photograph only with consent, and show crowds or backs of heads rather than identifiable faces.
Accessibility
White text on black measures about 20 to 1. The huge headline stays readable at every size, and labels are uppercase with wide spacing. The diagonal stripes are low contrast and sit behind the text without reducing legibility. A theme toggle is provided in the header.
Type system
- DisplayAntonAnton is tall, tight and shouts, which is the register a youth ministry wants for its main message.
- TextWork SansWork Sans is clean and wide-set, so the small text holds up next to the very heavy headline.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
