A church identity, in tokens.
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.
Logo
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.
Color
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.
Typography
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.
Buttons & Links
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.
Vertical Line
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.
Cards
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.
Photography
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.
Tokens
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 |
Patterns in use
See the system applied across three real church landing pages.
I'm New
First-time visitor experience — what to expect, where to go, who to meet.
Open landing →Sermon Series
A 12-week walk through the Sermon on the Mount with weekly episode list.
Open landing →Generosity
A storytelling-led page for the year-end giving campaign — story, impact, give.
Open landing →Signature Patterns
SBC-only extensions to the canonical section catalog. Eight patterns unique to SBC's visual language: arrow-overlay wayfinding photo, navy vertical rule, pastoral chapter (live for the Rasmussen → Rossello transition), For the Valley partnership block, asymmetric photo mosaic, dark app promo band, current/next sermon pair, and full-bleed gospel parallax beat.
wayfinding-photo
CSS hook:.sig-wayfinding-photo
Enter through the main lobby on the north side of the building.
7601 E Shea Blvd · Scottsdale, AZ 85260
vertical-rule-divider
CSS hooks:.sig-vrule.sig-vrule--short · .sig-vrule--tall
pastoral-chapter
CSS hook:.sig-pastoral-chapter
Chapters
Continuing the Story
After Pastor Jamie Rasmussen's 18 years of faithful leadership, a new chapter begins. Together, we step forward with unity and expectation as Rustin Rossello continues the story.
About the Journey →for-the-valley
CSS hook:.sig-for-the-valley
For the Valley
For the Valley
We exist not just for ourselves but for our neighbors across the Valley. Schools, shelters, foster families, the unhoused, our partners doing the quiet work.
Partner With Us →photo-mosaic
CSS hook:.sig-photo-mosaic
app-promo
CSS hook:.sig-app-promo
Stay Connected!
Watch our teaching series, view your giving profile, and more on the SBC app.
current-next-series
CSS hook:.sig-current-next-series
gospel-parallax
CSS hook:.sig-gospel-parallax
The Gospel Reconciles
Colossians 1:21–23