Brand distinctiveness

브랜드 식별성

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

···
html
<div class="distinct"><div class="tile"><i></i><strong>NOVA</strong></div><div class="progress"><span></span></div><small>COLOR → SHAPE → NAME</small></div>
css
.distinct{width:min(73%,310px);text-align:center;font:800 clamp(10px,max(1.6vmin,1vw),12px)/1 sans-serif}.tile{height:clamp(92px,31vmin,210px);display:grid;place-items:center;position:relative;background:var(--line);animation:tile 5s infinite}.tile i{display:block;width:clamp(43px,14vmin,100px);height:clamp(43px,14vmin,100px);border:clamp(7px,2.2vmin,16px) solid white;border-radius:50% 50% 8% 50%;opacity:0;animation:shape 5s infinite}.tile strong{position:absolute;bottom:10%;color:white;font:900 clamp(17px,5vmin,40px)/1 sans-serif;opacity:0;animation:name 5s infinite}.progress{height:4px;margin-top:8px;background:var(--line)}.progress span{display:block;height:100%;background:var(--accent);animation:progress 5s linear infinite}.distinct small{display:block;margin-top:7px;color:var(--muted);letter-spacing:.08em}@keyframes tile{0%,14%{background:var(--line)}30%,100%{background:var(--accent)}}@keyframes shape{0%,20%{opacity:0;transform:scale(.7)}30%,100%{opacity:1;transform:scale(1)}}@keyframes name{0%,50%{opacity:0}65%,93%{opacity:1}100%{opacity:0}}@keyframes progress{from{width:0}to{width:100%}}small{font-size:max(.833em,10px,1vw)}@media(min-width:700px){body>div{transform:scale(1.8)}}

Brand distinctiveness is the ability of colors, shapes, sounds or phrases to identify a brand without its name. It differs from differentiation, which concerns reasons to choose.

The demo hides a name, reveals color and shape cues, then shows the brand. In research, show assets without the name and test whether people link them to the correct brand.

An attractive asset is not automatically distinctive. Repeated use and correct customer attribution are needed.

When to use

Use when checking cues in quick exposures such as short videos or banners.

Open as page ↗