Proof-led copy

근거 우선 카피

Lead with a verifiable use case and its source before a sweeping claim.

···
html
<div class="evidence"><div class="claim">THE BEST TOOL FOR EVERYONE</div><div class="source"><small>OBSERVED USE</small><b>Find follow-ups in one shared view</b><span>Show a real workflow and cite the source</span></div><div class="bar"><i></i></div></div>
css
.evidence{width:84%;max-width:640px;font-family:sans-serif}.claim{font:900 clamp(11px,max(2.5vmin,1vw),22px) sans-serif;color:var(--muted);text-decoration:line-through;animation:retire 5s infinite}.source{margin-top:clamp(8px,2vmin,20px);padding:clamp(10px,2.4vmin,22px);border:2px solid var(--accent);background:var(--surface);animation:open 5s infinite}.source small{display:block;font:900 clamp(10px,max(1.4vmin,1vw),12px) sans-serif;color:var(--accent);letter-spacing:.1em}.source b{display:block;margin:.4em 0;font:900 clamp(13px,3.3vmin,30px)/1.1 sans-serif}.source span{font:650 clamp(10px,max(1.7vmin,1vw),14px) sans-serif;color:var(--muted)}.bar{height:5px;margin-top:clamp(7px,2vmin,16px);background:var(--line)}.bar i{display:block;height:100%;background:var(--accent);animation:gain 5s infinite}@keyframes retire{0%,25%{opacity:1}45%,85%{opacity:.25}100%{opacity:1}}@keyframes open{0%,25%{opacity:.25;transform:scale(.96)}45%,85%{opacity:1;transform:none}100%{opacity:.25;transform:scale(.96)}}@keyframes gain{0%,25%{width:18%}45%,85%{width:88%}100%{width:18%}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}

Proof-led copy foregrounds facts a customer can check instead of a sweeping “best” claim. It is useful when comments and product experience inform purchase decisions.

The demo removes an exaggerated claim and opens a card with a use case and source. A fictional example must never be published as a real testimonial.

When to use

Use it for trust-sensitive landing copy and customer quotations.

Open as page ↗