branding

Welcome to the Clickx Brand Guideline. Please feel free to use this page as a resource for any Clickx branded material. Our hope is that these assets and standards will help guide you along the creation of any and all communication pieces.

Typeface

Source Sans Pro is our default typeface for websites, print and other materials. Download Zip

Source Sans Pro Light

Source Sans Pro Regular

Source Sans Pro Semi

Source Sans Pro Bold

Color Palette

Use this color palette to guide your designs and layouts to ensure you’re staying consistent with the Clickx brand. Download ASE

Darkstone Blue

#4C4E60

Merigold

#F8B018

Light Haze

#F6F6F7

Accent Red

#EF5023

Accent Blue

#60BBEA

Accent Green

#BAD531

Text Grey

#777777

White

#FFFFFF

Web Elements

Use the examples below to help direct your designs for web.

Call to Actions

Button and hoverstate (#F5950C) on white/light haze background.

Button and hoverstate (#F5950C) on Darkstone Blue background.

Button (2pt. Stroke) and hoverstate (with accent blue text, #60BBEA) on orange or image background.

Secondary button (#60BBEA) and hoverstate (#42A2E0) option for white/light haze or darkstone blue backgrounds.

Please note that the call to action boxes should have a slightly rounded corner — the examples above have a 4pt. corner radius applied. While different sizes and situations may require you to adjust the corner radius, the goal should be keeping the rounded corners subtle.

 

Text Styling Example

Header 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris aliqua.

Header 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, text link quis nostrud exercitation ullamco laboris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit - Text Link

Header 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, text link quis nostrud exercitation ullamco laboris.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris aliqua.”
Header 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, text link quis nostrud exercitation ullamco laboris.

Header 01

Title Case

Source Sans Pro Bold

Size: 54pt (HD Desktop Standard)

Line Spacing: 110% of font size

Header 02

Sentence or Title Case

Source Sans Pro Regular

Size: 36pt (HD Desktop Standard)

Line Spacing: 110% of font size

Header 03

Source Sans Pro Semibold

Size: 21pt (HD Desktop Standard)

Line Spacing: 120% of font size

Header 04

Source Sans Pro Bold

Size: 16pt (HD Desktop Standard)

Line Spacing: 120% of font size

Body Copy

Source Sans Pro Italic

Size: 22pt (HD Desktop Standard)

Line Spacing: 150% of font size

Text Link

Size: Same as surrounding copy

Line Same as surrounding copy

Color: #60BBEA

Pull Quote

Source Sans Pro Italic

Size: 22pt (HD Desktop Standard)

Line Spacing: 150% of font size

Indented