Illustration
A piece of drawn artwork from the product, like the picture over an empty page.
Master
Pick the artwork and how big it is drawn. Set it moving and the glass walks over the message; it holds still for anyone who asks for less motion. The colors belong to the drawing, so they stay put in light and dark.
Usage
Use Illustration where a screen needs a drawn picture rather than an icon or a logo: the art over an EmptyState, or the opening of an assistant panel. It is one component: pass name for the artwork and size for how big it is drawn. animated sets the art moving where the movement says something, like the glass walking over the message while the assistant waits for a first question; it is still by default, and stops for anyone who asks for less motion. The art carries the brand colors of the drawing itself, so it does not change with the theme. It is decorative by default and hidden from screen readers; pass label only when the picture is the only thing saying what the block is about. New artwork joins the name list here; do not paste an SVG into a screen. See contracts/illustration.json for the full contract.
Do's
- The picture over an EmptyState block.
- The opening of the assistant, before the first question.
- A new chat, before anything has been asked in it.
Don'ts
- Do not paste an SVG into a screen or a pattern. Add the artwork here instead.
- Do not use it for an icon. Use Icon.
- Do not use it for the product mark. Use Logo or LogoAI.
- Do not recolor the art with tokens; the drawing keeps its own colors.
- Do not give it a label when the words beside it already say the same thing.
- Do not turn the movement on for artwork people only glance at, or beside other moving things.
<Illustration name="ai-chip" size="md" />