Design Systems

Three directions for the same church strategy

Each system changes color, rhythm, proof emphasis, motion tone, and component behavior across all four homepage examples.

neighborhood-welcome

Welcome

Recommended direction. It preserves the current Frisco First warmth while making the first-visit path feel calm, local, and easy to trust.

Best fit
Best for a broad church audience with families, seniors, and newcomers who need confidence before visiting.
Tradeoff
Less dramatic than competitor megachurch sites; strongest when paired with real ministry photography and staff warmth.
Preview examples
Contrast
Deep teal and red actions sit on warm white or pale mint surfaces; body text stays dark green-brown for AA contrast on light backgrounds.
Typography
Friendly humanist sans for body copy, with a softer editorial display voice reserved for the hero and major invitation moments.
Spacing
Generous top-level sections, compact proof strips, and clear gaps between visit, worship, and connection decisions.
Radii
4px to 8px; familiar and church-practical, never pill-heavy.
Shadows
Soft low shadows for proof cards and no heavy floating panels.
Motion
Gentle rise-ins, service-time highlights, and small hover lift on visitor actions.
Visit-first hero
Service-time proof strip
Kids expectation panel
Ministry pathway cards
Warm footer invitation

clear-path

Clear Path

A sharper family-action direction that competes well with modern non-denominational sites while keeping Frisco First recognizable.

Best fit
Best for young families and high-intent visitors comparing several churches before Sunday.
Tradeoff
More operational and less traditional; should be softened with photography and pastoral voice.
Preview examples
Contrast
Navy text and cobalt actions contrast against clean white and pale blue; coral is limited to key reminders and secondary movement.
Typography
Crisp geometric sans for fast scanning with medium-weight section heads and dense but readable cards.
Spacing
Tighter dashboard-like rhythm for quick comparison: times, visit details, ministries, messages, and events.
Radii
6px to 8px with precise edges and stable tile sizes.
Shadows
Minimal shadows; separation comes from borders, spacing, and active color states.
Motion
Snappy section reveals, active route marks, and quick comparison transitions.
Action-first nav
Visitor checklist
Family ministry grid
Message preview module
Event decision cards

heritage-light

Heritage Light

A quieter direction that honors Frisco First history and Baptist roots while avoiding a dated church website feel.

Best fit
Best when the client wants the site to feel established, faithful, and less like a large event brand.
Tradeoff
Needs disciplined content editing so the editorial pace does not become slow for task-driven visitors.
Preview examples
Contrast
Deep green and burgundy text/actions sit on ivory and pale gold fields; gold is accent-only to preserve readability.
Typography
Serif-inspired display moments paired with clear sans body copy for teaching, tradition, and hospitality.
Spacing
Editorial pacing with wider storytelling bands, image captions, and moments for staff, mission, and messages.
Radii
0px to 6px; more architectural and grounded.
Shadows
Very light paper-like depth with thin dividers.
Motion
Slow editorial reveals, image cross-fades, and restrained proof sequencing.
Editorial welcome hero
Mission statement band
Service rhythm panel
Staff and message proof
Classic footer