Brand Book Placeholder

Primary logo

The main logo, used most often. Probably the SPANNER wordmark itself.

Used for

Website header
Front of pack
Socials, email, documents

Rules (typical)

Keep clear space around it (shown as the dashed box)
Don't stretch, outline or recolour outside the palette
Set a minimum size so it stays readable

SPANNER

On light · clear space = height of the "S"

SPANNERReversed on dusty navy

SPANNERNavy on sage

SPANNERMinimum size example

Secondary logo

A different arrangement for spaces the primary doesn't fit, e.g. stacked if the primary is a long horizontal.

Used for

Square spaces: social profile, a cap, a sticker
Narrow spaces: the side of a can
Anywhere the primary would be too small

Rules (typical)

Same parts as the primary, just rearranged
Never shown next to the primary on the same surface

SPANNER

[ DESCRIPTOR LINE ]

Stacked: symbol over wordmark

SPANNER

[ DESCRIPTOR LINE ]

Stacked: wordmark over descriptor

SPANNER

Horizontal: symbol beside wordmark

Submarks

Small supporting marks, like a badge or stamp. Extra character for small places. (The Astra S versions sit here for now.)

Used for

Stickers, seals, tape, tissue paper
Social highlights, website footers
Small pack details (base of can, tube crimp)

Rules (typical)

2–4 submarks is plenty (lean, not overkill)
Each one uses the same fonts + palette as the main logo

SPANNER

Oval badge

[ EST. ]

Stamp

Monogram in a circle (Astra S as placeholder)

Logomark / favicon

The symbol on its own. Has to work at 16px, on a cap and as a social avatar.

Used for

Browser tab (favicon)
Social avatar, app icon
Cap of the can, tube end, embossing

Rules (typical)

Test it tiny first: if it fails at 16px, simplify
One flat colour; no texture at small sizes

160 · 64 · 32 · 16 px

Social avatar

Spanner×

Browser tab

Primary font

Headlines, and the font that sets the wordmark's personality.

Used for

Headlines on site + packs
Product names (DAILY DRIVER etc.)
Big statements

Rules (typical)

One or two weights only
Mostly uppercase or tight title case

ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

HEADLINE EXAMPLE GOES HERE

PRODUCT NAME

Placeholder: Oswald (a stand-in, not a choice)

Secondary font

Body text. Readability matters most: ingredient lists and fine print.

Used for

Website body copy, product descriptions
Ingredient lists, directions, legal text
Emails, documents

Rules (typical)

Must stay readable at very small sizes on pack
Regular + bold is enough

Body copy example. This is where product descriptions, directions and longer explanations sit. It should feel calm and easy to read, the way the brand world feels.

INGREDIENTS (placeholder): Aqua, Glycerin, Squalane, Ceramide NP, Cholesterol, Panthenol, Sodium Hyaluronate. Shown at the size it would be printed on a can.

Placeholder: Inter (a stand-in, not a choice)

Complementary font

A used-sparingly accent, like a script for a short line. Adds the hand-made, nostalgic touch.

Used for

A short line on a label or sticker
A signature or sign-off
One accent per layout, max

Rules (typical)

Never for long text or ingredient lists
Never used for the logo itself

“A short line here”

Accent line

Accent

SPANNER

Paired with the wordmark

Placeholder: Yellowtail (a stand-in, not a choice)