Style Guide

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.

Brand

Voice & WritingHow Renovaré sounds, plus the small writing mechanics that keep copy consistent.Main LogoThe Renovaré logo and icon in SVG and PNG, with usage rules.SubbrandsRenovaré Institute, Book Club, Friends in Formation, and the Life with God and Friends in Formation podcasts — logos, cover art, and usage rules.ColorThe Renovaré palette with HEX, RGB, CSS variables, roles, and former names.TypographyKepler Display, Kepler, and DM Sans, plus the Lora fallback for tools without Kepler.Imagery & TextureArtwork and photography direction, plus brushstrokes, textures, and spot illustrations to download.ResourcesWhere to find CMYK logos, headshots, and other files not hosted in this guide.

Website

Type ScaleEvery text style on renovare.org — Display, Page Title, Section Heading, Card Title, Eyebrow, Body and more — with sizes and Tailwind classes.Color in UseWhat each color means on renovare.org, the accent rotation, and approved text-on-background pairs with WCAG contrast ratios.Bands & LayoutThe five section backgrounds, band spacing, container width and side margins on renovare.org.Boxes & CardsWhen 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 & LinksPrimary, secondary and text-link buttons on renovare.org, the versions for dark bands, hover behavior and ordering rules.BadgesContent Type and Topic badges and the Announcement pattern on renovare.org, with live examples and when to use each.Radius & ShadowThe four corner radii and six shadows used on renovare.org, and what each is for.BrushstrokesThe official brushstroke set, where each stroke goes, and the opacity and blend for every placement on renovare.org.IconsThe 35 custom Renovaré icons as SVG downloads, with sizing and coloring rules.MotionHover, scroll and transition behaviors on renovare.org, their timings, and reduced-motion rules.Site CleanupA to-do list of places where the live site doesn't yet match the standards in this guide.

For Developers & AI

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