bread brand guidelines
bread is a calm money diary for M-Pesa. This guide sets out bread's logo, colour, type, writing and layout rules, from a 16 px favicon to a bus-stop poster.
Who we are
bread is a money diary for people in Kenya who use M-Pesa every day. It reads the M-Pesa messages on your phone to record your transactions, without linking to your M-Pesa or bank account. You give each transfer a category and see how much you've sent to each person. bread is made in Nairobi.
Communication
Write bread's copy in short, plain sentences. Say what happened and what the person can do next. Don't tell people how to spend their money.
Principles
Use everyday words
Say what happened in the words people already use. Don't use puns on money or finance jargon.
Report numbers calmly
Give the number and what it refers to. Don't add warnings, advice or exclamation marks.
Write for Kenya first
Use the words people in Kenya already use, such as shillings, M-Pesa, matatu and chama. Don't swap them for generic finance terms.
Writing money
Write in Kenyan English and give amounts in shillings with the KSh prefix. Write KSh, never KSH. Amounts always use tabular figures and a true minus sign (U+2212).
| Thing | Write | Not |
|---|---|---|
| Currency prefix | KSh | KSH · KES · Ksh |
| Amounts | KSh 1,250 | KSH 1,250 · KES 1250 · Ksh1,250 · 1250/= |
| Spending | −450 | -450 · (450) · red text |
| Money in | +2,000 | 2,000 CR |
| The service | M-Pesa | MPESA · Mpesa · m-pesa |
| Phone numbers | +254 712 345 678 | 0712345678 |
| Dates | Sat 24 Oct | 24/10/2026 |
| Times | 13:45 | 1:45 pm |
| Paybill and till | Till 123456 | Buy Goods No. 123456 |
Accessibility
Every screen is checked in light and dark themes. All 164 colour pairs are tested against WCAG 2.2, and none fail at the size they are used.
Contrast
Minimum sizes
| Element | Default | Minimum |
|---|---|---|
| Body text | 15 px | 13 px |
| Captions and meta | 12 px | 12 px, Secondary or darker |
| Touch targets | 48 pt | 44 × 44 pt |
| Icons | 20 px | 16 px inline with text |
| Mark | 24 px | 16 px on screen · 6 mm in print |
| Lockup | 120 px wide | 72 px wide · 20 mm in print |
Motion
Use motion to show where something came from, such as a sheet rising from the bottom of the screen. Don't add motion for decoration. With Reduce Motion on, every transition becomes a short fade.
| Moment | Timing |
|---|---|
| Sheets and pages | Spring, about 320 ms |
| Dialogs in | 180 ms ease-out |
| Dialogs out | 140 ms |
| Toasts | Slide 8 pt and fade |
| Reduce Motion | Fade only, 150 ms |
Identity
The mark, called Sliced, is four upright bars cut to the shape of a loaf. It also reads as a small bar chart of spending. It is bread's only brand symbol, so don't add other symbols next to it.
Construction
Built on a 96-unit grid. Four 16-unit slices with 6-unit gaps, clipped by a single loaf curve with 6-unit corners. Never redraw it; use the files.
Clear space
Keep one slice width clear on every side. Nothing else enters this space, including the edge of the screen or page.
Minimum sizes
Below these sizes the gaps between the slices close up. These are shown at real size.
Logotype scale
Set the lockup by its height. These are the steps we use in product and print.
Lockups
There are four logo versions, all made from the same drawing. In the horizontal lockup, the mark sits on the wordmark's cap height.
Colour versions
Use the logo in ink, white or jam. Use the butter mark only on ink backgrounds. Never place a jam logo on a jam background.
App icon
In marketing, show the app icon as white slices on Jam 500 with a light grain. The icon in the app itself is flat. Use the ink version, with butter slices, for dark-icon modes.
Misuse
Use the logo files as supplied. Don't change the mark in any of the ways below.
Colour
Most of every layout is white and ink. Jam is the brand colour, so use it once per screen at most. Butter is never a background for body text; small badges may use butter with #7C500E text.
- HEX
- #E2445C
- RGB
- 226 68 92
- CMYK
- 0 70 59 11
- HEX
- #121214
- RGB
- 18 18 20
- CMYK
- 10 10 0 92
- HEX
- #F9F9FA
- RGB
- 249 249 250
- CMYK
- 0 0 0 2
- HEX
- #FFD966
- RGB
- 255 217 102
- CMYK
- 0 15 60 0
- HEX
- #D0374F
- RGB
- 208 55 79
- CMYK
- 0 74 62 18
Neutrals
The neutrals are a cool grey ramp, so don't swap in cream or warm greys. Use 950, 700 and 600 for text. Use 500 only for disabled states and placeholders.
Status
Each status has a solid, a surface, a border and a text colour. Spending is never shown in red. Red is for errors only.
Categories
Each of the eight spending categories has a muted colour with three values. Use the mark for dots and bars, the tint for chips, and the ink for text on the tint.
Proportions
How much of each colour a typical screen, page or poster uses.
Dark
In dark mode the page is Ink 950 (#121214) instead of pure black. Surfaces get lighter in grey steps, and jam and leaf use lighter values for text.
| Role | Light | Dark |
|---|---|---|
| Page | #FFFFFF | #121214 |
| Surface | #F9F9FA | #1B1B1E |
| Text | #121214 | #F1F1F3 |
| Secondary | #4D4D50 | #A1A1A5 |
| Hairline | #E6E6EA | #2A2A2E |
| Money in | #1C7347 | #A0D9AF |
| Brand text | #AF2C40 | #FE9FA5 |
Typography
The type system is called Tall Stack. Use Big Shoulders Display 800, always in capitals, for headlines and key figures such as wallet balances. Use Inter for body text, labels and row amounts.
0123456789 KSh −+,.
abcdefghijklmnopqrstuvwxyz
0123456789 KSh −+,.
Scale
Numbers
Set amounts in tabular figures with a true minus sign. Set the KSh prefix smaller and lighter than the figure.
aligned to the cap height.
-450 ✕
in width and height.
−450
+2,000
−13,640
align on the right.
Iconography
Use Phosphor icons in the Regular weight, without modification. Their rounded joins match the curve of the mark and the shapes of Inter.
Regular and Fill
Use Regular everywhere. Use Fill only for the active tab, so the current tab is shown by the icon's shape as well as its colour.
Sizing
20 px in lists and buttons, 24 px in navigation, 16 px inline with text. Category icons sit in a 40 px tile with 12 px corners. Shown at 2×.
Icons with type
Icons are centred on the first line of text and take the text colour, or the category ink inside a tile.
Graphic elements
Graphic elements are built from the slice: a 16-unit bar with a 6-unit gap. Repeat it to make charts, rules and patterns.
Crops of the mark
At large sizes the mark can run off the edge of the layout. Keep at least two slices and the curve visible.
Infographics
Use bar charts only. Keep bars flat with rounded ends, and label them with the actual amounts. Don't use pie charts, gradients or 3D. The figures shown are demo data.
Category split
Use one stacked bar with the largest category first, and a plain legend underneath.
Left to spend
The loaf-shaped gauge fills from the bottom to show what's left to spend. Below 15% it turns marigold and shows a Low label. It never turns red.
Composition
Use large type, plenty of space and one key number per layout. Build layouts on simple column grids and leave at least a third of the area empty.
Applications
Examples of the brand in use. App screens show demo data, and poster figures are illustrative.
Out of home
Use one line of copy and the mark. People see posters and signs for a moment, often from a moving matatu, so keep the line short.
Concept: a month receipt, an end-of-month summary laid out like a till receipt. It isn't in the app.
Social
The header is 1500 × 500, and the avatar overlaps its bottom edge by 55%. Choose a colourway below to preview it.
M-Pesa money goes.
M-Pesa money goes.
M-Pesa money goes.
M-Pesa money goes.
Presentation
The brand on one board, for decks and posts. Shared in 16:9.
Landing page
E-news
Concept: The Month, an email sent at the end of each month. It would have a jam header, three figures, up to three updates and one ink button. bread doesn't send email today.
| Part | Rule |
|---|---|
| Width | 600 px, 36 px side padding |
| Header | Jam 500 with grain, Big Shoulders 76 px, two lines max |
| Figures | Three tiles, Big Shoulders 34 px, money in green |
| Button | One, ink, 48 px tall |
| Subject | Plain and short, for example "Your October spending summary". |
Resources
Download the logos, design tokens, this guide as a PDF and the photo credits. The files may be used for bread work.
Logos
Icons and avatars
