Design Atlas
한국어
⟳ Design process

Redlines

레드라인

Red lines and numbers marking the exact spacing and size between elements, so a CSS value never has to be guessed.

Also known as: Spec measurements치수 측정선
···
html
<div class="stage">
  <div class="a" id="a"></div>
  <div class="gap" id="gap"><div class="line"></div><span id="gapv">24</span></div>
  <div class="b" id="b"></div>
  <div class="wtag" id="wtag"><div class="line h"></div><span>120</span></div>
</div>
css
.stage{position:relative;width:94%;height:80%;display:flex;align-items:center;gap:0}
.a{width:28%;height:70%;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.b{width:28%;height:70%;border-radius:8px;background:var(--surface);border:1px solid var(--line);margin-left:8%}
.gap{position:relative;width:8%;height:70%;display:flex;align-items:center;justify-content:center}
.line{position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--accent-2);opacity:0;transition:opacity .4s}
.line.h{position:static;width:100%;height:1.5px;opacity:1}
.gap span{position:absolute;top:-18px;font:700 10px/1 monospace;color:var(--accent-2);opacity:0;transition:opacity .4s}
.gap.on .line,.gap.on span{opacity:1}
.wtag{position:absolute;left:6%;bottom:4%;width:28%;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:opacity .4s}
.wtag span{font:700 10px/1 monospace;color:var(--accent-2)}
.wtag.on{opacity:1}
js
const gap = document.getElementById('gap');
const wtag = document.getElementById('wtag');
let on = false;
function toggle() {
  on = !on;
  gap.classList.toggle('on', on);
  wtag.classList.toggle('on', on);
}
setInterval(toggle, 1300);

Redlines mark the distance between two elements, or the width and height of one, with arrows and numbers. The name comes from print-era editors marking measurements on a proof in red pen, and most tools still default this annotation to red or an accent color.

If handoff is the broader idea of "everything needed to build it," redlines are the specific slice limited to spacing and size measurement. Figma's Inspect panel now calculates margins automatically when you select an element, so far less gets drawn in by hand than it used to — but wherever the automatic measurement is ambiguous (which component's margin is that gap, exactly?), a person still has to mark it explicitly.

Where spacing is already governed by design tokens — an 8pt grid, say — redlines matter much less, since an engineer just needs to confirm a token name instead of measuring a number every time.

When to use

Mark them on a team without spacing tokens or an 8pt grid, wherever you don't want an engineer eyeballing a margin.