top of page

Screen-shots, boards, and platform guidelines

When creating boards for landing pages, or other assets, it is crucial that the board reflects the real look and feel of our product.

No real devices or mockups.
Real devices will only appear as a part of a photographed scene.


We only use the general shape of a device, we want to avoid specificity and old device versions. 


How to show the platform

We show real boards with real content. We don't use real screen-shots since usually they are too complex. For marketing, we use "marketing boards" that were cleaned and created for marketing purposes or "tiny boards" for small assets.

Our product is visual and fun. In marketing, we don't use complex real screenshots. We usually use designed board templates.


To emphasis the digital enviroment, we always show browser or mobile border (in 40% opacity)


Building block cannot be placed without shade underneath.


To indicate the place of the board, we add a browser on the top part of the phone (e.g. hour, internet, or battery)


Marketing boards

Marketing boards are what we use to represent our platform. They are simplified versions of real boards but include key features and text. We never use screen- shots of the full platform.

Tiny boards

When the asset size is under 300 px we use a Tiny board. Tiny boards are iconic boards with graphic elements to represent real platform parts. No real text is included.


Use real people (not stock images), and use people from Use their real names and titles, we want to show what real teams look like. Remember to include diverse groups by age, color, body type, and religion.


The effects are used to pop out product elements and should not be used for buttons, shapes, text, etc. 



Product elements

Whenever we present our platform we seek to balance the platform elements with real-world elements. This surfaces in our use of images and human elements, which we explore on this page.



Primary color

Supportive color

Use product UI in marketing versions, not screenshots

Use product UI as shown in the actual product. No gradients, shade colors, etc.

Use shadows to emphasis platform element hierarchy (see shadows rules in this guide)


Primary color

Supportive color

Platform elements

bottom of page