Marketing Atlas
한국어
◆ Brand & positioning

Brand identity

브랜드 정체성

Combine visual and verbal cues so touchpoints feel like one brand.

···
html
<div class="identity"><div class="previews"><div class="poster"><i></i><b>GO<br>FURTHER.</b></div><div class="app"><i></i><b>Go further.</b><small>Make room for your next step</small></div></div><div class="controls"><button id="swap">SWITCH IDENTITY</button><span>ONE SYSTEM · TWO TOUCHPOINTS</span></div></div>
css
.identity{width:min(88%,520px);font-family:sans-serif}.previews{height:clamp(105px,32vmin,230px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(7px,2vmin,18px)}.poster,.app{position:relative;overflow:hidden;background:var(--accent);color:#fff;padding:clamp(8px,2.2vmin,20px);transition:background .45s}.poster i,.app i{display:block;width:clamp(17px,5vmin,40px);height:clamp(17px,5vmin,40px);border:3px solid currentColor;border-radius:50%;transition:border-radius .45s}.poster b{position:absolute;bottom:10%;left:8%;font:900 clamp(19px,6vmin,55px)/.85 sans-serif;letter-spacing:-.08em}.app{background:var(--fg);color:var(--bg);display:flex;flex-direction:column;justify-content:space-between}.app b{font:900 clamp(12px,3vmin,25px)/1 sans-serif}.app small{font-size:clamp(10px,max(1.3vmin,1vw),12px)}.identity.alt .poster{background:#596c44}.identity.alt .app{background:#34402f;color:white}.identity.alt i{border-radius:2px}.controls{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:8px;color:var(--muted);font:800 clamp(10px,max(1.4vmin,1vw),12px)/1 sans-serif}.controls button{background:var(--surface);color:var(--fg);border:1px solid var(--line);padding:6px;cursor:pointer;font:inherit}@media(min-width:700px){body>div{transform:scale(1.8)}}
js
const root=document.querySelector('.identity');let touched=false;document.querySelector('#swap').onclick=()=>{touched=true;root.classList.toggle('alt')};setInterval(()=>{if(!touched)root.classList.toggle('alt')},2300);
···

Brand archetype브랜드 원형

Use a recognizable character pattern to guide a consistent voice.

···

Brand distinctiveness브랜드 식별성

Build cues that make a brand recognizable without showing its name.

···

Brand equity브랜드 자산

Examine the value the brand name adds to customer choice.

···

Brand salience브랜드 현저성

See how readily a brand comes to mind in buying situations.

Brand identity is the set of visual and verbal rules a brand uses to express itself. It differs from brand image, which is what customers actually perceive.

The demo changes color, shape and voice across an app card and a poster at once. In practice, check that two differently made touchpoints retain recognizable cues.

The goal is not to copy one template everywhere. Adapt to context while preserving the essential cues.

When to use

Use to create and audit shared expression rules across channels.

Open as page ↗