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.

Web UI Kit
.sketch
Visit Our Web UI Library
Only Socialbakers Employees

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.

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.

Agency, Journalist
All brand essentials: logo for digital & print usage, colors, emails specification, marketing website and Socialbakers Suite UI.
SB Employee
Library accessible only to Socialbakers Employees. Includes the whole brand package, source files and many more.
Let’s build & maintain a great brand, Bakers!
We encourage you to browse our guidelines before downloading to learn how to use our brand assets. If you have any questions about using brand materials, feel free to ask us on brand@socialbakers.com