VolunteerHub Design System

VolunteerHub Design System mockup preview
Click to expand

VolunteerHub is a community-driven, action-oriented design system built for volunteer coordination and community service platforms. It uses energetic blues and oranges alongside a supportive green to encourage participation and celebrate impact. The rounded, friendly UI creates a welcoming experience that lowers the barrier to getting involved.

Color Primary#2563EB
Color Secondary#F97316
Color Tertiary#22C55E
Surface Base#FAFAFA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Figtree · 36px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Figtree · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Figtree · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Figtree · 18px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyDM Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallDM Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsDM Sans · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

VolunteerHub is a community-driven, action-oriented design system built for volunteer coordination and community service platforms. It uses energetic blues and oranges alongside a supportive green to encourage participation and celebrate impact. The rounded, friendly UI creates a welcoming experience that lowers the barrier to getting involved.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterSuccessWarningError

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-blue

Do's & Don'ts

Do

use the primary blue for all sign-up and engagement CTAs to drive volunteer action.
use the secondary orange to highlight urgent or limited-spot opportunities.
celebrate completions with the tertiary green for check-marks, badges, and progress bars.
include volunteer count and impact metrics prominently on opportunity cards.
keep card layouts consistent with image, title, date, location, and a single action button.
ensure all interactive elements have clear focus states for keyboard navigation accessibility.

Don't

mix primary and secondary buttons in the same row; pick one dominant action per context.
overwhelm users with too many CTAs; guide them through a clear sign-up funnel.
use sharp corners; the rounded aesthetic is integral to the approachable community feel.
use dark themes; the light, open layout signals community warmth and inclusivity.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 5.4 KB
Downloads 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/volunteerhub and implement it in my code

Don't have the MCP? Install it here