Design Atlas
한국어
⟳ Design process

Design token

디자인 토큰

A single named value for a design decision — color, spacing, font — so every component referencing it updates together.

Also known as: TokensCSS custom property (design)
···
html
<div class="stage">
  <div class="src">
    <code id="name">color.accent</code>
    <div class="val" id="val"></div>
  </div>
  <svg class="wires" viewBox="0 0 100 60" preserveAspectRatio="none">
    <path d="M10 30 C 30 30, 30 8, 55 8" />
    <path d="M10 30 C 30 30, 30 30, 55 30" />
    <path d="M10 30 C 30 30, 30 52, 55 52" />
  </svg>
  <div class="uses">
    <button class="u btn">Button</button>
    <div class="u tag">Tag</div>
    <div class="u ring"></div>
  </div>
</div>
css
.stage{width:94%;height:86%;display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:0}
.src{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.src code{font:700 11px/1 monospace;color:var(--muted)}
.val{width:100%;height:26px;border-radius:6px;background:var(--accent);transition:background .5s}
.wires{width:100%;height:100%}
.wires path{fill:none;stroke:var(--line);stroke-width:1.4}
.uses{display:flex;flex-direction:column;gap:14px}
.u{border-radius:8px;height:26px;display:flex;align-items:center;justify-content:center;font:600 11px/1 sans-serif}
.btn{background:var(--accent);color:#fff;transition:background .5s}
.tag{border:1.5px solid var(--accent);color:var(--accent);transition:border-color .5s,color .5s}
.ring{width:26px;height:26px;border-radius:50%;border:4px solid var(--accent);align-self:center;justify-self:center;transition:border-color .5s}
js
const colors = ['#5b5bf7', '#f25c8a', '#18c29c', '#e08a2b'];
const val = document.getElementById('val');
const els = document.querySelectorAll('.btn,.tag,.ring');
let i = 0;
function apply() {
  const c = colors[i % colors.length];
  val.style.background = c;
  els.forEach((n) => {
    n.style.background = n.classList.contains('btn') ? c : '';
    n.style.borderColor = c;
    n.style.color = n.classList.contains('btn') ? '#fff' : c;
  });
  i++;
}
apply();
setInterval(apply, 1600);

A token isn't a color value like #5B5BF7 — it's the name attached to that value, say color.accent.default. Components reference the name, not the value, so changing the token once updates every button, link, chip, and avatar that references it simultaneously.

Tokens have a hierarchy. Primitive tokens are raw values like blue-500; semantic tokens like color.accent point at a primitive but carry meaning — "what this is for." Components should always reference semantic tokens, so a rebrand only means repointing the semantic token to a new primitive, never touching component code.

Light/dark mode and per-brand theming are the same mechanism: the same semantic token name resolves to a different value set. The W3C Design Tokens Community Group is defining a shared JSON format so tools can exchange them.

When to use

Introduce it when you want dark mode, a rebrand, or multi-brand theming to be a one-place change instead of hunting down hardcoded values everywhere.