An evolving reference. New sections are being added through 2026.
Skip to aside Skip to content Skip to footer

brand: Clearspace & construction

Keep the logo clear of other graphic elements. The protected space around the mark is what makes the brand feel consistent – without it, the logo gets crowded out by whatever sits next to it.

The rule

Clearspace is built into the logo itself. Use the wordmark’s own letterforms as the measurement unit, so the protected space scales with the logo: a small logo gets a small clearspace, a big logo gets a big clearspace.

  • For the logotype (and its expanded / sponsored variants), use the height of the “el” prefix in the wordmark as the unit. Keep that distance clear on all four sides.
  • For the logomark on its own, use the height of the “K” in “UK” as the unit.

Logotype clearspace

The dashed line below shows the minimum clearspace. No other graphic element – text, image, panel, divider – should cross it.

ELIXIR-UK logotype inside a dashed clearspace boundary

Logomark clearspace

Same principle, smaller mark. The dashed line is the boundary.

ELIXIR-UK logomark inside a dashed clearspace boundary

Minimum size

To stay legible:

  • Logotype: minimum 120 px wide (or 30 mm in print). Below that, the wordmark stops reading; switch to the logomark.
  • Logomark: minimum 32 px wide (or 8 mm in print). Below that, the helix loses definition.

If your space is tighter than the logomark minimum, use a text label instead of the logo. Squeezing the mark below its minimum is worse than not using it.

Backgrounds and contrast

The logo needs to read clearly against whatever sits behind it. Use the version that suits the background.

Do

Default logotype on white

✓ Default version on white or light, neutral surfaces.

Dark-bg logotype on navy

✓ Dark-background version on navy or dark surfaces.

Default logotype on light grey

✓ Default version on light grey – contrast still passes.

Don’t

Default logotype incorrectly placed on navy background

✗ Don't use the default version on a dark background. Use the dark-bg variant instead.

Default logotype on orange brand colour with poor contrast

✗ Don't place the orange helix on the brand orange – the mark loses its colour distinction.

Logotype on a multi-colour gradient background

✗ Don't place the logo over busy gradients, photos or multi-colour fills. Use a solid panel or apply a brand overlay first.

Don’t manipulate the mark

The logo is supplied in SVG and PNG; reach for the file, don’t redraw or transform the mark.

Logotype stretched horizontally

✗ Don't stretch or distort.

Logotype rotated

✗ Don't rotate or skew.

Logotype recoloured

✗ Don't recolour the helix or wordmark.

Also avoid: applying drop shadows, outer glows, gradients or 3D bevels; embedding the mark in another logo; using the logomark and the logotype together in the same composition.

Related pages