A real design system, a homepage, three landing pages.

Real colors lifted from production CSS, real photography from the SBC asset library, free-font substitutes for Pangram's PPEiko-Heavy and Avenir. The system below; a homepage and three landing pages built on it.

The system

Tokens, type, and components — extracted, not invented.

Eight color swatches with real hex values, a complete type ramp on Fraunces + Inter + Montserrat + EB Garamond, the signature vertical-line divider, button styles lifted directly from SBC's production CSS, and the photography library that ties it all together.

Open the design system →

Everything the system ships at full strength.

Hero, service-times strip, current series feature, three pathways into the landings, scripture band, upcoming events, watch & listen cards, and a closing CTA. Same tokens, full beat.

Open the homepage →

Three landing pages on the same system.

Click to open

Landing 01

First-time visitors

I'm New

A welcoming, photography-led page that walks first-time visitors through what to expect, kids programming, campus times, and an honest FAQ.

Open landing →

Landing 02

Sermon series

The Sermon on the Mount

An editorial, content-rich landing for a 12-week series with live now-playing player, full episode list, pastor card, and platform subscribe row.

Open landing →

Landing 03

Generosity campaign

Continuing the Story

A storytelling-led generosity page with progress meter, three impact pillars, member story, working give form with frequency selector, and four ways to give.

Open landing →