Style guide and component gallery
Every color, type size, and component the site uses is defined once and shown here. Editing the tokens in app/globals.css restyles the entire build.
Foundations
Color roles
Background
--color-bg
Surface
--color-surface
Surface 2
--color-surface-2
Surface deep
--color-surface-deep
Surface deep 2
--color-surface-deep-2
Ink (body)
--color-ink
Heading
--color-heading
Muted
--color-muted
Primary (teal)
--color-primary
Primary strong
--color-primary-strong
Secondary (gold)
--color-secondary
Accent (green)
--color-accent-strong
Link
--color-link
Success
--color-success
Error
--color-error
Warning
--color-warning
Foundations
Typographic scale
Display font: Montserrat. Body font: Mulish.
Specialty script (Dancing Script): a stylistic accent only. Use it sparingly to highlight a single key word or short phrase, and never for body copy, headings, buttons, or anything lengthy.
Foundations
Spacing, radius, elevation
Brand
Logo and wordmark
HarrisonvilleChurch of Christon Outlook DriveBadges
Badges and tags
Inputs
Text inputs — default, helper, error
We reply personally, never with spam.
Please enter a valid phone number.
Selections
Select control
Surfaces
Cards and panels
Card
The default container on light backgrounds.
Panel
A softer surface tint for grouped content.
Deep
A raised panel used on navy sections.
Lists
List and definition layouts
- Singing without instruments
- Weekly Lord’s Supper
- A sermon from Scripture
- Sunday morning
- 10:00 AM
- Sunday afternoon
- 2:00 PM
- Wednesday
- 7:00 PM
Feedback
Alerts and notices
Sample content. This is the placeholder-content banner. The structure is final; the church will supply the real details before launch.
Discovery