13

Illustration Restraint

A product illustration is one object drawn from the system palette, not a cluster of unrelated shapes.

An illustration in the product teaches one idea. It uses a shape the product already has, such as a page or an envelope, and it uses the system palette: ink, bone, and one vermilion mark. A second idea makes the person decode the picture before they can act.

The failure is a cluster of unrelated shapes, a character, or a tiny fake screen drawn inside the picture. None of those says "invoice" or "message". They only fill the space the sentence should have used. If the empty state already says what is missing, the picture must not compete with that sentence. One object is enough. If you cannot name it in two words, it is not ready.

The left plate is the clutter. The right plate is one envelope, drawn in ink, with a single vermilion mark.

How to check it

  • Name the picture in two words. If you need a paragraph, cut shapes until you do not.
  • List the colours. They are ink, bone, and vermilion, and vermilion appears once.
  • Look inside the picture. There is no character and no miniature product screen.
<svg viewBox="0 0 64 48" aria-hidden="true">
  <rect x="4" y="8" width="56" height="32" fill="none" stroke="currentColor" stroke-width="2"/>
  <path d="M4 10 L32 28 L60 10" fill="none" stroke="currentColor" stroke-width="2"/>
  <rect x="46" y="26" width="6" height="6" fill="var(--accent)"/>
</svg>