Version 0.1

The BOAN identity

One wordmark, two colours, one typeface. Everything BOAN publishes, from the agency site to the store to invoices and quotes, is built from what is on this page.

01 / Wordmark

BOAN is written as a wordmark, not a symbol. It is always set in lowercase and always closed with a full stop. The full stop is part of the mark, not punctuation. It is what makes the name read as a statement rather than a label.

Primary lockup. Ink on paper. Use this wherever the background allows it.

Inverted lockup. Paper on ink, for dark grounds and photography.

Case

Always lowercase, never Boan. or BOAN.

Full stop

Always present, always tight to the n.

Weight

Bold 700. No other weight is the wordmark.

02 / Icon

Where a layout is square and small, the wordmark reduces to a single lowercase b on a rounded square. This is the favicon, the app icon, and the avatar, nothing else. It never stands in for the wordmark somewhere the full mark would fit.

Primary. Paper letterform on an ink square.

Inverted. For placement on ink, where the primary square would disappear.

64px

48px

32px

16px

The letterform is drawn as geometry, not set as type, so it holds its shape at 16px and does not depend on Mont being installed on the device.

Corner radius

22% of the square, 14 units on a 64 grid.

Never

Do not crop the square, or use the b on its own.

Files

icon.svg and apple-icon.png, in src/app/.

03 / Construction

The wordmark needs room to work. Clear space is measured from the x-height of the mark itself, so the rule holds at any size without recalculating.

Clear space. Keep free space on all four sides equal to the x-height of the wordmark, the height of the o. The dashed line marks the boundary; nothing crosses it.

72 PX WIDE

Minimum size. Never reproduce the wordmark below 72px wide on screen, or 20mm wide in print. Below that the full stop stops reading as part of the mark.

04 / Misuse

The wordmark is a fixed asset. It is not a text style to be adjusted per layout. Each example below is a real rendering of the mistake, not a description of it.

Do not stretch, condense, or otherwise distort the proportions.

Do not recolour the wordmark. It is ink or paper, nothing else.

Do not drop the full stop. It is part of the mark.

Do not capitalise. The wordmark is set in lowercase only.

Do not add shadows, outlines, gradients, or any other effect.

Do not set the wordmark in another typeface. It is Mont Bold.

05 / Colour

BOAN has two colours. Ink is the mark, the type, and the structure. Paper is everything it sits on. There is no third brand colour. The tones below are all literal blends of the two, so the palette can grow without drifting.

Ink

#453A36

rgb(69 58 54)

The wordmark, all primary text, and every structural line.

Paper

#F6F0EE

rgb(246 240 238)

The default ground. Warmer than white, and never replaced by pure white.

Ink on paper measures 9.74:1, which is WCAG AAA at every text size, in both directions.

Tonal range

Nine steps between ink and paper. The percentage is how much paper is mixed in; the ratio is the measured contrast against paper. Anything below tone-700 fails AA and must not carry body text.

tone-50
#F6F0EE
1.00:1 · Decorative
The page ground. Identical to paper.
tone-100
#E4DEDC
1.18:1 · Decorative
Raised surfaces and table stripes.
tone-200
#D3CCC9
1.41:1 · Decorative
Hairline dividers.
tone-300
#C1B9B7
1.71:1 · Decorative
Input borders at rest.
tone-400
#9E9592
2.60:1 · Decorative
Disabled text and icons.
tone-500
#8C8380
3.28:1 · Non-text
The lightest tone allowed for a border or icon.
tone-600
#7A716D
4.22:1 · Large text
Text at 24px and above only.
tone-700
#685E5B
5.57:1 · AA
Muted body text. The lightest tone that passes AA.
tone-800
#574C48
7.35:1 · AAA
Secondary text.
tone-900
#453A36
9.74:1 · AAA
Primary text and the wordmark.

06 / Typography

Mont is the only typeface BOAN uses. It is a geometric sans that stays warm at large sizes and legible at small ones, which is what lets a single family carry the whole system.

Mont

ABCDEFGHIJKLM
abcdefghijklm
0123456789

Mont is a licensed typeface. Fontfabric sells it, and it is not available through Google Fonts, so it has to be self-hosted from purchased web files. Until those files are added to src/fonts/, this page renders in Outfit, a geometric sans with a comparable construction, so the layout holds when Mont replaces it. The CSS stack already lists Mont first, so the swap needs no change to any component.

Weights

boan.
Regular 400
Body copy
boan.
Medium 500
Labels and buttons
boan.
SemiBold 600
Headings
boan.
Bold 700
The wordmark and display type

Type scale

Body copy never goes below 16px. Line height is 1.5 or looser for anything set as a paragraph, and tightens as type gets larger.

Display
72px · Bold 700
tracking -0.04em
boan.
The wordmark and hero statements. One per page.
Heading 1
56px · Bold 700
tracking -0.03em
Creative agency
Page titles.
Heading 2
40px · SemiBold 600
tracking -0.02em
Selected work
Section titles.
Heading 3
28px · SemiBold 600
tracking -0.01em
Brand identity
Sub-sections and card titles.
Body large
18px · Regular 400
tracking 0
We build brands that behave like they mean it.
Introductions and pull text.
Body
16px · Regular 400
tracking 0
The default size for everything a visitor actually reads.
Never smaller than this for body copy.
Small
14px · Regular 400
tracking 0
Captions, metadata, and form helper text.
Supporting text only.
Label
12px · Medium 500
tracking 0.2em
SECTION LABEL
Uppercase, set in the mono face.

Status

Confirmed: the wordmark and its lowercase-with-full-stop construction, ink #453A36, paper #F6F0EE, and Mont as the typeface.

Proposed, pending sign-off: the tonal range, the clear-space and minimum-size rules, the type scale, and the weight assignments. All of it is derived from the confirmed decisions above rather than invented alongside them.

BOAN / Angel Maile & Bonolo Mathabela