# Brand Guidelines # Reside Church — Brand Guidelines > "A church to belong in." Reside Church is a Pentecostal church in Geelong, Victoria, associated with Australian Christian Churches, gathering Sundays at 175 Moolap Station Road, Moolap VIC 3224. Its mission: *"We are a Spirit-filled church, devoted to loving God and sharing the Good News of Jesus."* The brand is warm, modern and grounded — not corporate, not flashy, not over-styled. The visual language is built on strong type, deep navy surfaces, and full-bleed photography of the congregation. The wordmark is a lowercase "r." set inside a teardrop / map-pin, a literal sign of *Reside*: to dwell, to belong in a place. **Contents** 1. [Logo](#1-logo) 2. [Colour](#2-colour) 3. [Typography](#3-typography) 4. [Photography](#4-photography) 5. [Voice & copy](#5-voice--copy) 6. [UI patterns](#6-ui-patterns) 7. [Motion](#7-motion) 8. [Iconography](#8-iconography) 9. [Asset index](#9-asset-index) --- ## 1. Logo The logomark and full lockup are the most visible expressions of the brand. Treat them as fixed assets: use the supplied files, scale them uniformly, give them room, never modify the design. ### Approved variants | File | Use | |---|---| | `reside-mark-black.png` / `reside-mark-white.png` | Logomark only (the pin) — small uses, favicons, avatars | | `reside-full-black.png` / `reside-full-white.png` | Horizontal lockup with wordmark — default | | `reside-full-black-solid.png` / `reside-full-white-solid.png` | Lockup on a solid contrast tile — thumbnails, social tiles | | `reside-kids.png` | Approved sub-brand lockup | ### Safe area Keep clear space around the logo equal to the height of the "r." pin on all four sides. Nothing enters that zone - text, other logos, image content, page edges, photo subjects, decorative shapes. For the standalone logomark, clear space equals the height of the dot under the *r*. ### Contrast - On light surfaces (white, `--light`, light photos): use the **black** variant. - On dark surfaces (`--primary`, `--secondary`, dark photos): use the **white** variant. - On photography: add a navy scrim (30–60% `rgba(8,16,31,…)`) beneath the logo if the photo is busy or mid-tone. - Never sit the logo on `--accent` (`#4F5584`) — contrast is too soft. Same for any other mid-tone fill. ### Don't - Don't stretch, squash, skew or rotate. Always scale uniformly. If it doesn't fit, use the logomark or change the layout. - Don't recolour. Only the supplied black and white variants are approved. - Don't outline, or add gradients, drop shadows, glows or other effects. - Don't swap the wordmark font or re-typeset "reside church". - Don't separate the pin from the wordmark to make new arrangements. - Don't add anything inside the pin — no swapped letterforms, no icons, no clipped photos. - Don't use the squashed lockup at small sizes; use the logomark. ### Sub-brands Ministry sub-brands (currently **reside kids**) ship as finished lockup artwork, not type-set in code. The kids lockup pairs the lowercase Outfit "reside" wordmark with a hand-lettered ministry name; those letterforms are part of the asset. - Use the supplied PNG. Don't recreate the ministry word in CSS or substitute a hand-lettered font. - Always lowercase "reside", always paired with the logomark to its left. - New sub-brands (youth, worship) must be commissioned as artwork — flag and ask, don't fake it. --- ## 2. Colour Deep navy is the brand neutral and white carries the contrast. The system has **no saturated brand accent** in its core palette — energy comes from photography, not pigment. ### Core | Token | Hex | Role | |---|---|---| | `--primary` | `#0F172A` | Deep slate navy — default page surface, dark cards | | `--secondary` | `#202742` | A step up — elevated dark surfaces, footer bands | | `--accent` | `#4F5584` | Muted indigo — strokes, subtle fills, small UI surfaces | | `--light` | `#F4F7FB` | Icy off-white — alternate section background | | `--white` | `#FFFFFF` | Body text and logos on navy | `--primary` is nearly black with the faintest blue cast — never pure black, never grey. `--accent` is never a full-bleed brand colour. ### Navy ramp A tonal ramp interpolated from primary → accent, for text hierarchy and hairlines on dark: `--navy-950` `#08101F`, `--navy-900` `#0F172A`, `--navy-800` `#161E36`, `--navy-700` `#1B2440`, `--navy-600` `#202742`, `--navy-500` `#2A3358`, `--navy-400` `#4F5584`, `--navy-300` `#7E84A8`, `--navy-200` `#B5B9CE`, `--navy-100` `#DEE0EC`, `--navy-50` `#F4F7FB`. ### Colour Splash palettes High-saturation pairs for campaign and event surfaces only — series art, posters, Sunday tiles, event heroes. Splash colour never replaces navy as the base brand surface. | Palette | Background | Foreground | |---|---|---| | Red | `#EB4E4F` | `#FFFFFF` | | Mint | `#00E5A9` | `#201E1C` | | Purple | `#4500A2` | `#FF6E6E` | | Blue / Yellow | `#304AFB` | `#FED72C` | Rules: each palette is one background and one foreground, **locked together** — never pull a background from one palette and a foreground from another. One palette owns a given piece; use navy, white and the neutral ramp for everything around it. ### Surface modes Three modes do nearly all the work: full-bleed photo with dark overlay, deep-navy section, light off-white section. Maximum of two background colours in any one piece. --- ## 3. Typography **Outfit is the only typeface** — a modern geometric sans, used across weights 100–900 with 400→800 doing the everyday work. It ships with this system as local `@font-face` files (variable plus static cuts). | Role | Weight | Size | Tracking / leading | |---|---|---|---| | Display XL | 800 ExtraBold | `--fs-display-xl` (56 → 104px) | −0.02em, line-height ~1.0 | | Display | 800 ExtraBold | `--fs-display` (44 → 72px) | −0.02em, line-height ~1.02 | | H1 | 700 Bold | `--fs-h1` (32 → 48px) | −0.01em, line-height 1.15 | | H2 | 700 Bold | `--fs-h2` (24 → 36px) | −0.01em, line-height 1.15 | | Body | 400 Regular | 16–18px | line-height 1.4–1.6 | | Eyebrow | 700 Bold | 12px | 0.08em, uppercase | | Buttons | 600 Semibold | 14–16px | sentence case | Headlines are always sentence case. Eyebrows are the only place ALL CAPS is used. ### Layout & spacing - 4px base spacing scale (`--space-1` … `--space-32`). - Generous vertical rhythm: desktop section padding ~80–128px. The page breathes. - Container max-width ~1200px, `--gutter` of `clamp(1rem, 4vw, 2rem)`. - Hero sits flush to the top of the viewport; content below has comfortable top padding. ### Corners, strokes, shadows - `--radius-md` (12px) is the default for cards, image containers and cornered buttons. `--radius-pill` (999px) for **all CTAs**. No sharp corners anywhere. - Hairline borders: `rgba(255,255,255,0.18)` on dark, `rgba(15,23,42,0.12)` on light. No coloured borders — strokes derive from fg/bg, never a hue. - Shadows are navy-tinted `rgba(8,16,31,…)` and subtle: `--shadow-sm` resting cards, `--shadow-md` floating elements, `--shadow-lg` menus. On dark surfaces, elevation is the 1px inset white `--shadow-glow`, not a drop shadow. - No frosted glass or backdrop blur. Cards are solid. --- ## 4. Photography - **Always full-bleed as a hero.** No floating images; photos run edge to edge. - **Cool, slightly desaturated, warm skin tones preserved.** The grade reads cool overall; the people in it stay warm and human. - **Dark overlay** at ~30–55% black over photos carrying type, so white headlines stay readable while the image stays present. Hero gradient: `rgba(8,16,31,0.55)` → `rgba(8,16,31,0.25)`. - **Content is people.** Worship moments, hands raised, congregation singing, kids, smiling pairs. No empty buildings, no stage-tech showcases, no stock crosses. - **Production is part of the brand.** Screens, mics, guitars and lighting rigs are welcome. Reside is a contemporary-worship church and doesn't hide it. --- ## 5. Voice & copy The voice is warm, plain-spoken, inviting, uplifting and visionary, never preachy, never marketing-slick. Every line reads like a real person inviting another real person into a real room. The energy is joyful, not solemn. ### Principles - **No FOMO, ever.** Never *"you don't want to miss it"*, *"last chance"*, or anything that creates pressure or scarcity. - **Encourage people to be in the room.** For baptisms, big Sundays and vision casts: invite, don't warn. *"Come be with us"*, not *"don't miss out."* - **Uplifting by default.** When something feels stale, the move is more inspiration, not sarcasm, not wit, not winking humour. - **Joyful, not always serious.** Warmth comes through openness and enthusiasm, not jokes. - **No sarcasm or in-jokes.** Even gentle wit reads as a wall to newcomers. ### Tone - **Hospitable and first-person plural.** "We" / "us" — the church is a *we*, and the reader is invited into it. - **Direct address ("you") is reserved for invitations and instructions** — "Plan a Visit", "Find out more", "Get Directions →". - **Plain English.** No jargon, no church-insider shorthand on public surfaces. Theological terms are explained in context. - **Confident belief, softened by hospitality.** - **No exclamation points** in body copy. Energy comes from photography and headline weight. ### Casing - **Sentence case** for body copy and most headings — "Who we are". - **Title case** for navigation and CTAs — "About", "Ministries", "Plan a Visit", "Find out more". - **ALL CAPS** only for eyebrow labels — `WELCOME TO RESIDE`, `SUNDAY SERVICE`, `NEW TO RESIDE`, `EVERY GENERATION`. - **lowercase** in the logo wordmark and ministry sub-brands, which softens the brand. ### Vocabulary Use: *church to belong in* (the defining tagline), *belong / belonging / place to belong*, *gather*, *join us*, *host you*, *Spirit-filled* (sparingly), *Plan a visit*, *What to expect*, *Sunday service*, *Ministries*. Avoid: *salvation funnel*, *seeker*, *crusade*, *unchurched*, *believer journey*, *do life with*. None appear in any source material. ### Rhythm Sentences are short — 8–15 words is typical. Commas slow the cadence on welcome copy. Arrows appear as `→`. No emoji on the public site. ### Worked examples - Eyebrow → headline: `WELCOME TO RESIDE` / **A Church to Belong in.** - Section: **Who we are** — "We are a Church based in Geelong, VIC, associated with Australian Christian Churches. We have been a part of the Geelong community since 1984." - Card: `NEW TO RESIDE` / **Plan a Visit** / "Parking, arrival, kids check-in and who to look for when you arrive." / **Find out more** - Service: `SUNDAY SERVICE` / **Sunday 10:30am** / "Join us each week for worship, scripture, prayer & community." --- ## 6. UI patterns - **Buttons.** Filled pill is the primary CTA; outlined pill is the secondary. Filled buttons darken 6–8% on hover and scale to 0.98 on press. Outlined buttons fill with their text colour on hover (white outline → white fill, navy text). - **Cards.** Eyebrow → title → body → CTA, in solid or outlined variants on light and dark. On hover they rise 2px and pick up a slightly stronger shadow. - **Pill tags.** Outlined pills used for in-section navigation; one active state per set. - **Event cards.** A horizontal row: outlined date tile (month / day / weekday), title, one-line description, RSVP pill. - **Hero.** Full-bleed photo, eyebrow, display headline, two CTAs, with a service-time card floating at the bottom-right overlapping the photo edge — a signature pattern. - **Nav.** Sticky top bar: logo left, primary links, "Plan a Visit" filled pill, hamburger on mobile. No fixed footers, floating CTAs or banners. - **Section rhythm.** Photo hero → dark "Who we are" panel → light service info → dark ministries grid → dark footer band. - **Links** drop to 70% opacity on hover and never change hue. --- ## 7. Motion - **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)` — an ease-out-expo feel — for entrances and reveals. - **Duration:** 140ms state changes, 220ms hovers and small transitions, 420ms entrances. - **Idiom:** fades with a slight upward translate of 8–16px. - **Never:** bouncy springs, rotations, parallax. Animation should feel like the room settling, not the room performing. --- ## 8. Iconography Reside uses very few icons, and that restraint is part of the system. The pin/teardrop logomark is the single most-used graphic element. The live chrome uses only a hamburger for mobile nav, a right-arrow glyph in CTAs (`→`, U+2192), and chevrons on small inline CTAs. - No unicode-as-icon decoration (no ⭐ ✨ ✝). - No religious iconography, no crosses, doves or fish. The brand reads as a contemporary community space, not a denominational signal. - Emoji are fine in moderation in social captions; default to none on the public site. Never as decoration or hype. **Recommended library:** [Lucide](https://lucide.dev) at stroke width 1.75–2 — it matches Outfit's geometric, slightly rounded character. Reach for `arrow-right`, `arrow-up-right`, `map-pin` (only where geographically meaningful), `menu`, `x`, `play`, `calendar`, `clock`, `chevron-down`, `chevron-right`, `instagram`, `facebook`, `youtube`, `mail`. Avoid filled variants, duotone sets and anything illustrative.