
Site Branding & Style Guide
A comprehensive overview of the FaithUSA.us design system, including colors, typography, components, and UI patterns for the web directory.
Logo & Brand Mark
Logo Usage
- • "Faith" uses the primary forest green color representing growth and faith
- • "USA" uses the accent navy blue representing patriotism
- • ".us" uses muted gray to de-emphasize the domain extension
- • Always use Libre Baskerville (serif) for the logo typography
Color Palette
Primary Brand Colors
Faith Green
Primary - Forest green
oklch(0.45 0.12 145)Patriot Navy
Accent - Muted navy blue
oklch(0.35 0.08 250)Warm Terracotta
Secondary - Earthy warmth
oklch(0.65 0.08 55)Warm Cream
Background - Inviting base
oklch(0.98 0.005 85)Semantic Colors
Foreground
Muted
Card
Border
Destructive
Color Philosophy
The FaithUSA.us color palette balances warmth and trust. Forest green represents spiritual growth and faith (connected to nature and Biblical imagery). Navy blue honors American patriotism without being overly bold. The warm cream background creates an inviting, cozy atmosphere that appeals to homeschool moms and Sunday school teachers. Terracotta accents add earthiness and warmth.
Typography
Headings - Libre Baskerville
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Body - Inter
Large body text for introductions and lead paragraphs that need emphasis.
Regular body text for main content. This is the default size for paragraphs, descriptions, and general reading content throughout the site.
Small text for captions, metadata, and secondary information that supports the main content.
Extra small text for legal notices, timestamps, and tertiary information.
Typography Guidelines
- • Libre Baskerville (serif) for all headings - classic, trustworthy, timeless
- • Inter (sans-serif) for body text - clean, highly readable, modern
- • Line height: 1.5-1.6 for body text (leading-relaxed)
- • Use text-balance on headlines for optimal line breaks
Component Library
Buttons
Category Pills
Printable Card


Category Card
Ad Slot Placements
Leaderboard (970x90)
Rectangle (300x250)
In-Content (336x250)
Page Templates Included
Homepage
Hero section, featured printables, category grid, stats, newsletter signup
Category Hub
Subcategory navigation, filter bar, paginated printable grid with sidebar
Category Product Page
Real collection page with PDF grid, SEO content, FAQ, and direct downloads
Search Results
Search bar, active filters, faceted navigation, responsive grid
Planned Collection
Coming-soon collection state for categories still in production
Resource Center
Practical printing and teaching guidance with live collection links
Blog Index
Featured post, category filter, article grid, newsletter CTA
Patriotic Category
Holiday subcategories, seasonal banners, themed design
Brand Guide
Logo, colors, typography, component library (this page)
Site Navigation
Sticky header with mega menu, mobile navigation, search
Design Principles
Warm & Inviting
Soft colors, rounded corners, and cozy typography create a welcoming space for Christian families.
Content-First
Clean grids showcase printables prominently. UI gets out of the way so content shines.
Fast & Accessible
Optimized for speed with proper contrast ratios, semantic HTML, and screen reader support.
