GreenEarth Design System
GreenEarth is an environmental design system crafted for advocacy organizations and conservation platforms. It draws from nature with forest greens, earthy brow ns, and sky blues while balancing environmental urgency with trustworthy calm. The system uses flat styling with visible borders to create structured, informative layouts that communicate scientific credibility alongside emotional resonance.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxGreenEarth is an environmental design system crafted for advocacy organizations and conservation platforms. It draws from nature with forest greens, earthy brow ns, and sky blues while balancing environmental urgency with trustworthy calm. The system uses flat styling with visible borders to create structured, informative layouts that communicate scientific credibility alongside emotional resonance.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here