브랜드 가이드라인

<div class="bg-doc">
  <div class="tabs">
    <span class="t active" id="t0">LOGO</span>
    <span class="t" id="t1">COLOR</span>
    <span class="t" id="t2">TYPE</span>
  </div>
  <div class="panel">
    <div class="pane show" id="p0"><div class="logoSample">◆ Halcyon</div></div>
    <div class="pane" id="p1"><div class="swatches">
      <i style="background:var(--fg)"></i><i style="background:var(--accent)"></i><i style="background:var(--accent-2)"></i><i style="background:var(--accent-3)"></i>
    </div></div>
    <div class="pane" id="p2"><div class="typeSample"><b>Aa</b><span>Halcyon Sans / 24 · 16 · 12</span></div></div>
  </div>
</div>

.bg-doc{width:min(92%,320px);background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.t{flex:1;text-align:center;padding:8px 0;font-size:10px;letter-spacing:.1em;color:var(--muted)}
.t.active{color:var(--fg);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}
.panel{position:relative;height:96px}
.pane{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .4s}
.pane.show{opacity:1}
.logoSample{font-size:20px;font-weight:800;letter-spacing:-.01em}
.swatches{display:flex;gap:8px}
.swatches i{width:26px;height:26px;border-radius:6px;display:block}
.typeSample b{display:block;font-size:26px;text-align:center}
.typeSample span{display:block;margin-top:4px;font-size:9px;color:var(--muted);letter-spacing:.05em}

const tabs = [document.getElementById('t0'), document.getElementById('t1'), document.getElementById('t2')];
const panes = [document.getElementById('p0'), document.getElementById('p1'), document.getElementById('p2')];
let i = 0;
setInterval(() => {
  tabs[i].classList.remove('active');
  panes[i].classList.remove('show');
  i = (i + 1) % 3;
  tabs[i].classList.add('active');
  panes[i].classList.add('show');
}, 1600);