FSE Spiritual

Overview

FSE Spiritual is a WordPress Full Site Editing theme built for faith communities and spiritual organizations. It combines warm, welcoming aesthetics with accessible, mission-driven communication—serving congregations, nonprofits, and community centers that prioritize inclusive gathering and transparent outreach. The design language embraces 'Purposeful Warmth': a balance between the solemnity and reverence of spiritual spaces (deep architectural photography, generous whitespace, serif-inspired typography) and the approachability of modern web design (bright accent colors, clear CTAs, responsive layouts). The UI evokes a sense of sanctuary—calm, organized, and intentional—while remaining functional and navigable for users of all technical abilities.

The brand voice is welcoming, clear, and action-oriented. Tone is neither overly formal nor casual; it speaks to both longtime members and first-time visitors with equal respect. Vocabulary emphasizes community ('join us', 'connect', 'together'), mission ('serve', 'support', 'give'), and accessibility ('learn more', 'get involved'). Example sentence in brand voice: 'Connect with us this Sunday at 10 a.m., or explore how you can serve our community throughout the week.'

Colors

The color system centers on a warm, energetic primary accent—Burnt Orange (#e8772e)—that signals action, invitation, and spiritual warmth. This primary is deployed on all Call-To-Action buttons ('Donate Now', 'Connect with us'), key links, and interactive focus states. It appears sparingly but decisively, creating visual hierarchy and guiding user attention toward mission-critical actions. The secondary palette uses a sophisticated near-black (#2e2d2a) for body text, navigation, and structural elements, providing high contrast and readability across all screen sizes. A supporting tertiary blue (#0693e3) is reserved for secondary actions, links within body copy, and status indicators, adding visual variety without competing with the primary orange.

Surface colors follow a clean, light-firs

Typography

The type system uses Poppins throughout—a geometric sans-serif that balances warmth with clarity, avoiding the coldness of pure technical fonts while maintaining excellent legibility at all sizes. The hierarchy spans from Display (60px, 700 weight) for hero headlines down to Label-sm (12px, 500 weight) for metadata and badges. Headlines (Headline-lg at 40px, 700 weight; Headline-md at 28px, 600 weight) are set with tight letter-spacing (-0.02em to -0.01em) to create visual impact and draw the eye. Body text (Body-lg at 18px, Body-md at 16px, both 400 weight) uses 1.5x line-height (28px and 24px respectively) to ensure comfortable reading on both desktop and mobile, with subtle letter-spacing (0.01em) to prevent cramping. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12–

Layout

The layout system uses a 12-column responsive grid with a maximum container width of 1280px, ensuring content remains readable and scannable on screens from 320px (mobile) to 2560px (ultra-wide). The grid collapses to single-column on mobile (< 782px breakpoint per WordPress block library standards), with content reflow handled automatically via flexbox. Spacing follows a semantic scale: xs (4px) for micro-interactions and inline spacing; sm (12px) for compact component padding; md (24px) for standard section gutters and card padding; lg (40px) for major section separation; xl (64px) for hero spacing and full-width section margins. The gutter token (24px) is applied consistently to left/right padding on constrained containers, creating a 48px total horizontal margin on desktop. Hero sectio

Elevation & Depth

Depth is achieved through a restrained shadow system that respects the clean, open aesthetic. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and hairline borders; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, input fields, and interactive elements; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and elevated surfaces. Shadows are soft and spread (using blur-radius 8–24px) rather than sharp, maintaining the welcoming tone. Interactive elements (buttons, inputs) use md elevation by default, transitioning to lg on hover to signal

Shapes

The shape philosophy is 'Accessible Softness'—rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons use DEFAULT radius (0.5rem / 8px) for a modern, approachable feel that remains distinct from the full-circle pill buttons (9999px) used only for icon buttons and avatar containers. Cards and input fields use md radius (0.75rem / 12px) to create gentle, inviting containers that feel less institutional than sharp corners. Hero sections and full-width blocks maintain sharp corners (0px border-radius) to anchor the layout and provide v

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses the Burnt Orange primary (#e8772e) background with white text, 17px Poppins 500 weight, and 10px vertical / 30px horizontal padding (48px total height). On hover, the background darkens to #d66a1f with a 200ms ease-in-out transition, signaling responsiveness. On focus (keyboard navigation), a 3px ring of rgba(232, 119, 46, 0.25) appears around the button, providing clear focus indication without obscuring the button itself. Button-secondary uses a transparent background with a 2px primary-colored border and primary text, allowing secondary actions to coexist without visual dominance. Navigation links use body-md typography (16px, 400 weight) with 8px vertical / 16px horizontal padding; o

Do's and Don'ts

**Do**

• Do use the primary orange (#e8772e) exclusively for primary CTAs and focus states—it is the brand's signature accent and should never be diluted or overused.
• Do maintain high contrast between text and background: body text (#6e6d6a) on white, white text on primary orange, and ensure WCAG AA compliance (4.5:1 minimum for body text).
• Do apply md spacing (24px) as the default gutter between sections and card padding; use lg (40px) only for major section breaks to maintain visual rhythm.
• Do use Poppins at 400 weight for body copy and 600–700 weight for headlines; avoid mixing font families or using weights outside the defined scale.
• Do layer hero text with a semi-transparent dark overlay (rgba(0, 0, 0, 0.35)) to ensure white headline and body text remain readable over any background image.

**Don't**

• Don't use the primary orange for backgrounds or large surface areas—reserve it exclusively for interactive elements (buttons, links, focus states) to maintain visual hierarchy.
• Don't apply border-radius greater than lg (1rem / 16px) to cards or input fields; full-circle (9999px) is reserved only for icon buttons and avatars.
• Don't exceed lg elevation shadow (0 8px 24px rgba(0, 0, 0, 0.12)) on any component; deeper shadows create visual heaviness inappropriate for faith-based and nonprofit contexts.
• Don't use secondary color (#2e2d2a) for interactive elements or CTAs—it is reserved for text, navigation, and structural elements only.
• Don't set body text smaller than 16px (body-md) on mobile or 18px (body-lg) on desktop; smaller sizes reduce accessibility and readability for diverse audiences.