Colors & Gradients

Marketing website uses the brand's primary and secondary color palette as well as the colors for social networks. However, the shades of grey are different (we are working on unification). In addition, we use some specific web colors for links and buttons, error or confirmation messages, tags, banners, and so on. All these specific colors are referred to as "Web UI Colors".

Typography

The primary font on the web is Roboto, which we use in pre-defined styles for various headings and paragraphs. Keep in mind some styles differ for desktop and mobile view.

Layout

Our web responsive system includes 4 different media queries (Bootstrap engine), which together ensure that the site is conveniently controlled and viewed on various devices:

• Extra Small – for screens smaller than 768px wide (most of the smartphones)
• Small – for screens smaller than 992px wide (tablet in portrait)
• Medium – for screens smaller than 1200px wide (tablet in landscape)
• Large – for 1200px and wider (notebooks and desktop computers)

Use pre-made responsive templates in the .sketch library to design new parts of the website.

Spacing

For design and coding purposes we use a limited range of spacing variables. It helps us to maintain visual consistency and easier development. The system is based on 4px square grid and contains the following variables:

Use these variables for stack (vertical alignment), inset (paddings) and/or inline spacing.

Global Styles

Global styles are visual styles used on various elements across the entire web. If possible, use these pre-set styles and do not create new styles if it is not necessary.