Banners
Banners are key to announcing and promoting functionalities, increasing user adoption, and delivering important messages to elevate user engagement and overall product experiences.
Internationalization
Depending on the region's needs, banners are created and used as right-aligned or left-aligned.
Left-to-right (LTR) languages
Right-to-left (RTL) languages
If there isn’t a banner designed to fit your workflow category or use case, use this general banner.
Don’t use banners that were designed for different purposes.
Follow style rules on the creation page.
Don’t change the style of the banner illustrations.
Keep banners at 100% size.
Don’t scale or skew banners.
Size and Padding
Empty state configurations are small, medium, and large.
- Large are 350px by 318px with 24px padding
- Medium are 216px by 168px with 12px padding
- Small are 56px by 56px with 3px padding
Use empty state illustrations on color system backgrounds.
Don’t overlay illustrations on distracting backgrounds or visual elements.
Do use empty state illustrations as intended. They require a heading with an optional description and a button.
Don’t use empty state illustrations for unintended use such as banners and cards.
Modals
Modals present content to help user interaction in a layer above. In some cases, modals contain information that provides additional help and support. Illustrations within modals are visual aids and are commonly used for walkthroughs and educating about added features.
Size and Padding
Providing enough space from the edges for important elements avoids creating tangents that can be distracting. Also, allowing more space on the left and right sides of illustration elements creates a good balance of negative space.
- Minimum padding
- Top/Bottom: 12px
- Left/Right: 24px
Have a light color as a background. Interactive-0 is the default color.
Changing to a dark color background causes too much contrast.
Use modal illustrations as intended. They should live within modals.
Don’t use modal illustrations as banners or card illustrations.
Only outlining main objects creates a good balance of outlined and solid objects.
Too many outlines becomes busy and confusing since visual elements look too similar.
Use text only if necessary. Using text is encouraged outside the illustration within the modal.
Overusing text can make a modal useless to people who are reading in other languages and is an overload of information.
Cards
A card component is a versatile building block used to display content clearly. Our illustrations will enhance scannability, improve clarity, and create an emotional connection for our users. Illustrations may highlight a product's features, trigger a modal with instructional material, or highlight an important step when first diving into a product.
Size and Padding
- 136px minimum height
- 8px minimum padding for illustration elements (excluding shadows)
Keep illustrations at 100% scale. If scaling is required due to responsive layout, export asset using card width of common breakpoint.
Don’t skew illustrations.
Use card illustrations as intended. They should live within cards.
Don’t use card illustrations as banners or modal illustrations.