# Bands & Layout

> The five section backgrounds, band spacing, container width and side margins on renovare.org.

*Full-width bands, one calm column.*

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.

**Text on a dark band.**

Text on dark bands: headings and body in white (body may drop to white/80), eyebrows in Primary 300.

Shown on: navy background.

```html
<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](https://styleguide.renovare.org/boxes/) 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.