Volunteer
Project Helping
Design System & Style Guide
Reference for all page builds on projecthelping.org and kyndhub.com
Final · May 2026
Brand Colors
Blue Scale — Foundation
Navy
#1D3040
Headings · footer
Blue 800
#1D4A60
Badge text
Blue 600
#347EA0
Hover states
Primary Blue
#439BC0
Buttons · links
Blue 300
#7EC4D8
Stats on dark
Blue 200
#B3DDE9
Card borders
Blue 100
#D9EFF5
Subtle borders
Blue Light
#F4FBFC
Hero bands only
Neutrals
Body Text
#5A6A7A
All body copy
Caption
#8A9BAB
Labels · meta
Border
#D0DCE6
Dividers
Bg Alt
#F7FAFB
Section alt
Page Bg
#FFFFFF
Always white
Audience Colors — CTA Buttons
Nonprofits
#439BC0
Volunteers
#1EC1A1
Companies
#924CD8
Pink Accent
#DE3C7A
Light Backgrounds — Card Tints & Section Bands
Green Light
#F0FBF8
Green Border
#B3E8DB
Purple Light
#F5F0FD
Purple Border
#D4BFF5
Pink Light
#FDF0F5
Pink Border
#F0B8D0
Typography — DM Sans Only
Page Title h13rem · 800 · lh 1.08
Do Good. Feel Good.
Section Title h22.1rem · 700 · italic span
Built for everyone doing good.
Detail / Feature Title2–2.2rem · 700
Everything you need. Free.
Card Title1.05rem · 700
Kynd Kits
Body0.97rem · 400 · lh 1.78
Volunteering creates endless positive impact. When you do good, it benefits your mental wellness and helps those in need.
Eyebrow Label11px · 700 · uppercase
Support Our Mission
Meta / Caption0.75rem · 400
Updated May 2026 · projecthelping.org
Buttons
Solid Variants
Nonprofits / Primary Volunteers Companies Pink Accent
Outline Variants
Outline Blue Outline Green Outline Purple
On Dark Background
CTA on Dark Ghost Button
Sizes
Large .btn-lg Default .btn Small .btn-sm
Tab Bar — Page Navigation
Light blue #f4fbfc background below the hero. Inactive tabs: #8a9bab. Active tab: #439bc0 text + flat 3px bottom border, border-radius:0. Click to interact:
Financial SupportDonate directly to fund community-based mental health programming. 100% of your gift goes to the cause.
Events & SponsorshipsSponsor a volunteer event or become a presenting partner at one of our community wellness programs.
Passive SupportSupport us through everyday actions — shopping, referrals, and more at no extra cost to you.
CommunityJoin our community of supporters and help spread the word about mental health volunteering.
FAQsCommon questions about how we use donations and what your support makes possible.
Accordions — Inside Content Sections
One panel open at a time. Filled icon = open. Outlined = closed. Click to interact:
Access free tools to manage volunteers, post opportunities, and track your impact in the community.
Expandable Card Grid
Click a card to expand a full-width detail panel below. One open at a time. Click again to close:
What Is Included
Everything your team needs, turn-key.
View details
What You Can Customize
Everything is completely customizable.
View details
Event Logistics
Fits any event format, anywhere.
View details
What Is Included
Volunteer Project Materials
Everything needed is included — supplies, instructions, and a cause card explaining the impact.
Branded Insert & Sticker
A customizable insert designed with your company's values, event details, and recipients.
See kit options
What You Can Customize
Kit Branding & Contents
Add your company logo, choose from 70+ kits, or build a fully custom one with our team.
Distribution
Ship to your warehouse, a chosen partner, or we find a local distributor in your designated area.
See customization pricing
Event Logistics
Remote, In-Person & Hybrid
Ship to remote employees, build together in-person, or run both simultaneously for hybrid teams.
Book a discovery call
Spacing & Border Radius
Border Radius
--r-md
8px · Buttons
--r-lg
12px · Icons
--r-xl
16px · Cards
--r-2xl
24px · Panels
--r-pill
999px · Badges
Spacing Scale
Section padding4.5rem 0Standard sections
Container max-width1080pxCentered content
Container padding0 1.5remLeft/right gutter
Card padding1.5–2remCards and panels
Grid gap1–1.25remCard grids
Icons — Tabler Only, Never Emojis
heart-handshake
building-community
users
leaf
star
chart-bar
rocket
shield-check
currency-dollar
calendar-event
help-circle
arrow-right
package
adjustments
heart
building
Design Principles
Tabs — styled nav-tab pattern only. Light blue #f4fbfc background below the hero. Inactive: #8a9bab. Active: #439bc0 text + flat 3px #439bc0 bottom border, border-radius:0. Scrolls horizontally on mobile.
DM Sans only. All text including headings. Never DM Serif Display. Headings use weight 700–800.
No emojis. Always Tabler Icons. aria-hidden="true" on decorative icons, aria-label on meaningful icon-only elements.
Page background is always white. #f4fbfc is for hero bands and callout rows only — never the page background.
No dark text on blue or navy backgrounds. Always white or light-tinted text. Buttons on dark: color:#fff !important.
Mobile responsive always. Every page works at 375px. 3-col → 2-col at 900px, 1-col at 600px. Tab bars scroll horizontally.
Elementor conflict fix on every page. Wrap in unique class, prefix all CSS selectors, CSS vars on wrapper not :root, namespace all JS in an IIFE.