Logo Variants
One logo file rarely covers every place it appears.
Where to find it
Architect Panel → Styling:
- Logo — the variants
Architect Panel → Layout & Pages:
- E-mail Designs — e-mail use
The variants that usually earn their place
- Primary — horizontal, for light backgrounds.
- Reversed — for dark backgrounds, including dark mode.
- Compact — a mark without the wordmark, for small spaces and favicons.
Three covers almost everything. More than that and they start drifting out of step.
Dark backgrounds are the common failure
A logo in a dark colour on a dark header is invisible or looks like a smudge. Dark interfaces and dark mode in mail clients are both common enough that a reversed variant is not optional.
The compact mark is for small spaces
A browser tab, a mobile header, an avatar. A full wordmark scaled into a sixteen-pixel square is an unreadable blur — a simplified mark is recognisable at sizes a wordmark cannot survive.
Keep them consistent
The variants should be recognisably the same logo. It is easy to end up with versions from different eras — an old colour here, an updated typeface there — and the inconsistency is visible precisely where people are paying attention.
Update them together when the brand changes.
Check each where it is used
Not side by side in a design tool, which is where they always look fine. Look at the reversed version on the actual dark header, the compact mark in an actual browser tab, and the primary in an actual e-mail with images blocked.
Do not over-produce
Some organisations arrive with a dozen variants for different contexts. Three is enough here, and a large set means more to keep in step for no benefit anybody sees.
Note what is used where
So a rebrand can be executed completely. A logo missed in a document template or an e-mail design outlives the rebrand by years and is embarrassing precisely because it is customer-facing.
Worked example
An organisation supplies three variants and records where each is used — primary in the header and letters, reversed in the dark-mode e-mail treatment, compact as the favicon and mobile header. When the brand was refreshed, the note meant every instance was updated in one afternoon.
Recommendations
- Three variants — primary, reversed, compact.
- Always supply a reversed version.
- Check each in its real context.
- Record where each is used for the next rebrand.