RIVANT

Case study · Café

Mocha Kaffe

A café crest in coffee red, and the website it was missing.

The Mocha Kaffe crest: a crowned woman's face with a coffee bean in the crown, inside a red ring lettered MOCHA KAFFE.

The brief

“Premium coffee at pocket friendly prices” is the café’s own line, and it was the brief. The identity had to look like the first half without ever pricing itself out of the second.

Client
Mocha Kaffe
Sector
Café: coffee, shakes, mocktails
What we did
Identity design, UI/UX design, Print design, Packaging design

The crest

A woman’s face under a crown whose jewel is a coffee bean, drawn in one even line so it holds up as small as a cup lid and as large as a sign. The full crest carries the name around it; the icon badges, in red and black, go where there’s no room for words.

The logo set: the red icon badge, the full crest with MOCHA KAFFE around the face, and the black icon badge.
The horizontal lockup on white: red icon badge, MOCHA KAFFE in Copperplate, and COFFEE | SHAKES | MOCKTAILS beneath.
The same lockup reversed out of black.

Colour, type and pattern

One deep red, a coffee brown that prints as a true black, and a white with a little grey in it, so it doesn’t glare under café lights. The name is set in Copperplate’s wide capitals; the website talks in Crete Round.

  • Red#960025RGB 150 0 37The crest, rules and the order band
  • Coffee brown#231F20RGB 35 31 32Print ground: the menu, labels, footers
  • Darker white#F1F2F2RGB 241 242 242Lettering, and the label stock
  • Black #181818 · The website's ground
  • Pink tint #FAE6E6 · The website's buttons
Type specimen: Copperplate in bold, regular and light for the wordmark and headings, and Crete Round for text on the website.

A pattern of the menu

We drew the menu as a line pattern: beans, a cup and saucer, a moka pot and cherries for the coffee, a tall glass with cream for the shakes, and a tumbler with a lemon wheel for the mocktails. Light on the black, brown on kraft.

Cups, bags and signs

The pattern wraps the takeaway cup with the crest on its face. The kraft bags get a label, 80 by 120 mm, with a red foot of the pattern. The icon goes on caps behind the counter; the full crest and the lockup go outside.

A hand holding a takeaway cup wrapped in a coffee doodle pattern, with the Mocha Kaffe crest on its front.

The takeaway cup

A brown kraft coffee bag with the Mocha Kaffe label on its front, standing on a dark wooden counter beside a few roasted beans.

Kraft coffee bag with the label, on a café counter

A backlit sign with the Mocha Kaffe crest and wordmark above a small café's dark wooden front in the evening.

Lightbox sign above the entrance

The round red Mocha Kaffe crest on a metal sign hanging from a black bracket on a painted wall.

Round sign hanging outside the café

A black cap with the red Mocha Kaffe icon, the crowned face, embroidered on its front panel, resting on a café counter.

Embroidered cap

The bag label as sent to print: 3 mm bleed, crop marks and the rounded cut line.

The label as sent to print, with bleed and crop marks

The takeaway cup

The website

The Figma file stopped after the hero: a hand holding the cup, and “Premium coffee at pocket friendly prices”. We designed the rest of the home page on the same black: three counters for coffee, shakes and mocktails, a word band, locations, ordering and the footer, for a laptop and for a phone.

The Mocha Kaffe home page on desktop: the hero with the cup in hand, But Coffee First with three counters, a red word band, a locations map, an order band in red and the footer.
The same home page on a phone, the counters stacked.
CoffeeShakesMocktailsCoffeeShakesMocktails
A laptop on a marble café table showing the Mocha Kaffe home page, with a paper cup beside it.

The home page on a laptop

The home page on a laptop and a phone

The menu card

A4, printed both sides. The crest and the word MENU on the front; inside, the three counters with dotted leaders and red rules, and the pattern faint behind. The inside is a template: the café sets its own items and prices.

The menu's front: the red crest on coffee brown, MENU in wide capitals, a red rule with a bean, and COFFEE | SHAKES | MOCKTAILS.
The menu's inside: the white lockup at the top, then Coffee, Shakes and Mocktails, each with a line drawing and two columns of item lines with dotted leaders to the prices.
The Mocha Kaffe menu card, the crest on coffee brown, lying on a wooden table next to a glass of cold coffee.

Menu card on a café table

Credits

What we made

  • Crest, icon badges and horizontal lockup
  • Palette and type
  • A line pattern drawn from the menu
  • Cup, bag label, cap and signs
  • Menu card, A4, both sides
  • Home page, desktop and phone

Services

  • Identity design
  • UI/UX design
  • Print design
  • Packaging design