A color system built on deep midnight navy, warm gold, and sky blue — designed to evoke trust, warmth, and hope for charitable fundraising experiences.
Color Tokens
Click any swatch to copy the OKLCH value to your clipboard.
Background — Dark Navy
oklch(0.18 0.06 250)
Hero, Donate, Education sections
Surface — Dark Card
oklch(0.22 0.07 250)
Cards on dark backgrounds
Light Background
oklch(0.98 0.005 250)
About, Stats sections
Light Surface
oklch(0.96 0.008 250)
Cards on light backgrounds
Primary — Gold
oklch(0.75 0.16 75)
CTAs, highlights, progress bar
Secondary — Sky Blue
oklch(0.62 0.13 240)
Secondary accents, icons
Heading on Dark
oklch(0.98 0.005 80)
Headings on dark backgrounds
Body on Dark
oklch(0.78 0.04 240)
Body text on dark backgrounds
Heading on Light
oklch(0.18 0.06 250)
Headings on light backgrounds
Body on Light
oklch(0.35 0.04 250)
Body text on light backgrounds
Muted on Dark
oklch(0.65 0.04 240)
Labels, captions on dark
Muted on Light
oklch(0.50 0.04 250)
Labels, captions on light
Border on Dark
oklch(0.32 0.07 250)
Card borders, dividers on dark
Border on Light
oklch(0.90 0.01 250)
Card borders, dividers on light
Typography
Display — Playfair Display
Aa
Every Child Matters
Pieces of Potential
Used for: H1, H2, H3 headings, large display numbers, pull quotes
Body — DM Sans
Aa
Help us fund specialized educational classes for children with autism.
Labels · Captions · Navigation · Buttons
Used for: body copy, UI labels, captions, navigation, buttons
Type Scale
Components
Buttons
$100
Education
One week of specialized autism education classes with trained instructors.
$500
Tutoring
A full month of one-on-one tutoring and classroom aide support.
$25
Resources
One month of sensory learning materials and communication aids.
Badges & Tags
Progress Bars
Contrast Pairing
Dark Surface
Helping children with autism access the specialized education they deserve.
87 donors · 12% funded
Light Surface
Helping children with autism access the specialized education they deserve.
87 donors · 12% funded
Iconography