Verdant
Gear that gives back to the ground it's made from.
Assets
Full-color horizontal lockup (leaf mark + wordmark). Use on warm/light backgrounds.
Standalone rounded-square leaf mark for avatars, favicons, and app tiles.
Palette
Typography
56px
34px
22px
16px
Fraunces headings · Nunito Sans body · 1.2 scale, warm & tactile.
Sample UI
Verdant card
A representative surface — headline, supporting copy, and an action — rendered in Verdant's colors, type, and corner radius.
Guidelines
Verdant — Look
The Verdant look is earthy and warm: deep greens and clay tones on a soft paper background, humanist type, and natural texture. It should feel handmade and durable, never synthetic.
Color
| Role | Name | Hex | Use |
|---|---|---|---|
| Primary | Forest | #2f5d3a | Primary buttons, headlines, brand marks |
| Ink | Bark | #241e18 | Body text |
| Muted | Stone | #6f6456 | Secondary text, captions |
| Accent | Clay | #c1663f | Highlights, links, small calls to action |
| Surface | Oat | #f0e9dc | Cards, section backgrounds |
| Background | Linen | #faf6ee | Page background |
| Border | Twine | #ddd2bf | Dividers, input borders |
Rules
- Green leads; clay is the warm spark used sparingly.
- Backgrounds are warm paper tones, never stark white.
- Keep contrast readable — Bark on Linen, not Stone on Oat for body text.
Typography
- Headings: Fraunces — a warm, high-contrast serif with soft character.
- Body: Nunito Sans — humanist, friendly, easy on long reads.
- Scale: 1.2 ratio. Headlines can be large and expressive; body stays calm.
- Headings may use the heavier Fraunces weights for a printed, tactile feel.
Logo & shape
- Wordmark set in Fraunces, title case "Verdant", generous letterspacing.
- Corners are gently rounded (6–10px); shapes feel hand-cut, not machined.
- Iconography is organic and slightly irregular; think woodblock over vector.
Space & layout
- Comfortable, unhurried spacing with room for texture and photography.
- Mixed measures are fine; editorial layouts over rigid grids.
- Motion is slow and natural (250ms ease-out); nothing snappy.
Imagery
- Real landscapes, hands, materials, and dirt. Natural light, warm grade.
- Show wear and repair proudly — patched gear is a feature, not a flaw.
- Paper and canvas textures welcome behind content.
Do / Don't
- Do lean on warm neutrals and one strong green.
- Do show materials and provenance honestly.
- Don't use neon, pure white, or cold grays.
- Don't overstate impact — specifics beat green sparkle.
Verdant — Voice
Verdant sounds like a trusted trail guide: warm, plain-spoken, and honest about trade-offs. It's optimistic without overselling, and it always respects the reader's intelligence.
Principles
- Honest over hype. Name the trade-offs. Specifics ("repairs free for 10 years") beat vague virtue ("planet-friendly").
- Warm and grounded. Talk like a person who's been outside today.
- Made to last. Frame everything around longevity, repair, and care.
- Earn the green claim. Back impact statements with real numbers or say nothing.
Tone by context
- Product copy: tactile and concrete — materials, fit, and how it wears in.
- Sustainability: transparent, including what's still hard or unfinished.
- Errors: friendly and human, never technical or cold.
- Community: generous and inclusive; the outdoors is for everyone.
Vocabulary
- Say: built to last, repair, renew, rooted, honest, the long way, in the field
- Avoid: eco-friendly (vague), game-changing, disruptive, luxury, must-have
Grammar & mechanics
- Second person and warm first-person plural ("we") where it fits.
- Present tense, active voice, plain words over jargon.
- Title case for headlines; sentence case for UI and buttons.
- Em dashes for a natural, spoken rhythm. Emoji rarely, and never as decoration.
Examples
- Product — ✅ "Waxed canvas that softens with every trip and shrugs off a drizzle." ❌ "The ultimate game-changing all-weather pack."
- Impact — ✅ "Every order restores about 10 square meters of grassland." ❌ "Buy this and save the planet."
- Error — ✅ "That code's expired — happens to the best of us. Want a new one?" ❌ "Invalid coupon code."