🎨 Core of Volunteers — Official Color Guide v2

Brand Hierarchy Overview

Role	Purpose	Psychological Meaning
Primary (Purple)	Represents The Core of Volunteers — identity, unity, purpose.	Wisdom, compassion, transformation.
Secondary (Blue)	Used for business, partnerships, and organizational infrastructure.	Trust, professionalism, stability.
Success (Green)	Associated with volunteerism, growth, community progress, and Core C.A.R.E.	Renewal, hope, collaboration.
Alert / Help (Red)	Used for alerts, urgent needs, or help requests.	Urgency, empathy, action.
Government / Bureaucracy (Yellow)	Reserved for policy, compliance, government relations, or obstacles.	Caution, clarity, transparency.

Core Palette

Name	HEX	RGB	Description	Key Usage
Core Purple	`#5525D5`	85, 37, 213	The official Core identity color.	Logos, headers, hero sections, callouts of unity and leadership.
Trust Blue	`#1F71E9`	31, 113, 233	Business and partnership color.	Corporate communications, partner spotlights, dashboards.
Volunteer Green	`#4BD1A0`	75, 209, 160	Community success and positive actions.	Confirmation banners, success modals, volunteer program highlights.
Alert Red	`#D72623`	215, 38, 35	Emergency, urgency, or assistance.	Help requests, alerts, attention banners.
Policy Yellow	`#FFD94C`	255, 217, 76	Caution and government affairs.	Government references, bureaucracy notes, caution elements.
Primary Dark (Charcoal)	`#222222`	34, 34, 34	Foundation neutral.	Text, overlays, headers.
Primary Light (White)	`#FFFFFF`	255, 255, 255	Clean background.	General backgrounds, dividers, balance.

Extended Palette (Tints & Shades)

Color	Light Tint	Base	Dark Shade
Core Purple	`#7B51E1`	`#5525D5`	`#3A179B`
Trust Blue	`#5DA0F0`	`#1F71E9`	`#0E4DA5`
Volunteer Green	`#7FE5C2`	`#4BD1A0`	`#2C8A69`
Alert Red	`#E85B59`	`#D72623`	`#8C1715`
Policy Yellow	`#FFE889`	`#FFD94C`	`#A68B1B`

Functional Color Mapping

Context	Color	Use
Text Primary	`#222222`	Default text
Text Secondary	`#555555`	Body copy
Link / Hover	`#1F71E9` / `#0E4DA5`	Navigation and CTAs
Background Light	`#FFFFFF`	Default backgrounds
Background Dark	`#222222`	Inverse sections
Success States	`#4BD1A0`	Completion, positive confirmation
Error / Help	`#D72623`	Help request banners, urgent alerts
Warning / Policy	`#FFD94C`	Government-related or caution messages

Gradients & Overlays

Core Gradient (Brand Default):

linear-gradient(90deg, #5525D5 0%, #1F71E9 100%)
Help Gradient:

linear-gradient(90deg, #D72623 0%, #FFD94C 100%)
Volunteer Gradient:

linear-gradient(90deg, #4BD1A0 0%, #1F71E9 100%)
Overlay Tint for Photos:

rgba(34, 34, 34, 0.6) — ensures text legibility over imagery

Accessibility