60-30-10 법칙

<div class="wrap">
  <div class="ratiobar">
    <div class="seg dom" id="segDom">60%</div>
    <div class="seg sec" id="segSec">30%</div>
    <div class="seg acc" id="segAcc">10%</div>
  </div>
  <div class="mock" id="mock">
    <div class="mhead" id="mhead">Dashboard</div>
    <div class="mbody">
      <div class="mcard" id="mcard">
        <p>60% 배경, 30% 보조 영역, 10% 포인트로 위계를 만듭니다.</p>
        <button class="mbtn" id="mbtn">Action</button>
      </div>
    </div>
  </div>
</div>

.wrap{width:min(420px,92%);display:grid;gap:clamp(10px,2.6vmin,16px)}
.ratiobar{display:flex;width:100%;height:clamp(16px,4.2vmin,24px);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.seg{display:flex;align-items:center;justify-content:center;font:700 clamp(8px,2.2vmin,10px)/1 ui-monospace,monospace;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.dom{flex:6}.sec{flex:3}.acc{flex:1}
.mock{width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.12);cursor:pointer}
.mhead{padding:clamp(8px,2vmin,10px) 14px;font:700 clamp(11px,2.8vmin,13px)/1 system-ui;color:#fff}
.mbody{padding:clamp(10px,2.6vmin,16px)}
.mcard{border-radius:10px;padding:clamp(10px,2.6vmin,14px);display:grid;gap:10px}
.mcard p{margin:0;font:500 clamp(10px,2.6vmin,12px)/1.5 system-ui;color:#fff}
.mbtn{justify-self:start;border:0;border-radius:8px;padding:7px 16px;font:700 clamp(10px,2.6vmin,12px)/1 system-ui;cursor:pointer;color:#111}

let hue = 220, autoRotate = true;
const segDom = document.getElementById('segDom'), segSec = document.getElementById('segSec'), segAcc = document.getElementById('segAcc');
const mock = document.getElementById('mock'), mhead = document.getElementById('mhead'), mcard = document.getElementById('mcard'), mbtn = document.getElementById('mbtn');

function palette(h) {
  return { dom: 'hsl(' + h + ', 18%, 94%)', sec: 'hsl(' + h + ', 35%, 40%)', acc: 'hsl(' + ((h + 200) % 360) + ', 85%, 55%)' };
}
function render() {
  const p = palette(hue);
  segDom.style.background = p.dom; segDom.style.color = '#111';
  segSec.style.background = p.sec;
  segAcc.style.background = p.acc;
  mock.style.background = p.dom;
  mhead.style.background = p.sec;
  mcard.style.background = p.sec;
  mbtn.style.background = p.acc;
}
mock.addEventListener('click', () => { autoRotate = false; hue = (hue + 47) % 360; render(); });

(function tick() {
  if (autoRotate) hue = (hue + 0.12) % 360;
  render();
  requestAnimationFrame(tick);
})();