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. 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.
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