SpotIllustration
Open in Storybook Open in Figma
SpotIllustration is used to display decorative, image-based visuals that enhance user experience — commonly in empty states, onboarding screens, or feature highlights.
Each illustration consists of two elements: a 3D illustration and a background shape (circle or square) whose position and color can be customized.
Rules For Accessibility
- Non-ornamental illustrations must include descriptive alt text.
Faded
Faded illustrations are visually de-emphasized with reduced opacity and a grayscale effect.
Sizes
Shapes
Rules For Designers
- Only the circle shape is allowed for small and extra-small sizes, or when the illustration is faded.
Shape Positions
Rules For Designers
- Shape position is automatically set to center for small, extra-small, or faded illustrations.
Available Illustrations
HINT To request a new 3D illustration, create a Jira issue. Follow the GDS Jira contribution guide for details.
Rules For Developers
- If you need an illustration not listed below, you can provide a custom URL using the
srcprop.
The list below includes all SpotIllustration assets supported by george-assets v1.0.0-beta.35: