Design Atlas
한국어
♪ Sound & haptic design

Sonic branding

소닉 브랜딩

A short musical motif that represents a brand the way a logo does — replayed across touchpoints until it's instantly recognizable.

Also known as: Audio logoSonic identitySound logo
···
html
<div class="wrap">
  <div class="devices">
    <div class="dev" id="d1"><svg viewBox="0 0 24 24"><rect x="6" y="2" width="12" height="20" rx="2" fill="none" stroke="var(--fg)" stroke-width="1.4"/></svg></div>
    <div class="dev" id="d2"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="1" fill="none" stroke="var(--fg)" stroke-width="1.4"/><line x1="8" y1="20" x2="16" y2="20" stroke="var(--fg)" stroke-width="1.4"/></svg></div>
    <div class="dev" id="d3"><svg viewBox="0 0 24 24"><rect x="7" y="5" width="10" height="14" rx="3" fill="none" stroke="var(--fg)" stroke-width="1.4"/></svg></div>
  </div>
  <svg class="sig" viewBox="0 0 100 20" preserveAspectRatio="none"><polyline points="0,10 12,10 18,3 24,17 30,10 42,10 48,4 54,16 60,10 100,10" fill="none" stroke="var(--accent)" stroke-width="1.6"/></svg>
  <button class="play" id="play" type="button" aria-label="play sound"><span class="tri"></span></button>
</div>
css
.wrap{position:relative;width:92%;height:86%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%}
.devices{display:flex;gap:6%}
.dev{width:clamp(34px,20vmin,78px);aspect-ratio:1;border-radius:14%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.dev svg{width:60%;height:60%}
.dev.go{animation:beat .5s ease-out}
@keyframes beat{0%{transform:scale(1)}30%{transform:scale(1.14)}100%{transform:scale(1)}}
.sig{width:60%;height:clamp(16px,8vmin,34px);opacity:.85}
.play{position:absolute;right:0;bottom:0;width:clamp(28px,15%,40px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.play .tri{width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--fg);margin-left:2px}
.play:active{transform:scale(.92)}
js
const devs = [document.getElementById('d1'), document.getElementById('d2'), document.getElementById('d3')];
function beatVisual() {
  devs.forEach((d, i) => setTimeout(() => { d.classList.remove('go'); void d.offsetWidth; d.classList.add('go'); }, i * 90));
}
setInterval(beatVisual, 2600);
document.getElementById('play').addEventListener('click', () => {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const freqs = [440, 554.37, 659.25, 880];
  const now = ctx.currentTime;
  freqs.forEach((f, i) => {
    const t = now + i * 0.11;
    const last = i === freqs.length - 1;
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = last ? 'triangle' : 'sine';
    osc.frequency.value = f;
    gain.gain.setValueAtTime(0, t);
    gain.gain.linearRampToValueAtTime(0.12, t + 0.01);
    gain.gain.exponentialRampToValueAtTime(0.0001, t + (last ? 0.3 : 0.13));
    osc.connect(gain).connect(ctx.destination);
    osc.start(t);
    osc.stop(t + 0.35);
    setTimeout(() => devs.forEach((d) => { d.classList.remove('go'); void d.offsetWidth; d.classList.add('go'); }), i * 110);
  });
  setTimeout(() => ctx.close(), 700);
});

Think Intel's five-note jingle, Netflix's "ta-dum," or the Mac startup chime — a 2-4-second motif repeated identically across every brand touchpoint: app launch, ads, retail spaces, notifications. Just as a visual logo comes with a color and type guide, a sonic logo is governed by a fixed pitch, rhythm, and timbre documented as a "tone of voice."

For touchpoints that fire often, like app notifications, don't reuse the full track — cut a 0.3–0.8s "short form" instead, since a 3-second jingle on every ping gets muted fast. Default volume should stay low and simply follow the device's media volume, and because muted users still need to recognize the brand, pair the same rhythmic motif with a matching logo animation so sight and sound reinforce each other.

Used in app splash screens, TV ad endings, in-store announcements, phone ringback tones, and notification sounds — anywhere the brand shows up.

When to use

Use it where brand identity needs to repeat across multiple channels. For frequent touchpoints like notifications, always prepare a shortened version separately.