The Yerba design system, poured with care.
Yerba takes its name and its feeling from mate, the shared green tea of late nights and good company: warm, awake, and unpretentious. These are the brand guidelines and design system behind that feeling, the same care that shapes how Yerba works for creators.
Yerba logo guidelines: One mark, one wordmark.
The leaf mark stands alone where space is tight. The wordmark carries the name everywhere else. Both are built for calm, light surfaces.
Do
- Give the mark generous, calm clear space on every side.
- Place it on cream, paper, or another light, low-noise surface.
- Use the wordmark when the name needs to be read at a glance.
Don't
- Recolor, restretch, rotate, or add drop shadows to the mark.
- Set it on a busy photo or a low-contrast background.
- Rebuild the wordmark in another typeface or respace the letters.
Yerba's color palette: A warm, mate-green palette.
Deep mate greens for trust and calm, a young-leaf highlight and mate gold for energy, all resting on cream paper. Every value is a token in the codebase.
Mate green
--color-mate · text-mate
The logo green, and our primary brand color.
Mate deep
--color-mate-deep · text-mate-deep
Deep forest green for panels, CTAs, and emphasis.
Young leaf
--color-leaf · text-leaf
A fresh, awake highlight for accents and glows.
Mate gold
--color-gold · text-gold
Warm gold for small moments of delight.
Cream paper
--color-paper · bg-paper
The warm paper background everything rests on.
Ink
--color-ink · text-ink
A warm near-black for body copy and headlines.
Supporting tones
Mate 600
#4f8a3a
Gold soft
#f2c94c
Paper 2
#f3eddf
Line
#e8e1d2
Ink soft
#5d564b
Ink faint
#746b5a
Gradients and texture: Aurora light, with a grain of warmth.
Our signature look is a slow aurora of mate hues under a fine film of grain. The aurora drifts gently in the background; the grain wash sits still, a steady texture rather than a moving one.
Fresh Pour aurora
Background drift
Grain texture
Still wash
Cool green
Calm and focused
Warm gold
Warm and inviting
Leaf green
Fresh and awake
Yerba's typeface: Hanken Grotesk, head to toe.
Yerba sets everything in Hanken Grotesk: friendly, geometric, and clear at any size. It is applied everywhere through the font-display class token, so display and body stay in one family. The font itself loads with display swap, so text is visible immediately on first paint.
Display
Talks back.
Body
Set long-form copy at a relaxed line height with soft ink. It should feel like a note from a friend, easy to read all the way down the page without strain.
Weights
- YerbaLight300
- YerbaRegular400
- YerbaMedium500
- YerbaSemibold600
- YerbaBold700
- YerbaExtrabold800
Motion principles: Movement that earns its keep.
Animation here is quiet and purposeful. It guides the eye, never fights it, and it gets out of the way the moment someone asks it to.
Light by design
Every animation is built by hand and kept deliberately lean, so pages stay light and load fast.
Pauses when offscreen
Background motion parks until it scrolls into view, then stops fully when it leaves. The tab going hidden stops it too.
Honors reduced motion
Set prefers-reduced-motion and the drift, sheens, and loops switch off. Content still arrives, just calmly, with nothing left mid-animation.
Yerba's voice and tone guide: Our voice: warm, plain, and always on the creator's side.
Warm and human
We write the way a friend would talk you through something: relaxed, encouraging, never stiff or corporate.
Creator-first
The creator is the hero of every sentence. We describe what they get, in their words, not our feature list.
Plain language
Short sentences. Real words. If a line needs a second read, we rewrite it until it doesn't.
Yerba design system: Built with care, down to the pixel.
Claim your handle and put this whole system to work for you. Browse our simple pricing, or reach out about brand and press.
Brand inquiries: hello@yerba.chat