Brand purpose

브랜드 존재 이유

State why the brand exists and connect the claim to action.

···
html
<div class="purpose"><div class="claim">MAKE ACCESS EASIER</div><div class="links"><div class="link">CLEAR PRICING</div><div class="link">LOCAL SUPPORT</div></div><div class="meter"><span>WORDS</span><i></i><span>ACTION</span></div></div>
css
.purpose{width:min(90%,500px);font:800 clamp(10px,max(1.7vmin,1vw),13px)/1.1 sans-serif;text-align:center}.claim{border:2px solid var(--fg);padding:clamp(12px,3vmin,24px);font-size:clamp(16px,4vmin,36px);letter-spacing:-.04em}.links{display:flex;justify-content:center;gap:clamp(6px,1.6vmin,14px);margin:clamp(7px,2vmin,18px) 0}.link{flex:1;border:1px solid var(--accent);padding:clamp(5px,1.5vmin,12px);color:var(--accent);animation:connect 4s infinite}.link:nth-child(2){animation-delay:.25s}.meter{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:clamp(10px,max(1.5vmin,1vw),12px)}.meter i{display:block;flex:1;height:clamp(6px,1.4vmin,12px);background:linear-gradient(90deg,var(--accent) 0 100%,var(--line) 0);transform-origin:left;animation:fill 4s infinite}@keyframes connect{0%,25%{background:transparent;opacity:.35}42%,85%{background:var(--accent);color:white;opacity:1}100%{opacity:.35}}@keyframes fill{0%,24%{transform:scaleX(.14)}55%,85%{transform:scaleX(1)}100%{transform:scaleX(.14)}}@media(min-width:700px){body>div{transform:scale(1.8)}}

Brand purpose expresses a problem the organization commits to addressing beyond making a sale. Choices in product, operations and customer experience matter more than a polished statement.

In the demo, a purpose claim gains support only when a policy and an observable action are connected to it. A campaign that gets ahead of the experience creates a gap.

Not every brand needs a grand social mission. Keeping a modest promise consistently may be more credible.

When to use

Use when writing a brand promise or checking whether a campaign claim has operational proof.

Open as page ↗