Design System

Spectrum of Light

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

The Full Palette

Click any swatch to copy the OKLCH value to your clipboard.

Click to copy

Background — Dark Navy

oklch(0.18 0.06 250)

Hero, Donate, Education sections

Click to copy

Surface — Dark Card

oklch(0.22 0.07 250)

Cards on dark backgrounds

Click to copy

Light Background

oklch(0.98 0.005 250)

About, Stats sections

Click to copy

Light Surface

oklch(0.96 0.008 250)

Cards on light backgrounds

Click to copy

Primary — Gold

oklch(0.75 0.16 75)

CTAs, highlights, progress bar

Click to copy

Secondary — Sky Blue

oklch(0.62 0.13 240)

Secondary accents, icons

Click to copy

Heading on Dark

oklch(0.98 0.005 80)

Headings on dark backgrounds

Click to copy

Body on Dark

oklch(0.78 0.04 240)

Body text on dark backgrounds

Click to copy

Heading on Light

oklch(0.18 0.06 250)

Headings on light backgrounds

Click to copy

Body on Light

oklch(0.35 0.04 250)

Body text on light backgrounds

Click to copy

Muted on Dark

oklch(0.65 0.04 240)

Labels, captions on dark

Click to copy

Muted on Light

oklch(0.50 0.04 250)

Labels, captions on light

Click to copy

Border on Dark

oklch(0.32 0.07 250)

Card borders, dividers on dark

Click to copy

Border on Light

oklch(0.90 0.01 250)

Card borders, dividers on light

Typography

Font System

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

7xl / DisplayPieces of Potential
4xl / H2Every Child Deserves to Learn
2xl / H3What Your Donation Funds
lg / BodySpecialized classes, tutoring, and learning support for children with autism.
sm / LabelAUTISM EDUCATION FUNDRAISER 2026

Components

UI Building Blocks

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

Autism AwarenessEducation Fund12% Funded87 DonorsTax-DeductibleFundraiser 2026

Progress Bars

Fundraising Goal12%
Classes Funded38%
Children Helped65%
Campaign Complete88%

Contrast Pairing

Dark & Light Modes

Dark Surface

Pieces of Potential

Helping children with autism access the specialized education they deserve.

87 donors · 12% funded

Light Surface

Pieces of Potential

Helping children with autism access the specialized education they deserve.

87 donors · 12% funded

Iconography

Icons & Motifs

Donate
Education
Community
Impact
Trust
Progress
Gold
Blue
Navy
Rotated