top of page

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.

bottom of page