GreenLeaf

GreenLeaf mockup preview
Click to expand

Earthy, organic, sustainability-first. GreenLeaf is a design system rooted in natural aesthetics and sustainability values. Built for eco-friendly product shops, it employs earth tones, organic shapes, and generous whitespace that mirrors the breathing room found in nature. The spacious density encourages mindful browsing over impulse purchasing. Every element feels grounded, honest, and intentionally crafted — like a hand-printed label on a glass jar.

Primary#166534
Secondary#86A873
Tertiary#A47148
Neutral#A8A29E
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayMerriweather · 36px · Bold

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

headlineMerriweather · 28px · Bold

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

subheadMerriweather · 20px · Regular

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

body_largeRaleway · 18px · Regular

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

bodyRaleway · 16px · Regular

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

body_smallRaleway · 14px · Regular

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

captionRaleway · 12px · Medium

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

overlineRaleway · 11px · SemiBold

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

codeFira Code · 14px · Regular

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

Spacing

Base: 8px

Earthy, organic, sustainability-first. GreenLeaf is a design system rooted in natural aesthetics and sustainability values. Built for eco-friendly product shops, it employs earth tones, organic shapes, and generous whitespace that mirrors the breathing room found in nature. The spacious density encourages mindful browsing over impulse purchasing. Every element feels grounded, honest, and intentionally crafted — like a hand-printed label on a glass jar.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

Filter

Do's & Don'ts

Do

use Forest #166534 only for primary actions and links — it is the anchor of the palette
include eco-certification badges (organic, fair-trade, recyclable) near product titles using Status Chips
keep photography natural and unfiltered — avoid heavy post-processing or neon overlays
maintain generous whitespace between product cards (minimum 24px gap)
surface sustainability information (materials, carbon footprint) prominently in product cards
use Merriweather serif headings to evoke a handcrafted, artisanal quality

Don't

use drop shadows — the system relies on borders for depth to maintain its grounded aesthetic
pair Tertiary Clay #A47148 with Destructive Red #B91C1C — the warmth conflict creates visual tension
use pure black #000000 for text — always use the warm #1C1917 to stay on-palette
crowd the layout — if a section feels dense, it contradicts the nature-inspired breathing room philosophy
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.3 KB
Downloads 0
clean ecommerce light organic warm

Use with MCP

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

Don't have the MCP? Install it here