# Renovaré Style Guide

> Brand and design system for Renovaré, a Christian spiritual-formation organization: voice, logos, color, typography, imagery, and design tokens. Always write "Renovaré" with the accent; never typeset the wordmark.

The complete system in one file: https://styleguide.renovare.org/design-system.md

## Pages

- [Renovaré Style Guide](https://styleguide.renovare.org/index.md): The Renovaré brand at a glance — voice, logos, color, typography, imagery, and the files to use them.
- [Voice & Writing](https://styleguide.renovare.org/voice.md): How Renovaré sounds, plus the small writing mechanics that keep copy consistent.
- [Main Logo](https://styleguide.renovare.org/logos.md): The Renovaré logo and icon in SVG and PNG, with usage rules.
- [Subbrands](https://styleguide.renovare.org/subbrands.md): Renovaré Institute, Book Club, Friends in Formation, and the Life with God and Friends in Formation podcasts — logos, cover art, and usage rules.
- [Color](https://styleguide.renovare.org/color.md): The Renovaré palette with HEX, RGB, CSS variables, roles, and former names.
- [Typography](https://styleguide.renovare.org/typography.md): Kepler Display, Kepler, and DM Sans, plus the Lora fallback for tools without Kepler.
- [Imagery & Texture](https://styleguide.renovare.org/imagery.md): Artwork and photography direction, plus brushstrokes, textures, and spot illustrations to download.
- [Resources](https://styleguide.renovare.org/resources.md): Where to find CMYK logos, headshots, and other files not hosted in this guide.
- [Type Scale](https://styleguide.renovare.org/type-scale.md): Every text style on renovare.org — Display, Page Title, Section Heading, Card Title, Eyebrow, Body and more — with sizes and Tailwind classes.
- [Color in Use](https://styleguide.renovare.org/color-in-use.md): What each color means on renovare.org, the accent rotation, and approved text-on-background pairs with WCAG contrast ratios.
- [Bands & Layout](https://styleguide.renovare.org/bands.md): The five section backgrounds, band spacing, container width and side margins on renovare.org.
- [Boxes & Cards](https://styleguide.renovare.org/boxes.md): 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.
- [Buttons & Links](https://styleguide.renovare.org/buttons.md): Primary, secondary and text-link buttons on renovare.org, the versions for dark bands, hover behavior and ordering rules.
- [Badges](https://styleguide.renovare.org/badges.md): Content Type and Topic badges and the Announcement pattern on renovare.org, with live examples and when to use each.
- [Radius & Shadow](https://styleguide.renovare.org/radius-shadow.md): The four corner radii and six shadows used on renovare.org, and what each is for.
- [Brushstrokes](https://styleguide.renovare.org/brushstrokes.md): The official brushstroke set, where each stroke goes, and the opacity and blend for every placement on renovare.org.
- [Icons](https://styleguide.renovare.org/icons.md): The 35 custom Renovaré icons as SVG downloads, with sizing and coloring rules.
- [Motion](https://styleguide.renovare.org/motion.md): Hover, scroll and transition behaviors on renovare.org, their timings, and reduced-motion rules.
- [Site Cleanup](https://styleguide.renovare.org/site-cleanup.md): A to-do list of places where the live site doesn't yet match the standards in this guide.
- [For Devs](https://styleguide.renovare.org/devs.md): Design tokens as CSS, JSON, and a Tailwind preset, plus Markdown versions of this guide for AI assistants.

## Design 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.json](https://styleguide.renovare.org/tokens/tokens.json): Resolved token values as nested JSON.
- [tokens.css](https://styleguide.renovare.org/tokens/tokens.css): CSS custom properties (--color-primary-500, --font-family-display, …).
- [tailwind.preset.cjs](https://styleguide.renovare.org/tokens/tailwind.preset.cjs): Tailwind 3 preset with brand colors, fonts, shadows, radius and easing.