Skip to content

Illustrations

Simple state illustrations that inherit foreground and brand tokens across themes.

States

Empty
Error
Success
Search

Usage

Pair an illustration with a concise heading, a useful explanation, and an action when recovery is possible. SVG strokes use current color while emphasis follows brand tokens, so no theme-specific assets are required.

tsx

import { IllustrationEmpty } from "@standard-ui/react"

<div className="text-fg-tertiary">
  <IllustrationEmpty className="w-60" />
  <h2>No projects yet</h2>
  <p>Create a project to start organizing your work.</p>
</div>

Do

  • Choose the illustration that matches the system state
  • Keep illustrations secondary to the message and action
  • Use the inherited token colors in light and dark themes

Don't

  • Don't use an error illustration for an empty first-run state
  • Don't replace actionable guidance with decoration
  • Don't apply raw fill colors that break theme support