Skip to content
Tattva

Illustration

Stable

A small drawing for empty, error, permission and success screens, in dark lines with one green touch.

Also known as spot illustration, artwork, image

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Three sizes

Line thickness grows with size, so the drawing looks balanced at each size.

UsageCodeDesignAccessibility

When to use it

A small drawing that sets the tone of an empty, error or success screen. It shows one idea in dark lines with one green touch, and follows light and dark mode.

Made of: Dark outline · Light fill · Sand fill · Green touch

Use it for

  • An empty, first-use or cleared screen.
  • An error, offline, permission or usage limit screen.
  • Inside EmptyState, which picks a drawing for you.

Not for

Do and avoid

No trips match these dates.

Do. One drawing fills an empty area and explains it.
Track spending
Share invoices
Avoid. Big drawings in a feature list crowd the words people came to read.

Do

  • Use it to support the words on a screen, never to replace them.
  • Pick the drawing that matches the message, so the picture and words agree.
  • Leave it as decoration when the words beside it already say everything.
  • Show one drawing per area.

Avoid

  • Do not use it as decoration on busy screens.
  • Do not add robots, brains, glowing orbs or sparkles to new drawings.
  • Do not give it fixed colors. Use the theme colors so dark mode works.
  • Do not use amber in the drawing. Amber is for words that ask a person to act.

On a phone

  • Illustration is a fixed 64, 96 or 160px and does not scale with the screen, so choose 64 or 96 on a phone.
  • It is not tappable and has no text, so nothing changes on touch screens.

Seen in products

  • Atlassian's illustration guidance defines a small set of illustration types, each with a defined job. A spot illustration shows one concept and is used for empty, error and celebration states.
  • Atlassian says most cases call for existing brand assets and that custom work is for major launches. It says illustration should support copy rather than replace it, and that decoration-only images in product should be avoided.
  • Atlassian warns that too many illustrations increase cognitive load, and that colorful spots add emphasis while neutral spots suit routine tasks.
  • Polaris empty-state illustrations are described in search snippets as 226 x 226 px, with fine detail rarely smaller than 4px and built-in negative space so visual weight matches.
  • Opinion pieces name purple gradients, glowing brains, chrome robot hands, nodes, sparkles and orbs as the visual cliché of AI products.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started