CauseConnect Design System

CauseConnect Design System mockup preview
Click to expand

CauseConnect is a compassionate, impact-focused design system designed for charity and nonprofit fundraising websites. It pairs trustworthy greens with energizing warm orange to inspire both confidence and action. The system balances emotional warmth with clear information hierarchy, ensuring donors and supporters can engage effortlessly.

Color Primary#059669
Color Secondary#EA580C
Color Tertiary#1E3A5F
Surface Base#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

headline-fontNunito · 16px · Regular

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

body-fontOpen Sans · 16px · Regular

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

mono-fontRoboto Mono · 16px · Regular

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

h1Nunito · 40px · Extra Bold

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

h2Nunito · 32px · Bold

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

h3Nunito · 24px · Bold

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

h4Nunito · 20px · SemiBold

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

bodyOpen Sans · 16px · Regular

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

smallOpen Sans · 14px · Regular

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

xsOpen Sans · 12px · SemiBold

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

Spacing

Base: 8px

CauseConnect is a compassionate, impact-focused design system designed for charity and nonprofit fundraising websites. It pairs trustworthy greens with energizing warm orange to inspire both confidence and action. The system balances emotional warmth with clear information hierarchy, ensuring donors and supporters can engage effortlessly.

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

filterstatus-successstatus-warningstatus-error

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-green

Do's & Don'ts

Do

Use the primary green for all donation and positive-action CTAs to build trust.
Use the secondary orange sparingly for urgency indicators like fundraising deadlines.
Feature impact metrics prominently using large numbers with Nunito 800 weight.
Pair campaign imagery with clear progress bars using the primary green.
Use the tertiary navy for authoritative headings and trust-building sections like 'About Us'.
Ensure all form inputs in donation flows use clear labels, visible focus states, and inline validation.

Don't

Use the destructive red for non-error purposes; it undermines the compassionate tone.
Overcrowd layouts with competing CTAs; guide users toward one primary action per section.
Use dark themes; the light, open layout conveys transparency and trustworthiness.
Use decorative fonts; readability and clarity are paramount for donation flows.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.4 KB
Downloads 0
clean landing-page light nonprofit warm

Use with MCP

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

Don't have the MCP? Install it here