Brand guidelines

브랜드 가이드라인

A single reference that fixes how the logo, color and type may be used, so the brand looks the same no matter who builds it.

Also known as: Brand bookStyle guide (brand)
···
html
<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>
css
.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}
js
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);

Brand guidelines are the single document that spells out how to use a brand's assets — logo, color, typography, tone of voice. The goal is simple: the brand should look the same whether the original designer is still on the team or an outside agency is building a banner from scratch.

They're usually organized into a logo section (minimum size, clear space, misuse examples), a color section (exact HEX/CMYK values for primary and secondary colors, contrast rules) and a typography section (which typefaces and size scale to use for headings versus body text). Lately these ship less often as a static PDF and more as a Notion page or a dedicated "brand hub" site, so one link always points at the current version.

The guidelines document is itself a piece of brand design. A page that shows correct and incorrect usage side by side tends to actually get followed, more than one that just lists rules in prose — seeing "don't do this" is far faster to absorb than reading about it.

When to use

Needed the moment more than one person, team or outside vendor starts touching the brand's assets. A layout that pairs correct and incorrect examples gets followed better than a page of rules alone.