Concept Kiln Coffee is a fictional brand. The design system behind it is real: change anything below.

Concept · Design system

One brand. Everywhere.

A business shows up in a lot of places: its website, its app, its cups, its signs. A design system means you decide the look once and every one of them follows. Try it: change Kiln’s look below.

Colour
Style
Corners
Screens

kilncoffee.com

Roasted down the road

Good coffee, close to home.

Small batches, roasted every Tuesday and poured by people who know your order.

Order aheadSee the menu
Website
Good morning, SamWhat can we make you?
CoffeeTeaBakery
  • Flat whiteDouble shot, silky milk$4.20+
  • Filter of the weekEthiopia, washed$3.80+
  • Oat latteOur house blend$4.50+
  • Cardamom bunBaked this morning$3.60+
2 items · $7.80Checkout
OrderRewardsVisit
Ordering app
Takeaway cup
KilnCoffee club

Every 10th coffee is on us.

Loyalty card
KilnMenu
  • Espresso3.00
  • Flat white4.20
  • Oat latte4.50
  • Filter of the week3.80
  • Cardamom bun3.60

Beans roasted every Tuesday

Menu board

What just happened?

  1. The basics are decided once. A colour, a style of lettering, a corner shape. These are the brand’s building blocks.
  2. Everything is built from them. The website, app, cup, card and sign don’t have their own colours. They borrow the brand’s.
  3. Change one, everything follows. No redesigning forty things by hand, and nothing drifts out of date.

It also stops bad choices

Pick a light colour like yellow and the button text turns dark by itself, so it stays readable. Every text and background pair is checked against the international accessibility standard (WCAG AA) each time you change something.

For developers: the tokens behind this

The same decisions as code, ready to drop into any website or app.