← trymate.io Mate isotype

Brand manual

Calm, warm, private. A mate gourd that is also a chat bubble.

Download tokens (Figma) Figma board (SVG) Brand kit (.zip)

01 · Logo

The isotype

A gourd and a speech bubble in one stroke, one bombilla, three typing dots. Use the files as they are.

Cream on green

Green on cream

App icon

Horizontal lockup

Clear space = height of the three dots row × 2 on every side. Min size 16 px (isotype), 72 px (lockup).

02 · Color

Green, cream, a sip of yerba

Green and cream carry the brand. Yerba is only for the one primary action on screen.

green 300#8FC79F

green 500#2F7A52

green 700#1B4430Mate green, the brand color

green 800#143628Raised dark surface

green 900#0E2A1FPrimary dark background (app dark theme)

green 950#08190FDeepest surface, footer

cream 50#FBF8F1

cream 100#F6F1E7Primary light background (app light theme)

cream 200#F3EBD8Mate cream, the brand second color

cream 400#D9CBAA

yerba 400#C6E77EAccent for primary CTAs only

yerba 500#B2D965

ink 600#4A5A52

ink 900#0B1410

03 · Typography

Serif voice, quiet body

Display · Instrument Serif

Your best AI Mate.

Body · Inter

One calm inbox for every chat. Mate reads, sorts and drafts. You tap send.

Label · JetBrains Mono, uppercase, +12%

Join waitlist →

h1	104px	Mate
h2	56px	Mate
h3	32px	Mate
lead	20px	Mate
body	17px	Mate
label	12px	Mate

04 · Space & shape

Generous, soft

1 · 4

2 · 8

3 · 12

4 · 16

6 · 24

8 · 32

12 · 48

16 · 64

24 · 96

32 · 128

Pill · buttons

28 · cards

40 · panels

05 · Motion

Calm, never busy

One ease. cubic-bezier(.22,1,.36,1). 180 ms for hovers, 600 ms for reveals, 1.2 s for the typing loop.
Reveal, don't bounce. Fade up 14–28 px. No springs, no overshoot.
Motion tells the story. Messages arrive, sort, a draft types itself, Send waits for you.
Respect reduced motion. Show the final frame.

Typing dots

06 · Voice

Say less

Short sentences. Verbs first.
Warm, like a friend who has your back.
Be precise about privacy: what runs where.
“You tap send.”

Don't

Hype: “revolutionary”, “10×”.
Invented numbers or testimonials.
Imply Mate sends on its own.
Recolor, stretch, outline or rotate the logo.