DesignGuidelines
Introduction
Cliqz has experienced significant growth over the years. As Cliqz continues to grow, not only as a product, but also as a company, one of the challenges we face is keeping our design refined and consistent across products.
Our goal is to build products in a more systematic, consistent and cohesive fashion. Well designed experience is more accessible for our users and allows us to create products faster, because it gives us a common ground to work with.
We encourage everyone at Cliqz to acquaint themselves with the design guide and to support our efforts whenever possible.
Color
Primary ColorsWe use color to bring consistency and a feeling of harmony to our products. Cliqz’ main color is blue. We use it generously to help users recognize us instantly.
Cliqz Blue
#00AEF0RGB 0 174 240
Cliqz Black
#1A1A25RGB 26 26 37
White
#FFFFFFRGB 255 255 255
Secondary ColorsTo support brand color we provide a collection of secondary colors to have a stark contrasts between used colors.
#607c85
#E7ECEE
#BFCBD6
#0078CA
#2B5993
Functional ColorsFunctional colors indicate particular functions on the product or website.
Good to know
Cliqz colors and Ghostery color palettes are similar. This is because we’d like to merge Cliqz and Ghostery brands on a visual level.
Ghostery Brand and Logo Guidelines.pdf
Logo
Company LogoThis is the primary Cliqz logo. With minor exceptions listed below please use it at all times.
Proportions of the rectangular frame around Cliqz are based on an offset C. The blue area indicates clear space and must be kept free of all other graphical and visual elements.
Examples
on white
on blue
on black
Please contact Cliqz Design Team in case non-standard logo is required.
Typography
Company fontfaceCliqz’ primary brand typeface is Montserrat. The Montserrat font family is used for our website and all print and web-based media. Given its variety of weights allows us to be flexible.
Please contact Cliqz System Administrator / Design Team to install Gotham fonts on your computer.
User Interface Fonts DesktopFor Cliqz desktop browsers, add-ons, Search and other UI elements — default system font families should be used.
User Interface Fonts MobileFor Cliqz mobile browsers, Search and other UI elements — default system font families should be used.
Company typefaceCliqz’ primary brand typeface is Montserrat. The Montserrat font family is used for our website and all print and web-based media. Given its variety of weights it allows us to be as flexible.
Download font:Montserrat family
Download Media package:Cliqz Media package 1.0.zip
Please contact Cliqz System Administrator / Design Team to install fonts on your computer.
Gotham Normal
The quick brown fox jumps over the lazy dog.1234567890
Font StylesCliqz base font style is Regular.
Extra Light 100
Regular 300
Medium 400
Bold 600
Aa
Aa
Aa
Aa
< 105px only
Font sizeThere's a gradual table of the different font sizes we use. Each size is provided in px (screen) and pt (print). For example our basic text size is 19px/13pt.
9px 7pt
Smallest text
The quick brown fox jumps over the lazy dog — Regular 300/Medium 400.
13px 10pt
Small text
The quick brown fox jumps over the lazy dog — Regular 300/Medium 400.
19px 13pt
Paragraph
The quick brown fox jumps over the lazy dog — Regular 300/Bold 600
27px 20pt
H4
The quick brown fox jumps over the lazy dog — Regular 300/Medium 400
37px 28pt
H3
The quick brown fox jumps over the lazy dog — Regular 300/Medium 400
53px 40pt
H2
The quick brown fox jumps over the lazy dog — Regular 300/Medium 400
75px 56pt
H1
The quick brown fox jumps over the lazy dog — Regular 300/Bold 600
105px 79pt150px 113pt210px 156pt270px 203pt...
Example
What font for the product?
Desktop User Interface FontsFor Cliqz desktop browsers, add-ons, Search and other UI elements — default system font families should be used.
San Francisco
Mac default system font
Segoe UI
Windows default system font
Mobile User Interface FontsFor Cliqz mobile browsers, Search and other UI elements — default system font families should be used.
San Francisco
iOS default system font
Roboto
Android default system font
