Design Atlas
한국어
◐ Color

Semantic colors

시맨틱 컬러

Tokens named by role — success, danger — instead of by the color itself, like blue-500. Rebrand the palette and "success is green" still holds.

Also known as: Semantic tokens의미 색상
···
html
<div class="wrap">
  <div class="toast" id="toast">
    <span class="dot" id="dot"></span>
    <div class="txt"><b id="title">Success</b><span id="desc">저장되었습니다.</span></div>
    <code id="tok">--color-success</code>
  </div>
  <div class="navdots" id="navdots"></div>
</div>
css
.wrap{width:min(440px,92%);display:grid;justify-items:center}
.toast{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:clamp(10px,2.8vmin,16px);border-radius:12px;border:2px solid var(--line);background:var(--surface);box-shadow:0 10px 26px rgba(0,0,0,.12);transition:border-color .4s;cursor:pointer}
.dot{width:14px;height:14px;border-radius:50%;flex:none}
.txt{display:grid;gap:2px;min-width:0}
.txt b{font:700 clamp(11px,2.8vmin,13px)/1.2 system-ui}
.txt span{font:500 clamp(10px,2.6vmin,12px)/1.3 system-ui;color:var(--muted)}
code{font:600 clamp(8px,2.2vmin,10px)/1 ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.navdots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.navdots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.navdots i.on{background:var(--fg)}
js
const STATES = [
  { title: 'Info', ko: '새 버전이 있습니다.', color: '#2563eb', token: '--color-info' },
  { title: 'Success', ko: '저장되었습니다.', color: '#16a34a', token: '--color-success' },
  { title: 'Warning', ko: '용량이 얼마 안 남았습니다.', color: '#d97706', token: '--color-warning' },
  { title: 'Danger', ko: '삭제하면 되돌릴 수 없습니다.', color: '#dc2626', token: '--color-danger' },
];
let idx = 0;
const toast = document.getElementById('toast'), dot = document.getElementById('dot'), title = document.getElementById('title'), desc = document.getElementById('desc'), tok = document.getElementById('tok');
const navdots = document.getElementById('navdots');
navdots.innerHTML = STATES.map(() => '<i></i>').join('');

function render() {
  const s = STATES[idx];
  dot.style.background = s.color;
  toast.style.borderColor = s.color;
  title.textContent = s.title;
  title.style.color = s.color;
  desc.textContent = s.ko;
  tok.textContent = s.token;
  [].forEach.call(navdots.children, (el, i) => el.classList.toggle('on', i === idx));
}
render();
toast.addEventListener('click', () => { idx = (idx + 1) % STATES.length; render(); });
setInterval(() => { idx = (idx + 1) % STATES.length; render(); }, 2200);

Name a token by its role — --color-success — and code only needs to say "this button is a success state." The actual color value lives in one place in the token layer, so dark mode, rebrands, and contrast fixes all resolve there.

Green for success, orange/yellow for warning, red for danger, blue for info is the near-universal convention. Because culture and color vision vary, never rely on color alone — always pair it with an icon or text.

If a token's name and its actual color diverge — say, --color-danger mapped to blue — it breaks everyone's intuition on the team, so staying close to the "common sense" meaning of each role matters.

When to use

Use these as the default for any component that communicates state through color — toasts, badges, form validation.