Brand Guidelines
Ghostery experiences significant growth and one of the challenges we are facing during the process is keeping our design refined and consistent across the Ghostery Privacy Suite. This live design page is acting as a central hub to showcase design principles, style guide and brand assets.
Ghostery Logo
Primary Logo
This is the primary color logo to use, except for limited exceptions specified in Logo Variants section.
Stacked Version
Stacked Version
The stacked version should be used when a vertical orientation is appropriate.
Logo Specifics
Logo clear space
Grey area indicates Safe Zone. Other graphical and visual elements can be safely positioned up to the adjoining Blue area.
Blue indicates Clear Space. The blue area must be kept free of all other graphical and visual elements.
There must be a clear space around the logo proportionate to the height of the “H” in “GHOSTERY”.
The registration mark should be ignored when spacing or aligning the logo.
Logo Variants
On Dark Background
When using a dark grey or black background, the logotype should be white, while the Ghosty icon remains blue.
On Blue Background
When using a blue background, the ghosty icon is knocked out to white, while the logotype remains black.
Full Tone Greyscale
The greyscale version can be used when required or requested by third parties.
Solid Black
The Solid Black version can be used when required or requested by third parties.
Knockout
The white knock out version should be used when the logo is required to be displayed in front of a non-standard background color.
Logo Best Practices
To ensure the Ghostery logo is not represented inaccurate, we list a couple of examples of misuse. Please do not alter or modify any part of the logo – all valid options are shown in “logo variants” section above.
Font Face
Do not use any other font, no matter how close it might look to Bebas Neue.
Colors
Do not change the colors even if they look similar. Use the official color specifications detailed in these guidelines.
Size & Proportion
Do not squish or squash the logo. Any resizing must be in proportion.
Do not resize the logomark or change the logomark's position.
Color Specifications
Primary Colors
We use color to bring consistency and a feeling of harmony to Ghostery. Our main color is blue. We use it generously to help users recognize us instantly.
HEX: #00AEF0
RGB: 0 / 174 / 240
HEX: #2F3136
RGB: 47 / 49 / 54
HEX: #000000
RGB: 0 / 0 / 0
HEX: #FFFFFF
RGB: 255 / 255 / 255
Secondary Colors
To support brand color we provide a collection of secondary colors to have a stark contrasts between used colors.
HEX: #129bf2
RGB: 18 / 155 / 242
HEX: #f77d7a
RGB: 247 / 125 / 122
HEX: #88898c
RGB: 136 / 137 / 140
Gradient
CSS: linear-gradient(166deg, #129bf2 7%, #f77d7a 92%);
CSS: linear-gradient(166deg, #129bf2 7%, #f77d7a 92%); background-clip: text;
Functional Colors
Functional colors indicate particular functions and states in the apps contained in the Ghostery privacy suite or our website.
HEX: #FF4500
RGB: 255 / 69 / 0
HEX: #FFBB00
RGB: 255 / 187 / 0
HEX: #43AC3C
RGB: 67 / 172 / 60
Typography
Bebas Neue
The font used in the logo is Bebas Neue, but it is only used in the logotype.
Roboto
The Roboto font family is used for our website and all web-based collateral. The huge variety of font weights and widths will ensure immenense flexibility, and consistency for the future growth of the identity.
abcd1234
Roboto Condensed
Roboto Condensed is to be used for all headlines and calls to action.
abcd1234