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
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.
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.
Transperncy
Transperncy
Outline
Solid
Doted grid
To be used for creating a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Shapes and shades
To be used to create depth and to emphasize the main asset.
Layers
To be used to create depth and to emphasize the main asset.
Isometric grid
To be used for creating an inspiring scene of infinity and endless opportunities as well as a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Dotted grid
To be used for creating a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Shapes and shades
To be used to create depth and to emphasize the main asset.
Layers
To be used to create depth and to emphasize the main asset.
Isometric grid
To be used for creating an inspiring scene of infinity and endless opportunities as well as a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Playground elements
Linear 100%-0%
Radial 100%-0%
Between 2 shades
Between 2 colors
Doted grid
To be used for creating a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Shapes and shades
To be used to create depth and to emphasize the main asset.
Layers
To be used to create depth and to emphasize the main asset.
Isometric grid
To be used for creating an inspiring scene of infinity and endless opportunities as well as a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Transperncy
Transperncy
Outline
Solid
Fill and effects
Linear 100%-0%
Radial 100%-0%
Between 2 shades
Between 2 colors
Doted grid
To be used for creating a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Shapes and shades
To be used to create depth and to emphasize the main asset.
Layers
To be used to create depth and to emphasize the main asset.
Isometric grid
To be used for creating an inspiring scene of infinity and endless opportunities as well as a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Transperncy
Radial 100%-0%
Between 2 shades
Between 2 colors
Transperncy
Transperncy
Outline
Solid
Linear 100%-0%
Radial 100%-0%
Between 2 shades
Between 2 colors
Doted grid
To be used for creating a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
Shapes and shades
To be used to create depth and to emphasize the main asset.
Layers
To be used to create depth and to emphasize the main asset.
Isometric grid
To be used for creating an inspiring scene of infinity and endless opportunities as well as a “grounded” scene to give a feeling of order, efficiency, and connectivity between the elements.
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.