Brand

Brand guidelines

Assets and usage for partners, press, and designers. Download logos and reference our colour and type system here.

Colours

All colours meet WCAG AA contrast on their intended background pairs. Use tokens, not raw hex values, wherever possible.

--olive

#2D4739

Primary — WCAG AA ✓

--olive-light

#D5E3D7

Tags / badges

--olive-faint

#E8F0E9

Card backgrounds

--cream

#F5F2ED

Page background

--cream-deep

#EEEAE4

Section contrast

--card-bg

#FDFCFA

Card surface

--ink

#2D3436

Headings — WCAG AA ✓

--ink-soft

#3A2F4C

Body text — WCAG AA ✓

--ink-muted

#5C6168

Secondary text

--coral

#9E5A3A

Terracotta accent

--link

#3F6F83

Links / focus

--warm-border

#D9D4CC

Borders / dividers

Typography

Two typefaces, both loaded via Google Fonts. Use the weights and sizes shown — do not introduce new weights.

Display

Lexend
700
clamp(36px–56px)
var(--serif)

Humble helps you stay organised.

Heading

Lexend
700
24–32px
var(--serif)

See what you've achieved this week.

Body

DM Sans
400
16–18px
var(--sans)

Most productivity tools are designed for brains that can sit still, focus on command and remember everything. That's not how all brains work.

UI / Label

DM Sans
500–600
12–14px
var(--sans)

Get started free

What we believe

Logo assets

All logo files are available to download from our shared asset folder.

Download all assets from Google Drive

✓Keep clear space equal to the height of the "H" on all sides.
✓Use the primary logo on cream or white; use the reversed logo on dark backgrounds.
✓Scale proportionally. Minimum display width: 120px for the full logo, 32px for the icon.
✕Do not recolour, outline, or add effects to the logo.
✕Do not stretch, rotate, or alter proportions.
✕Do not place the logo on low-contrast or busy backgrounds.