Illustration
Illustrations bring a visual voice to products, enriching information and enhancing user experiences.Illustrations are visual elements that can be paired with written messages, to help users understand a concept more quickly and make complex ideas more relatable.
ELMO's spot illustrations are always in neutral colours. They are often based on EDS icons, but include additional details — perfect for spaces that are too large for an icon.
Click on an illustration below to copy the <SpotIllustrationName /> to your clipboard.
Spot illustrations are available in small (default), medium and large size.
If the smallest size is still not small enough for your use case, consider using an Icon.
Use the backgroundCircle prop to make the spot illustration pop. The background circle uses themePrimary100 token, which changes according to the client's theme color.
In scenarios where a background may not be suitable, opt for spot illustrations without a background circle. They can be used as decoration with other elements.
Use a spot illustration as a decoration in an empty state, welcoming users that access the page for the first time:
Or, as a complement to convey a message, e.g. a success state at the end of a stepped flow:
NOTE: Do not distort, combine, add colors to, or modify existing spot illustrations:
