brand kit · v0.1

The bean.

One mark across everything: GitHub, Twitter, Reddit, Slack, Discord, the favicon, the bot avatar, the README header. Crema on espresso. Italic serif wordmark. Every file you'll ever need is one click below.

The barista bean mark
01 Palette

Three colors.
That's all there is.

Espresso is the canvas. Crema is the brand. Cream is the breathing room. Anything else is just contrast or accident.

Espresso
hex#1F1611
rgb31 22 17
oklch0.16 0.012 60
usebackground, primary text on light
Crema
hex#E0A063
rgb224 160 99
oklch0.78 0.13 60
useaccent, the bean fill, CTAs
Cream
hex#F5EDE1
rgb245 237 225
oklch0.94 0.020 75
uselight-mode bg, primary text on dark
02 The mark

Four variants.
Eleven sizes each.

Avatar (filled square), rounded (iOS-style), light-mode, and the bot variant with status indicator. Every avatar comes pre-rendered at 16, 32, 48, 64, 96, 128, 192, 256, 400, 512, and 1024px PNG.

Bean avatar
Bean · primary avatar
Filled espresso square with the crema bean. The default for GitHub, Twitter, Reddit, and most other social.
svg512102425612864
Bean rounded avatar
Bean · rounded
iOS-style rounded square. Use where the platform doesn't impose its own circular crop — Slack icon, Discord app, app-store entries.
svg5121024256128apple-touch 180
Bean light avatar
Bean · light mode
Espresso bean on a cream square. For light-themed banners, business cards, light-mode-only contexts.
svg5121024256128
Bean bot avatar
Bean · bot variant
The primary avatar plus a small green status indicator. Use for GitHub Actions bots, Slack apps, Discord webhooks — anywhere a human shouldn't think a human is replying.
svgsvg-r512512-r256128

Renders at every size

16
32
48
64
96
128
192
03 Lockup

Bean + wordmark.
For wider contexts.

When you have room — README headers, conference banners, presentation title slides — pair the bean with the italic wordmark. Don't compose your own.

Dark lockup
Dark · primary
The default lockup. Crema bean, cream wordmark, espresso background. README headers, repo social previews, slide title pages.
svg24001200transparent svg
Light lockup
Light · inverse
Espresso bean and wordmark on cream. For print, light-theme docs, paper handouts.
svg24001200transparent svg
04 Typography

Three typefaces.
One voice.

Inter Tight for everything you read. Instrument Serif italic for the swash — headlines, the wordmark, the accent moments. JetBrains Mono for code, numbers, and the kind of small text that lives next to a metric.

Aa
UI · body · headlines
Inter Tight
The workhorse. 400, 500, 600. Used at every weight from caption to display. letter-spacing tightens with size.
Bb
swash · wordmark · accent
Instrument Serif
Italic only. The brand voice. Use sparingly: one or two words inside a headline, the wordmark, big benchmark numbers.
$_
code · numbers · ui labels
JetBrains Mono
Anything technical. Commands, error codes, metrics, axis labels, version strings, anything that should look engineered.
05 Rules

Don't redraw it.
Don't recolor it.

The mark is a system. The variants below already cover every context you'll encounter. If you're tempted to make a new one — first, ask. We'll probably add the variant for you.

do
Use the primary avatar at 256+ for any platform that displays the avatar as a real-sized image. GitHub, Twitter, Reddit, Mastodon.
don't
Add a drop shadow, glow, gradient, or border. The mark is flat. The avatar is flat. The bot variant's status indicator is the only decoration we ship.
do
Use the roundedvariant where the platform doesn't apply its own crop. iOS app icons, Slack, Discord app entries.
don't
Recolor the bean. Crema fill, espresso crease. The light-mode inverse is the only other ratio that's on-system.
do
Use the botvariant on every account that automates replies — release-bots, CI bots, Slack apps. Humans should never wonder if barista's CI account is a person.
don't
Rotate or skew the bean. The −18° tilt is baked into the master. Compose other graphics around the mark; don't compose the mark itself.
do
Use the lockup when you have horizontal room — repo OG image, conference slide, presentation title. The wordmark is part of the system.
don't
Pair the mark with type other than Instrument Serif italic. The wordmark is locked. Free Google substitutes will look almost-right and that's worse than nothing.

Grab the whole kit.

All SVGs, all PNGs, lockups, both color modes. One zip, ready to drop in.

Download brand kit