Logo

Uploading Your Logo

Your logo appears in the interface and on what the platform produces.

Where to find it

Architect Panel → Styling:

• Logo — the logo and its variants

Architect Panel → Layout & Pages:

• E-mail Designs — where it appears on outgoing mail

It appears in more places than the header

Generated documents, e-mail designs, letters, the sign-in page, sometimes an exported report. A logo chosen only for the header will meet all of those, and the constraints differ.

Use a scalable format where you can

It stays sharp at any size and on high-resolution screens, and the file is usually smaller. Where you must use a bitmap, supply it at more than the display size so it does not look soft on a modern display.

Get the background right

A logo with a white background sitting on a coloured header looks like a mistake, and it is one of the commonest branding complaints. Use a transparent background, and check it against every surface it lands on.

Wide, not tall

Interface headers are short. A tall or square logo is scaled down until the wordmark is unreadable, so a horizontal version is nearly always the right primary.

If your logo only exists as a stacked lockup, this is worth asking your designer for.

It must survive being small

Look at it at the size it will actually appear. Fine detail, thin strokes and small tag lines disappear — and a logo that is a grey smudge is worse than a plain text name.

Remember e-mail

Many mail clients block remote images by default, so a logo in an e-mail design frequently does not load. Never let it be the only thing identifying you — the organisation's name should be present as text.

Check print and PDF

Generated documents and letters are printed and archived. A logo that looks right on screen can be too light in print, and a document going to somebody official should look right on paper.

Keep a copy of the source

Store the original artwork somewhere findable. The person who needs to regenerate a variant in two years will not have it otherwise, and reconstructing a logo from a downloaded PNG is a poor use of anybody's afternoon.

Worked example

An organisation supplies a horizontal logo with a transparent background, checks it in the header, on the sign-in page, in an e-mail design with images blocked, and on a printed letter. The e-mail design carries the organisation's name in text beside it, so a blocked image still identifies the sender.

Recommendations

• Horizontal, transparent background.
• Check it at its actual size, not full size.
• Never rely on it alone in e-mail.
• Keep the source artwork.

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.