Pages are built from full-width bands (slices). Each band picks a background; the content inside sits in a centered container.
Backgrounds
| Band | Background | Text | Use |
|---|---|---|---|
| Page | Neutral 200 bg-neutral-200 |
Neutral 800 | Default for most bands |
| Lighter | Neutral 100 bg-neutral-100 |
Neutral 800 | To separate two light bands |
| Green | Primary 700 bg-primary-700 |
White | The brand’s emphasis band; footer and newsletter |
| Navy | Navy bg-navy |
White | Variety in long pages |
| Plum | Plum bg-plum |
White | Variety in long pages |
Adjacent bands with the same background merge into one. Use dark bands sparingly — rarely more than two on a page, and never two different dark bands in a row.
Listening Groups
Learn to listen together
A space for learning to listen to God and others.
HTML + Tailwind
<div class="flex flex-col items-center text-center gap-3">
<p class="font-sans font-bold leading-tight tracking-wider uppercase text-lg text-primary-300">Listening Groups</p>
<h2 class="font-display font-normal leading-none text-3xl sm:text-4xl">Learn to listen together</h2>
<p class="text-base leading-relaxed text-white/80 max-w-md">A space for learning to listen to God and others.</p>
</div>Spacing & container
| Setting | Value | Classes |
|---|---|---|
| Band padding | 72 → 90 → 108px | py-16 md:py-20 xl:py-24 |
| Container | Centered, max 1536px | .fluid-container |
| Side margins | 36px, 54px from 1024px up | built into .fluid-container |
| Content width | Up to 1280px; reading text 756px | max-w-screen-xl, max-w-2xl |
| Gap between slices in a band | 36 → 54 → 72px | .outer-grid |
| Extra room around large image slices (Split, Program Feature, Featured Quote, Media) | 1.5× the gap: 54 → 81 → 108px | automatic in custom.css |
Rules
- Content is unboxed by default; see Boxes & Cards for when a box is right.
- Center intros and short text; left-align long reading text.
- Don’t nest a dark band’s colors inside a light band — use a panel instead.