보이스와 톤

<div class="tone"><div class="constant">VOICE <b>Clear · Helpful</b></div><div class="tone-track"><span>SUCCESS</span><i></i><span>ERROR</span></div><div class="tone-messages"><div class="success"><small>SUCCESS TONE</small><b>Your board is ready.</b><p>Share it with your team when you’re set.</p></div><div class="error"><small>ERROR TONE</small><b>We couldn't save this board.</b><p>Check your connection and try again.</p></div></div></div>

.tone{width:85%;max-width:640px;font-family:sans-serif}.constant{text-align:center;color:var(--muted);font:900 clamp(10px,1.8vmin,13px) sans-serif}.constant b{display:block;color:var(--fg);font:900 clamp(14px,3vmin,25px) sans-serif}.tone-track{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:clamp(8px,2vmin,16px) 0;color:var(--muted);font:900 clamp(10px,1.6vmin,12px) sans-serif}.tone-track i{height:5px;flex:1;background:var(--line);position:relative}.tone-track i:after{content:'';position:absolute;left:0;width:25%;height:100%;background:var(--accent);animation:slide 6s infinite}.tone-messages{position:relative;height:clamp(105px,23vmin,165px)}.tone-messages div{position:absolute;inset:0;box-sizing:border-box;padding:clamp(10px,2.4vmin,22px);border:2px solid var(--accent);background:var(--surface)}.tone-messages small{display:block;color:var(--accent);font:900 clamp(10px,1.6vmin,12px) sans-serif}.tone-messages b{display:block;margin:.35em 0;font:900 clamp(13px,3.1vmin,26px)/1.12 sans-serif}.tone-messages p{margin:0;color:var(--muted);font:700 clamp(11px,2vmin,16px) sans-serif}.success{animation:success 6s infinite}.error{animation:error 6s infinite}@keyframes slide{0%,42%{left:0}55%,92%{left:75%}100%{left:0}}@keyframes success{0%,42%{opacity:1}55%,92%{opacity:0}100%{opacity:1}}@keyframes error{0%,42%{opacity:0}55%,92%{opacity:1}100%{opacity:0}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}@media(min-width:700px){
  .creator-scene small,.creator-scene .meter,
  .journey .track,.journey .panels small,.journey .panels p,
  .disclosure .ad small,.disclosure .labels span,
  .comment-mining .comments span,.comment-mining .extract small,.comment-mining .extract i,
  .inbox .inbox-top,.inbox .inbox-note,.inbox .sender,.inbox .preview,
  .hierarchy small,.hierarchy span,
  .tone .constant,.tone .tone-track,.tone .tone-messages small,.tone .tone-messages p,
  .naming .ylabel,.naming .xlabel,.naming .point,.naming .choice{font-size:12px}
}