Brand Colors

Our carefully crafted color palette ensures consistency, accessibility, and visual harmony across all interfaces.

Primary
Chambray Blue
HEX: #2f4089
CSS: var(--color-primary)
Primary CTAs, headings, borders, brand accents. Represents trust and stability.
Secondary
Nepal Blue
HEX: #4b96da
CSS: var(--color-secondary)
Link hover states, secondary accents, gradient overlays. Adds energy and approachability.
Accent
Spring Blue
HEX: #8eb8c5
CSS: var(--color-accent)
Subtle highlights, light backgrounds, supporting visuals. Provides calm and clarity.
Background
Aqua Haze
HEX: #eef2f9
CSS: var(--color-background)
Section backgrounds, light boxes, alternating sections. Creates breathing room.

Text Color Palette

Primary Text
HEX: #1f233a
Body text, main content. High contrast for readability.
Secondary Text
HEX: #3d4668
Subheadings, supporting text.
Muted Text
HEX: #5c6483
Tertiary text, descriptions, labels.
Heading Text
HEX: #202c63
Headings, strong emphasis, titles.
/* CSS Variables Implementation */ :root { --color-primary: #2f4089; --color-secondary: #4b96da; --color-accent: #8eb8c5; --color-background: #eef2f9; } /* Usage Example */ .button { background: var(--color-primary); color: white; }

Typography System

Figtree provides a modern, geometric aesthetic that's highly legible across all devices and sizes.

H1 - Hero Headline clamp(2rem, 5vw, 3.5rem) / 700 / 1.2

Transform Lives Through Compassion

font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.2;
H2 - Section Title clamp(1.75rem, 4vw, 2.5rem) / 700 / 1.3

Our Services Make a Difference

font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.3;
H3 - Card Heading 1.35rem / 600 / 1.3

Housing & Shelter Services

H4 - Subheading 1.15rem / 600 / 1.4

Emergency Assistance Available

Body Text 1rem / 400 / 1.65

Catholic Charities of California serves communities across the state with compassion, dignity, and respect. Our programs provide essential services to those in need, from emergency food assistance to long-term housing solutions.

Small Text 0.875rem / 400 / 1.5

Captions, labels, and supplementary information. Used for meta details and fine print.

Font Weights

Light (300) - Subtle, delicate text

Regular (400) - Body text default

Medium (500) - Slightly emphasized

Semibold (600) - Headings and labels

Bold (700) - Strong emphasis and titles

Button System

Accessible, touch-friendly buttons with clear visual hierarchy and delightful interactions.

Primary Button
.cc-btn-primary { background: #2f4089; padding: 0.75rem 1.5rem; min-height: 44px; }
Secondary Button
.cc-btn-secondary { border: 2px solid #2f4089; color: #2f4089; background: transparent; }
Header CTA Button
.cc-btn-header-cta { background: white; color: #2f4089; font-weight: 700; min-height: 48px; }

Button States & Accessibility

  • ✓
    Minimum Touch Target: All buttons meet 44x44px minimum size for touch accessibility (WCAG 2.1 AA)
  • ✓
    Hover State: Transform translateY(-2px to -3px) with enhanced shadow for visual feedback
  • ✓
    Focus State: Clear outline with 2-3px width and offset for keyboard navigation
  • ✓
    Contrast Ratio: Exceeds WCAG AA (4.5:1) for all button text against backgrounds

Card Components

Flexible, reusable card patterns for displaying content with consistent styling and behavior.

Standard Card

Food Assistance

Providing nutritious meals and groceries to families facing food insecurity across California.

Housing Support

Emergency shelter, transitional housing, and rental assistance for individuals and families in crisis.

Immigration Services

Legal assistance, citizenship classes, and family reunification support for immigrant communities.

.cc-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 2.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .cc-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(47, 64, 137, 0.15); }

Stats Card

25K+
Families Served
15
Regional Agencies
100+
Community Programs

Service Card

🏠

Housing Services

Emergency shelter and long-term housing solutions for those experiencing homelessness.
🍲

Food Programs

Fresh food distributions, meal programs, and nutrition education for communities in need.
👨‍👩‍👧

Family Services

Counseling, case management, and support for families navigating difficult circumstances.
.cc-service-icon { width: 70px; height: 70px; background: linear-gradient(135deg, #2f4089, #4b96da); border-radius: 12px; box-shadow: 0 4px 12px rgba(47, 64, 137, 0.25); }

Spacing System

Consistent spacing creates rhythm, hierarchy, and breathing room throughout the interface.

XS: 0.25rem (4px)

Tight spacing between related elements

SM: 0.5rem (8px)

Small gaps, icon spacing

MD: 1rem (16px)

Base unit, element gaps

LG: 1.5rem (24px)

Section element spacing

XL: 2rem (32px)

Card padding, component spacing

2XL: 3rem (48px)

Section padding vertical

3XL: 4rem (64px)

Large section spacing

Common Spacing Patterns

/* Section Padding */ padding: 3rem 2rem; /* 48px vertical, 32px horizontal */ /* Card Padding */ padding: 2rem; /* 32px all sides */ /* Element Gap */ gap: 1rem; /* 16px between flex/grid items */ gap: 1.5rem; /* 24px for larger spacing */

Shadow System

Subtle shadows create depth and elevation, guiding user focus and interaction.

Small Shadow
0 2px 8px rgba(0,0,0,0.05)

Subtle depth for cards and containers

Medium Shadow
0 4px 12px rgba(47, 64, 137, 0.15)

Elevated elements, dropdowns

Large Shadow
0 8px 24px rgba(47, 64, 137, 0.15)

Modals, prominent features

Hover Shadow
0 8px 24px rgba(47, 64, 137, 0.25)

Interactive hover states

.card { box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .card:hover { box-shadow: 0 8px 24px rgba(47, 64, 137, 0.25); transform: translateY(-4px); }

Elementor Component Library

12 production-ready components (ACA) for rapid page building and consistent design implementation.

Hero & CTA Components

Transform Lives Through Compassion

Join us in making a difference in communities across California

aca-hero-v1

Hero

Full-width hero section with background image, gradient overlay, headline, subtext, and dual CTA buttons. Perfect for homepage and landing pages.

Slug aca-hero-v1
Use Cases Homepage, landing pages

Make a Difference Today

Your support helps families across California find hope and stability

aca-cta-banner-v1

CTA

Eye-catching call-to-action banner with bold messaging and primary action button. Use to drive conversions mid-page or at bottom.

Slug aca-cta-banner-v1
Use Cases Donation prompts, signups

Need Help?

Access our services and support programs

Want to Help?

Support our mission through donations

aca-dual-cta-v1

CTA

Two-column CTA section presenting dual pathways (e.g., "Get Help" vs "Give Help"). Ideal for service/donation split.

Slug aca-dual-cta-v1
Use Cases Service vs donation split

Content Display Components

🏠
Housing

Emergency shelter & support

🍲
Food

Nutrition assistance

👨‍👩‍👧
Family

Counseling & support

aca-feature-grid-v1

Content

3-4 column grid displaying features/services with icons, headings, and descriptions. Responsive down to single column.

Slug aca-feature-grid-v1
Use Cases Services, benefits

Catholic Charities helped our family find stability when we needed it most. Their compassion made all the difference.

— Maria S., Client

aca-testimonial-v1

Content

Beautiful testimonial section with quote, author, and optional photo. Builds trust and credibility through social proof.

Slug aca-testimonial-v1
Use Cases Client stories, testimonials

25K+

Families Served

15

Regional Agencies

100+

Programs

aca-stats-strip-v1

Content

Horizontal statistics banner showcasing key metrics and impact numbers. Great for demonstrating organizational reach.

Slug aca-stats-strip-v1
Use Cases Impact metrics, reports

Form & Interaction Components

Get in Touch

aca-contact-block-v1

Form

Contact form block with WPForms integration. Includes heading, description, and customizable form fields.

Slug aca-contact-block-v1
Use Cases Contact, inquiry forms
How do I access services?
What programs are available?
How can I donate?

aca-faq-accordion-v1

Interactive

Expandable FAQ accordion with smooth animations. Reduces page length while maintaining comprehensive information.

Slug aca-faq-accordion-v1
Use Cases FAQ, service details

Content Loop Components

Helping Families Find Hope

Learn how our programs make a difference...

Community Impact Report

See our 2024 achievements and impact...

aca-blog-highlights-v1

Loop

Featured blog post grid with thumbnails, titles, excerpts, and read more links. Pulls latest posts dynamically.

Slug aca-blog-highlights-v1
Use Cases News, blog archive
15
Dec
Holiday Food Drive

10:00 AM - Community Center

20
Dec
Volunteer Orientation

6:00 PM - Main Office

aca-event-listing-v1

Loop

Dynamic event listing with dates, times, locations, and registration links. Automatically filters upcoming events.

Slug aca-event-listing-v1
Use Cases Events, workshops

aca-partners-carousel-v1

Loop

Rotating logo carousel for partners, sponsors, or funders. Builds credibility and showcases relationships.

Slug aca-partners-carousel-v1
Use Cases Partner logos, sponsors

Commerce Component

Friend
$50
  • Monthly newsletter
  • Tax receipt
  • Impact updates
Supporter
$100
  • All Friend benefits
  • Quarterly reports
  • Recognition
  • Event invites
Champion
$250
  • All Supporter benefits
  • VIP event access
  • Direct impact stories

aca-pricing-table-v1

Commerce

Multi-tier pricing table with features, pricing, and CTA buttons. Highlight recommended tier with visual emphasis.

Slug aca-pricing-table-v1
Use Cases Donation tiers, membership levels, sponsorships

Component Usage via MCP Server

# List all available components node /path/to/elementor-mcp-server.js list # Search for specific component node /path/to/elementor-mcp-server.js search hero # Get component details and JSON node /path/to/elementor-mcp-server.js get aca-hero-v1 # Example: Import component into Elementor # 1. Copy the JSON from the MCP server output # 2. In Elementor, add a new section # 3. Click the folder icon (Templates) # 4. Go to "Import Template" and paste the JSON

Quick Start Guide

  1. Browse Components: Review the previews above to find the right component for your page
  2. Access via MCP: Use the MCP server commands to retrieve component JSON data
  3. Import to Elementor: Copy the JSON and import it directly into your Elementor page
  4. Customize: Adjust colors, text, images, and spacing to match your content
  5. Publish: Preview your changes and publish when ready

Accessibility Standards

We are committed to WCAG 2.1 AA compliance, ensuring our services are accessible to all users regardless of ability.

  • ✓
    Color Contrast - WCAG 2.1 AA
    Minimum 4.5:1 for normal text, 3:1 for large text (18pt+). All brand colors tested for accessibility.
  • ✓
    Focus States
    Visible keyboard focus with 2-3px solid outline and offset. Never remove outline without replacement.
  • ✓
    Touch Target Size
    Minimum 44x44px for all interactive elements. Ensures easy tapping on mobile devices.
  • ✓
    Semantic HTML
    Proper heading hierarchy (H1-H6), landmark regions, and meaningful link text throughout.
  • ✓
    ARIA Labels
    Use only when native semantics insufficient. Prefer semantic HTML first.
  • ✓
    Reduced Motion
    Respect prefers-reduced-motion media query. Disable animations for users who request it.
  • ✓
    Form Validation
    Clear error messages associated with fields via aria-describedby. Inline validation with visual indicators.
  • ✓
    Alt Text
    Descriptive alt text for all meaningful images. Empty alt for decorative images.

Accessibility Testing Checklist

/* Reduced Motion Media Query */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Focus Visible (Modern Standard) */ button:focus-visible, a:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

Animation Guidelines

  • Duration: 0.3s for interactions, 0.6-0.8s for page load animations
  • Easing: cubic-bezier(0.4, 0, 0.2, 1) or ease-out for natural motion
  • Hover Effects: Subtle transforms (translateY -2px to -4px)
  • Page Load: Fade-in-up animations with staggered delays (0.1s increments)
  • Always Respect: prefers-reduced-motion preference before animating