디자인 토큰

<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>

.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}

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);