Illustration and imagery

Illustrations back up the words in a screen state. Photos and images show content people care about. Both are quiet. They use the same tokens as the rest of Tattva, so they switch between light and dark mode on their own.

Style rules+

• One idea per illustration. A spot illustration shows a single idea for an empty, error or celebration screen.
• One-color ink lines on paper or sand. Each piece has at most one lime accent.
• No gradients or glows. No robots, brains, orbs or sparkle mascots. The sources below call these the visual cliché of AI products.
• No detail smaller than 4px in the 160 unit drawing. Fine detail vanishes at 64px.
• Line thickness grows with size: 1.5px at 64, 2px at 96 and 2.5px at 160.
• Every color is a token, so the same art works in light and dark mode.
• Amber stays out of the art. It appears only on the text label when a person must act.

Spot illustrations in three sizes

The left panel uses the current theme. The right panel always uses dark colors, so you can compare both.

• empty-chat, two empty speech bubbles
• no-results, a magnifier over a sheet of lines
• error, a sheet with an exclamation badge
• permission, a closed lock
• offline, a plug apart from its socket
• rate-limit, an hourglass
• success, a sheet with a check badge
• upload, a tray with a sheet and an up arrow
• first-run, a dotted path leading to a flag

Pictograms

For small spaces and lists of features. They sit on a 32 unit grid with 1px padding, are drawn as lines and take the text color.

When to use them+

• Use illustration to back up the words. The title and body must still make sense without the art.
• Use the existing set first. It covers most cases. Save custom art for major launches.
• Give each illustration one job. Match its name to the state.
• Use neutral art for routine screens. Save emphasis for ones that matter.
• For welcome screens and tours, draw simple interface sketches with basic shapes, sharp corners and mostly gray. Do not use real screenshots. They look like a screen inside a screen.
• Art is never clickable.

When not to use illustration

• In crowded areas such as tables, menus and side panels. Leave the art out, or use one pictogram.
• As decoration with no job. Images that only decorate add nothing.
• Several on one screen. Too many make a screen harder to take in.
• In collage style. It does not belong in a product.
• To show urgency or confusion. The art should be calm.

Empty screens+

An empty area is unclear. It could mean loading, an error, or a filter that matched nothing. Say which one it is and give a clear way forward.

Anatomy

1. 1Art, optional
2. 2A title that names the cause or invites a first step
3. 3One line with the next step
4. 4One main button
5. 5A second button or link, optional

Three kinds

• Nothing here yet, the first visit. Invite a first step with a positive title.
• Caused by the person. No search results, or they finished everything.
• Something is blocking them. Missing permission, a system problem or setup that is needed.

Ready-made versions, live

Permission and usage limit add an amber label with an icon and text, because a person has to act there. The others stay neutral.

Left aligned and compact

Wording templates

Name the cause in the title and put the next step on the button. Keep words short and free of jargon. Do not send people to another area as the only way out.

Usage

<EmptyState
  variant="no-results"
  action={<Button variant="secondary">Clear filters</Button>}
/>

Images+

Each frame holds its space with a fixed shape, so the page does not jump while images load. Images are cropped to fill the frame, and corners use the token radius. Shape, crop, rounding and captions are Tattva's own choices, not a standard.

Shapes

Loading and errors

Pass the image's main color and the placeholder uses it. A 1x1 BlurHash is just the average color. That is enough to hold the space. If the color is unknown, a shimmer shows. It stops when motion is reduced. A failed image shows an icon, a line of text and Retry.

AI-generated images

Put a visible label on the image that people can read. If you know where the image came from, the label opens the details. Adobe Content Credentials does the same in steps: a small mark, then a popup, then the full record. Hidden data that software can read (C2PA or IPTC) is reported as good practice next to the visible label. Check legal requirements with your legal team.

AI-generated

Rules

• Always set a shape. Never let an image size itself.
• Alt text is required. Decorative images get empty alt text.
• Describe what is in the image. Never paste the prompt.
• Give failures a Retry button. Do not leave a blank tile.
• Respect reduced motion: the fade-in and the shimmer stop.

Choosing alt text+

Alt text is the words a screen reader reads aloud for an image. These rules follow the W3C alt decision tree.

What we could not verify+

Sources+

• Atlassian: illustrations
• Carbon: contribute pictograms (v10)
• Carbon: empty states pattern
• NN/g: empty state interface design
• Shopify: empty state composition
• Material: empty states
• ThumbHash
• Adobe: Content Authenticity app
• W3C: alt decision tree
• Indie Hackers: the AI purple problem
• Game Changer Labs: avoid generic AI design