The Beanchain brand, in one page

Our logo

A bean, having a nice time

We never redraw our bean. Every version below is the same drawing in different colours, so whichever one you pick, it still looks like us. Choose the one that suits where it is going and how many colours you can print, rather than the one you like best.

A word on why there are so many. Our bean is sitting in the coffee, so if you flatten the whole thing into one solid colour, the bean and the cup melt together and the little face disappears. Three colours is the fewest we can get away with. If you only have one, use one of the one-colour versions below, where the outlines drop out to the paper colour and keep everything separate.

Full colour

Our everyday bean. Use this one whenever you can print in colour.

SVG PNG 256 PNG 512 PNG 1024

Three colours, light background

For printing that cannot handle the full six colours: menus, rubber stamps, screen printed shirts.

SVG PNG 512

Three colours, dark background

The same three, for dark surfaces. Our cup stays pale and our coffee stays dark, the way a real one does.

SVG PNG 512

One colour, light background

When you only get one ink. The outlines drop out to the paper colour, which keeps our bean from disappearing into the cup.

SVG PNG 512

One colour, dark background

The same idea in reverse. Good for embroidery, vinyl, and foil.

SVG PNG 512

Outline

Just the linework, for engraving, big prints, and watermarks. Keep it 48px or bigger or the lines vanish.

SVG

Outline, dark background

The same for dark surfaces, with the same 48px minimum.

SVG

Lockups

Our bean and our name together

Our name is drawn into these files as shapes rather than as live text, so you do not need our font installed for them to look right. Open one anywhere and you get exactly what we see. It also means that when we add something like beanchain workspace later, it will sit in the same family without anyone having to redraw it.

Side by side

Our main one. Website headers, email signatures, anywhere with room to go wide.

SVG PNG 1200

Side by side, dark background

The same, for dark surfaces.

SVG PNG 1200

Stacked

Near enough square. Good for stickers, cups, profile pictures, and anywhere narrow.

SVG PNG 1200

Stacked, dark background

The same, for dark surfaces.

SVG PNG 1200

With SINCE 2021

For signage, packaging and merch. We have been here since 2021, and this is where we say so.

SVG PNG 1200

With SINCE 2021, dark background

The same, for dark surfaces.

SVG PNG 1200

Just our name

For places our bean is already on the page, or where it simply will not fit.

espresso SVG espresso PNG bean SVG bean PNG cream SVG cream PNG

Room to breathe

How much room to leave it

mark 112px · clearspace 28px

Give it room

Leave a gap all the way round equal to a quarter of the bean’s height. Nothing should come into it: no text, no lines, no edge of a photo. Our lockup files already have that space built in, so you can butt one right up against its own edge.

24px

32px

48px

How small it can go

• Full colour: 24px. Smaller and the bean starts blending into the cup.
• Outline: 48px. The thin lines fade out well before the shape does.
• Side by side lockup: 120px wide. Below that, drop the name and use the bean on its own.

Misuse

What not to do

Colour

What we use each colour for

Our browns and both paper tones come straight out of the original logo. The green is not from the logo at all: it is the colour of the shop. We sampled it from the mural above the banquettes, the foliage wall by the workspace door, and the chairs in the private workspace, and they all landed in the same band of leaf green.

The contrast figures under each swatch are worked out from the real colours every time this page is published, so they always tell you the truth about what is readable and what is not.

The full ramps

Two voices

One palette, two voices

Someone looking for a coffee shop in Mesa and someone reading about worker direction want very different things from us. Rather than split the difference and end up bland, we speak in two voices built from the same colours. Here is the same block of content in each.

Typography

Four typefaces we use

All four are free and open licensed, so nobody working with us has to buy anything. Three of them do the everyday work on our pages. The fourth, Baloo 2, is the one our name is set in, and it only ever gets used for the logo itself.

Nunito

.font-heading · weights 600, 700, 800

Headings and buttons. Soft, rounded letters that carry the warmth of our logo into everything around it.

Coffee, workspace, and a fair shake

Nunito Sans

.font-sans · weights 400, 600, 700

Body text. Nunito’s quieter sibling. Comfortable to read a whole paragraph in.

Coffee, workspace, and a fair shake

Archivo Black

.font-display · weights 400

Mission pages. Heavy, poster-style type for the pages where we want to be heard.

Coffee, workspace, and a fair shake

Baloo 2

logo only · weight 700

Our name. We picked it by setting it next to the original hand-lettered logo and comparing. Its soft, rounded letter ends match our bean; the squarer typefaces we tried first felt too stiff beside it.

Page pieces

The pieces our pages are built from

Buttons, labels, cards and body text, shown here exactly as they appear on the rest of the site. Nothing on this page is a mockup, so if one of these ever looks wrong, it is wrong everywhere. Class names are underneath each one if you are building something with us.

Patterns

Texture, without using the logo

Two of these come straight off our walls. If you have been in the shop you have seen the green ribbons flowing across the mural above the banquettes, and the foliage wall by the workspace door. We would rather use those for texture than tile our bean across a background, which wears the poor thing out.

Permissions

What you may do with these