Favor Care

Overview

Favor Care's design system embodies **Purposeful Warmth**—a visual language that combines institutional trust with genuine human connection. The brand serves faith-driven communities and donors seeking transparent, impactful nonprofit engagement. The aesthetic merges a bold golden-amber accent (#ffb428) with deep charcoal text (rgb(23, 23, 23)) and clean white surfaces, creating an approachable yet professional presence. This palette evokes both the generosity of giving and the stability of established community care. The UI prioritizes clarity and directness: every interaction should feel intentional, never overwhelming. Voice: compassionate yet concrete, hopeful without being saccharine. Example: "Your monthly gift of ₱500 provides school meals for 8 children—every contribution compounds."

Colors

The color system centers on **Golden Amber as Primary** (#ffb428, rgb(255, 180, 40)), deployed on all call-to-action buttons, donation prompts, and interactive highlights. This warm, energetic accent commands attention without aggression, signaling opportunity and generosity. Secondary Purple (#720eec) supports accents for secondary actions, badges, and status indicators—creating visual hierarchy without competing for focus. Tertiary Red (#cf2e2e) is reserved for error states and critical alerts. The surface stack uses near-white (#ffffff, #f5f5f5) for primary containers, mid-tone grays (#e9e6ed, #767676) for dividers and secondary text, and deep charcoal (#171717) for body copy. On-surface text is always rgb(23, 23, 23) for maximum readability at 16px body size. Modals and overlays use rg

Typography

Inter is the sole typeface family, deployed across 8 levels from display (70px, 700 weight) to label-sm (12px, 600 weight). The hierarchy reflects nonprofit communication: large, confident headlines (48–70px) announce impact and mission, while body text (16–18px, 400 weight) maintains legibility for dense content like program descriptions and donation tiers. Letter-spacing tightens at display sizes (−0.04em) to enhance authority, then relaxes to 0.01em for body copy to improve scannability. All labels use 700 weight and 0.02–0.03em tracking to distinguish interactive elements. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12–14px) overlaid on image backgrounds to ensure contrast without color-shifting.

Layout

The layout follows a 12-column grid with a 1280px max-width container, centered with 24px gutters on desktop. Page rhythm uses 24px block-spacing between major sections (hero, about, donation tiers, footer), with 40px lg-spacing for visual breathing room between campaign blocks. White-space is generous but purposeful: never more than 64px of vertical gap, which would fragment the narrative. The hero section spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility over background imagery. Cards and content blocks use 24px padding (md-spacing) internally, with 12px gutters between grid items. Mobile breakpoint collapses to single-column at 768px, maintaining 16px padding and 12px block-spacing for touch-friendly interaction.

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows. Base level (Level 1) is the white surface (rgb(255, 255, 255)) with no shadow. Level 2 (cards, input fields) uses box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) to lift content 4px above the surface. Level 3 (modals, dropdowns) applies box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with a 12px blur radius, creating perceived distance. Hover states on buttons intensify the shadow to 0 4px 15px rgba(0, 0, 0, 0.15), signaling interactivity. The modal overlay uses backdrop-filter: blur(4px) on the background to soften content behind

Shapes

The shape philosophy is **Approachable Precision**—rounded corners signal friendliness while maintaining professional clarity. Buttons use full border-radius (9999px) for primary CTAs, creating a pill shape that feels inviting and modern. Secondary buttons and inputs use 4–6px radius for subtle softness without whimsy. Cards and modals use 8–12px radius, balancing warmth with structure. The rationale: full-radius buttons (like "DONATE" at 30px radius) become visual anchors that draw the eye and encourage action. Smaller radii (4px on inputs) preserve form-field legibility and align with data-e

Components

Action Elements Primary buttons ("JOIN THE PRAYER HUB", "DONATE") use full 9999px border-radius, 16px vertical padding, 24px horizontal padding, and 700-weight Inter at 18px. Background is {colors.primary} (#ffb428) with {colors.on-primary} text (black, rgb(0, 0, 0)). Hover state darkens to #ffb428 with box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) and a 200ms ease-out transition. Secondary buttons ("Contact Us") use transparent background with 2px solid border in {colors.primary}, same padding, and hover to {colors.surface-container-high} (rgb(224, 220, 229)) with the same shadow. All buttons have min-height: 48px for touch accessibility.

Containers & Surfaces Cards use 24px padding, 6px border-radius, 1px solid border in {colors.outline-variant} (#cfc8d8), and box-shadow: 0 4px 15p

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ffb428) exclusively for primary CTAs—donation buttons, sign-ups, and key calls-to-action. Consistency builds trust.
• Do maintain 24px block-spacing between major sections and 12px gutters between grid items to create visual rhythm and prevent cognitive overload.
• Do apply 700-weight Inter on all labels and buttons; 400-weight for body copy. This weight contrast makes interactive elements instantly recognizable.
• Do use full 9999px border-radius on primary buttons and 4–6px on inputs to signal warmth without sacrificing professionalism.
• Do layer shadows subtly: 0 4px 15px for cards, 0 16px 40px for modals. Avoid shadows exceeding 40px spread.
• Do test all text at 16px body size over the white surface (#ffffff) and golden-amber (#ffb428) backgrounds for WCAG AA contrast (4.5:1 minimum).

**Don't**

• Don't use secondary purple (#720eec) or tertiary red (#cf2e2e) on primary CTAs—reserve these for secondary actions and alerts only. Mixing accent colors dilutes urgency.
• Don't apply border-radius: 0px to any interactive element; the system is intentionally rounded to feel approachable, not austere.
• Don't exceed 64px vertical spacing between sections; gaps larger than lg-spacing fragment the narrative and confuse users about content relationships.
• Don't use text-shadow on body copy; apply it only to small labels (12–14px) over busy image backgrounds to ensure legibility without color-shifting.
• Don't deploy shadows heavier than 0 16px 40px; the system avoids dark, heavy shadows that evoke corporate coldness rather than community warmth.
• Don't mix typefaces; Inter is the sole family across all scales. Custom fonts like Favorvetica are reserved for brand marks, not UI text.