Spot Illustration

스팟 일러스트

A small, self-contained drawing made for one specific spot on screen — an empty state, an error, a success message — not a full scene.

Also known as: Empty-state illustrationAccent illustration
···
html
<div class="stage">
  <svg viewBox="0 0 100 80" width="72%" style="overflow:visible">
    <g id="dots">
      <circle cx="35" cy="20" r="2" fill="var(--accent-2)"/>
      <circle cx="50" cy="12" r="1.6" fill="var(--accent-3)"/>
      <circle cx="64" cy="22" r="2" fill="var(--accent)"/>
    </g>
    <g id="box">
      <path d="M20 38 50 28 80 38 80 62 50 72 20 62Z" fill="var(--surface)" stroke="var(--line)" stroke-width="1.5"/>
      <path d="M20 38 50 48 80 38" fill="none" stroke="var(--line)" stroke-width="1.5"/>
      <path d="M50 48 50 72" fill="none" stroke="var(--line)" stroke-width="1.5"/>
      <path d="M20 38 50 28 80 38 50 48Z" fill="var(--accent)" opacity=".18"/>
    </g>
  </svg>
  <div class="cap">Nothing here yet</div>
</div>
css
.stage{display:flex;flex-direction:column;align-items:center;gap:10px}
#dots{animation:float 2.6s ease-in-out infinite}
#box{animation:bob 2.6s ease-in-out infinite}
.cap{font-size:11px;color:var(--muted)}
@keyframes float{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-4px);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

A spot illustration isn't a full scene filling the screen — it's a small, self-contained drawing made for one specific spot: an empty state, an error, a success message. Sitting next to copy like "No results found" or "Nothing here yet," it softens what would otherwise be a bare, empty-feeling screen far more than the text alone.

The rule is to stay on one subject. Unlike a flat illustration that packs several objects into a scene, a spot illustration usually settles for a single object — an empty box, a magnifying glass, an umbrella — plus a handful of small details (dots, stars, a shadow) around it. That's what lets it drop comfortably into the narrow space next to a list or a form.

When a product uses several spot illustrations — one for empty search, one for errors, one for success — the line weight, color, and overall tone need to stay consistent across all of them, or moving between screens starts to feel like switching products. That's usually why one illustrator draws the whole set, or everyone works from the same style guide.

When to use

Use it to soften one specific spot on screen — empty states, errors, completion messages. If the product will use several, settle a style guide for line weight, color, and tone before drawing the first one.