Design system and visual identity guidelines for building consistent, trustworthy experiences across all Grassroots Economics products and communications.
Font Pairing:Product|Plus Jakarta Sans + Inter + JetBrains Mono
Logo
The Grassroots Economics infinity loop — representing interconnected, self-sustaining community economies.
Color Palette
Derived from the logo's green-to-teal-to-blue flow. Three core brand colors represent growth (green), community (teal), and trust (blue). Each swatch shows the light mode hex and the corresponding soft dark mode value for integrators. Toggle the switch above to preview.
Primary — Green
Primary
Grassroots Green
#1B8F45
Dark: #5EBD78
Primary buttons, nav, headers, key interactive elements
Primary Light
Leaf Green
#25A854
Dark: #78CC8E
Hover states, accents, icons, success indicators
Primary Dark
Deep Green
#146B34
Dark: #3FA85D
Pressed states, dark mode accents, text on light bg
Primary 50
Mint Wash
#F0F9F3
Dark: #1A2520
Success backgrounds, subtle highlights, tag fills
Secondary — Teal
Secondary
Community Teal
#118577
Dark: #5CBFB5
Secondary CTAs, links, supporting UI elements
Secondary Light
Bright Teal
#18A393
Dark: #78CCC4
Hover states, badges, positive metrics
Secondary Dark
Deep Teal
#0C665B
Dark: #3DAFA3
Pressed states, text emphasis on teal surfaces
Secondary 50
Teal Wash
#EFF9F8
Dark: #1A2524
Teal-tinted backgrounds, info surfaces
Tertiary — Blue
Tertiary
Trust Blue
#1762B8
Dark: #6EA8DA
Links, info states, trust signals, investor-facing elements
Tertiary Light
Bright Blue
#2080DD
Dark: #8CBBE3
Hover states, active links, data visualizations
Tertiary Dark
Deep Blue
#104B8C
Dark: #5090C8
Pressed states, headings on blue surfaces
Tertiary 50
Blue Wash
#EEF4FC
Dark: #1C2330
Info backgrounds, blue-tinted surfaces
Accent & Semantic
Gold
Gold
#C9952E
Dark: #D4AD5A
Trust badges, premium elements, impact numbers
Destructive
Red
#D42B2B
Dark: #D47272
Errors, destructive actions, critical alerts
Warning
Amber
#E28E09
Dark: #D4A84E
Warnings, caution states, pending status
Info
Info Blue
#2080DD
Dark: #6EA8DA
Informational alerts, tips, helper text
Neutrals & Backgrounds
900
Charcoal
#111827
Dark text: #E0E0E8
Primary text, headings
500
Gray
#6B7280
Dark text: #A0A0AD
Secondary text, captions, descriptions
200
Light Gray
#E5E7EB
Dark border: #333340
Borders, dividers, separators
Page
Page Background
#F7F7F5
Dark: #1A1A22
Main page background, warm neutral base
Surface
Surface
#FFFFFF
Dark: #222230
Cards, panels, elevated content areas
Dark Mode Quick Reference
The dark palette uses a "soft dark" approach — warm dark grays with a subtle violet undertone instead of pure black. Brand colors are desaturated and lightened for comfortable reading. Text uses off-white (#E0E0E8) rather than pure white to reduce contrast strain.
Page
#1A1A22
Surface
#222230
Surface Alt
#282835
Border
#333340
Text Primary
#E0E0E8
Text Secondary
#A0A0AD
Text Muted
#75758A
Typography
Font pairing: Product from
FontTrio
— Plus Jakarta Sans for headings, Inter for body, JetBrains Mono for code, Space Grotesk for data points.
Aa
Headings
Plus Jakarta Sans
Warm geometry gives headings personality without noise. Weights 600-800.
Aa
Body
Inter
Surgical precision for body text. Optimized for screens. Weights 400-600.
42
Data / Stats
Space Grotesk
Data-forward feel for impact numbers, metrics, and counters. Weights 500-700.
Grassroots Economics empowers marginalized communities to take charge of their own livelihoods and economic future through community-driven economic tools.
Use CasesSarafu.NetworkFeatured PartnerSince 2010LiveOpen Sourcev2.4.1
Counters89920+
Alerts
Contextual feedback messages. Each variant includes icon, title, and description slots.
Default Alert
Use for general informational messages that don't require specific attention or action.
Pool Created Successfully
Your commitment pool "Kilifi Farmers Cooperative" is now live. Share the invite link with your community members.
Voucher Supply Low
Your community voucher balance is below 15%. Consider contributing more commitments to maintain liquidity.
Transaction Failed
Unable to process the voucher exchange. Please check your network connection and try again.
New Research Published
Our latest peer-reviewed paper on commitment pooling dynamics is now available on the Research page.
Shadows & Radii
Green-tinted shadows reinforce brand identity. Consistent border-radius scale from 6px to full.
Shadows
sm
md
lg
xl
Border Radius
sm / 6px
md / 8px
lg / 12px
xl / 16px
full
Spacing Scale
4px base unit. Consistent spacing creates visual rhythm and hierarchy across all components.
--space-14px
--space-28px
--space-416px
--space-624px
--space-832px
--space-1248px
--space-1664px
--space-2496px
Design Principles
Core guidelines for building consistent, investor-ready experiences across all Grassroots Economics touchpoints.
01
Lead with Impact, Not Technology
Investors care about results. Show the human story first — community photos, real metrics, testimonials — then reveal the tech that enables it. Technology is the enabler, not the headline.
02
One Site, One Brand
Never send users to external domains for core product info. Embed Sarafu.Network content, DAO details, and dashboards within grassecon.org. Every click away is trust lost.
03
Transparency as a Feature
Embed live dashboards, publish financials, show real-time community data. In the nonprofit space, radical transparency is your competitive advantage over opaque organizations.
04
Restraint Signals Confidence
Generous whitespace, limited color usage, large typography. Premium nonprofits look like they don't need to try hard. Every element should earn its place on the page.
05
Multiple Audience Pathways
Design for investors, community members, developers, and donors simultaneously. Each audience needs clear CTAs and tailored journeys. Don't force everyone through the same funnel.
06
Agency, Not Charity
Photography and copy should show empowered communities taking charge — not helpless people receiving aid. Warm, natural lighting. Real community photos. Never stock imagery.