Browsersync Brand Assets

Thank you for your interest in Browsersync, these brand assets and guidelines will show you how to best use our logo. Take the time to familiarize yourself with them and please use responsibly. You can download all of our assets by using the button bellow.

Download all assets Zip 113 KB

Logo Evolution

The foundation and concept of our logo (fig 1) was to demonstrate Browsersync's testing ability across different screen sizes and devices. It was then just a case of refining this concept until we settled on something simple, legible and memorable (fig 2-4).

Fig 1
Fig 2
Fig 3
Fig 4

Brand Colours

Red #F24747

White #FFFFF

Blue #0F2634

Grey #6D6D6D

Browsersync name

Browsersync (previously BrowserSync) is now 1 word, capital B, and nothing else.

Typeface

Titillium has been selected for its modern, technical appearance and is used for the logo type and heading. Open sans was selected for its friendly appearance and is used for body text. The characteristics of both fonts represent Browsersync's technical but friendly nature.

Regular

Semi bold

Thin

Logo Usage

To increase legibility it is important to have a strong contrast between the logo and the background on which it sits - for light backgrounds use the primary red and for darker backgrounds, use white.

Logo on light background
Download as svg, eps, png or jpg

Logo on dark background
svg, eps or png

Wordmark on light background
svg, eps, png or jpg

Wordmark on dark background
svg, eps or png

Minimum Logo Spacing

As shown in the images below, X equals half of the logos total width. This width is the minimum amount of space used to surround the logo.

Restrictions

Our brand is important to us and we are happy for you to use it respectively and responsively for projects that relate to or use Browsersync. However if you do use it, please do not do any of the following:

Rotate

Recolour

Distort

Alter

Multiply

Outline