How Wellspring Fellowship was designed and built.

The concept

Wellspring Fellowship is a fictional church built to show what a modern, mid-size congregation's web presence can look like when it's treated as a real design project instead of a template afterthought. The brief was specific: a church that already livestreams Sunday mornings but has never invested in a real web presence or short-form content — the kind of church that's doing good work but whose site doesn't say so.

The design direction is what we'd call bold contemporary color-block — the visual language a lot of the best non-denominational churches have landed on: one committed, vivid accent color, confident geometric shapes, a display typeface with real personality, and diagonal, dynamic cropping instead of soft, static rectangles. It's meant to feel bright and energetic without tipping into a nightclub aesthetic, and confident without feeling corporate.

Site structure

This is a genuine four-page site, not a single scrolling page with anchor links — that matters because it mirrors how a real church site needs to work: people arrive at different pages from different links (a service time from a Google search, a clip from social, a map link from a text message), and each of those destinations needs to stand on its own.

• Home — the front door: a hero, a welcome statement, a service-times teaser, a quick "what to expect" strip, and a preview of recent message clips.
• Watch — a premium-feeling livestream placeholder panel plus a grid of short-form message clips, because weekday content is the whole point of this rebuild.
• Ministries — five ministry cards (kids, youth, worship & creative, community outreach, small groups), each with its own generated photography and a short, honest description.
• Plan a Visit — the conversion page: service times in detail, a step-by-step "what to expect," a location block, kids/nursery specifics, and a contact/prayer-request form.

Every page shares the same header navigation and footer, and internal links always point to the correct relative path — for example, pages inside /watch/ reference shared assets as ../assets/… so the site works identically whether it's opened locally or deployed to a real host.

Palette & type

The brief called for one vivid accent color, chosen and committed to rather than split across two competing hues. This build commits to cobalt blue — paired with near-black ink for contrast, a warm off-white paper tone as the base (so the site never feels cold or clinical), and cobalt tints used as soft color-blocks for section variety.

For type, headlines use Bricolage Grotesque — a geometric grotesque with real character in its curves, which gives the display type the personality a plain system sans can't. Body copy and UI elements run on Inter for maximum clarity at small sizes. Both are loaded free from Google Fonts.

The imagery

All photography across the site was generated rather than sourced or stock-licensed, and every image was art-directed toward the same brief: bright, contemporary, editorial-quality photography with the cobalt accent showing up naturally in stage lighting or architectural details — never as an obvious overlay. Each image was also directed to avoid any readable text, logos, or signage, so nothing on the page reads as a copy-paste of a real institution.

The set covers a full-service worship moment for the homepage hero, a joyful congregation shot for the welcome section, a modern building exterior for the visit page, and dedicated photography for each of the five ministries. The Watch page's message-clip grid uses its own set of vertical stills — a teaching moment, a worship close-up, a crowd reaction, a speaker-with-backdrop shot, and a baptism celebration — so the grid reads as genuinely varied short-form content rather than one photo cropped five ways.

Motion & technique

Motion is built with GSAP and ScrollTrigger, loaded from a CDN with no build step required. Three techniques carry the "energy" the brief asked for:

• Diagonal clip-path reveals — the hero image and other key panels are clipped to an angled shape rather than a plain rectangle, then animated into place on load and on scroll. This is the signature move that gives the color-block direction its dynamism.
• Staggered spring pop-ins — card grids (ministries, message clips, service-time cards) animate in with a slight overshoot easing curve, so they feel like they're settling into place with a bit of bounce rather than just fading up.
• A looping marquee band — a constant, slow-scrolling ticker of short phrases on the homepage, a small but confident detail that a lot of contemporary church brands use well.

All animation respects prefers-reduced-motion, and the layout uses overflow-x: clip on the page root so the diagonal and bleed elements never introduce horizontal scroll on any device.

Deploying it yourself

Because this is a plain HTML/CSS/JS site with no build step, deployment is intentionally simple:

1. Push the wellspring-fellowship folder to a Git repository (GitHub, GitLab, or similar).
2. Create a new site on Netlify (or any static host) and point it at that repository.
3. Leave the build command blank and set the publish directory to the project root — there's nothing to compile.
4. Deploy. Because every internal link uses relative paths, the site works identically on a Netlify subdomain or a connected custom domain.

From there, swapping in a real livestream embed on the Watch page, connecting the visit-page form to an actual form handler, and replacing the placeholder service times and address with real ones are the only steps left before this could go live for an actual congregation.