# 2Rivers Church — AI Brief

Brand Guide V1.1 · Edition 01 · Fall 2026 · https://2rbranding.pages.dev/

Paste this file (or just the Quick brief below) into Claude, ChatGPT, Canva Magic, or any other tool before you ask it to write or design something for 2Rivers.

## How to use this file

1. **The brand guide is the source of truth.** If this file and the guide ever disagree, follow the guide.
2. **Tokens live in `design-tokens.json` and `variables.css`**, next to this file. Use the token names here when you describe a choice.
3. **The one-sentence test.** Every design choice has to help this sentence land: *"We exist to help people become passionate followers of Jesus."* If it doesn't, it's the wrong choice.
4. **Sub-brands are in progress.** 2Rivers Youth and 2Rivers Kids have their own guides. Don't invent their palettes or fonts.

### Quick brief (paste this into any AI tool)

> 2Rivers Church (O'Fallon, Missouri). Bold, honest, warm, modern, unafraid. Canvases are Ink `#0A0A0D` (dark) or Stone `#F4F5F7` (light). Primary color is 2RC Blue `#00A5E5`. Signature gradient runs at 135°: `#6CB4F0` → `#6A4CFF` → `#B53DE8` → `#FF3D8A` → `#FF2935`, used for the mark, fills, and at most one display word. Headlines: CMG Sans (web/Canva fallback Archivo) at weight 800–900, very tight leading (0.84–0.92) and negative tracking (−0.02 to −0.045em). One accent word per composition in Instrument Serif Italic. Body: Host Grotesk 400 at 16px / 1.55. Labels: JetBrains Mono, uppercase, +0.14em tracking. Square corners, no drop shadows, 1px hairline rules. One big move per page, lots of air, scale extremes. Photography is documentary, available light, grain allowed, people over places. Voice is simple, authentically positive, grace and truth: "bring a friend, we'll save you a seat," never "you won't BELIEVE…!!". Never put white text on 2RC Blue (it fails contrast); use Ink text on Blue, or white on Blue Deep `#0066A3`.

---

## 1. Color

### 1.1 Primary anchors

| Token | Name | Hex | RGB | CMYK | PMS | Use |
|---|---|---|---|---|---|---|
| `color.brand.blue` | 2RC Blue | `#00A5E5` | 0 165 229 | 90 10 0 0 | 2995 C | Primary brand color. Solid mark, links on dark, solid panels, accent words. |
| `color.neutral.ink` | Ink | `#0A0A0D` | 10 10 13 | 0 0 0 95 | Black 6 C | Dark canvas; headline text on light. |
| `color.neutral.stone` | Stone | `#F4F5F7` | 244 245 247 | 2 1 0 3 | Cool Gray 1 C | Light canvas; text on Ink. |

### 1.2 Neutrals

| Token | Name | Hex | Use |
|---|---|---|---|
| `color.neutral.ink-elev` | Ink Elevated | `#15151A` | Raised panels and cards on Ink. |
| `color.neutral.graphite` | Graphite | `#2A2D33` | Elevated dark surfaces. |
| `color.neutral.slate` | Slate | `#58595B` | Secondary text and labels on **light** grounds only. Matches the "2RIVERS CHURCH" wordmark gray. |
| `color.neutral.ash` | Ash | `#8A8C90` | Small labels and metadata on **dark** grounds (5.87:1 on Ink). |
| `color.neutral.mist` | Mist | `#C6CDD4` | Body copy on Ink. |
| `color.neutral.paper` | Paper | `#FFFFFF` | Pure white surfaces, reversed mark. |
| `color.brand.navy` | Navy | `#001B2E` | Atmospheric dark background. |

### 1.3 Blue family

| Token | Hex | Use |
|---|---|---|
| `color.brand.blue-bright` | `#4EC3F0` | Blue on Navy. |
| `color.brand.blue-deep` | `#0066A3` | Blue text and links on light grounds; buttons with white text (6.12:1). |

### 1.4 Signature gradient

`linear-gradient(135deg, #6CB4F0 0%, #6A4CFF 25%, #B53DE8 50%, #FF3D8A 75%, #FF2935 100%)`

| Stop | Name | Hex |
|---|---|---|
| 0% | Sky | `#6CB4F0` |
| 25% | Electric | `#6A4CFF` |
| 50% | Magenta | `#B53DE8` |
| 75% | Hot Pink | `#FF3D8A` |
| 100% | Signal | `#FF2935` |

Rules:
- Always 135°, top left to bottom right. Never reverse, drop a stop, or swap hues.
- Add a light grain or noise overlay on large gradient surfaces.
- Anchor with Ink or Paper. One gradient per frame. Never on a colored background.
- Never body copy in the gradient. At most one gradient display word per composition.
- Gradient text on light grounds starts at Electric so the first letters stay readable: `linear-gradient(135deg, #6A4CFF 0%, #B53DE8 40%, #FF3D8A 75%, #FF2935 100%)`. Display sizes only.
- Approved "cousins" for specific contexts: Cool Side, Warm Side, Vertical Fade, Aurora, Blue Duotone, Ink → Blue, Desaturated. The guide shows these as swatches; exact stops aren't published, so ask the comms team before using one.

### 1.5 Approved combinations

Ink + Stone, Ink + Blue, Stone + Ink, Paper + Blue (display type only, 24px and up), Navy + Bright, Blue + Ink, Gradient + Paper, Ink + Gradient text.

### 1.6 Transparent tints

- Hairlines on dark: white at 12%; soft at 6%.
- Hairlines on light: Ink at 14%; soft at 8%.
- Scrims over photos: Ink at 50% minimum behind white text.

### 1.7 Error color

- On light: Signal Deep `#C8102E` (5.39:1 on Stone, 5.88:1 on Paper).
- On dark: Signal `#FF2935` (5.29:1 on Ink).

---

## 2. Accessibility (WCAG 2.1 AA)

Normal text needs 4.5:1. Large text (24px+, or about 19px+ bold) needs 3:1.

**Safe for any text (AA):** Ink on Paper 19.77 · Ink on Stone 18.12 · Stone on Ink 18.12 · Paper on Navy 17.56 · Paper on Graphite 13.80 · Mist on Ink 12.32 · Mist on Navy 10.94 · Ink on Sky 8.87 · Blue Bright on Navy 8.68 · Mist on Graphite 8.60 · 2RC Blue on Ink 7.07 · Ink on 2RC Blue 7.07 · Slate on Paper 7.01 · Slate on Stone 6.43 · 2RC Blue on Navy 6.28 · Paper on Blue Deep 6.12 · Blue Deep on Paper 6.12 · Hot Pink on Ink 5.92 · Ash on Ink 5.87 · Blue Deep on Stone 5.61 · Ash on Ink Elevated 5.40 · Paper on Electric 5.13 · 2RC Blue on Graphite 4.94 · Electric on Stone 4.71 · Ink on Magenta 4.52

**Large text only:** Paper on Magenta 4.38 · Magenta on Stone 4.01 · Electric on Ink 3.85 · Paper on Signal 3.74 · Signal on Stone 3.43 · Paper on Hot Pink 3.34 · Hot Pink on Stone 3.06

**Don't use for text:** Slate on Ink 2.82 · Paper on 2RC Blue 2.79 · 2RC Blue on Paper 2.79 · Slate on Ink Elevated 2.60 · 2RC Blue on Stone 2.56 · Paper on Sky 2.23 · Sky on Stone 2.04 · Slate on Graphite 1.97

Checklist: contrast from the AA list · body text 16px · labels 11px minimum · alt text on images · captions on video · never color alone · visible focus · 44px tap targets · no long sentences in all caps.

---

## 3. Typography

### 3.1 Families

| Role | Family | Fallback | Use |
|---|---|---|---|
| Display | **CMG Sans** | **Archivo** (web, Canva, anywhere CMG isn't licensed) | Headlines, sermon titles, lower thirds, signage. Default weight 900. |
| Accent | **Instrument Serif** Italic | Times New Roman | One emotional word per composition, pull quotes, scripture, lead paragraphs. |
| Body / UI | **Host Grotesk** | system-ui | Paragraphs, captions, UI text. Takes over from the display face below 18px. |
| Utility | **JetBrains Mono** | ui-monospace | Eyebrows, labels, timestamps, hex codes. Always uppercase. |

CMG Sans is licensed for print and design apps; the online guide renders Archivo.

### 3.2 Type scale

| Level | Size | Weight | Leading | Tracking | Web (fluid) |
|---|---|---|---|---|---|
| Display | 200 | 900 | 0.86 | −0.045em | `clamp(64px, 12vw, 200px)` |
| H1 | 144 | 800 | 0.88 | −0.04em | `clamp(48px, 9vw, 144px)` |
| H2 | 96 | 800 | 0.92 | −0.03em | `clamp(36px, 6vw, 96px)` |
| H3 | 48 | 700 | 1.0 | −0.02em | `clamp(24px, 3.4vw, 48px)` |
| H4 | 22 | 800 | 1.15 | −0.015em | `22px` |
| Body Large | 20 | 400 | 1.5 | 0 | `20px` |
| Body | 16 | 400 | 1.55 | 0 | `16px` |
| Caption | 14 | 400 | 1.5 | 0 | `14px` |
| Label | 11 minimum | 500 | 1.4 | +0.14em, uppercase | `11px` |

Sizes are pixels on a 1440px screen; in slides, print, and design apps use the same numbers in points. Section markers may run at +0.18em.

---

## 4. Spacing and layout

- Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128` (8px base, 4px half-step).
- Between sections: 64px on phones, 128px on desktop (`clamp(64px, 9vw, 128px)`).
- Inside a section: 48px header to content, 24px between cards, 16px heading to paragraph, 8px label to heading.
- Content width 1200px; full-bleed bands up to 1440px. Side gutter `clamp(20px, 4vw, 72px)`. Body text no wider than 68ch.
- 12-column grid for digital, 6 for print. Headlines span 8–12 columns; body never wider than 8.
- Breakpoints: 480, 768, 1024, 1440.
- Principles: hierarchy by size, whitespace is content, scale extremes, one italic moment, texture not noise.

## 5. Corners, shadows, borders

- Corners: 0 for everything rectangular. 999px for chips and tags only. 50% for dots and avatars. 4px at most where a platform forces rounding (Wix widgets, Subsplash, app stores).
- No drop shadows on cards or panels, and never on the logo. One overlay shadow for menus and modals on light: `0 12px 40px rgba(10,10,13,0.18)`. None on dark.
- Structure comes from 1px hairlines.
- Focus ring: 2px 2RC Blue with a 2px gap: `0 0 0 2px <background>, 0 0 0 4px #00A5E5`.

## 6. Components

- **Buttons:** square, 44px minimum, JetBrains Mono 12px uppercase +0.14em, may end in "→". Primary: Ink fill on light, Paper fill on dark. Brand: 2RC Blue fill with **Ink** text, turning Blue Deep with white text on hover. Outline: 1px current color. Text link: no border. 150ms hover.
- **Links:** Blue Deep on light, 2RC Blue on dark, underlined with a 3px offset. External links end in ↗.
- **Forms:** 48px fields, 1px hairline, 0 radius, Host Grotesk 16px, mono label above the field, 2RC Blue focus ring, error message in words plus the error color.
- **Cards:** square and flat. Mono label top left, headline, mono metadata row split left and right. Hairline on light; Ink Elevated on dark.
- **Navigation:** Plan a Visit · Watch · About Us · Get Involved · Give. "Plan a Visit" is the brand button. On phones, a "Menu" button with a word opens a full-screen list with 56px rows.
- **Footer:** Ink, short sign-off line with one italic word, columns for Visit, Explore, Connect.

## 7. Icons and motion

- Icons: Lucide, 24px grid, 1.5px stroke, round caps, current text color. Keep the typographic arrows for links: → action, ↗ leaves the site, ↘ points down the page. Social logos may be filled glyphs.
- Motion: 150ms hovers, 250ms reveals, one easing `cubic-bezier(0.2, 0, 0, 1)`. Type rises about 24px and fades in; never bounces. The gradient may drift slowly (20s+). Respect `prefers-reduced-motion`.

## 8. Images

- Documentary, not posed. Honest available light (stage wash, low key, backlight). Grain allowed. People over places. Shoot from inside the room at eye level. Cohesive grade within a series.
- Avoid stock clichés, staged candids, over-saturation, stage-only shots, mixed grades, lens flares.
- Formats: HD slide 1920×1080, Subsplash banner 1920×692, social square 1080×1080, reel 1080×1920, lower third 1920×225 at 50px offsets.

## 9. Voice

Three tone words: **Simple** ("cookies on the bottom shelf"), **Authentically positive** (genuine enthusiasm, not exclamation points), **Tension of grace and truth** (honest enough to mean it, kind enough to land).

Use freely: show up, you're invited, save you a seat, walk it out, all in, real, together, try this, honest, hopeful, bring a friend, hand-in-hand, bottom shelf, generous, next step, worth it.

Avoid: anointed, body of believers, edify, "don't rob God," blessed and highly favored, walk in your truth, spirit-led journey, crucible, sanctified, brethren, HUGE!!!, EPIC, lit/fire 🔥, "don't miss it!!", get plugged in.

Locations: 88 Hubble Drive, 96 Hubble Drive, and online. Official location names are being finalized — check the guide before using a name. Mono labels read DAY · TIME · PLACE, e.g. `SUN · 10:30AM · [LOCATION]`.

## 10. Logo

Two parallel parallelograms at a 67° interior angle (23° lean from vertical); never change the angle. Primary: gradient mark, horizontal lockup. Also vertical lockup, solid blue, reversed white, black. Clearspace: one parallelogram width on every side. Minimum: print 1" wide; screen 32px icon / 250px horizontal lockup. Backgrounds: white, navy, ink, or solid 2RC Blue. Don't skew, stretch, recolor, fade, put it on a loud background, or add a drop shadow.

## 11. Sub-brands

- **2Rivers Youth** (12–18): "Rooted · Loud · Alive." In progress.
- **2Rivers Kids** (0–11): In progress. Needs larger body type — the audience is kids and their parents.
- Sub-brands may override: display font, accent palette, texture, corner radius.
- Locked for everyone: the mark, its 67° angle, 2RC Blue, the gradient direction, the voice.