Groups · Fall01
Documentary, not posed.
Catch people in the moment — singing, listening, weeping, laughing. The candid frame wins over the composed one every time.
How we look
& how we
sound.
A field guide for our team — visual standards, voice, and the small decisions that add up to feeling like us.
Index · Sixteen sections
V1.1 · Fall 2026
00
Quick Reference
Colors, fonts, the three rules, and the files — on one screen.
↘
01
Foundation
Mission, design philosophy, where we sit on the spectrum.
P. 02
02
The Eight Values
The filters behind every decision we make.
P. 03
03
Tone Words
Simple. Authentically positive. Tension of grace & truth.
P. 04
04
Voice in Practice
What to write, what to retire, and how to tell the difference.
P. 05
05
Logo System
Marks, lockups, clearspace, and where things go wrong.
P. 06
06
The Signature Gradient
Our most-used motion across the brand.
P. 07
07
Color
Anchors, neutrals, and the five hues that build the gradient.
P. 08
08
Typography
CMG Sans as the workhorse; Instrument Serif for grace moments.
P. 09
09
Photography
See what we say. Real moments, real people, cinematic light.
P. 10
10
Layout Principles
Hierarchy, grid, scale, and the rhythm of a page.
P. 11
11
Digital
Website, app, email, and anything people tap.
P. 12
12
Sermon Series Flex
Where the brand bends — and where it doesn't.
P. 13
13
In the Wild
Slides, lower thirds, socials, banners, merch, email.
P. 14
14
Sub-brands
2Rivers Youth and 2Rivers Kids — what stays, what pivots.
P. 15
15
Downloads
Tokens, brand kit, AI brief, logos, and templates.
P. 16
16
Sign-off
Credits, contact, changelog.
P. 17
00 / Quick Reference
The short version.
Everything most people need, on one screen. Start here — scroll down when you need the why.
Three anchors
The gradient · 135°
#6CB4F0 · #6A4CFF · #B53DE8 · #FF3D8A · #FF2935
2RC Blue#00A5E5
Ink#0A0A0D
Stone#F4F5F7
Four fonts
- CMG SansHeadlines · Archivo online & in Canva
- Instrument SerifOne italic word per design
- Host GroteskBody text & anything under 18px
- JetBrains MonoLabels · uppercase · +0.14em
Three must-follow rules
- Never white text on 2RC Blue. Use Ink text, or switch to Blue Deep.
- One italic serif word per design — never a full sentence.
- One gradient per design, at 135°, on Ink or Paper only.
01 / Foundation
Why we exist,
and how we show up.
Everything in this guide sits on top of a single sentence. If a design choice doesn't help that sentence land, it's the wrong choice.
Mission Statement
We exist to help people become passionate followers of Jesus.
TrendTimeless
−50+5
We lean toward the trend side. Modern, current, on-the-pulse — but never disposable.
FormFunction
−50+5
We slightly favor function. Clarity beats cleverness. The message wins.
02 / Values
Eight filters.
Every decision.
These statements aren't meant to be memorized. They're filters we use for every decision we make as a church — and everything we post or say ought to allude to or reflect them, even if it isn't said outright.
01 The Lead Story
Jesus is the Lead Story.
If He's not the headline, rewrite the headline.
02 Worship
We worship with reckless abandon because we've been radically changed.
Honesty over polish. Joy over cool.
03 Community
Life change happens best in community.
Show people together, not just on stage.
04 Contributors
We are spiritual contributors, not just spiritual consumers.
Invite. Always invite.
05 On Mission
We live on mission.
Outside the room matters as much as inside.
06 Next Generation
We're all in on the next generation.
If kids and students aren't visible, we're missing it.
07 Generosity
We will lead the way with irrational generosity.
When in doubt, give more than expected.
08 Risk
We are faith-filled, big thinking, unafraid risk takers.
Safe design is a missed opportunity.
03 / Tone Words
How we sound.
When you create content for 2Rivers or speak from stage, there are ways we choose what we say and how we say it. Our content is always three things.
Tone · 01
Simple.
We "like the cookies on the bottom shelf." We stay away from churchy buzzwords or overly used bible jargon that may alienate those without that experience or knowledge. We want everyone to clearly understand us — and ultimately the Gospel message.
Clear and simple is always better than big words and abstract ideas.
Tone · 02
Authentically Positive.
We don't overhype but we're not boring. We bring genuine enthusiasm to our content, reflecting our transformative experiences with Jesus. We avoid overhyping and instead communicate our message in a sincere, positive, and relatable manner.
Genuine enthusiasm. Not exclamation points.
Tone · 03
Tension of Grace & Truth.
We talk about the hard things, but we're not going to alienate or bash anyone with them. Our voice navigates the delicate balance between honesty and compassion. We are open-handed and try our best to communicate what the Bible says.
Honest enough to mean it. Kind enough to land.
04 / Voice in Practice
Write like a friend
who happens to know.
These are the tonal calibrations to keep handy — examples of how the tone words show up at the line level.
Sounds like us
Event announce
"Bring a friend, bring a casserole, and bring your questions. Sunday at 10."
Simple words. Concrete invitation. Warm without overselling.
Not us
Same event
"You won't BELIEVE what's happening this Sunday — God is moving in HUGE ways, you have to be there!!"
Overhyped. All caps + exclamation stacking. Reads like a sale, not a service.
Sounds like us
Hard topic
"This part is hard. We're not going to pretend it isn't. But God doesn't waste hard."
Honesty + compassion. Doesn't paper over pain. Doesn't shame either.
Not us
Same topic
"In the crucible of your suffering, the sanctification of your soul is being wrought."
Bottom-shelf rule broken. Jargon and abstraction over clarity.
Sounds like us
Welcome / first-time
"You don't need to dress up or have it together. Show up as you are — we'll save you a seat."
Bottom-shelf clarity. Concrete next step. No church-insider language.
Not us
Same welcome
"Come fellowship with the body and be edified by anointed worship and prophetic teaching."
Inside-baseball. Reads as for-the-already-in, not for the seeker.
Sounds like us
Giving / generosity
"Generosity is contagious — when one of us gives, all of us get to be part of something we couldn't do alone."
Reflects value #7 without guilt-tripping. Frames giving as participation.
Not us
Same ask
"Don't rob God — bring your tithe and watch Him pour out blessings you can't contain."
Transactional theology, fear-based motivation. Not our posture.
Use freely
Show upYou're invitedSave you a seatWalk it out
All inRealTogetherTry this
HonestHopefulBring a friendHand-in-hand
Bottom shelfGenerousNext stepWorth it
Avoid / retire
AnointedBody of believersEdifyDon't rob God
Blessed and highly favoredWalk in your truthSpirit-led journey
CrucibleSanctifiedBrethrenHUGE!!!EPIC
Lit / Fire 🔥Don't miss it!!Get plugged in
Locations & naming
Say it the same way, every time.
Pending approval The names below are proposals. Use the addresses freely; hold the names until the comms team confirms them.
NameWhereMono label
Sunday Morning at 88[Proposed — confirm]88 Hubble Drive
O'Fallon, MO
O'Fallon, MO
SUN · [TIME] · [88 SHORT NAME]The Venue at 96[Proposed — confirm]96 Hubble Drive
O'Fallon, MO
O'Fallon, MO
SUN · 10:30AM · THE VENUE AT 962Rivers Online[Proposed — confirm]Web, app & YouTube
SUN · [TIME] · 2RIVERS ONLINE- Order
- Day · time · place, with a middle dot and a space each side.
- Time
- Like the example:
10:30AM— no space, no periods. - Numbers
- Write the street number as a numeral: 88 and 96.
05 / Logo System
Two slashes.
One current.
Two parallel parallelograms — abstract enough to read as a "2," literal enough to suggest two currents converging. Simple, clean, fresh, unique.
The mark, in three forms.
Our primary expression is the gradient mark — used full-color on white or dark. Where the gradient can't render (single-color print, embroidery, very small sizes), reach for the solid blue, white, or black versions.
The mark may appear with or without the wordmark. When in doubt about pairing or context, default to the horizontal lockup.
Questions: marketing@2riverschurch.org
Primary · HorizontalLockup A
Vertical · StackedLockup B
Secondary · IconSolid blue
Reversed · WhiteFor dark backgrounds
Clearspace
Allow a minimum of one parallelogram-width of empty space on every side of the mark. More is better. Never crowd it with type, edges, or imagery.
X
X
X
X
Minimum size
Print: 1" wide minimum at 266+ DPI. Screen: 32px minimum for the icon, 250px minimum for the horizontal lockup. Smaller than that, the mark loses its read.
Print · 1"
Screen · 32px
Background contrast
Use the mark on white, deep navy, ink black, or solid 2RC Blue. Avoid placing it on a similarly-saturated background — the mark should remain the loudest thing in the frame.
Mark geometry
Both parallelograms share identical proportions. Each slanted edge makes a 67° angle with the horizontal baseline — a 23° lean from vertical. This angle defines the character of the mark and must never change. Any skew, rotation, or rescaling that alters this lean breaks the system.
67°
Interior angle
23°
Lean from vertical
Don't do this.
Skew
Stretch
Recolor
Faded / low contrast
Loud background
Drop shadow
The Signature Gradient · 06
Blue runs into purple, purple runs into pink,
pink runs into red.
Always
Run the gradient at 135° (top-left → bottom-right) so it reads as motion, not decoration.
Always
Add a light grain or noise overlay on large surfaces — it stops the gradient from feeling synthetic.
Always
Anchor gradient surfaces with ink black or paper white. Two gradients in one frame is too many.
Never
Reverse the direction, drop a stop, or substitute hues. The gradient is a recognizable signature, not a swatch palette to mix.
Never
Set body copy in the gradient. Reserve gradient text for one display word per composition — at most.
Never
Place the gradient on a colored background. It needs ink, paper, or its own canvas to breathe.
Variations & cousins
For specific contexts only
Signature
Cool side
Warm side
Vertical fade
Aurora
Blue duotone
Ink → blue
Desaturated
07 / Color
Three anchors.
One spectrum.
Three non-negotiables — 2RC Blue, Ink, and Stone form the daily palette. The five gradient hues sit on top, deployed deliberately when energy is needed.
Primary Anchors
Neutrals — for type, rules, and structure
Accessible helpers — for small text, links, and buttons on screen
Primary
2RC Blue
HEX#00A5E5
RGB0 · 165 · 229
CMYK90 · 10 · 0 · 0
PMS2995 C
Canvas · Dark
Ink
HEX#0A0A0D
RGB10 · 10 · 13
CMYK0 · 0 · 0 · 95
PMSBlack 6 C
Canvas · Light
Stone
HEX#F4F5F7
RGB244 · 245 · 247
CMYK2 · 1 · 0 · 3
PMSCool Gray 1 C
AtmosphericNavy#001B2E
Elevated darkGraphite#2A2D33
Original graySlate#58595B
Cool lightMist#C6CDD4
Pure whitePaper#FFFFFF
Blue text · ButtonsBlue Deep#0066A3Blue text and links on light grounds. Buttons with white text — white on Blue Deep is 6.12:1.
Labels on darkAsh#8A8C90Small labels and metadata on Ink — 5.87:1. Slate stays the secondary text color on light grounds.
The one contrast rule
The Five Gradient Stops
Never put white text on 2RC Blue (2.79:1, fails). Use Ink text on Blue (7.07:1) or white on Blue Deep (6.12:1).
Stop 01 · 0%
Sky#6CB4F0
Stop 02 · 25%
Electric#6A4CFF
Stop 03 · 50%
Magenta#B53DE8
Stop 04 · 75%
Hot Pink#FF3D8A
Stop 05 · 100%
Signal#FF2935
Approved Combinations
Ink + Stone
Ink + Blue
Stone + Ink
Paper + BlueDisplay type only, 24px and up
Navy + Bright
Blue + Ink
Gradient + Paper
Ink + Grad Text
Accessible pairs
AA 4.5:1 and up — safe for any text. Large only 3 to 4.49:1 — headlines 24px and up (or 19px bold). Don't under 3:1 — not for text.
SampleTextBackgroundRatioUse
InkPaper19.77:1AA
InkStone18.12:1AA
StoneInk18.12:1AA
PaperNavy17.56:1AA
PaperGraphite13.80:1AA
MistInk12.32:1AA
MistNavy10.94:1AA
InkSky8.87:1AA
Blue BrightNavy8.68:1AA
MistGraphite8.60:1AA
2RC BlueInk7.07:1AA
Ink2RC Blue7.07:1AA
SlatePaper7.01:1AA
SlateStone6.43:1AA
2RC BlueNavy6.28:1AA
PaperBlue Deep6.12:1AA
Blue DeepPaper6.12:1AA
Hot PinkInk5.92:1AA
AshInk5.87:1AA
Blue DeepStone5.61:1AA
AshInk Elevated5.40:1AA
PaperElectric5.13:1AA
2RC BlueGraphite4.94:1AA
ElectricStone4.71:1AA
InkMagenta4.52:1AA
PaperMagenta4.38:1Large only
MagentaStone4.01:1Large only
ElectricInk3.85:1Large only
PaperSignal3.74:1Large only
SignalStone3.43:1Large only
PaperHot Pink3.34:1Large only
Hot PinkStone3.06:1Large only
SlateInk2.82:1Don't
Paper2RC Blue2.79:1Don't
2RC BluePaper2.79:1Don't
SlateInk Elevated2.60:1Don't
2RC BlueStone2.56:1Don't
PaperSky2.23:1Don't
SkyStone2.04:1Don't
SlateGraphite1.97:1Don't
Ratios use the WCAG 2.1 formula. Gradient text is judged by its weakest stop, so keep it to display sizes.
08 / Typography
Bold workhorse,
italic grace.
Type does most of the heavy lifting in our system. A strong sans for clarity and impact; an editorial italic to introduce warmth and breath; a mono for utility.
Aa Bb 01
Light · 200Passionate followers
Regular · 400Passionate followers
Semibold · 600Passionate followers
Bold · 800Passionate followers
Black · 900Passionate followers
passionate
Single accentgrace
Pull quotehonest enough
Versebe still & know
Read me clearly.
RegularThe quick fox jumps over.
MediumThe quick fox jumps over.
SemiboldThe quick fox jumps over.
01 / Sunday
LabelNext step · Get connected
TimestampSun · 10am · O'Fallon
Code#00A5E5 · 135deg
Type Scale · Approved Sizes
LevelSize · WeightLeading · TrackingWeb (fluid)Preview
Display200 · 9000.86 · −0.045emclamp(64px, 12vw, 200px)Sunday
H1144 · 8000.88 · −0.04emclamp(48px, 9vw, 144px)Section title
H296 · 8000.92 · −0.03emclamp(36px, 6vw, 96px)Sub-section
H348 · 7001.0 · −0.02emclamp(24px, 3.4vw, 48px)Card heading
H422 · 8001.15 · −0.015em22pxSmall heading
Body-lg20 · 4001.5 · 020pxLead paragraph copy
Body16 · 4001.55 · 016pxStandard paragraph copy
Caption14 · 4001.5 · 014pxCaptions and notes
Label11 · 5001.4 · +0.14em11px minimumLabel / Eyebrow
Sizes are pixels on a 1440px screen. In slides, print, and design apps, use the same numbers in points. On the web, use the fluid value — it shrinks on phones and stops at the full size. Section markers may run wider, at +0.18em.
09 / Photography
See what we say.
Photography is our most powerful tool for proving we mean what we say. We show real people doing real things in honest light — never staged, never glossy, never stock.
Reference · Worship / Documentary
01
02
Honest light.
Lean into available light — stage wash, low key, hard backlight. Cinematic, not commercial.
03
Grain is allowed.
A touch of grain or film texture is welcome. It signals reality. Avoid clinical, over-retouched skin or HDR.
04
People over places.
The building doesn't change lives — people do. When in doubt, frame humans.
Do
- Shoot from inside the room — eye-level, in the middle of it.
- Look for hands raised, eyes closed, real laughter, real tears.
- Embrace dark backgrounds and stage haze. Mystery is fine.
- Capture kids and students with the same care as adults.
- Color-grade cohesively — same look across a series or campaign.
- Caption with bottom-shelf clarity if a caption is needed.
Don't
- Use generic Christian stock — open Bibles on grass, cupped hands of light, etc.
- Stage a fake candid. People can tell.
- Over-saturate or over-sharpen. Trust the moment.
- Show only the stage — the room is half the story.
- Mix radically different grades within one campaign.
- Crop faces awkwardly or use lens flares as decoration.
10 / Layout
Big type, breathing room,
one strong move per page.
Our pages reward restraint. One headline that owns the space, one supporting move, lots of air. The grid is invisible but always present.
PRINCIPLE 01
Hierarchy by size.
One thing is largest. One thing is loudest. Everything else falls in line. Resist the urge to make multiple elements compete.
PRINCIPLE 02
12-column grid.
Snap to a 12-column grid for digital, 6-column for print. Headlines can span 8–12 columns. Body copy never wider than 8.
PRINCIPLE 03
Whitespace is content.
Empty space gives the message room to land. If a layout feels crowded, remove something — don't shrink it.
See
this.↘
this.↘
PRINCIPLE 04
Scale extremes.
Either very big or very small — avoid the middle. Mid-size type reads bureaucratic. Push display loud and labels quiet.
be still
& know
& know
PRINCIPLE 05
One italic moment.
The italic serif is a spice, not a sauce. One word per composition — usually the word that carries the most emotional weight.
PRINCIPLE 06
Texture, not noise.
A light grain overlay is welcome on gradients and dark photos. Heavy textures, patterns, and "design flourishes" are not.
11 / Digital
Built for the screen.
The same brand, for the website, the app, email, and anything people tap.
11.1
Tokens at a glance.
Every screen starts from these roles, not from raw hex codes. Set them once in a platform's theme settings and the rest of this chapter follows. Developers can drop in variables.css; design tools can read design-tokens.json.
RoleLight modeDark modeToken
BackgroundStone#F4F5F7Ink#0A0A0D
--2r-bgSurfacePaper#FFFFFFInk Elevated#15151A
--2r-surfaceTextInk#0A0A0DStone#F4F5F7
--2r-textBody textInk#0A0A0DMist#C6CDD4
--2r-text-bodyMuted textSlate#58595BAsh#8A8C90
--2r-text-mutedLinkBlue Deep#0066A32RC Blue#00A5E5
--2r-linkLineInk at 14%Hairline, 1pxWhite at 12%Hairline, 1px
--2r-lineFocus2RC Blue2px ring, 2px gap2RC Blue2px ring, 2px gap
--2r-focusErrorSignal Deep#C8102ESignal#FF2935
--2r-error
11.2
Buttons.
Square, at least 44px tall, with a mono uppercase label at +0.14em. A button may end in "→". One primary action per screen — the rest step down to outline or text.
On Stone
Plan a visit →Primary · Ink
Watch →Brand · Ink on Blue
On Ink
Plan a visit →Primary · Paper
Watch →Brand · Ink on Blue
- Shape
- Square corners. 44px minimum height, 24px side padding.
- Label
- JetBrains Mono 12px, weight 500, uppercase, +0.14em.
- Hover
- Primary and outline invert. Brand turns Blue Deep with white text. 150ms.
- Focus
- 2px 2RC Blue ring with a 2px gap. Never remove it.
Don't
Watch →Don't White on 2RC Blue · 2.79:1
Watch →Do White on Blue Deep · 6.12:1
11.3
Links.
Links inside sentences are always underlined — color alone doesn't tell everyone it's a link. Links that leave our site end in ↗.
On Stone · Blue Deep
New here? Plan your first visit and we'll save you a seat. You can also watch last Sunday ↗ on YouTube.
5.61:1 on Stone · 6.12:1 on Paper
On Ink · 2RC Blue
New here? Plan your first visit and we'll save you a seat. You can also watch last Sunday ↗ on YouTube.
7.07:1 on Ink- Light grounds
- Blue Deep
#0066A3, 1px underline, 3px offset. 2px underline on hover. - Dark grounds
- 2RC Blue
#00A5E5, same underline. - External
- End with ↗ so people know they're leaving. Add "opens in a new tab" for screen readers if it does.
- Link text
- Say where it goes — "Plan your first visit," not "click here."
11.4
Forms.
Fields are 48px tall with a 1px hairline, square corners, and Host Grotesk at 16px — 16px also stops phones from zooming in. Labels sit above the field in mono, never inside it.
On Stone
Add the full 10-digit number so we can text you.
Signal Deep #C8102E · 5.39:1 on Stone
Save my seat →
On Ink
Add the full 10-digit number so we can text you.
Signal #FF2935 · 5.29:1 on Ink
Save my seat →
- Field
- 48px tall, 16px side padding, 1px hairline (
--2r-line), 0 radius, Paper on light and Ink Elevated on dark. - Focus
- 2px 2RC Blue ring with a 2px gap (
--2r-focus-ring). - Error
- Red marker on the field plus a message under it that says how to fix it. Signal Deep
#C8102Eon light, Signal#FF2935on dark. Never color alone — always the words too. - Required
- Mark the optional fields "(optional)" instead of starring the required ones.
11.5
Cards.
Square and flat — no shadow, ever. The same anatomy as the cards in this guide: a mono label top left, the headline, and a mono metadata row split left and right.
Series · Week 302
Honest enough to mean it.
Serve03
Be the first hello someone gets.
- Light
- Paper surface with a 1px hairline. No fill color, no shadow.
- Dark
- Ink Elevated
#15151Aon Ink, with a white-12% hairline. - Whole card
- If the whole card is clickable, the focus ring goes around the whole card.
11.6
Navigation, header & footer.
Five top-level items from the live site, restyled to the brand. "Plan a Visit" is the one brand button. On phones everything folds into a menu with big, easy targets.
Header · desktop · light
Header · desktop · dark
Phone · tap Menu to try it
- Order
- Plan a Visit · Watch · About Us · Get Involved · Give. "Plan a Visit" is the brand button, right-most on desktop and pinned first on phones.
- Desktop
- Logo left, links right, mono 12px uppercase. The current page gets a 2px blue underline.
- Phone
- Logo and a "Menu" button with a word, not just an icon. The open menu fills the screen: Archivo 800 at 28px, rows at least 56px tall, hairlines between.
- Behavior
- The button reports open or closed to screen readers (
aria-expanded). Esc closes it. No hover-only menus. - Sticky header
- Fine, if it stays under 72px tall on phones.
11.7
Spacing & layout.
An 8px rhythm with a 4px half-step. When a layout feels crowded, take something out — don't squeeze the space.
--2r-space-14
--2r-space-28
--2r-space-312
--2r-space-416
--2r-space-624
--2r-space-832
--2r-space-1248
--2r-space-1664
--2r-space-2496
--2r-space-32128
- Between sections
- 64px on phones, 128px on desktop:
clamp(64px, 9vw, 128px). - Inside a section
- 48px from header to content, 24px between cards, 16px from heading to paragraph, 8px from label to heading.
- Max width
- 1200px for website content, centered. 1440px for full-bleed bands.
- Side gutter
clamp(20px, 4vw, 72px).- Reading measure
- Body text no wider than 68ch — about 10 to 12 words a line.
Breakpoints
0Phone
480Large phone
768Tablet
1024Laptop
1440Desktop
This line is set to the 68ch reading measure. Past this width the eye loses its place on the way back to the start of the next line, so long paragraphs feel harder than they are. Keep body text here, and let headlines and images run wider.
11.8
Corners & depth.
Square by default. Structure comes from hairlines, not shadows. There is exactly one shadow in the system, and it's only for things that float above the page.
- 0px
- Default. Cards, buttons, fields, images, panels.
Next stepGroups
- 999px
- Chips and tags only.
- 4px max
- Only where a platform forces rounding — Wix widgets, Subsplash, app stores.
The one shadow · menus & modals
- Overlay shadow
0 12px 40px rgba(10,10,13,0.18)on light. None on dark — use Ink Elevated and a hairline instead.- Cards
- No shadow. If a card needs to stand out, give it more space, not depth.
- Logo
- Never a drop shadow, on any platform.
11.9
Icons.
One line set, everywhere: Lucide ↗. It's free, open source, drawn on a 24px grid, and set here at a 1.5px stroke so it sits quietly next to Host Grotesk. Icons take the current text color.
Keep the typographic arrows for links
→ action · ↗ leaves the site · ↘ points down the page
- Set
- Lucide, 24px grid, 1.5px stroke, round caps. Don't mix in a second set.
- Size
- 20 or 24px. Pair with a word wherever there's room.
- Social
- Platform logos (Instagram, YouTube, Facebook) may be filled glyphs — use each platform's official mark, one color.
- Alone
- An icon with no word next to it needs a text label for screen readers.
11.10
Motion.
Calm and quick. Things rise into place; nothing bounces, spins, or flashes. If someone's device asks for less motion, we stop moving.
Type enters · rise & fade
You're invited.
Gradient drift · 24s
- Hover
- 150ms (
--2r-dur-fast). - Reveal
- 250ms for menus and panels (
--2r-dur); up to 600ms for a headline entering. - Easing
- One curve for everything:
cubic-bezier(0.2, 0, 0, 1)(--2r-ease). - Type
- Rises about 24px and fades in. The italic word may follow a beat later. Never bounce, scale, or type out letter by letter.
- Gradient
- May drift slowly — 20 seconds or more per pass, always 135°, all five stops.
- Reduced motion
- Respect
prefers-reduced-motion: no drift, no rise, instant state changes. Video and reels keep a pause button.
11.11
Before you publish.
Nine checks anyone can run — no tools needed beyond your eyes and a phone. If it passes all nine, it's ready.
- ContrastText uses a pair marked AA in the accessible pairs table. No white text on 2RC Blue.
- Body text is 16pxParagraphs at 16px or larger. Captions can be 14px.
- Labels are 11px or largerNothing smaller, even in a footer.
- Alt textEvery meaningful image says what it shows. Decorative images get empty alt text.
- Captions on videoEvery video and reel has captions — burned in for social, a caption file for the web.
- Not color aloneErrors, links, and status also use words, underlines, or icons.
- Visible focusTab through the page — you can always see where you are.
- 44px tap targetsButtons and links on phones are at least 44px tall.
- No long sentences in all capsAll caps is for short mono labels. Sentences stay in sentence case.
11.12
Platform notes.
Where our brand lives day to day, what to set in each one, and where each platform draws the line. Settings move around — check the current menus in your account.
Website · rebuild in progress
Wix
Set
- Site colors to Ink, Stone, Paper, 2RC Blue, Blue Deep.
- Upload Archivo, Host Grotesk, Instrument Serif, JetBrains Mono; map text styles to the type scale.
- Buttons: square, 44px, Ink or Blue Deep. Corners 0, shadows off.
Can't
- Some built-in widgets (forms, booking, members) keep their own styling — 4px corners at most, shadows off where the panel allows.
App & media
Subsplash
Set
- Brand color, logo, and dark theme on Ink.
- Banner art at 1920×692 and series art from the templates in In the Wild.
- If the platform puts white text on the brand color, use Blue Deep, not 2RC Blue.
Can't
- Fonts and component shapes are the platform's. Carry the brand through artwork, color, and words.
Email
Mailchimp
Set
- Background Stone or Paper, text Ink, links Blue Deep, body 16px.
- Buttons square, Ink or Blue Deep with white text.
- Headlines as live text in a bold fallback (Arial Black, Arial) — or as an image with alt text.
Can't
- Most inboxes won't load our fonts, and some flip colors in dark mode. Gradients only as images.
Forms & registrations
Planning Center
Set
- Church logo and header image.
- Brand color: if it sits behind white button text, use Blue Deep, not 2RC Blue.
- Plain, bottom-shelf field labels and help text.
Can't
- Fonts, field styles, and layout are fixed. Keep the brand in the header image and the words.
For volunteers
Canva
Set
- The Brand Kit from the brand kit page: colors in order, fonts, and logos.
- Start from the slide and social templates in Downloads.
Can't
- CMG Sans needs its own license to upload — use Archivo until it's added.
- Canva can't stop a second gradient or white on blue. The three volunteer rules can.
Anywhere else
Start from the tokens.
- Find the theme or brand settings.
- Set background, text, link, and button from 11.1.
- Turn off shadows and rounding as far as it allows.
- Run the nine checks in 11.11.
12 / Series Flex
Where the brand bends.
Sermon series get the longest leash. Series art exists to do one thing — make you want to know more about what's being preached. Within reason, almost anything is fair game.
What stays the same
- One element from the core brand — typography, blue, gradient, or mark.
- Bottom-shelf clarity in the series title.
- The 2Rivers mark visible somewhere in the lockup of supporting graphics.
- A consistent treatment across the series (all five slides feel like one campaign).
What can flex
- Series-specific typefaces or display lockups (paired with CMG Sans, not replacing it everywhere).
- Photography style — moody documentary, AI-cinematic, illustrated, or abstract.
- Color — series can introduce one accent that lives outside the core palette.
- Texture, grain, and atmospheric effects beyond the brand defaults.
Meaning
less.
RE—
FRESH
DEEP
END.
UN—
AFRAID
Holy.
ALL
IN.
13 / In the Wild
The brand,
at every size.
Templates for the formats we ship most. Use these as starting points — match the rhythm, then bring your content.
Social Square · 1080×1080
You don't have to have it all together.
Social Square · Photo-led
Honesty doesn't
have to hurt.
Social Square · Gradient
08
Value · 08
Unafraid risk takers.
Reel · 1080×1920
grace
has
your
seat.
Reel · Editorial
● Sunday · 06.16
be
still
&
know
Psalm 46:10 · 2RC
Reel · Verse
"For we are God's handiwork, created to do good."
Ephesians 2:10
Reel · Countdown
Days until Easter
07
Save the date. Bring everyone you know.
2riverschurch.org/easter
Lower Third · 1920×225 · 50px offsets
"Honest enough to mean it. Kind enough to land."
Pastor Brad · Wk 03
Poster · Swiss Modernist
08
RISK
UN—
AFRAID
AFRAID
Poster · Gradient
2Rivers · Easter
He is risen.
So are we.
So are we.
April 5 · 10amO'Fallon
Poster · Editorial
№ 12 · Worship Night
When the
room is
full.
room is
full.
Fri · 7pm2RC Main
Merch · Tee back
Passionate
PASSIONATE FOLLOWERS
SKU · TEE-2RC-01 · BLACK
Passionate
followers.
Vertical text down the spine. Gradient mark at the nape. Ink black tee, screen-printed in soft-hand white.
Email · Mailchimp
This Sunday:
2RIVERS · WEEKLY
This Sunday:
we're talking honesty.
14 / Sub-brands
Same family,
different volume.
2Rivers Youth and 2Rivers Kids each have permission to push the brand in a direction the parent can't. The audience defines the volume — but the DNA stays.
Sub-brand · 14A
Ages 12—18
YOUTH
Rooted · Loud · Alive
Raw
Loud
Faithful
Inventive
Alive
Rooted
View Full Youth Brand Guide ↗
Sub-brand tokens
What can change — and what can't.
Youth and Kids start from the same token files as the main brand and override only the tokens below. Both guides are still in progress.
Token2Rivers Youth2Rivers Kids
StatusIn progressIn progress
May override
Display fontMay overrideMay override
Accent paletteMay overrideMay override
TextureMay overrideMay override
Corner radiusMay overrideMay override
Body type sizeMain brand (16px)Larger — the audience is kids and their parents
Locked
The markLockedLocked
The 67° angleLockedLocked
2RC BlueLockedLocked
Gradient direction (135°)LockedLocked
The voiceLockedLocked
15 / Downloads
Take it with you.
Everything you need to make something on-brand without waiting on anyone. If a file you need isn't here yet, ask — and we'll add it for the next person too.
Tokens · for web & apps
Design tokens
Every color, size, and spacing value as code. Drop into a website, or import into a design tool.
Canva · Adobe Express
Brand kit
Colors in order, fonts and fallbacks, Canva settings, and the three volunteer rules — ready to paste.
Claude · ChatGPT · other tools
AI brief
The whole guide written for AI tools. Attach the file, or paste the short brief below before you ask for copy or a design.
Fonts
Type
Three are free from Google Fonts. CMG Sans needs a license — use Archivo until you have one.
Logo files
Every lockup, every color.
Placeholders Linked files are ready now. Grey entries are placeholders until the master files are added — email marketing@2riverschurch.org if you need one sooner.
LockupGradientBlueWhiteBlack
SVG for web and apps · PNG for slides, Canva, and social · EPS for print and signage vendors.
Templates
Start from a template.
Placeholders Template links go here as each one is finished. The layouts match In the Wild.
HD slide · 1920×1080Keynote · Google Slides · CanvaPlaceholder — file needed
Social square · 1080×1080CanvaPlaceholder — file needed
Reel · 1080×1920CanvaPlaceholder — file needed
Subsplash banner · 1920×692CanvaPlaceholder — file needed
Lower third · 1920×225ProPresenter · CanvaPlaceholder — file needed
Email header · 600 wideMailchimpPlaceholder — file needed
AI brief
Paste this first.
Before you ask Claude, ChatGPT, or another tool to write or design for 2Rivers, paste this paragraph in. For longer work, attach ai-brief.md instead.
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.
16 / Sign-off
Help people
Help people
become passionate
followers of Jesus.
Changelog
Last updated ·
V1.1Fall 2026
- New chapter: 11 / Digital — tokens, buttons, links, forms, cards, navigation, spacing, corners, icons, motion, an accessibility checklist, and platform notes.
- New: Quick Reference, Downloads, the AI brief, and a brand kit page.
- Color: Blue Deep and Ash added as accessible helpers; a plain contrast rule; an accessible-pairs table; gradient text on light starts at Electric.
- Type: the published scale now matches what the guide uses, with weight, tracking, and web values. Body text is 16px; labels are 11px minimum at +0.14em.
- Voice: locations and naming (pending approval). Sub-brands: which tokens Youth and Kids may change.
- Fixes: "Three non-negotiables," "an editorial," Host Grotesk for the word chips, and labels on dark switched from Slate to Ash.
V1.0Spring 2026
- First edition.