Shapes
The shapes should be used to emphasize the main asset. They should be oversized to create context. Sometimes shapes represent a feature. Fill a shape with a brand solid color, or outline with a brand color stroke.
Primary
Logo capsule
Avatar
Status
App
Integrations
Supportive
Don't fill with gradient colors
Fill with solid color
Fill and effects
Iconography
When we use icons, they need to follow a clear and simple social convention. Although we mainly use icons inside our product, we do occasionally utilize icons in our marketing assets when we want to bolster our main message.
Small icons
In a small icon, it's recommended to use the regular streamline icons from the Figma plugin in one solid color
Large icons
In a large icon of 150 px, it’s recommended to use a solid with transparent layers detailed icon.
Don’t use icons that are overly detailed or obscure the emphasis needed
Icons should be simple and relevant to as broad an audience as possible
Icons do's and don'ts
Don’t use retro icons that have a “short shelf-life”
Use universal and up-to-date icons
Don’t change the stork width. Make sure the shape is readable and clear
Adjust the icon style to the final size in which it appears
Don’t use shadow and other effect
Don’t use several colors in one icon.
Don’t use several colors in one icon
Design
Graphic elements
Our graphic elements were created from our main building blocks. They are used to support the product experience and brand affinity among our users.