Brand color system

<div class="wrap">
  <div class="tokens" id="tokens"></div>
  <div class="mock" id="mock">
    <div class="nav" id="nav"><b id="brand">Nord&amp;Co</b><span class="pill" id="navcta">Sign up</span></div>
    <div class="hero"><h4 id="htitle">Design, shipped faster.</h4><button class="pbtn" id="pbtn">Get started</button></div>
  </div>
</div>

.wrap{width:min(460px,92%);display:grid;gap:clamp(8px,2.2vmin,14px)}
.tokens{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tokens div{display:grid;gap:3px;justify-items:center}
.tokens i{display:block;width:100%;aspect-ratio:1;border-radius:7px;border:1px solid var(--line)}
.tokens b{font:700 clamp(6px,1.6vmin,7px)/1 ui-monospace,monospace;color:var(--muted);text-transform:uppercase}
.mock{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.12);cursor:pointer}
.nav{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font:700 clamp(11px,2.8vmin,13px)/1 system-ui}
.pill{font:700 clamp(8px,2.2vmin,10px)/1 system-ui;padding:5px 10px;border-radius:999px}
.hero{padding:clamp(14px,3.6vmin,22px) 14px;display:grid;gap:10px;justify-items:start}
.hero h4{margin:0;font:800 clamp(13px,3.2vmin,17px)/1.25 system-ui}
.pbtn{border:0;border-radius:9px;padding:8px 16px;font:700 clamp(10px,2.6vmin,12px)/1 system-ui;cursor:pointer}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  var k = function (n) { return (n + h / 30) % 12; };
  var a = s * Math.min(l, 1 - l);
  var f = function (n) { return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); };
  var hex = function (x) { return Math.round(x * 255).toString(16).padStart(2, '0'); };
  return '#' + hex(f(0)) + hex(f(8)) + hex(f(4));
}
var BRANDS = [{ name: 'Nord&Co', h: 230 }, { name: 'Ember Labs', h: 18 }, { name: 'Verdant', h: 145 }];
var LABELS = ['PRIMARY', 'SECONDARY', 'ACCENT', 'NEUTRAL-900', 'NEUTRAL-50'];
var idx = 0;
var tokens = document.getElementById('tokens');
tokens.innerHTML = LABELS.map(function (l, i) { return '<div><i id="c' + i + '"></i><b>' + l + '</b></div>'; }).join('');
var cells = LABELS.map(function (_, i) { return document.getElementById('c' + i); });
var brand = document.getElementById('brand'), nav = document.getElementById('nav'), navcta = document.getElementById('navcta'), mock = document.getElementById('mock'), pbtn = document.getElementById('pbtn'), htitle = document.getElementById('htitle');
function render() {
  var b = BRANDS[idx], h = b.h;
  var primary = hslToHex(h, 70, 50);
  var secondary = hslToHex(h, 55, 32);
  var accent = hslToHex((h + 150) % 360, 80, 55);
  var neutralDark = hslToHex(h, 15, 12);
  var neutralLight = hslToHex(h, 20, 97);
  var hexes = [primary, secondary, accent, neutralDark, neutralLight];
  cells.forEach(function (el, i) { el.style.background = hexes[i]; });
  brand.textContent = b.name;
  nav.style.background = secondary; nav.style.color = neutralLight;
  navcta.style.background = accent; navcta.style.color = neutralDark;
  mock.style.background = neutralLight;
  htitle.style.color = neutralDark;
  pbtn.style.background = primary; pbtn.style.color = neutralLight;
}
render();
mock.addEventListener('click', function () { idx = (idx + 1) % BRANDS.length; render(); });
setInterval(function () { idx = (idx + 1) % BRANDS.length; render(); }, 2800);