Design Atlas
한국어
✎ Graphic, brand & print

Clear space

클리어 스페이스 (여백 규정)

The minimum empty margin nothing else may enter around a logo — measured in units of a part of the logo itself (X).

Also known as: Exclusion zoneSafe spaceMinimum clear space
···
html
<div class="cs">
  <div class="intruder" id="intr">TEXT BLOCK</div>
  <div class="zone" id="zone"><div class="mark">◆</div></div>
</div>
css
.cs{position:relative;width:min(86%,280px);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.zone{position:relative;padding:22px;border:1.5px dashed var(--muted);border-radius:6px;display:grid;place-items:center}
.mark{font-size:clamp(24px,7vmin,36px);color:var(--accent);line-height:1}
.intruder{position:absolute;left:6%;top:50%;transform:translate(0,-50%);
  font-size:10px;letter-spacing:.06em;color:var(--fg);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:5px 9px;white-space:nowrap;
  transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
js
const zone = document.getElementById('zone');
const intr = document.getElementById('intr');
function measure() {
  const zr = zone.getBoundingClientRect();
  const ir = intr.getBoundingClientRect();
  const dx = zr.left - ir.right - 10;
  intr.style.setProperty('--dx', dx + 'px');
}
requestAnimationFrame(measure);
window.addEventListener('resize', measure);
let pushed = false;
setInterval(() => {
  pushed = !pushed;
  intr.style.transform = pushed ? 'translate(var(--dx),-50%)' : 'translate(0,-50%)';
}, 1700);

Clear space is the minimum empty margin nothing else — text, another logo, the edge of the screen — is allowed to enter around a logo. It's never set as an absolute pixel value ("always 20px"); instead it's defined relative to a unit "X" taken from a part of the logo itself, so the margin scales up automatically as the logo does.

That unit is usually the stroke weight of the symbol or the height of a specific letter in the wordmark (often the lowercase "x", which is where the name comes from). Guideline documents draw a dashed box exactly X away from the logo on every side, making the rule "nothing crosses this line" visible at a glance.

Without it, other text or imagery ends up crammed right against the logo, hurting legibility and making the brand look thrown together. In practice, it's one of the first things checked whenever a logo leaves the building — app store icon submissions, partner banner specs, anywhere someone outside the brand team will place it next to their own content.

When to use

Always hand this over together with the logo whenever another team or partner will place it next to their own content. Define the margin as a proportional X unit, never a fixed pixel value.