Brand guidelines

Brand colours

Each colour has one job. Every pairing below passes WCAG AA contrast: 4.5:1 for text, 3:1 for large text and controls.

Ink
#1E085D · --hero-ink-bg
Heroes, closing bands and quote bands. Card arrows, hover borders and focus outlines. Button hover. Never a resting button.
Purple
#4705D0 · --cta-bg, --link
Primary buttons and text links on light backgrounds. 9.0:1 on the light band.
Pink
#FEBBCC · --cta-on-dark-bg
Buttons, eyebrows, links and stat numbers on every dark band. 10.6:1 on ink.
Olive
#2D4739 · --olive
Accent only: eyebrows, ticks, tags and bullets on light backgrounds. Never a link, button or band.
Challenge
#202939 · cards #242D3A
Only for bands that name the reader's problem. Deliberately off the brand palette.
Core text
#1D2939
Body text and tick-list text on light backgrounds. 13.8:1 on the light band.
Muted text
#5C6168 · --ink-muted
Captions, dates and other small details. 5.6:1 on greige.
Border
#D9D4CC · --warm-border
Card edges and dividers.

Light layers and cards

Light sections take turns between the light band and greige, so two of the same colour never touch. A card sits one layer away from the band behind it.

Light band
#F9F8F4 · --section-bg-a
Band A. One step below off-white, so the bands differ gently and glare less.
Off-white
#FDFCFA · --card-bg
Cards on a greige band, and text on dark bands.
Greige
#F4F2ED · --section-bg-b
Band B, and cards on an off-white band.
Pale lilac
#EEE9FB · --guide-lilac
Cards that lead to another page, and identity cards.
White
#FFFFFF
One thing per section that we want you to look at, such as a quote card or a QR code. Never a row of cards.

Three card patterns

On greige: off-white cards

Card

On the light band: greige cards

Card

Different things: a tint and a Humble each

Tasks

Notes

✓Alternate full-width light sections. Two of the same colour may touch only when the second continues the first with no visual break.
✓When a whole card leads to another page, make the card one link, with an ink arrow and ink border on hover and focus.
✕Do not use pure white for a row of cards, or add new near-white greys.

Links, buttons and dark bands

Purple leads on light backgrounds. Pink leads on dark ones.

Light band

Purple button and links

A text link is purple and underlined, with no arrow.

Primary Secondary

Ink band

Heroes and closing bands

The button turns pink. Links are pink or white.

Primary

Challenge band

The reader's problem

Comes before the fix. Near-white text with pink accents.

Too many tabs. Each card names one problem.

Quote band

Quotes get their own section

“Humble streamlined the process.”

✓Show one quote, two to four quotes one at a time with arrows, or five or more in a grid.
✓Give carousels previous and next arrows with a "2 of 4" counter between them.
✕Do not use ink as a resting button colour, or olive as a link or button.
✕Do not put a quote inside another dark band, or two quotes side by side.
✕Nothing moves on its own: no autoplay and no rotating text.

Typography

Lexend for headings and DM Sans for everything else, on every page. Both are free on Google Fonts. Text sizes use rem, so they follow the reader's browser text size.

Display

Lexend 700
36 to 56px

Humble shows how things connect.

Heading

Lexend 700
24 to 32px

See what you did this week.

Body

DM Sans 400
16 to 18px

Your notes, tasks, people and links sit in one place. You can see how they connect.

Eyebrow

DM Sans 700
12px, capitals

Why it works

Quote

Newsreader italic
a few pages only

“Humble streamlined the process.”

✓Write plain, short sentences that translate well. Use British English and sentence case.
✕Do not add other typefaces. The few on purpose are Newsreader quotes, Atkinson Hyperlegible for one word in the homepage hero, the homepage comic and hand-written notes, and monospace times in product pictures.

Humble icon and avatars

The icon is a pink Humble on an ink or purple box. Avatars are Humble holding something, so a card can show what it is about.

Icon on inkApp icon, avatar, badge
Icon on purpleThe same, on purple
Browser toolbarOnly in browser pictures
Browser, with contextWhen the page has related items
Avatar: calendarOne Humble per topic
Avatar: workshopStands in when there is no photo

✓Use these files wherever Humble appears as an app icon, avatar or badge, product pictures included.
✕Do not build a stand-in from a white Humble on a coloured square.

Logo files

Download each file below, or get every file from Google Drive (opens in a new tab).

✓Keep clear space equal to the height of the "H" on all sides.
✓Use the primary logo on light backgrounds and the reversed logo on dark ones.
✓Keep the shape when you resize it. Smallest width: 120px for the full logo, 32px for the icon.
✕Do not recolour, outline, stretch or rotate the logo, or add effects.
✕Do not place the logo on low-contrast or busy backgrounds.