Design System Showcase
A comprehensive collection of UI components following the DonorsChoose-inspired design philosophy: optimistic, human, and classroom-first.
Typography
Heading 1 - Bold & Confident
Heading 2 - Strong Presence
Heading 3 - Clear Hierarchy
Body text is calm and neutral, designed for readability and comfort. It maintains a friendly tone while ensuring clarity.
Small text for secondary information and helper content.
Buttons
Primary Buttons
Secondary Buttons
Badges
Form Components
We'll never share your email with anyone else.
This field is required
Maximum 500 characters
Progress Indicators
Cards
Project Card
UrgentHelp students get the supplies they need for hands-on learning.
Story Card
MatchRead about the impact your donations make in real classrooms.
Impact Card
FundedSee the statistics and outcomes from completed projects.
Alerts & Notifications
Data Tables
| Project | Teacher | Location | Goal | Progress |
|---|---|---|---|---|
| Books for Reading Corner | Ms. Johnson | Brooklyn, NY | $500 | 85% |
| Science Lab Equipment | Mr. Smith | Austin, TX | $1,200 | 45% |
| Art Supplies | Mrs. Davis | Seattle, WA | $350 | 100% |
| Musical Instruments | Ms. Garcia | Miami, FL | $800 | 60% |
| Sports Equipment | Mr. Wilson | Chicago, IL | $650 | 30% |
Tabs
Project Overview
This section provides a comprehensive overview of the project goals, timeline, and expected outcomes for students.
Accordion
When you donate to a project with a match offer, your contribution will be matched dollar-for-dollar by our partners, doubling your impact!
100% of your donation goes directly to funding classroom projects. We cover processing fees separately to ensure maximum impact.
Yes! You'll receive email updates when the project is funded, when materials arrive, and a thank you letter from the teacher and students.