First Impressions Matter
Our website is perhaps one of our most important communication tools. It’s how we present ourselves to the rest of the world, our résumé if you will. Because of this, it’s extremely important that our design and language work together to project an accurate image of who we are and what we represent.
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".
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.
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.
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 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.
Buttons & Components
Buttons, inputs, tags and other elements are part of our web component system. Download our .sketch library and do not create new modifications of these components if it is not necessary.