ClickSend Style Guide

We love that you love ClickSend. We want to make it easy for you to use our brand in the right way. Explore this quick guide to our basic design elements to see how to do it.

1. Logo

The ClickSend master logo should be used at all times. If not possible, one of the other logo variations should be applied (see below), ensuring brand consistency across all communications.

Download Logos

Master Logo

Clicksend Sinch Horizontal
Clicksend Sinch Horizontal Mono
Clicksend Sinch Horizontal Alternative

Icon Only

Clicksend Icon only
Clicksend Mono Icon only

Co-Branding

When visually representing more than one institution or partner, the ClickSend logo should be treated equally to other partner logos where applicable, meaning it should appear the same size.

Our preference is that the ClickSend logo should be on the left. Please be mindful of these guidelines and apply them consistently.

Do's and Dont's

  1. Don't change the logo's orientation.
  2. Don't bevel or emboss the logo.
  3. Don't place the logo on a busy photograph or pattern.
  4. Don't change the logo colours.
  5. Don't crop the logo in any way.
  6. Don't add "glow" effects to the logo.
  7. Don't present the logo on "vibrating" coloured backgrounds.
  8. Don't present the logo in "outline only" fashion.
  9. Don't place the logo on similarly-coloured backgrounds.
  10. Don't outline the logo in any colour.
  11. Don't add "drop shadow" effects to the logo.
  12. Don't put a white box around the logo when placed on a darker busy background.
  13. Don't reconfigure or change the size or placement of any logo elements.
  14. Don't stretch or squeeze the logo to distort proportions.
  15. Don't recreate elements or replace with something else.
Clicksend Logo Restriction

Size and Positioning

The ClickSend logo should always be surrounded by a minimum area of space. The area of isolation ensures that headlines, text or other visual elements do not encroach the logo.

Clicksend Logo Padding

Favicons

Favicons below were generated using https://realfavicongenerator.net/

1. Download favicons:

Download

2. Include code snippet to use favicons:

						<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
					
						<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
					
						<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
					
						<link rel="manifest" href="/site.webmanifest">
					
						<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00a5ff">
					
						<meta name="apple-mobile-web-app-title" content="ClickSend">
					
						<meta name="application-name" content="ClickSend">
					
						<meta name="msapplication-TileColor" content="#00a5ff">
					
						<meta name="theme-color" content="#ffffff">
					

2. Colours

Colour Swatches

Download the colour swatches below for use in Sip, Photoshop, Illustrator etc:

Download SIP Colours Download Colour Swatches

Colour Pallets

ClickSend Blue

This is the ClickSend blue colour used in our logo

ClickSend Blue

HEX #009AED

RGB 0, 154, 237

Primary Colours

The Primary Palette should be applied in all of ClickSend's marketing communications. The palette has been designed to give a bold and exciting direction to the brand, offering flexibility in conception – online and in print. Percentage tints can be used in any of these colours as shown in the colour variants section below.

Malibu

#26A6F8

38, 166, 248

$malibu

Turquoise

#38E8B8

56, 232, 184

$turquoise

Apricot

#F9AB4E

249, 171, 78

$apricot

Tangerine

#FF6A4B

255, 106, 75

$tangerine

Cabaret

#CF1868

207, 24, 104

$cabaret

Orchid

#FF45E2

255, 69, 226

$orchid

Lavender

#6446DE

100, 70, 222

$lavender

Secondary Colours

These colours should be used for things like backgrounds, borders and dividers.

Paris

#3E3771

62, 55, 113

$paris

Cadet

#6B7399

107, 115, 153

$cadet

Mystic

#D3D9E6

211, 217, 230

$mystic

Smoke

#F4F6F9

244, 246, 249

$smoke

White

#FFFFFF

255, 255, 255

$white

Primary Colour Variants

Malibu Variants
Malibu +10

#CBE9FD

203, 233, 253

$malibu+10

Malibu +5

#78C8FB

120, 200, 251

$malibu+5

Malibu

#26A6F8

38, 166, 248

$malibu

Malibu -5

#0679C3

6, 121, 195

$malibu-5

Malibu -10

#044671

4, 70, 113

$malibu-10

Turquoise Variants
Turquoise +10

#C1F8E8

193, 248, 232

$turquoise+10

Turquoise +5

#84F1D3

132, 241, 211

$turquoise+5

Turquoise

#38E8B8

56, 232, 184

$turquoise

Turquoise -5

#15B68A

21, 182, 138

$turquoise-5

Turquoise -10

#0C6A50

12, 106, 80

$turquoise-10

Apricot Variants
Apricot +10

#FDE2C1

253, 226, 193

$apricot+10

Apricot +5

#FCD2A0

252, 210, 160

$apricot+5

Apricot

#F9AB4E

249, 171, 78

$apricot

Apricot -5

#EA8308

234, 131, 8

$apricot-5

Apricot -10

#985505

152, 85, 5

$apricot-10

Tangerine Variants
Tangerine +10

#FFDAD3

255, 218, 211

$tangerine+10

Tangerine +5

#FFB0A0

255, 176, 160

$tangerine+5

Tangerine

#FF6A4B

255, 106, 75

$tangerine

Tangerine -5

#F52A00

245, 42, 0

tangerine-5

Tangerine -10

#A01C00

160, 28, 0

tangerine-10

Cabaret Variants
Cabaret +10

#F49DC3

244, 157, 195

$cabaret+10

Cabaret +5

#EB5194

235, 81, 148

$cabaret+5

Cabaret

#CF1868

207, 24, 104

$cabaret

Cabaret -5

#921149

146, 17, 73

$cabaret-5

Cabaret -10

#550A2B

85, 10, 43

$cabaret-10

Orchid Variants
Orchid +10

#FFCDF7

255, 205, 247

$orchid+10

Orchid +5

#FF9AEF

255, 154, 239

$orchid+5

Orchid

#FF45E2

255, 69, 226

$orchid

Orchid -5

#AB0090

171, 0, 144

$orchid-5

Orchid -10

#780065

120, 0, 101

$orchid-10

Lavender Variants
Lavender +10

#DDD6F8

221, 214, 248

$lavender+10

Lavender +5

#A08EEB

160, 142, 235

$lavender+5

Lavender

#6A50D7

106, 80, 215

$lavender

Lavender -5

#3C1FB0

60, 31, 176

$lavender-5

Lavender -10

#231268

35, 18, 104

$lavender-10

Gradients

Download Logos
Clicksend Malibu gradient
Malibu
Clicksend Turquoise gradient
Turquoise
Clicksend Apricot gradient
Apricot
Clicksend Tangerine gradient
Tangerine
Clicksend Cabaret gradient
Cabaret
Clicksend Orchid gradient
Orchid
Clicksend Lavender gradient
Lavender

3. Typography

Print Fonts

Similar to web fonts below, print fonts are available for download:

Download Fonts

Web Fonts

Our font families should be used for all communications, ensuring a consistent look and feel in all online and print literature.

Montserrat should be used for all header and subheader text, where Open Sans should be used all other copy (body, lists etc). Vollkorn should be used for Quotes and on all pages that have a personal or storytelling character (Blog, case studies, About us). To ensure a consistent look, make sure fonts are used in a consistent manner and the weights of the font have been considered, using heavier weights for headers and to highlight key messages.

Montserrat

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Montserrat

Weight: 400

Style: normal

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Montserrat

Weight: 700

Style: normal

Usage

HTML

                        <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
                    

CSS

                        font-family: "Montserrat", sans-serif;
                    

Open Sans

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Open Sans

Weight: 400

Style: normal

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Open Sans

Weight: 700

Style: normal

Usage

HTML

                    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
                

CSS

                        font-family: "Open Sans", sans-serif;
                    

Vollkorn

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Vollkorn

Weight: 400

Style: normal

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Vollkorn

Weight: 700

Style: normal

Usage

HTML

                        <link href="http://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet" type="text/css">
                    

CSS

                        font-family: "Vollkorn", sans-serif;
                    

Styles

Headings

H1

Text Color: #3E3771

Background: #FFFFFF

fontFamily: Montserrat

Size: 48px

Line Height: 1

Text Colors

Products

H2

Text Color: #3E3771

Background: #FFFFFF

fontFamily: Montserrat

Size: 40px

Line Height: 1

Text Colors

ClickSend Platform

H3

Text Color: #3E3771

Background: #FFFFFF

fontFamily: Montserrat

Size: 26px

Line Height: 1

Text Colors

Headings

H4

Text Color: #3E3771

Background: #FFFFFF

fontFamily: Montserrat

Size: 20px

Line Height: 1

Text Colors

Voice Gateway (illustrations icon)

H5

Text Color: #3E3771

Background: #FFFFFF

fontFamily: Montserrat

Size: 18px

Line Height: 1

Text Colors

Email to TTS (icons)

Button Text

Button Text

Text Color: #FF6A4B

Background: #FFFFFF

Font: Open Sans

Size: 14px

Line Height: 1

Transform: UPPERCASE

Text Colors

GET STARTED

Body Text

Subheadings

Text Color: #6B7399

Background: #FFFFFF

Font: Open Sans

Size: 20px

Line Height: 1.5

Weight: regular

Text Colors

See how startups and Fortune 500 companies have succeeded
Body text

Text Color: #6B7399

Background: #FFFFFF

Font: Open Sans

Size: 18px

Line Height: 1.5

Weight: regular

Text Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Icon text

Text Color: #6B7399

Background: #FFFFFF

Font: Open Sans

Size: 16px

Line Height: 1.5

Weight: regular

Text Colors

Send email marketing campaigns online using our quick and easy to use dashboard…
Quote

Text Color: #26A6F8

Background: #FFFFFF

Font: Vollkorn

Size: 21px

Line Height: 1.333

Weight: regular

Text Colors

Send email marketing campaigns online using our quick and easy to use dashboard…

4. Icons

We use font awesome for icons.

Here are some examples:

                    <i class="fa fa-envelope-o"></i>
                
                    <i class="fa fa-desktop"></i>