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.
This is the primary color logo to use, except for limited exceptions specified in Logo Variants section.
The stacked version should be used when a vertical orientation is appropriate.
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.
When using a dark grey or black background, the logotype should be white, while the Ghosty icon remains blue.
When using a blue background, the ghosty icon is knocked out to white, while the logotype remains black.
The greyscale version can be used when required or requested by third parties.
The Solid Black version can be used when required or requested by third parties.
The white knock out version should be used when the logo is required to be displayed in front of a non-standard background color.
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.
Do not change the colors even if they look similar. Use the official color specifications detailed in these guidelines.
Do not squish or squash the logo. Any resizing must be in proportion.
Do not resize the logomark or change the logomark's position.
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
The font used in the logo is Bebas Neue, but it is only used in the logotype.
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.
ABCDEF
abcd1234
Roboto Condensed is to be used for all headlines and calls to action.
ABCDEF
abcd1234