Skip to content

Brand

How to show BranchBooks: the logo, the wordmark, the colours and the type.

Logo

A ledger book: ruled lines on the left page and, on the right, a git branch in a green circle.

BranchBooks logo
  • Use the full logo at 48 px and up, and the small drawing, which has fewer and thicker lines, at 32 px and below.
  • Keep clear space around it of at least a quarter of its width.
  • Don’t recolour it, rotate it, add effects or put it on a busy picture.

Wordmark

The logo with the name, set in IBM Plex Mono SemiBold, a nod to plain-text ledgers.

BranchBooks
BranchBooks

Use the dark wordmark on light backgrounds and the light one on dark backgrounds. Write the name as one word with two capitals: BranchBooks.

Colour

Ledger green marks the brand and what you can click. Neutral greys carry everything else. In the app, the other colours always mean something, so don’t use them for decoration.

Ledger green#1d6b43
Green, dark mode#7fd3a6
Page#f3f4f5
Page, dark#121314
Text#1c1e21
Sidebar#202225

Meaning colours in the app:

Funded#dcefe3 / #1d5a3c
Credit overspent#fbe7c2 / #7a4b00
Cash overspent#f8d4d0 / #8f1d14

White text on ledger green has a contrast of 6.5:1, and dark text on the dark-mode green 10.4:1. Both pass WCAG AA.

Type

  • Wordmark: IBM Plex Mono SemiBold, as outlines, so no font is needed to show it.
  • App and site text: the system’s own font (Segoe UI on Windows, Roboto on Android).

Downloads

The logo and wordmark identify BranchBooks. Use them to refer to BranchBooks, not to suggest that it endorses something else.