# Renovaré Style Guide

> The Renovaré brand at a glance — voice, logos, color, typography, imagery, and the files to use them.

*How Renovaré looks, sounds, and shows up.*

Renovaré (Latin, "to renew") exists for the renewal of the Church and the transformation of persons. This guide covers the day-to-day essentials for anyone writing or designing for Renovaré: staff, outside designers, printers, and AI assistants.

Every color, font, and file here comes from one source, so what you copy from this guide matches renovare.org.


Source: https://styleguide.renovare.org — generated from the same content and tokens as the website.

## Voice & Writing

> How Renovaré sounds, plus the small writing mechanics that keep copy consistent.

*We write like a thoughtful friend.*

**Voice.**
Speak to the reader as “you.” Speak about the community as “we” / “us.” Use invitational language, not imperatives. Avoid clichés.

**Tone.**
Unhurried and gentle, with weathered hope and serious joy.

**Example.** “Get Renovaré Weekly Each Friday — Curated Christian wisdom + Renovaré updates.”

### Writing Rules

Small mechanics that keep copy consistent.

**Renovaré.**
Always write Renovaré with the accent. (On Mac press *option-e* then *e*.)

**Casing.**
Use Title Case for most headings without a period and for buttons.

**CMOS + A Few Renovaré Rules.**
Renovaré uses the **Chicago Manual of Style** (CMOS) as its default writing style guide, with a few custom rules for Scripture references and other particulars, as outlined in our Style Manual. If in doubt, ask Kim.

[renovare.org/stylemanual](https://renovare.org/stylemanual)


## Main Logo

> The Renovaré logo and icon in SVG and PNG, with usage rules.

*An evergreen triquetra alluding to the Streams.*

The Renovaré lockup is the primary mark for everything we make. Reach for it first; subbrands sit alongside it, never in place of it.

#### Renovaré

| Variant | Use on | SVG | PNG |
|---|---|---|---|
| Green | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/renovare-logo-green.svg) | [PNG](https://styleguide.renovare.org/assets/logos/renovare-logo-green.png) |
| Black | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/renovare-logo-black.svg) | [PNG](https://styleguide.renovare.org/assets/logos/renovare-logo-black.png) |
| White | Dark backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/renovare-logo-white.svg) | [PNG](https://styleguide.renovare.org/assets/logos/renovare-logo-white.png) |

#### Renovaré Icon

A more subtle way to reference Renovaré.

| Variant | Use on | SVG | PNG |
|---|---|---|---|
| Green | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/renovare-icon-green.svg) | [PNG](https://styleguide.renovare.org/assets/logos/renovare-icon-green.png) |
| Green Light | Dark backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/renovare-icon-green-light.svg) | [PNG](https://styleguide.renovare.org/assets/logos/renovare-icon-green-light.png) |
| Black | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/renovare-icon-black.svg) | [PNG](https://styleguide.renovare.org/assets/logos/renovare-icon-black.png) |
| White | Dark backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/renovare-icon-white.svg) | [PNG](https://styleguide.renovare.org/assets/logos/renovare-icon-white.png) |

**Do.**
- Use the full lockup (mark + wordmark) whenever space allows
- Give the mark generous clear space
- Use white lockup on dark backgrounds

**Don't.**
- Never typeset “Renovaré” in a font — always use the supplied lockup
- Never add drop shadows, outlines, or stretch the mark

For subbrand logos and podcast art, see [Subbrands](https://styleguide.renovare.org/subbrands/). For CMYK and other print-ready logo files, see [Resources](https://styleguide.renovare.org/resources/).


## Subbrands

> Renovaré Institute, Book Club, Friends in Formation, and the Life with God and Friends in Formation podcasts — logos, cover art, and usage rules.

*Programs and shows with their own identity.*

Each subbrand still belongs to Renovaré, so pair it with the Renovaré mark or name. See [Main Logo](https://styleguide.renovare.org/logos/) for the Renovaré lockup.

#### Renovaré Institute

A full lockup for headers and sign-offs, and a circular seal for stamps, medallions, and small marks.

| Variant | Use on | SVG | PNG |
|---|---|---|---|
| Green | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/institute-logo-green.svg) | [PNG](https://styleguide.renovare.org/assets/logos/institute-logo-green.png) |
| Black | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/institute-logo-black.svg) | [PNG](https://styleguide.renovare.org/assets/logos/institute-logo-black.png) |
| Seal | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/institute-seal-green.svg) | [PNG](https://styleguide.renovare.org/assets/logos/institute-seal-green.png) |

#### Book Club

A guided annual reading journey through formative Christian classics. Uses its own lockup paired with the Renovaré mark.

| Variant | Use on | SVG | PNG |
|---|---|---|---|
| Green | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/bookclub-logo-green.svg) | [PNG](https://styleguide.renovare.org/assets/logos/bookclub-logo-green.png) |
| Black | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/bookclub-logo-black.svg) | [PNG](https://styleguide.renovare.org/assets/logos/bookclub-logo-black.png) |
| White | Dark backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/bookclub-logo-white.svg) | [PNG](https://styleguide.renovare.org/assets/logos/bookclub-logo-white.png) |

#### Friends in Formation

Our monthly giving community. The podcast of the same name uses its own cover art (see Podcasts below).

| Variant | Use on | SVG | PNG |
|---|---|---|---|
| Green | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/fif-green.svg) | [PNG](https://styleguide.renovare.org/assets/logos/fif-green.png) |
| Black | Light backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/fif-black.svg) | [PNG](https://styleguide.renovare.org/assets/logos/fif-black.png) |
| White | Dark backgrounds | [SVG](https://styleguide.renovare.org/assets/logos/fif-white.svg) | [PNG](https://styleguide.renovare.org/assets/logos/fif-white.png) |

#### Podcasts

Each show's square cover art is its mark. The covers already carry the Renovaré lockup, so there is no separate podcast logo.

#### Life with God (podcast)

Nathan Foster’s gentle candor draws wisdom from guests living the way of Jesus. New episodes every other week.

- Cover art: [PNG, 3000×3000](https://styleguide.renovare.org/assets/podcasts/lwg-podcast-cover.png)

#### Friends in Formation (podcast)

Listener questions set the table for curious conversations around spiritual formation and life with God. Brought to you by Renovaré’s monthly giving community.

- Cover art: [PNG, 3000×3000](https://styleguide.renovare.org/assets/podcasts/fif-podcast-cover.png)

**Episode artwork.** Guidelines for styling individual episodes (thumbnails, social posts, video covers) are still to come.

For CMYK and other print-ready logo files, see [Resources](https://styleguide.renovare.org/resources/).


## Color

> The Renovaré palette with HEX, RGB, CSS variables, roles, and former names.

*Evergreen leads. Neutrals carry. Accents punctuate.*

### Core Colors

Most layouts need only these five: Primary 500 leads, Primary 400 and 700 support it, and warm neutrals carry the page and the text. Click any swatch to copy its hex code.

| Core color | HEX | RGB | CSS variable | Role |
|---|---|---|---|---|
| Primary 500 | `#106E46` | 16, 110, 70 | `--color-primary-500` | Core brand |
| Primary 400 | `#19AD6E` | 25, 173, 110 | `--color-primary-400` | Bright accent / on dark |
| Primary 700 | `#18412F` | 24, 65, 47 | `--color-primary-700` | Dark surface |
| Neutral 200 | `#F2F0ED` | 242, 240, 237 | `--color-neutral-200` | Page background |
| Neutral 800 | `#2B2722` | 43, 39, 34 | `--color-neutral-800` | Body text |

### Full Palette

#### Primary — Evergreen

Evergreen. Green represents growth and life. Lead with 500; use tints and deep shades for backgrounds and dark sections.

| Name | HEX | RGB | CSS variable | Role | Usage notes | Formerly called |
|---|---|---|---|---|---|---|
| Primary 100 | `#E8F5EF` | 232, 245, 239 | `--color-primary-100` | Tinted surface | Tint for soft backgrounds. |  |
| Primary 200 | `#BCE2D1` | 188, 226, 209 | `--color-primary-200` | Soft tint | Soft tint for borders and panels on light; light text on dark green. Perceptual midpoint of 100 and 300. |  |
| Primary 300 | `#8FCFB4` | 143, 207, 180 | `--color-primary-300` | Accent on dark | Accents and text on dark green. |  |
| Primary 400 | `#19AD6E` | 25, 173, 110 | `--color-primary-400` | Bright accent / on dark | Bright green. Replaces 500 on dark backgrounds; hover, focus, selection. Too light for text on light backgrounds (2.6:1). | 500 / dark |
| Primary 500 | `#106E46` | 16, 110, 70 | `--color-primary-500` | Core brand | Core brand green. Default for brand color, buttons and links on light backgrounds. | 500 / light |
| Primary 600 | `#0D5738` | 13, 87, 56 | `--color-primary-600` | Pressed | Hover / pressed state for 500. |  |
| Primary 700 | `#18412F` | 24, 65, 47 | `--color-primary-700` | Dark surface | Deep field for dark sections, footer and newsletter panels. |  |
| Primary 800 | `#0F3724` | 15, 55, 36 | `--color-primary-800` | Darker surface | Dark hero band. |  |
| Primary 900 | `#041D13` | 4, 29, 19 | `--color-primary-900` | Near-black | Near-black green; button borders. |  |

CMYK and Pantone values: not yet specified.

#### Neutrals — Warm Gray

Warm gray. Neutrals carry most pages: off-white backgrounds, hairline borders, near-black text. They should feel almost invisible.

| Name | HEX | RGB | CSS variable | Role | Usage notes | Formerly called |
|---|---|---|---|---|---|---|
| White | `#FFFFFF` | 255, 255, 255 | `--color-neutral-white` | Card surface | Cards and panels on the page background. | Neutral 100 (palette sheet) |
| Neutral 100 | `#FAF7F5` | 250, 247, 245 | `--color-neutral-100` | Raised surface | Lighter band / raised surface. | Neutral 200 (palette sheet) |
| Neutral 200 | `#F2F0ED` | 242, 240, 237 | `--color-neutral-200` | Page background | Default page background. | Neutral BG (palette sheet) |
| Neutral 300 | `#E7E4E0` | 231, 228, 224 | `--color-neutral-300` | Border | Hairline borders, CTA panels. |  |
| Neutral 400 | `#CFCAC5` | 207, 202, 197 | `--color-neutral-400` | Strong border | Strong borders, rules. |  |
| Neutral 500 | `#A6A09A` | 166, 160, 154 | `--color-neutral-500` | Decorative | Disabled and decorative only; not for text. |  |
| Neutral 600 | `#7D7771` | 125, 119, 113 | `--color-neutral-600` | Muted text (large) | Muted text at large sizes. Fails AA for body text on the page background (3.9:1). |  |
| Neutral 700 | `#4D4741` | 77, 71, 65 | `--color-neutral-700` | Secondary text | Secondary text. |  |
| Neutral 800 | `#2B2722` | 43, 39, 34 | `--color-neutral-800` | Body text | Body text. |  |
| Neutral 900 | `#080605` | 8, 6, 5 | `--color-neutral-900` | Heading text | Headings, near-black. |  |

CMYK and Pantone values: not yet specified.

#### Secondary — Accents

Secondary accents. Decorative only; they carry no meaning. Use sparingly, in the rotation order, for panels, icon tiles and bands. Light accents (ochre, amber, teal, periwinkle) work as fills or with dark text, never as text on white.

| Name | HEX | RGB | CSS variable | Role | Usage notes | Formerly called |
|---|---|---|---|---|---|---|
| Ochre | `#D1A84C` | 209, 168, 76 | `--color-accent-ochre` | Accent fill |  | Yellow 1, yellow (site), --gold |
| Rust | `#993E17` | 153, 62, 23 | `--color-accent-rust` | Accent fill |  | Yellow 2, yellow-dark (site), --gold-deep |
| Amber | `#CC7829` | 204, 120, 41 | `--color-accent-amber` | Accent fill |  | Orange 1, orange (site) |
| Brick | `#A43939` | 164, 57, 57 | `--color-accent-brick` | Errors | The only accent with a meaning: errors. Avoid it for decoration. | Orange 2, orange-dark (site), --orange-deep |
| Teal | `#558E99` | 85, 142, 153 | `--color-accent-teal` | Accent fill |  | Blue 1, blue (site) |
| Navy | `#334657` | 51, 70, 87 | `--color-accent-navy` | Accent fill; blue band |  | Blue 2, blue-dark (site) |
| Periwinkle | `#6E8ACC` | 110, 138, 204 | `--color-accent-periwinkle` | Accent fill |  | Purple 1, Purple 100, purple-lighter (site), --purple (_ds) |
| Plum | `#592E46` | 89, 46, 70 | `--color-accent-plum` | Accent fill; purple band |  | Purple 2, Purple 300, purple (site), --purple-deep (_ds) |

CMYK and Pantone values: not yet specified.

**Former names.** The accent colors were renamed in October 2026 so each name describes the color you get. Ochre, Rust, Amber, Brick, Teal, Navy, Periwinkle, and Plum were previously Yellow 1/2, Orange 1/2, Blue 1/2, and Purple 1/2. Bright green #19AD6E, once labeled “500 / dark,” is now Primary 400. Neutrals follow renovare.org’s numbering: the page background #F2F0ED (once “Neutral BG”) is Neutral 200, #FAF7F5 is Neutral 100, and white is simply White.


## Typography

> Kepler Display, Kepler, and DM Sans, plus the Lora fallback for tools without Kepler.

*A serif that speaks, a sans that serves.*

**Kepler Display — headlines, pull quotes, big moments.** Sample: A with‑God life.

**Kepler — articles, prose, letters (designer's discretion).** Sample: For longform writing and formal correspondence, Kepler brings a literate, unhurried read. Reach for it when the moment calls for something more considered than DM Sans.

**DM Sans — everything else: UI, labels, captions (400–700).** Sample: Curated Christian wisdom and Renovaré updates, delivered with gentleness and kindness.

#### Fallback Font

Where Kepler isn't available — Google Docs and Slides, Adobe Express, email — use **Lora** in place of both Kepler faces, and keep DM Sans for everything else. Lora and DM Sans are free on Google Fonts.

**Lora Medium — headings.** Sample: A with‑God life.

**Lora — serif body.** Sample: For longform writing and formal correspondence.

For website sizes and classes for every heading and text style, see [Type Scale](https://styleguide.renovare.org/type-scale/).

Kepler and DM Sans load on the web from Adobe Fonts (kit `piw5axu`). Outside designers need their own Adobe Creative Cloud license to use Kepler.


## Imagery & Texture

> Artwork and photography direction, plus brushstrokes, textures, and spot illustrations to download.

*Warm and human.*

Two wells to draw from: classic artwork that feels alive rather than stuffy, and original photography with genuine warmth. Reach for stock rarely, and only when it feels completely natural.

**Thoughtful, Accessible Artwork** (example: [Classic artwork example — Wild Geese Settling](https://ik.imagekit.io/renovare/tr:w-900,h-300,fo-auto,f-auto/images/2026-05-01-Wildgeese_Settling.png))

Paintings and illustrations that speak (often indirectly) to the subject.

**Authentic Photos** (example: [Original photography example — Renovaré Institute gathering](https://ik.imagekit.io/renovare/tr:w-900,h-300,fo-auto,f-auto/Institute/2023-11%20RI%20Atlanta%20PRO/RenovareInstitute-173.jpg))

Real people, real light, unhurried moments.

### Textures

Quiet movement. Hand-painted brushstrokes, wave textures, and spot illustrations for layering behind headlines, across footers, and in editorial layouts. Thumbnails below are full resolution so you can drag right into a layout.

#### Brushstroke

Gray, hand-painted strokes at low opacity: a faint horizon behind headlines and in footers. The official set, downloads and placement recipes are on the [Brushstrokes](https://styleguide.renovare.org/brushstrokes/) page.

- Example, light background: "Behind a headline" over [Brushstroke-Hero.png](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Hero.png)

#### Textures

Paper and surface textures for backgrounds and overlays.

- [waves texture](https://styleguide.renovare.org/assets/textures/waves-texture.png)

#### Spot Illustrations

Small illustrated accents.

- [Spot 1](https://styleguide.renovare.org/assets/spotillustrations/Spot%20Illo%201.png)
- [Spot 2](https://styleguide.renovare.org/assets/spotillustrations/Spot%20Illo%202.png)
- [Spot 3](https://styleguide.renovare.org/assets/spotillustrations/Spot%20Illo%203.png)
- [Spot 4](https://styleguide.renovare.org/assets/spotillustrations/Spot%20Illo%204.png)


## Resources

> Where to find CMYK logos, headshots, and other files not hosted in this guide.

*Additional assets live in Dropbox.*

This guide covers day-to-day essentials. For CMYK logos, headshots, and other files not hosted here, browse the [Renovaré brand folder on Dropbox](https://www.dropbox.com/scl/fo/tve34znx96pmve16mrxou/AC8Iikm6sOl4Ka9VLbxpf2o?rlkey=9gfoynkfx35h4wonzuspo26iu&dl=0).


## Type Scale

> Every text style on renovare.org — Display, Page Title, Section Heading, Card Title, Eyebrow, Body and more — with sizes and Tailwind classes.

*Thirteen roles, two Kepler weights.*

Pick a role, not a size. Each role below has one set of classes that scale across breakpoints. Sizes are in px at the site's 18px root, from mobile up to the largest screen.

**Kepler Display uses two weights only:** Regular (400) for every heading role, and Semibold (600) for Card Titles, where small titles need the extra weight to hold up in grids.

| Role | Use | Font & weight | Sizes (px, mobile → desktop) | Classes | Site partial |
|---|---|---|---|---|---|
| Display | Home hero only. One per site, not one per page. | Kepler Display Regular 400 | 40.5 → 54 → 67.5 → 81 → 108 | `font-display font-normal leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl` | `_typography/h1` |
| Page Title | The h1 in every page hero. Same steps as Display, stopping one short so the home hero stays the largest moment. | Kepler Display Regular 400 | 40.5 → 54 → 67.5 → 81 | `font-display font-normal leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl` | `_typography/page_title` |
| Section Heading | Opens a band or section (the intro component). One step below Page Title at every breakpoint. | Kepler Display Regular 400 | 33.75 → 40.5 → 54 → 67.5 | `font-display font-normal leading-none text-3xl sm:text-4xl md:text-5xl lg:text-6xl` | `_typography/h2 with weight: "font-normal"` |
| Panel Heading | Headlines inside CTA panels, letters and feature boxes. | Kepler Display Regular 400 | 33.75 → 36 | `font-display font-normal leading-tight text-3xl md:text-[2rem]` | `_typography/h4` |
| Card Title | Titles on click-through cards. Sizes follow the card’s width (container queries). | Kepler Display Semibold 600 | 22.5 → 27 → 33.75 | `font-display font-semibold leading-snug text-xl @sm:text-2xl @md:text-3xl` | `_typography/h4 with size/weight overrides` |
| Subtitle | The line under a Page Title, and small headings in Kepler. | Kepler Display Regular 400 | 22.5 → 27 | `font-display font-normal leading-normal text-xl md:text-2xl` | `_typography/h5` |
| Label Heading | Small functional headings in DM Sans: list groups, form sections, footers. | DM Sans Medium 500 | 20.25 → 22.5 | `font-sans font-medium leading-snug text-lg md:text-xl` | `_typography/h6` |
| Section Eyebrow | Above a Section Heading. Primary 500 on light bands, Primary 300 on dark bands. | DM Sans Bold 700 | 20.25 | `font-sans font-bold leading-tight tracking-wider uppercase text-lg text-primary` | `_typography/meta with size: "text-lg"` |
| Eyebrow | Small labels: card meta, dates, “A Renovaré Podcast”. | DM Sans Bold 700 | 13.5 | `font-sans font-bold leading-tight tracking-wider uppercase text-xs` | `_typography/meta` |
| Body Large | Hero and intro paragraphs. | DM Sans Regular 400 | 22.5 → 27 | `font-sans font-normal leading-relaxed text-xl lg:text-2xl` | `_typography/paragraph with size: "xl"` |
| Body | Default paragraph text. | DM Sans Regular 400 | 18 | `font-sans font-normal leading-relaxed text-base` | `_typography/paragraph` |
| Small | Captions, card descriptions, fine print. | DM Sans Regular 400 | 15.75 | `font-sans font-normal leading-relaxed text-sm` | `_typography/paragraph with size: "sm"` |
| Pull Quote | Quote slices and testimonials. | Kepler Medium 500 | 27 → 33.75 → 40.5 | `font-serif font-medium leading-snug text-balance text-2xl md:text-3xl lg:text-4xl` | `_slices/sliceQuote` |

### Prose

Rich-text blocks use one of two prose styles. Choose by how the text will be read, not by section.

| Style | Use for | Classes | Spec |
|---|---|---|---|
| Voice (serif) | Articles, letters, reflections — read slowly | `prose` | Kepler, weight 360, 20.7px / 1.6, optical size 14, width 102%. Headings inside switch to DM Sans Bold. |
| Info (sans) | FAQs, event details, instructions — scanned | `prose prose-sans` | DM Sans 400, 19.8px / 1.6. Headings DM Sans Bold. |

Letters and Quotes are always Voice. FAQs, Feature Grids, CTAs and Events are always Info.

### Rules

- One Display per site (the home hero) and one Page Title per page. Page Titles stop at 81px; only the home hero reaches 108px.
- Headings are Title Case without a final period; body is sentence case.
- Don't set headings in DM Sans except Label Heading and prose headings.
- Eyebrows sit directly above the heading they introduce, never alone.


## Color in Use

> What each color means on renovare.org, the accent rotation, and approved text-on-background pairs with WCAG contrast ratios.

*Only green means something.*

### Meaning

| Color | Means | Use for |
|---|---|---|
| Primary green (400–700) | Renovaré, and “you can act here” | Buttons, links, eyebrows, the brand's dark bands |
| Brick #A43939 | Something went wrong | Form errors and error messages only — never decoration |
| Other accents | Nothing | Variety: panels, icon tiles, Navy and Plum bands |
| Neutrals | Nothing | Pages, borders, text |

Because accents carry no meaning, never use one to signal a program, a status, or a type of content. If something needs a label, use a [badge](https://styleguide.renovare.org/badges/).

### Accent rotation

When a layout needs several accent colors (feature grid boxes, icon tiles, a run of bands), use them in this order and start again at the top. Ochre, Rust, Brick and Periwinkle stay out of the rotation.

1. Navy `#334657`
2. Plum `#592E46`
3. Teal `#558E99`
4. Amber `#CC7829`

### Text and background pairs

Body text needs **AA** (4.5:1). “Large text only” pairs (3:1) are fine for text 24px and up, bold text 18.66px and up, icons and borders.

| Text | Background | Use | Ratio | WCAG |
|---|---|---|---|---|
| Neutral 800 `#2B2722` | Neutral 200 `#F2F0ED` | Body text on the page | 13:1 | AA |
| Neutral 900 `#080605` | Neutral 200 `#F2F0ED` | Headings on the page | 17.8:1 | AA |
| Neutral 700 `#4D4741` | Neutral 200 `#F2F0ED` | Secondary text on the page | 8.1:1 | AA |
| Neutral 600 `#7D7771` | Neutral 200 `#F2F0ED` | Muted text: 24px+ only | 3.9:1 | Large text only |
| Primary 500 `#106E46` | Neutral 200 `#F2F0ED` | Links and eyebrows on the page | 5.5:1 | AA |
| Primary 500 `#106E46` | White `#FFFFFF` | Links on white | 6.3:1 | AA |
| Brick `#A43939` | White `#FFFFFF` | Error messages | 6.5:1 | AA |
| White `#FFFFFF` | Primary 500 `#106E46` | Primary button | 6.3:1 | AA |
| White `#FFFFFF` | Primary 600 `#0D5738` | Primary button, hover | 8.6:1 | AA |
| White `#FFFFFF` | Primary 700 `#18412F` | Text on Green bands | 11.4:1 | AA |
| Primary 300 `#8FCFB4` | Primary 700 `#18412F` | Eyebrows on Green bands | 6.4:1 | AA |
| Primary 400 `#19AD6E` | Primary 700 `#18412F` | Accents on Green bands: large text and icons only | 3.9:1 | Large text only |
| White `#FFFFFF` | Navy `#334657` | Text on Navy bands | 9.7:1 | AA |
| Primary 300 `#8FCFB4` | Navy `#334657` | Eyebrows on Navy bands | 5.5:1 | AA |
| White `#FFFFFF` | Plum `#592E46` | Text on Plum bands | 11:1 | AA |
| Primary 300 `#8FCFB4` | Plum `#592E46` | Eyebrows on Plum bands | 6.2:1 | AA |
| White `#FFFFFF` | Teal `#558E99` | Icon tiles on Teal | 3.7:1 | Large text only |
| White `#FFFFFF` | Amber `#CC7829` | Icon tiles on Amber | 3.3:1 | Large text only |
| Neutral 900 `#080605` | Ochre `#D1A84C` | Text on Ochre | 9.1:1 | AA |
| Primary 400 `#19AD6E` | Neutral 200 `#F2F0ED` | Bright green as text on the page | 2.5:1 | Fails |

### Rules

- Primary 400 (bright green) is for dark backgrounds, icons and underlines — never for text on light backgrounds.
- Neutral 600 is for large or decorative text only; use Neutral 700 for small secondary text.
- On Green, Navy and Plum bands, eyebrows use Primary 300.
- Never put white text on Ochre, Amber, Teal or Periwinkle at body size.


## 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.


## Boxes & Cards

> When to put content in a box, and the box types on renovare.org — Card, Filled Card, Panel and Letter — plus how images stand on their own.

*Unboxed by default.*

Most content sits directly on the band. Use a box only for:

1. **Click-through cards**: the whole box is a link to something else.
2. **The one key ask** on a page: a single CTA Panel.
3. **Groups of short features**, as filled panels.
4. **Letters**, which have their own paper treatment.

If a box isn't one of these, take it out. Images and video never get a box; see [Media](#media).

### Card

The default click-through card for articles, episodes, books and events.

The whole card is one link. Hairline border at rest; on hover the border deepens to Primary 700, the title turns green and the image zooms to 105%.

Site partial: `_components/cards/card`

```html
<a href="#" class="group @container flex flex-col items-center text-center gap-4 lg:gap-6 w-full max-w-sm p-4 lg:p-6 border border-neutral-300 hover:border-primary-700 rounded transition">
  <span class="block w-full aspect-[3/2] overflow-hidden rounded-md"><img src="https://ik.imagekit.io/renovare/tr:w-800,h-533,fit-crop,fo-auto,f-auto/images/2026-05-01-Wildgeese_Settling.png" alt="" class="w-full h-full object-cover group-hover:scale-105 transition duration-300"></span>
  <span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Article</span>
  <span class="font-display font-semibold leading-snug text-xl @sm:text-2xl @md:text-3xl group-hover:text-primary transition">Learning to Wait</span>
  <span class="text-sm leading-relaxed text-neutral-700">What the slow seasons teach us about trust.</span>
  <span class="relative inline-flex flex-col text-sm font-medium">
    <span class="relative flex items-center gap-2">Read <svg class="w-3 h-3 text-primary-400 fill-current" viewBox="0 0 18 16" aria-hidden="true"><path fill-rule="evenodd" d="M17.4971 7.98964L10.0085 15.4783L8.59425 14.0641L13.6687 8.98964L0 8.98964L0 6.98964L13.6687 6.98964L8.59425 1.91519L10.0085 0.500976L17.4971 7.98964Z"/></svg></span>
    <span class="relative w-full h-[2px] pt-1 pb-0.5 overflow-hidden"><span class="absolute top-1 inset-x-0 h-[2px] bg-primary-400"></span><span class="absolute top-1 inset-x-0 h-[2px] bg-neutral -translate-x-full group-hover:translate-x-0 transition duration-200 ease-in-out-circ"></span></span>
  </span>
</a>
```

### Filled Card

For a short set of programs or paths, where a stronger hover helps.

For a short set of programs or paths. The panel fills with Primary 700 on hover and the text turns white.

Site partial: `_components/cards/card_program`

```html
<a href="#" class="group flex flex-col gap-3 w-full max-w-sm p-6 rounded-md bg-neutral-300 hover:bg-primary-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-primary-300/75 transition duration-300">
  <span class="font-sans font-bold leading-tight tracking-wider uppercase text-xs text-primary group-hover:text-white transition duration-300">Online Course</span>
  <span class="font-display font-semibold leading-snug text-2xl text-neutral-900 group-hover:text-white transition duration-300">From the Inside Out</span>
  <span class="text-sm leading-relaxed text-neutral-700 group-hover:text-white/80 transition duration-300">A free, self-paced course in spiritual formation.</span>
</a>
```

### Panel

Filled, softly rounded panels. One CTA Panel per page; feature grids can use several.

**CTA Panel.**

The one key ask on a page. Use at most one per page.

Site partial: `_modules/cta_primary · Cta slice (Panel)`

```html
<div class="flex flex-col items-center text-center gap-6 p-6 sm:p-12 rounded-xl bg-neutral-300">
  <h3 class="font-display font-normal leading-tight text-3xl md:text-[2rem]">Get Renovaré Weekly each Friday</h3>
  <p class="text-base leading-relaxed text-neutral-700 max-w-md">Curated Christian wisdom and Renovaré updates.</p>
  <a href="#" class="group relative inline-flex flex-col justify-center items-center min-h-8 px-6 py-3 text-lg leading-none font-medium text-white focus:outline-none transition duration-200">
  <span class="absolute inset-0 rounded bg-primary group-hover:bg-primary-600 group-hover:scale-110 group-focus-visible:border-[3px] border-primary-900 transition-all duration-200"></span>
  <span class="relative text-center">Join Email Community</span>
</a>
</div>
```

**Feature grid panels.**

Feature grid boxes are filled panels, not outlined. On dark bands use bg-white/10.

Site partial: `_slices/sliceFeatureGrid (Cards style)`

```html
<div class="grid sm:grid-cols-2 gap-6 w-full">
  <div class="flex flex-col gap-3 p-6 md:p-8 rounded-xl bg-neutral-300">
    <h3 class="font-display font-normal leading-tight text-2xl">Read together</h3>
    <p class="text-base leading-relaxed text-neutral-700">Four books a year, with a guide for every week.</p>
  </div>
  <div class="flex flex-col gap-3 p-6 md:p-8 rounded-xl bg-neutral-300">
    <h3 class="font-display font-normal leading-tight text-2xl">Listen weekly</h3>
    <p class="text-base leading-relaxed text-neutral-700">A podcast episode to go with each reading.</p>
  </div>
</div>
```

### Letter

A stack of paper: two sheets fanned behind, the letter on top on warm paper, tilted slightly on desktop. Personal letters and appeals; always Kepler (Voice).

Site partial: `_slices/sliceLetter`

```html
<div class="relative w-full max-w-3xl">
  <div class="absolute inset-0 rounded-[3px] bg-[#fbf9f5] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_12px_30px_-12px_rgba(0,0,0,0.18)] -rotate-[1.6deg] translate-y-2 -translate-x-1" aria-hidden="true"></div>
  <div class="absolute inset-0 rounded-[3px] bg-[#fdfbf8] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_12px_30px_-12px_rgba(0,0,0,0.18)] rotate-[1.1deg] -translate-y-1 translate-x-1" aria-hidden="true"></div>
  <article class="relative w-full bg-[#fffefb] text-neutral-900 rounded-[3px] shadow-[0_1px_2px_rgba(0,0,0,0.08),0_24px_50px_-24px_rgba(0,0,0,0.30)] md:-rotate-[0.4deg] px-6 py-10 sm:px-12 sm:py-16 md:px-20 md:py-20 font-serif text-lg leading-relaxed">
    <p class="mb-5">Dear friends,</p>
    <p class="mb-5">Thank you for walking with us this year. Your gifts make room for thousands of people to slow down and pay attention to God.</p>
    <p>With gratitude,<br>The Renovaré Team</p>
  </article>
</div>
```

### Media

Images and video stand on their own, with rounded corners and the directional photo shadow. No grey panel behind them.

Site partial: `_slices/sliceSplit (media side)`

```html
<div class="w-full max-w-screen-sm">
  <img src="https://ik.imagekit.io/renovare/tr:w-800,h-533,fit-crop,fo-auto,f-auto/images/2026-05-01-Wildgeese_Settling.png" alt="" class="w-full aspect-[3/2] object-cover rounded-md shadow-3xl">
</div>
```

### Rules

- Outlined cards have no shadow; the hairline border does the work. Panels and filled cards have neither border nor shadow.
- Never put a card inside a card, or a panel inside a panel.
- Keep card grids to one card type per row.
- Don't put images in a grey frame; let the photo and its shadow stand on the band.


## Buttons & Links

> Primary, secondary and text-link buttons on renovare.org, the versions for dark bands, hover behavior and ordering rules.

*One solid button, then outlines, then links.*

### Primary

Hover: the fill darkens to Primary 600 and grows to 110%. On the live site the button also follows the cursor slightly (magnetic hover).

Site partial: `_components/buttons/button_primary`

```html
<a href="#" class="group relative inline-flex flex-col justify-center items-center min-h-8 px-6 py-3 text-lg leading-none font-medium text-white focus:outline-none transition duration-200">
  <span class="absolute inset-0 rounded bg-primary group-hover:bg-primary-600 group-hover:scale-110 group-focus-visible:border-[3px] border-primary-900 transition-all duration-200"></span>
  <span class="relative text-center">Join Email Community</span>
</a>
```

### Secondary

Site partial: `_components/buttons/button_secondary`

```html
<a href="#" class="group relative inline-flex flex-col justify-center items-center min-h-8 px-6 py-3 text-lg leading-none font-medium text-neutral-900 hover:text-neutral-700 focus:outline-none transition duration-200">
  <span class="absolute inset-0 rounded border-2 border-primary-900 group-hover:bg-neutral-400 group-hover:scale-110 group-focus-visible:border-[3px] group-focus-visible:bg-neutral-300 transition-all duration-200"></span>
  <span class="relative inline-flex items-center justify-center gap-2">Learn More</span>
</a>
```

### Text link

Hover: a dark line wipes in over the green underline, left to right.

Site partial: `_components/buttons/button_tertiary`

```html
<a href="#" class="group relative inline-flex flex-col text-sm font-medium focus:outline-none">
  <span class="relative flex items-center gap-2">Explore <svg class="w-3 h-3 text-primary-400 fill-current" viewBox="0 0 18 16" aria-hidden="true"><path fill-rule="evenodd" d="M17.4971 7.98964L10.0085 15.4783L8.59425 14.0641L13.6687 8.98964L0 8.98964L0 6.98964L13.6687 6.98964L8.59425 1.91519L10.0085 0.500976L17.4971 7.98964Z"/></svg></span>
  <span class="relative w-full h-[2px] pt-1 pb-0.5 overflow-hidden">
    <span class="absolute top-1 inset-x-0 h-[2px] bg-primary-400"></span>
    <span class="absolute top-1 inset-x-0 h-[2px] bg-neutral -translate-x-full group-hover:translate-x-0 transition duration-200 ease-in-out-circ"></span>
  </span>
</a>
```

### Groups

First button solid, the rest outlined, then text links.

```html
<div class="flex flex-wrap items-center gap-6">
  <a href="#" class="group relative inline-flex flex-col justify-center items-center min-h-8 px-6 py-3 text-lg leading-none font-medium text-white focus:outline-none transition duration-200">
  <span class="absolute inset-0 rounded bg-primary group-hover:bg-primary-600 group-hover:scale-110 group-focus-visible:border-[3px] border-primary-900 transition-all duration-200"></span>
  <span class="relative text-center">Register</span>
</a>
  <a href="#" class="group relative inline-flex flex-col justify-center items-center min-h-8 px-6 py-3 text-lg leading-none font-medium text-neutral-900 hover:text-neutral-700 focus:outline-none transition duration-200">
  <span class="absolute inset-0 rounded border-2 border-primary-900 group-hover:bg-neutral-400 group-hover:scale-110 group-focus-visible:border-[3px] group-focus-visible:bg-neutral-300 transition-all duration-200"></span>
  <span class="relative inline-flex items-center justify-center gap-2">See the Schedule</span>
</a>
  <a href="#" class="group relative inline-flex flex-col text-sm font-medium focus:outline-none">
  <span class="relative flex items-center gap-2">Read the FAQ <svg class="w-3 h-3 text-primary-400 fill-current" viewBox="0 0 18 16" aria-hidden="true"><path fill-rule="evenodd" d="M17.4971 7.98964L10.0085 15.4783L8.59425 14.0641L13.6687 8.98964L0 8.98964L0 6.98964L13.6687 6.98964L8.59425 1.91519L10.0085 0.500976L17.4971 7.98964Z"/></svg></span>
  <span class="relative w-full h-[2px] pt-1 pb-0.5 overflow-hidden">
    <span class="absolute top-1 inset-x-0 h-[2px] bg-primary-400"></span>
    <span class="absolute top-1 inset-x-0 h-[2px] bg-neutral -translate-x-full group-hover:translate-x-0 transition duration-200 ease-in-out-circ"></span>
  </span>
</a>
</div>
```

### On dark bands

On Green, Navy and Plum bands. The solid button turns white with dark text.

Shown on: green background.

```html
<div class="flex flex-wrap items-center gap-6">
  <a href="#" class="group relative inline-flex flex-col justify-center items-center min-h-8 px-6 py-3 text-lg leading-none font-medium text-neutral-900 transition duration-200">
    <span class="absolute inset-0 rounded bg-white group-hover:bg-neutral-200 group-hover:scale-110 transition-all duration-200"></span>
    <span class="relative">Give Monthly</span>
  </a>
  <a href="#" class="group relative inline-flex flex-col justify-center items-center min-h-8 px-6 py-3 text-lg leading-none font-medium text-white hover:text-neutral-900 transition duration-200">
    <span class="absolute inset-0 rounded border-2 border-white group-hover:bg-white group-hover:scale-110 transition-all duration-200"></span>
    <span class="relative">Learn More</span>
  </a>
  <a href="#" class="group relative inline-flex flex-col text-sm font-medium focus:outline-none">
  <span class="relative flex items-center gap-2">Read the Story <svg class="w-3 h-3 text-white fill-current" viewBox="0 0 18 16" aria-hidden="true"><path fill-rule="evenodd" d="M17.4971 7.98964L10.0085 15.4783L8.59425 14.0641L13.6687 8.98964L0 8.98964L0 6.98964L13.6687 6.98964L8.59425 1.91519L10.0085 0.500976L17.4971 7.98964Z"/></svg></span>
  <span class="relative w-full h-[2px] pt-1 pb-0.5 overflow-hidden">
    <span class="absolute top-1 inset-x-0 h-[2px] bg-white/60"></span>
    <span class="absolute top-1 inset-x-0 h-[2px] bg-white -translate-x-full group-hover:translate-x-0 transition duration-200 ease-in-out-circ"></span>
  </span>
</a>
</div>
```

### Rules

- **One primary button per group.** The first button is solid; any others are outlined; extra options are text links.
- Labels are Title Case, two to four words, starting with a verb where possible: “Join Email Community,” “Watch Replay.”
- Never put buttons inside rich text; add them as a Buttons block.
- Don't change button colors to match an accent. Buttons are always green, white or outlined.
- Every button needs a visible focus state (the thicker border shown when tabbing).


## Badges

> Content Type and Topic badges and the Announcement pattern on renovare.org, with live examples and when to use each.

*Small, squared, filled.*

### Content Type

On the page background or over photos. One per card.

Site partial: `_components/badge with bg: "bg-white", color: "text-neutral-700"`

```html
<div class="flex flex-wrap gap-3"><span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Article</span>
<span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Podcast Episode</span>
<span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Free Webinar</span>
<span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Book</span></div>
```

### Topic

Topic tags at the end of a card or article. They link to the topic page.

Site partial: `_components/topic_badges`

Shown on: white background.

```html
<div class="flex flex-wrap gap-2"><a href="#" class="inline-flex px-2 py-1 rounded-md bg-neutral-200 text-neutral-700 hover:text-neutral-900 text-2xs font-bold leading-tight tracking-wider uppercase transition">Prayer</a>
<a href="#" class="inline-flex px-2 py-1 rounded-md bg-neutral-200 text-neutral-700 hover:text-neutral-900 text-2xs font-bold leading-tight tracking-wider uppercase transition">Solitude</a>
<a href="#" class="inline-flex px-2 py-1 rounded-md bg-neutral-200 text-neutral-700 hover:text-neutral-900 text-2xs font-bold leading-tight tracking-wider uppercase transition">Scripture</a></div>
```

### Announcement

A small tag, the line as an underlined link, and an arrow. Used above a hero title and in the top announcement bar (where the tag is Neutral 300 on Green).

Site partial: `_components/hero_callout (Badge style) · _modules/header/announcement_bar`

```html
<a href="#" class="group inline-flex flex-wrap justify-center items-center gap-x-3 gap-y-2 text-sm font-medium text-center text-neutral-800 hover:text-neutral-900">
  <span class="bg-primary-700 text-white inline-block rounded-md px-2 py-1 text-xs font-semibold leading-none">Update</span>
  <span class="underline decoration-neutral-400 underline-offset-4 group-hover:decoration-neutral-800 transition">Registration for the 2027 Book Club is open</span>
  <span class="w-3 h-3 opacity-60 group-hover:opacity-100 group-hover:translate-x-0.5 transition duration-200"><svg class="w-3 h-3 fill-current" viewBox="0 0 18 16" aria-hidden="true"><path fill-rule="evenodd" d="M17.4971 7.98964L10.0085 15.4783L8.59425 14.0641L13.6687 8.98964L0 8.98964L0 6.98964L13.6687 6.98964L8.59425 1.91519L10.0085 0.500976L17.4971 7.98964Z"/></svg></span>
</a>
```

### Rules

- At most one Content Type badge per card.
- Badges are filled and squared (`rounded-md`), never outlined and never pill-shaped. Text is bold small caps: a noun or short phrase, uppercase with wide tracking.
- Announcement lines are sentence case; the tag is one word (“Update,” “New”).
- Badges never use accent colors; color doesn't carry meaning (see [Color in Use](https://styleguide.renovare.org/color-in-use/)).


## Radius & Shadow

> The four corner radii and six shadows used on renovare.org, and what each is for.

*Soft corners, quiet depth.*

### Corner radius

Four radii, plus one exception: letters use a 3px paper corner (`rounded-[3px]`). Values are at the site's 18px root.

| Radius | Value | Class | Use |
|---|---|---|---|
| Default | 4.5px | `rounded` | Buttons, cards, inputs |
| md | 6.75px | `rounded-md` | Badges, images and media tiles, podcast covers |
| xl | 13.5px | `rounded-xl` | CTA panels and large feature boxes |
| full | 9999px | `rounded-full` | Avatars and round icon buttons only |
| Letter (exception) | 3px | `rounded-[3px]` | The paper sheets of a Letter |

`rounded-sm` and `rounded-lg` are retired: use Default or md for small surfaces, xl for panels. Pill shapes (`rounded-full`) are only for avatars and round icon buttons — not for badges, tags or buttons.

### Shadows

Shadows are for things that float or images that need to lift off the page. Cards and panels don't get them. Letters have their own soft paper shadow (see [Boxes & Cards](https://styleguide.renovare.org/boxes/)).

| Class | Use |
|---|---|
| `shadow-sm` | Inputs and small raised controls |
| `shadow-md` | Dropdowns and tooltips |
| `shadow-lg` | Floating UI (sticky CTA, page nav) and letters |
| `shadow-3xl` | Photos, video and podcast art |
| `shadow-4xl` | Media on hover |
| `shadow-5xl` | Large hero media |

Values are in the tokens file (`shadow.*`).

`shadow-sm` through `shadow-xl` are tinted warm to match the neutrals. `shadow-3xl` through `shadow-5xl` fall down and to the left, as if lit from the upper right, so photos look like prints on a table. The old `float1`–`float4` shadows are retired.


## Brushstrokes

> The official brushstroke set, where each stroke goes, and the opacity and blend for every placement on renovare.org.

*A faint horizon, not a graphic.*

### The set

The seven strokes renovare.org uses, named by shape. Previews are small; downloads are full resolution.

| Stroke | Use | Download |
|---|---|---|
| Drop | Footer, newsletter panel | [PNG](https://ik.imagekit.io/renovare/images/brushstrokes/brushstroke_drop.png) |
| Loop | Not used on renovare.org yet; available for print and social | [PNG](https://ik.imagekit.io/renovare/images/brushstrokes/brushstroke_loop.png) |
| Loop Small | Card media, podcast pages | [PNG](https://ik.imagekit.io/renovare/images/brushstrokes/brushstroke_loop_sm.png) |
| Loop Vertical | Home hero | [PNG](https://ik.imagekit.io/renovare/images/brushstrokes/brushstroke_loop_vert.png) |
| Scribble | Quote panels on Rust | [PNG](https://ik.imagekit.io/renovare/images/brushstrokes/brushstroke_scribble.png) |
| Wavy | Page heroes | [PNG](https://ik.imagekit.io/renovare/images/brushstrokes/brushstroke_wavy.png) |
| Wavy Relaxed | Behind portraits and photo collages | [PNG](https://ik.imagekit.io/renovare/images/brushstrokes/brushstroke_wavy_relaxed.png) |

### Recipes

| Placement | Stroke | Opacity | Blend |
|---|---|---|---|
| Home hero | Loop Vertical | 5% | multiply |
| Page hero | Wavy | 30% | multiply |
| Footer (Green) | Drop | 50% | multiply |
| Newsletter panel (Green) | Drop | 100% | multiply |
| Behind portraits, light band | Wavy Relaxed | 50–60% | multiply |
| Behind portraits, dark band | Wavy Relaxed | 20% | screen |
| Photo collage | Wavy Relaxed | 25% | multiply |
| Card media | Loop Small | 20% | multiply |
| Podcast show page hero | Loop Small | 30% | multiply |

**Page hero.**

Page hero: Wavy at 30%, multiply. The stroke sits behind the text, wider than the screen.

Site partial: `_components/brushstroke with name: "brushstroke_wavy"`

```html
<div class="relative overflow-hidden flex flex-col items-center text-center gap-4 py-16 px-6">
  <div class="pointer-events-none absolute inset-0 flex items-center justify-center mix-blend-multiply opacity-30">
    <img src="https://ik.imagekit.io/renovare/images/brushstrokes/tr:w-1500,f-auto/brushstroke_wavy.png" alt="" class="w-[140%] max-w-none h-auto">
  </div>
  <p class="relative font-sans font-bold leading-tight tracking-wider uppercase text-lg text-primary">Formation</p>
  <h1 class="relative font-display font-normal leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl">Renovaré Book Club</h1>
</div>
```

**On a dark band.**

On dark bands: Wavy Relaxed, screen blend, about 20%.

Site partial: `_components/brushstroke with name: "brushstroke_wavy_relaxed"`

Shown on: green background.

```html
<div class="relative overflow-hidden flex flex-col items-center text-center gap-4 py-16 px-6">
  <div class="pointer-events-none absolute inset-0 flex items-center justify-center mix-blend-screen opacity-20">
    <img src="https://ik.imagekit.io/renovare/images/brushstrokes/tr:w-1500,f-auto/brushstroke_wavy_relaxed.png" alt="" class="w-[140%] max-w-none h-auto">
  </div>
  <h2 class="relative font-display font-normal leading-none text-3xl sm:text-4xl">Stay in touch</h2>
</div>
```

### Rules

- At most one brushstroke in view at a time.
- Always behind content; never over text or faces.
- Only the supplied gray strokes. Don't recolor, outline or sharpen them.
- Let the stroke run off the edges of the screen; it should feel like a horizon, not a shape.
- On the web, load strokes from ImageKit as AVIF (`f-avif,q-60`); they're blended so faintly that the compression doesn't show.

### Extras

Earlier brushstroke exports, kept until we confirm which duplicate the set above. Need something new? Paint it with the [Procreate brush](https://styleguide.renovare.org/assets/brushstrokes/wet-acrylic.brush).

- [Accent Left](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Accent-Left.png)
- [Accent Right](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Accent-Right.png)
- [Hero](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Hero.png)
- [Hero 1](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Hero-1.png)
- [Hero 2](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Hero-2.png)
- [Hero 3](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Hero-3.png)
- [Hero 4](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Hero-4.png)
- [Hero 5](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Hero-5.png)
- [Hero 6](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Hero-6.png)
- [Under Content](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content.png)
- [Under Content 1](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-1.png)
- [Under Content 2](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-2.png)
- [Under Content 3](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-3.png)
- [Under Content 4](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-4.png)
- [Under Content 5](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-5.png)
- [Under Content 6](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-6.png)
- [Under Content 7](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-7.png)
- [Under Content 8](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-8.png)
- [Under Content 9](https://styleguide.renovare.org/assets/brushstrokes/Brushstroke-Under-Content-9.png)


## Icons

> The 35 custom Renovaré icons as SVG downloads, with sizing and coloring rules.

*A hand-drawn line set.*

Renovaré uses its own single-color line icons. They inherit the color of the surrounding text, so set the color on the parent (or with a `text-*` class) and give the SVG `fill-current`. Click any icon to download its SVG.

**Interface:** [arrow](https://styleguide.renovare.org/assets/icons/arrow.svg), [chevron](https://styleguide.renovare.org/assets/icons/chevron.svg), [close](https://styleguide.renovare.org/assets/icons/close.svg), [search](https://styleguide.renovare.org/assets/icons/search.svg), [download](https://styleguide.renovare.org/assets/icons/download.svg), [link](https://styleguide.renovare.org/assets/icons/link.svg), [play](https://styleguide.renovare.org/assets/icons/play.svg), [check](https://styleguide.renovare.org/assets/icons/check.svg), [grid](https://styleguide.renovare.org/assets/icons/grid.svg), [explore](https://styleguide.renovare.org/assets/icons/explore.svg), [archive](https://styleguide.renovare.org/assets/icons/archive.svg), [screen](https://styleguide.renovare.org/assets/icons/screen.svg), [edit](https://styleguide.renovare.org/assets/icons/edit.svg), [trash](https://styleguide.renovare.org/assets/icons/trash.svg), [visible](https://styleguide.renovare.org/assets/icons/visible.svg), [invisible](https://styleguide.renovare.org/assets/icons/invisible.svg)

**Spiritual & thematic:** [bible](https://styleguide.renovare.org/assets/icons/bible.svg), [book](https://styleguide.renovare.org/assets/icons/book.svg), [candle](https://styleguide.renovare.org/assets/icons/candle.svg), [cross](https://styleguide.renovare.org/assets/icons/cross.svg), [crown](https://styleguide.renovare.org/assets/icons/crown.svg), [dove](https://styleguide.renovare.org/assets/icons/dove.svg), [fish](https://styleguide.renovare.org/assets/icons/fish.svg), [heart](https://styleguide.renovare.org/assets/icons/heart.svg), [prayer](https://styleguide.renovare.org/assets/icons/prayer.svg), [scripture](https://styleguide.renovare.org/assets/icons/scripture.svg)

**Content types:** [article](https://styleguide.renovare.org/assets/icons/article.svg), [guide](https://styleguide.renovare.org/assets/icons/guide.svg), [newspaper](https://styleguide.renovare.org/assets/icons/newspaper.svg), [podcast](https://styleguide.renovare.org/assets/icons/podcast.svg), [video](https://styleguide.renovare.org/assets/icons/video.svg), [person](https://styleguide.renovare.org/assets/icons/person.svg), [group](https://styleguide.renovare.org/assets/icons/group.svg), [map](https://styleguide.renovare.org/assets/icons/map.svg), [pin](https://styleguide.renovare.org/assets/icons/pin.svg)

### Sizes

| Use | Size | Classes |
|---|---|---|
| Inside buttons and text links | 13.5px | `w-3 h-3` |
| Next to labels and in lists | 18–22.5px | `w-4 h-4` to `w-5 h-5` |
| Resource and hero icon tiles | 54–90px colored tiles | `w-12 md:w-16 lg:w-20 p-4 md:p-6 rounded bg-primary` |

### Rules

- Use these icons only. Don't substitute Lucide, Heroicons, emoji or Unicode symbols.
- Icon tiles use green or the accent rotation (Navy, Plum, Teal, Amber), with the icon in white.
- Icons support a label; they don't replace one. Icon-only buttons need an `aria-label`.


## Motion

> Hover, scroll and transition behaviors on renovare.org, their timings, and reduced-motion rules.

*Unhurried and organic.*

| Behavior | Where | Timing |
|---|---|---|
| Fill grows to 110% | Primary and secondary buttons | 200ms |
| Underline wipe, left to right | Text links | 200ms, `ease-in-out-circ` |
| Magnetic pull toward the cursor | All buttons (desktop only) | 0.3s, GSAP `power1.out` |
| Image zooms to 105% | Card and media images | 300ms |
| Tilted photos straighten | Photo tiles and collages | 300ms, `ease-in-out-circ` |
| Border deepens to Primary 700 | Outlined cards | 300ms |
| Panel fills with Primary 700, text turns white | Filled cards | 300ms |
| Arrow nudges right | Announcements | 200ms |
| Brushstroke drifts on scroll | Heroes | GSAP ScrollTrigger, scrub 1.5 |

Hover any example on [Buttons & Links](https://styleguide.renovare.org/buttons/) or [Boxes & Cards](https://styleguide.renovare.org/boxes/) to see these in action.

### Rules

- Default transition: 300ms, in-out quad (`transition`). Buttons: 200ms.
- No bounce, spring or overshoot.
- Motion follows the pointer or the scroll; nothing moves on its own.
- When the visitor prefers reduced motion, turn off magnetic hover and brushstroke drift; keep color and border changes.


## Site Cleanup

> A to-do list of places where the live site doesn't yet match the standards in this guide.

*Where renovare.org differs from this guide.*

These are the known gaps between the website standards and renovare.org today. Most close when the site switches to the generated [Tailwind preset](https://styleguide.renovare.org/devs/).

### Color

| Today | Standard |
|---|---|
| Primary button hover goes to Primary 400 (white text 2.9:1) | Primary 600 |
| Templates use `primary-600`, `primary-200` and `primary-50`, which aren't defined | Defined in the preset (600, 200); replace `primary-50` with `primary-100` |
| `theme('colors.gold')` in the input focus style doesn't exist | Primary 400 focus border |
| Stock Tailwind colors (amber, yellow-200, slate, red, green) still available | Preset replaces the palette |
| Accent class names `yellow`, `yellow-dark`, `orange`, `orange-dark`, `blue`, `blue-dark`, `purple`, `purple-lighter` | `ochre`, `rust`, `amber`, `brick`, `teal`, `navy`, `plum`, `periwinkle` |
| CMS color picker (`config/colour-swatches.php`) mislabels orange, neutral and neutral-300 | Generate from the tokens |
| Hard-coded hex values (#0D5738, #eceae7, #30343C, #E1EAF0, #F5F5F2) | Tokens |
| Dark-band eyebrows in Primary 400 | Primary 300 |
| *Life with God* cover exported as #01422E | Primary 700 #18412F |

### Type

| Today | Standard |
|---|---|
| DM Sans 500 and 600 aren't in the Adobe Fonts kit, so Medium and Semibold render as 400 and 700 | Add both to kit `piw5axu` |
| Section headings use Kepler Display Medium | Regular |
| A few headings use Kepler Display Bold or Medium | Regular or Semibold |

### Shape & components

| Today | Standard |
|---|---|
| `rounded-lg` on download tiles and page nav | Default, md or xl |
| Letter paper colors and shadows are hard-coded (#fbf9f5, #fdfbf8, #fffefb) | Candidate `paper` tokens |
| `float1`–`float4` shadows defined but unused | Remove |
| `badge.twig` defaults to solid green | Content Type (white) |
| Book Club pricing uses accent-tinted badges (Ochre, Amber, Plum) | Decide: allowed exception, or Content Type / Topic |
| Primary button hover on some one-off buttons is still `hover:bg-primary-400` | Primary 600 |
| Five icons (edit, invisible, person, visible, trash) don't use `currentColor`; trash is stroke-only with no stroke color, so it can render invisible | Re-export with `currentColor` |
| Custom cursor and page-transition templates are unused | Remove |


## For Devs

> Design tokens as CSS, JSON, and a Tailwind preset, plus Markdown versions of this guide for AI assistants.

*One source, many outputs.*

Every color, font, size, shadow, and easing curve in this guide is defined once in a design tokens file. The CSS, JSON, and Tailwind files below are generated from it, so they always agree with each other and with these pages.

- [/tokens/renovare.tokens.json](https://styleguide.renovare.org/tokens/renovare.tokens.json): Source tokens (W3C Design Tokens format) with descriptions, roles and legacy names.
- [/tokens/tokens.json](https://styleguide.renovare.org/tokens/tokens.json): Resolved token values as nested JSON.
- [/tokens/tokens.css](https://styleguide.renovare.org/tokens/tokens.css): CSS custom properties (--color-primary-500, --font-family-display, …).
- [/tokens/tailwind.preset.cjs](https://styleguide.renovare.org/tokens/tailwind.preset.cjs): Tailwind 3 preset with brand colors, fonts, shadows, radius and easing.
- [/llms.txt](https://styleguide.renovare.org/llms.txt): Index for AI agents.
- [/design-system.md](https://styleguide.renovare.org/design-system.md): The whole design system as one Markdown file.

**For AI assistants.** Every page of this guide is also available as Markdown — add `.md` to the page address (for example, [/color.md](https://styleguide.renovare.org/color.md)). Start with [/llms.txt](https://styleguide.renovare.org/llms.txt), or read the whole system at once in [/design-system.md](https://styleguide.renovare.org/design-system.md).

**CSS variable names** follow the token path: `--color-primary-500`, `--color-neutral-200`, `--color-accent-ochre`, `--font-family-display`, `--radius-default`, `--shadow-3xl`. Semantic aliases such as `--color-text-body` and `--color-surface-dark` point at the base colors.

**Sizes** are in rem at renovare.org's 18px root (1rem = 18px); each token's description lists the pixel value.