Distilled from scottsdalebible.com — real colors lifted from production CSS, real photography from the SBC asset library, free-font substitutes for Pangram's PPEiko-Heavy and Avenir.
The wordmark is the identity's anchor. Use the white wordmark on dark photography or the navy on white. The blue circle icon stands alone in tight spaces — favicon, social avatar, app icon.
Two blues do most of the work — a confident brand blue for primary action, a brighter blue for hover and accent. Deep navy carries gravity in dividers and footer. Warm orange is reserved for occasional campaign callouts, never default.
Heavy serif display (Fraunces, standing in for Pangram's PPEiko-Heavy) carries every headline — it's the editorial signature. Inter handles body. Montserrat does eyebrows and buttons in tracked uppercase. EB Garamond italics are reserved for scripture set-pieces.
A welcoming community across the Valley — Cactus, NorthRidge, and the East Valley — gathering around the unchanging gospel of Jesus.
Whether you've been part of a church for decades or you're walking into one for the first time, you're welcome here. We meet in three buildings, but we're one church — gathered each Sunday around scripture, prayer, and song. There's a place for you.
Primary buttons are the brand blue rectangle, 5px corner radius, uppercase Montserrat. The arrow link is the soft alternative — used for "View more →" anywhere a button would be too loud. Lifted directly from SBC's production CSS.
A 1px navy hairline, centered, used between major sections — short (56px) for breathing room, tall (220px) for chapter transitions. It's a quiet, distinctive signature you won't find on most B2B sites and it's all over scottsdalebible.com.
Photography first. The image carries the card; the text is small and earns its place. Hover lifts the card 4px and casts a soft navy shadow.
Real members in real moments. Golden-hour Arizona light, warm skin tones, wide compositions. Never staged stock. Never over-graded. The light does the work — leave it alone.
Every token is a CSS custom property on :root. Reference by var() — never hardcode hex in a component.
| Token | Value | Use |
|---|---|---|
--brand | #0095d5 | Primary CTA, link, focus |
--brand-bright | #00b2ff | Hover, on-dark accent |
--ink | #1d2a3b | Footer, dark sections, dividers |
--ink-soft | #272727 | Body text default |
--accent-warm | #f0523d | Campaign accent, sparingly |
--surface | #f6f6f6 | Alternate section background |
--font-display | 'Fraunces' | All headings |
--font-body | 'Inter' | All body & UI |
--font-eyebrow | 'Montserrat' | Eyebrows, buttons (uppercase) |
--font-scripture | 'EB Garamond' | Scripture set-pieces only |
--container | 1200px | Max content width |
--section | 120px | Vertical section padding |
See the system applied across three real church landing pages.
First-time visitor experience — what to expect, where to go, who to meet.
Open landing →A 12-week walk through the Sermon on the Mount with weekly episode list.
Open landing →A storytelling-led page for the year-end giving campaign — story, impact, give.
Open landing →SBC-only extensions to the canonical section catalog. Two patterns unique to SBC's visual language: an arrow-overlay wayfinding photo for "here's where to find us" treatments, and a 1px navy vertical rule used as a chapter break across long pages.
.sig-wayfinding-photo
Enter through the main lobby on the north side of the building.
7601 E Shea Blvd · Scottsdale, AZ 85260
.sig-vrule.sig-vrule--short · .sig-vrule--tall