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

5xl / DisplayOutlook Drive

4xl / H1Outlook Drive

3xl / H2Outlook Drive

2xl / H3Outlook Drive

xlOutlook Drive

lg / LeadOutlook Drive

md / BodyOutlook Drive

smOutlook Drive

Display font: Montserrat. Body font: Mulish.

Script accenton Outlook Drive

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

radius-sm / shadow-sm

radius-md / shadow-md

radius-lg / shadow-lg

Brand

Logo and wordmark

HarrisonvilleChurch of Christon Outlook Drive

Buttons

Buttons — variants, sizes, states

Badges

Badges and tags

NeutralPrimaryAccentGoldSample content

Inputs

Text inputs — default, helper, error

Full name

We reply personally, never with spam.

Phone

Please enter a valid phone number.

Message

Selections

Select control

What is this about?

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

Success: your message has been received.

Error: something went wrong. Please try again.

Sample content. This is the placeholder-content banner. The structure is final; the church will supply the real details before launch.

Discovery

Search field and filter chips

AllSalvationWorship

Brand

Avatars — initials fallback, sizes, stack

Initials paint underneath the photo, so a slow or missing image never leaves a blank circle. Square avatars are families.

Selections

Segmented control, switch, radio cards

Direct messagesSomeone sends you a message.AnnouncementsNews from the elders.Disabled

Your responseYes, I will be thereCount me in.MaybeI hope to make it.No, I cannot make it

Badges

Count badges and notification dot

399+Unread dot

Surfaces

Dialog and chat bubbles

Incoming message with a tail on the last bubble in a run.

Outgoing message.

Message deleted

Feedback

Notices, empty state, stat tiles, skeleton

Informational

Gender decides which group chats and event invitations reach you.

Your profile has been saved.

Email delivery is not configured

Approvals still work; no email goes out.

That did not save. Check the form and try again.

No messages yet

Start the conversation below.

Invited

Going

+6 guests

Maybe

No answer