skip to content

Logo Usage

Logo rules set clear space, minimum size, approved color versions and placement, and supply vector masters with raster exports. Asked because a logo in product chrome is often squeezed or recoloured.

part ofDesign systems & UX foundationsoverview, primer and where to startread it →
on this pageshow

questions

3

For a logo in a restaurant point-of-sale tablet app, what do clear-space and minimum-size rules require, and what if the header bar is too small?

level: juniorimportance: should knowfreq 30%

answer

  1. protected margin around the mark
  2. measured in a unit from the logo
  3. smallest size that stays legible
  4. switch lockup instead of squeezing
  5. never stretch, crop or crowd

basics

~20 s

Clear space is a protected margin around the logo, measured in a unit from the logo so it scales; minimum size is its smallest legible rendering. When a header cannot honour both, use a compact approved lockup, never a squeezed one.

solid answer

~40 s

Clear space is the empty zone no other element may enter, usually defined as a fraction or multiple of a logo element such as the symbol's height, so it grows and shrinks with the logo. Minimum size is the smallest rendering at which the wordmark and symbol stay legible, often given separately for screen and for print. In a point-of-sale tablet header, if the horizontal lockup at the bar's height falls below minimum size or its clear space collides with the order-count indicator, the fix is to switch to the brand's compact lockup - often the symbol alone - rather than shrinking, cropping, stretching or trimming the margin. A design system should ship those lockups and the rule for when each applies, so product teams are not improvising.

go deeper

for a junior

Recall the two rules and their purpose: a protected empty margin around the mark, and a size floor below which the logo is not used. Know that a smaller approved lockup is the fix when space runs out.

for a middle

Explain why clear space is measured in a unit from the logo itself, why screen and print minimums differ, and how horizontal, stacked and symbol-only lockups map to available space.

for a senior

Show how a system encodes the rule so teams cannot break it: named lockups with recorded minimums, clear space as slot padding in the shared header, and a documented selection rule with real surfaces.

for a principal

Frame the trade-off between brand presence and working space in dense operational screens, and argue when a logo should leave a busy working header entirely for calmer surfaces.

## What clear space is **Clear space** (also called the exclusion zone or protected area) is the minimum empty margin that must surround a logo. Nothing may enter it: no text, no icon, no edge of a container, no other logo. Its job is recognition - a mark crowded by neighbouring elements reads as part of them, and the eye stops seeing it as a signature. Brand guidelines rarely give clear space as a fixed distance. They express it in a **unit taken from the logo itself**: the height of the symbol, the cap height of the wordmark, or the width of one letter. The reason is scaling: - A relative unit keeps the margin **proportional** at every rendering size, from a tablet splash screen to a printed receipt. - A fixed distance would be generous on a large logo and meaningless on a small one. - A relative unit is easy to check visually: place the reference element's outline around the logo and see whether anything intrudes. ## What minimum size is **Minimum size** is the smallest rendering at which the logo stays legible and faithful: letters remain distinct, thin strokes do not vanish, the symbol keeps its shape. Guidelines often state it twice - once for screens in device-independent units and once for print in physical units - because the two media fail differently. Below minimum size, details blur on screen and fill in on paper. Some brands supply a **small-use version** with thicker strokes or simplified details for sizes near the floor. That is a separate approved artwork, not a license to shrink the main logo further. ## When the space is too small: change the lockup, not the logo A **lockup** is a fixed, approved arrangement of the logo's parts - symbol and wordmark side by side (horizontal), stacked, or the symbol alone. The point-of-sale header scenario is the classic conflict: the bar is short, it also holds the table number, the server's name and an order-count indicator, and the horizontal lockup at that height falls under minimum size. The correct sequence of choices: 1. Check whether the horizontal lockup fits at or above minimum size with its full clear space. 2. If not, use the **stacked** lockup if the height allows it. 3. If neither fits, use the **compact lockup**, typically the symbol alone, which brands design precisely for small, square or crowded placements. 4. If even the symbol cannot meet its minimum, question the placement - the logo may belong on the lock screen or the receipt rather than in a busy working header. What the sequence never includes is modifying the artwork to force a fit. ## Common violations in product chrome | Violation | What it looks like | Why it harms | |---|---|---| | Squeezing | Horizontal lockup scaled non-uniformly to the bar height | Distorts letterforms; the mark stops matching the brand | | Crowding | Order-count indicator placed inside the clear space | The indicator reads as part of the logo | | Trimming | Clear space set to zero to gain a few units | Logo looks cramped and unprofessional | | Undersizing | Full lockup rendered below minimum size | Wordmark becomes an illegible smudge | | Rebuilding | Wordmark retyped in the interface font | Produces a counterfeit version of the logo | ## Where the rule lives in a design system A brand book states the rule; a design system makes it hard to break. Practical moves: - Ship the logo as a **component or asset set with named lockups** (horizontal, stacked, symbol), each with its minimum size recorded next to it. - Encode clear space as **padding in the logo's layout slot** in the shared header pattern, so product teams do not measure it by eye. - Document the **selection rule** - which lockup at which available height - with examples from real surfaces such as the tablet header, the customer-facing display and the printed receipt. - Review new placements against the rule in design review rather than discovering violations after release. Note that the exact clear-space unit and minimum sizes differ from brand to brand; there is no industry standard number. What is common to every brand guideline is the model: a protected margin proportional to the mark, a legibility floor, and a set of approved lockups to choose between instead of editing the artwork.

  • Why do brand guidelines often give separate minimum sizes for screen and print?
    Screens and paper fail in different ways. On a screen, a small logo lands on a coarse pixel grid and thin strokes blur or disappear; on paper, ink spreads and small counters fill in. Screen minimums are stated in device-independent units and print minimums in physical units, because neither converts cleanly into the other.
  • The point-of-sale vendor wants its own logo next to the restaurant's in the header; how should that pairing be handled?
    Use an approved co-branding lockup rather than placing two logos side by side ad hoc. A co-brand lockup fixes the relative sizes, the divider or spacing between the marks, and a shared clear space, so neither logo intrudes on the other and neither looks subordinate by accident. If no such lockup exists, place the vendor mark elsewhere, for example on the settings or about screen.

Clear space works like the quiet zone around a barcode: the scanner needs blank space, sized relative to the code itself, to find the code at all - shrink the code and its quiet zone shrinks with it, but it never disappears.

saying these in an interview costs you the question

  • Clear space is optional when the layout is tight
  • Stretching the logo slightly to fit a bar is harmless
  • Minimum size only matters when the logo is printed on paper
  • Retyping the wordmark in the interface font is an acceptable substitute
  • Clear space is one fixed distance regardless of logo size
open as a page

Why does a logo system ship full-color, monochrome and single-color versions, and how do you choose one for light, dark and photographic backgrounds?

level: middleimportance: should knowfreq 25%

basics

~20 s

Versions keep the logo recognisable on every surface and reproduction method: full color on light, calm backgrounds, reversed white on dark ones, monochrome or single-color where only one ink exists or the background fights the brand colors.

open as a page

A restaurant point-of-sale app's logo looks blurry on high-density tablets and slightly off-color between screens, because teams copied cropped screenshots; how would you fix the logo supply in the design system?

level: seniorimportance: nice to knowfreq 18%

basics

~20 s

Make one vector master per lockup and color version the single source, generate every raster export from it at each size and screen density, distribute that set from the design system, and replace the screenshot copies teams made.

open as a page