Every Home

Overview

Every Home for Christ operates within a warm, purpose-driven aesthetic rooted in the 'Earthy Minimalism' movement—a design philosophy that prioritizes human connection and clarity over visual complexity. The brand serves faith communities and individual believers seeking to share Christ's message globally, and the UI reflects this mission through a grounded, accessible visual language. The color palette draws from natural earth tones (sage greens #315449, warm sand #f6eedf, soft grays #d3d2d2) paired with purposeful accent greens (#b6e0da, #50C099) that signal hope, growth, and action. The emotional response is one of calm confidence: users feel welcomed into a community of purpose, not overwhelmed by corporate messaging.

The brand voice is direct, warm, and action-oriented—never patronizing, never breathless. Every Home speaks in the language of real people doing real work: "You helped carry Christ to over 656 million people" (not "Join our movement"). The vocabulary emphasizes partnership, transformation, and measurable impact. Typography is generous and legible, reflecting respect for the reader's time. Example sentence in brand voice: "Read how home-to-home outreach transformed Teresa and her whole family—and how 86% more churches are now partnering with Every Home each month."

Colors

The color system is organized around a natural, trust-building palette that reflects both the organization's global reach and its grounded, local-church focus. Primary (#315449, a deep sage green) is the signature accent used on all primary CTAs ('Give Hope!', 'Give Now'), interactive states, and brand-critical UI elements—it signals both growth and stability, evoking the natural world and spiritual renewal. Secondary (#28433a, a darker forest green) provides depth and is reserved for secondary navigation, hover states on primary elements, and supporting UI that needs to recede slightly. Tertiary (#d3d2d2, a warm light gray) is used for neutral dividers, disabled states, and background accents that don't demand attention.

The surface stack is anchored in a warm sand (#f6eedf) that serves

Typography

The type system uses Open Sans across all scales, a humanist sans-serif that balances professionalism with warmth—critical for an organization that must appeal to both donors and field workers in 177 nations. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines like '2025 Annual Report: You Helped Carry Christ to Over 656 Million People!'—the generous size and tight tracking create emphasis without aggression. Headline-lg (40px, 600 weight) anchors section introductions; headline-md (28px, 600 weight) breaks up long-form content. Body-lg (18px, 400 weight, 28px line-height) is the default for body copy and ensures readability on mobile devices (minimum 16px enforced). Body-md (16px, 400 weight) is used for secondary text and UI labels. Label-md (14px, 600 weight, 0.0

Layout

The layout follows a 12-column fluid grid with a maximum container width of 1200px, ensuring the design scales gracefully from mobile (single column) to desktop (multi-column). The primary gutter is 24px (md spacing), applied consistently between columns and around the container edges. Section separation uses lg spacing (40px) to create breathing room between major content blocks—this rhythm prevents cognitive overload and guides the eye through the narrative. The hero section spans full-width with an asymmetric two-column layout on desktop (text on left, image on right), collapsing to single-column on mobile. Cards and content containers use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. Whitespace is treated as a design element, not wasted space:

Elevation & Depth

Depth in this system is achieved through subtle shadow and layering rather than dramatic drop-shadows. The elevation scale uses three levels: Level 1 (sm elevation: 0.2px 0.2px 0.2px rgb(133, 130, 130)) is applied to feedback widgets and small interactive elements, creating a barely-perceptible lift. Level 2 (md elevation: 0px 6px 100px rgba(0, 0, 0, 0.35)) is used on modals, cards, and primary containers—the 100px blur radius creates a soft, diffused shadow that suggests depth without harshness. Level 3 (lg elevation: 0px 0px 35px 2px rgba(0, 0, 0, 0.24)) is reserved for floating action butto

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used sparingly and purposefully to soften the interface without sacrificing clarity or professionalism. Buttons use sm radius (0.25rem / 4px), a subtle rounding that feels intentional rather than playful, appropriate for a faith-based organization. Cards and containers use md radius (0.75rem / 12px), providing enough rounding to feel approachable while maintaining a structured appearance. Input fields use DEFAULT radius (0.5rem / 8px), a middle ground that balances form and function. Modals and overlays use lg radius (1rem / 16px) to

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons (button-primary) use the signature sage green (#315449) background with warm sand text (#f6eedf), 15px 35px padding, and 48px minimum height for touch accessibility. The label-md typography (14px, 600 weight, 0.05em tracking) ensures text is scannable. Hover state (button-primary-hover) transitions the background to primary-fixed-dim (#9ac9c3) over 200ms with ease timing, maintaining the same text color. Secondary buttons (button-secondary) use a transparent background with a 2px solid border in primary green, allowing them to recede visually while remaining clickable. The CTA button variant (button-cta-green) uses #50C099 (a brighter, more energetic green) for high-prior

Do's and Don'ts

**Do**

• Do use primary green (#315449) exclusively for primary CTAs and interactive states—it is the brand's signature accent and must remain distinctive.
• Do maintain 48px minimum height on all touch targets (buttons, list items, form fields) to ensure accessibility on mobile devices.
• Do apply md spacing (24px) between major content sections and sm spacing (12px) between nested elements to create a clear visual hierarchy.
• Do use Open Sans at 16px minimum for body text and 14px minimum for labels to ensure readability across all devices.
• Do transition hover states over 200ms with ease timing to create a smooth, non-jarring interaction.
• Do include a visible focus ring (2px solid primary, 2px offset) on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—stick to the defined surface and on-surface tokens to maintain warmth.
• Don't apply rounded corners greater than 16px (lg radius) on primary UI elements; excessive rounding undermines the professional, structured aesthetic.
• Don't use secondary green (#28433a) on primary CTAs—it is reserved for secondary navigation and supporting UI.
• Don't apply shadows with opacity greater than 0.35 or blur radius greater than 100px; the aesthetic requires soft, diffused elevation, not dramatic depth.
• Don't mix typefaces—Open Sans is the sole typeface family across all scales and weights.
• Don't set line-height below 1.4 (24px minimum for 16px body text) or letter-spacing below -0.04em on headings; readability and scannability are non-negotiable.