The welcome mat. One headline, one primary action, no competing moments. Centered layout for editorial warmth; split layout when a visual element earns its place.

Each CTA gets one headline, one sentence of context, and at most two actions (primary + secondary). Navy CTA creates punctuation in a long page. Off-white CTA is the quieter default.

Card-based comparison when options need personality. Table-based comparison when dimensions need to line up precisely. The recommended option gets one gold border and one small badge — nothing else.

Form + info, side by side in a real layout. Form variant uses inputs on a warm ground. Info variant uses navy for a quiet, directory-style block. Often these appear together, form left, info right.

List view when the library is long — typography-driven, gold download labels, hairline dividers. Card view when three or fewer items are featured. Never mix the two on one page.

Accordion when answers are long and fewer items fit on screen at once. Grid when answers are short and the list is scanable. Gold plus/minus toggles; never use chevrons (they compete with the gold rules).

Three-column layout when the features are parallel and want visual symmetry. Alternating content + visual when each feature deserves its own moment. Numbered steps use a gold circle — the only place a circle shape is permitted.

Line-divided accordion for tightly packed lists (beliefs, FAQs). Boxed accordion when each item carries more visual weight (event details, registration sections).

Four-column footer for full websites where a sitemap is needed. Minimal centered footer for campaign landing pages, microsites, and single-purpose pages.

Tiered giving uses the same card pattern as product pricing — one highlighted tier, two supporting tiers. One-click giving uses amount chips on a navy ground for direct, decisive action.

Grid view for recent or featured items where visual personality matters (sermons, series, events). List view for deep archives where scanning and dates do the work.

Single large testimonial for emotional punch on a landing page. Grid of three for breadth across a story page. The gold quotation mark is the only decorative element permitted.

Row of four for full-width impact moments. Narrative pair for context-heavy annual reports or about pages. Numbers are always Inter 700, display size, with a tight letter-spacing to feel substantial.

Grid view for browsing. Detail view for a single product — image left, copy right. Swatches and size selectors use the same button treatment as the rest of the system.

Three reusable behaviors lifted from locked sections. Reach for these before inventing new ones — every place they appear should look and move the same way. The full prose lives in the markdown style guide; these mockups show the visual at rest, mid-motion, and complete.

Primary site nav is a floating glass pill — wordmark left, six items center, Plan-Your-Visit pill right. Hovering an item opens a mega menu beneath, connected by a single hairline that drops from the active item to the panel and traces around its border. Mobile collapses the row into a hamburger drawer. Breadcrumbs use gold slashes instead of chevrons; search icons are drawn as thin 1.5px circles, never filled.

Resting state uses a hairline border. Focused state uses a 1px gold border. Filled state uses a 0.5px navy border. Error state uses a red border with a small error message below. Never use filled input backgrounds — always white on off-white.

Dropdown caret is gold on close, flipped on open. Selected checkbox fills navy with a gold check. Selected radio shows a gold dot inside a navy ring. Option hover uses off-white, not gray.

Toggle track is navy when on, 15%-opacity navy when off. Slider fill is gold up to the thumb position, with a solid navy thumb. Date picker uses navy fills for selected dates — gold is reserved for the month-change chevrons.

Empty state uses a dashed navy border and a gold uppercase CTA. Selected state shows file metadata with a subtle thumbnail and a gold close button. Never use colorful file-type icons.

All buttons are pills — `border-radius: 9999px`. Primary fills with the brand color; on hover the fill drops to transparent, the border appears in the same color, the label slides 8px left, padding-right grows ~10px to make room, and an icon (heart-pin, door, arrow) slides in from the right. Same 500ms ease-out for every property. One primary per composition. Secondary is the outlined-at-rest version that inverts to a fill on hover. Tertiary stays as a gold-underlined text link.

Toasts use navy fill with a gold accent icon and gold action text. Snackbars carry an undo-style action. Modals use off-white cards on a navy overlay at 55% opacity. Only one modal on screen at a time.

Inline alerts use a 3px gold left border for information, red for errors. Tooltips are navy with a gold accent, attached by a small triangle. The anchor uses a subtle gold underline so the user knows it's tappable.

Progress fill is gold on a 15%-opacity navy track. Spinners use a gold arc on a muted track. Skeletons use soft navy tints — never gray — so they still feel like Soteria Church while loading.

Numeric badges use gold fill with navy numerals — the one place where gold is allowed as a small filled shape. Status chips match the button system: filled for active state, outlined for neutral, red variant for destructive.

Cards stay flat — hairline borders only, never shadows. List rows separate with hairlines, use circular avatars with the person's initials. Tabs mark the active tab with a 2px gold underline.

Carousel uses a gold line pagination — never dots. Bottom sheet uses a rounded top corner and a small handle bar. Side panel is 55% width on tablets, full width on mobile, with a gold close icon.

Tables use hairline row dividers, never full borders. Status chips inside cells follow the same button treatment. Charts use opacity-stepped navy bars with gold highlighting the most recent or current data point — never a rainbow palette.

Avatars use two-letter initials on a muted fill — no photos by default. Chips follow button conventions. Stepper uses gold for completed, navy for active, hairline for future. Empty states use dashed borders with a small circular icon.

Status bar uses navy to match the app header. Push notifications use a gold timestamp eyebrow. In-app banners use navy background with gold dismiss action — subtle but visible.