Skip to main content
Festa Design Studio

The Story of Festa's Colors

A Palette with Purpose

In the vibrant world of Festa Design Studio, our colors tell a story of purpose, impact, and social transformation. Just as we empower purpose-driven organizations to create positive change, each hue in our palette carries meaning and intention.

This carefully crafted palette reflects our core values, from social responsibility to innovation, creating designs that not only look beautiful but serve a greater purpose. Each color works in harmony to empower organizations in their journey to create positive social impact, just as we collaborate closely with our clients to bring their visions to life.

The Heart of Impact: Primary Colors

Our primary palette features "Chicken Comb" (#E12729), a bold red symbolizing meaningful change and transformation, paired with "Apocalyptic Orange" (#F37324) to reflect our collaborative energy.

Chicken Comb

chicken-comb • #e12729

Role

Primary brand color

Usage

CTAs, primary buttons, brand emphasis, meaningful change

Contrast

AA on white

Apocalyptic Orange

apocalyptic-orange • #f37324

Role

Secondary brand color

Usage

Collaborative energy, highlights, secondary CTAs

Contrast

AA on white

Growth and Hope: Secondary Colors

"Pepper Green" (#007F4E) embodies growth and sustainability, "Pot of Gold" (#F8CC1B) represents optimism, and "Leaf" (#72B043) reflects our clients' evolution through design.

Pepper Green

pepper-green • #007f4e

Role

Growth & sustainability

Usage

Supporting actions, environmental themes, growth indicators

Contrast

AA on white

Pot of Gold

pot-of-gold • #f8cc1b

Role

Optimism & hope

Usage

Success states, badges, positive feedback, brightness

Contrast

AA on dark

Leaf

leaf • #72b043

Role

Evolution & natural growth

Usage

Progress indicators, nature themes, client evolution

Contrast

AA on white

The Foundation: Neutral Colors

Our neutral colors reflect balance and wisdom. "White Smoke" (#F6F6F6) provides breathing room, while "The End" (#2A2A2A) adds grounding clarity. These colors ensure accessible, impactful designs.

The End

the-end • #2a2a2a

Role

Primary text & UI

Usage

Body text, headings, primary content

Contrast

AAA on white

White Smoke

white-smoke • #888888 (mid)

Role

Secondary text & borders

Usage

Muted text, borders, dividers, disabled states

Contrast

AA on white (600+)

Tints and Shades System

The Festa color system uses a comprehensive range of tints and shades for each color, numbered from 50 to 950. This provides flexibility while maintaining consistent steps between shades for harmonious combinations that meet WCAG accessibility standards.

Primary Color Scales

Chicken Comb - Primary Brand Color

Ranges from very light pink (50) through vibrant red (#E12729) to deep maroon (950)

50

100

200

300

400

600

700

800

900

950

DEFAULT: #e12729 | Lightest: #fef2f2 | Darkest: #46090a

Apocalyptic Orange - Collaborative Energy

Spans from pale orange to deep burgundy

50

100

200

300

DEF

600

700

800

900

950

DEFAULT: #f37324 | Lightest: #fff7ed | Darkest: #431407

Secondary Color Scales

Pepper Green - Growth & Sustainability

Varies from mint green to forest green

50

100

200

300

400

600

700

800

900

950

DEFAULT: #007f4e | Lightest: #ecfff7 | Darkest: #003921

Pot of Gold - Optimism & Hope

Ranges from pale yellow to deep brown

50

100

DEF

300

400

500

600

700

800

900

950

DEFAULT: #f8cc1b | Lightest: #fefce8 | Darkest: #412007

Leaf - Evolution & Natural Growth

Spans from light sage to deep forest green

50

100

DEF

300

400

500

600

700

800

900

950

DEFAULT: #72b043 | Lightest: #f3f9ec | Darkest: #16250e

Neutral Color Scales

White Smoke - Breathing Room

Ranges from nearly white to dark gray

50

100

DEF

300

400

500

600

700

800

900

950

DEFAULT: #f6f6f6 | Lightest: #ffffff | Darkest: #292929

The End - Grounding Clarity

Spans from light gray to near-black

50

100

200

300

400

DEF

600

700

800

900

DEFAULT: #2a2a2a | Lightest: #f6f6f6 | Darkest: #3d3d3d (900)

Trauma-Informed Gradient System

Our gradients use only the lightest shades (50-200) for soft, calming transitions that avoid overwhelming users. Each gradient is named after natural phenomena to evoke peaceful, uplifting emotions.

Sunrise Horizon

bg-sunrise-horizon

Mood: Energizing and optimistic

Use for: Hero sections, call-to-action areas

Tranquil Forest

bg-tranquil-forest

Mood: Calming and natural

Use for: Content sections, background areas

Gentle Dawn

bg-gentle-dawn

Mood: Warm and welcoming

Use for: Hero sections, important announcements

Peaceful Dusk

bg-peaceful-dusk

Mood: Soothing and harmonious

Use for: Testimonial sections, success stories

Mountain Serenity

bg-mountain-serenity

Mood: Fresh and uplifting

Use for: Footer sections, final CTAs

Desert Twilight

bg-desert-twilight

Mood: Warm and inviting

Use for: Feature highlights, special announcements

Ocean Whisper

bg-ocean-whisper

Mood: Subtle and peaceful

Use for: Alternating content sections

Spring Promise

bg-spring-promise

Mood: Fresh and optimistic

Use for: Success metrics, positive outcomes

Accessibility & Contrast

WCAG 2.2 Level AA Compliance

All Festa colors meet or exceed WCAG 2.2 Level AA standards for contrast ratios. This ensures text remains readable for users with low vision, color blindness, or other visual impairments.

Contrast Requirements

  • Level AA (Normal text): Minimum 4.5:1 contrast ratio
  • Level AA (Large text 18pt+): Minimum 3:1 contrast ratio
  • Level AAA (Normal text): Minimum 7:1 contrast ratio (recommended for critical content)

Safe Color Pairings

✓ Use These Combinations:

  • • the-end-950 on white (AAA)
  • • pepper-green-600 on white (AA)
  • • chicken-comb-600 on white (AA)
  • • white on pepper-green-700 (AAA)

✗ Avoid These Combinations:

  • • pot-of-gold-400 on white (fails AA)
  • • pepper-green-400 on white (fails AA)
  • • white-smoke-400 on white (fails AA)
  • • Light tints (50-200) for text

Color in Action

See how Festa's color system works in real components. These are actual production-ready UI elements demonstrating trauma-informed color usage.

Primary Action Buttons

Using pepper-green-600 for primary CTAs with proper hover states and focus rings.

Alert Messages

State colors with light backgrounds (50-tint) and darker text (700-800) ensure readability while maintaining calm aesthetics.

Changes saved successfully

Your profile has been updated and is now visible to your team.

Unable to save changes

Please check your email address and try again.

This action cannot be undone

Deleting this item will permanently remove all associated data.

New feature available

Check out our new impact reporting tools in the dashboard.

Navigation Cards with Gradients

Gentle gradients (bg-gradient-to-br from-*-50 via-*-50 to-*-100) create visual interest without overwhelming users.

Services

Explore our trauma-informed design and development services

Resources

Free toolkits and guides for social impact organizations

Text Color Hierarchy

Using the-end-950 for headings and the-end-700 for body text ensures AAA contrast.

Main Page Heading

Section Heading

Subsection Heading

This is body text with excellent readability. The contrast ratio between text-the-end-700 and white backgrounds exceeds WCAG AAA standards, ensuring accessibility for all users including those with visual impairments.

Secondary information and metadata use white-smoke-600 for de-emphasis while maintaining AA compliance.

Learn more

Form Elements

Form inputs use light backgrounds with clear focus states in brand colors.

We'll never share your email with anyone else.

Trauma-Informed Color Principles

1. Calming Tints for Backgrounds

We use only the lightest tints (50-200) for backgrounds and large surfaces. These soft hues create a sense of safety and reduce visual overwhelm.

2. High Contrast for Text

All body text uses the-end-950 or the-end-700 to ensure AAA-level readability. We never compromise legibility for aesthetics.

3. Purposeful Saturation

Vibrant colors (600-700 range) are reserved for CTAs and interactive elements only. This creates clear affordances without overwhelming the interface.

4. Natural Gradient Names

Our gradients are named after peaceful natural phenomena ("Tranquil Forest," "Gentle Dawn") to evoke safety and connection to nature.

Back to Foundations