Brand Guidelines

These are the official Intouch graphical resources and branding guidelines.
They can be used in digital or on paper for every touchpoint between our brand and the user.

Our Logo

The connecting triangles represent the businesses and people that come together through Intouch’s central account, which is reflected by the central point. They create the shape of an arrow alluding to moving forward.
intouch logo

Logo Colours

Use these alternate logos on dark-coloured backgrounds or for one-colour printing. Please select the primary logo above before using any of the other variations. Each colour has a version for use at small sizes under 400px. These versions come with the prefix SSS and must be used wherever the logo appears at less than 400px wide. Both print and web versions have also been included in the kit. Please use the appropriate version for your document.
full colour on dark grey
intouch black background
WHITE ON DARK GREY
intouch white
Regular Logo at 460px
intouch logo blue
MONOCHROME
intouch logo monochrome
DARK GREY ON WHITE (one-colour)
intouch logo grey
SSS Small Version at 460px
intouch logo small blue

Logomark

The logomark may also be used on it’s own in certain circumstances where the full logo is not possible. The blue mark is the preferable option and should always be used before the other two. The white version should be used next and reversed out of the brand’s main blue if possible.
Download Logo Kit
intouch blue icon
intouch monochrome icon

Logo Spacing

Please ensure there is one “O”s worth of spacing around the logo at all times. If for whatever reason you need to place the symbol and word intouch together, there should be two triangles worth of spacing between them.
intouch logo spacing
intouch colour palette

Primary
Colour Palette

These are the logo colours and so should be the first colours selected when creating branding materials. When creating files for web, RGB colour mode must be used. When creating files for print, CMYK colour mode must be used.
intouch yellow palette

Secondary
Colour Palette

These colours should be used to complement the colours above. Avoid using too many colours from the secondary palette in a design. We recommend using the primary colour palette plus two or less from the secondary palette. They should only be used as small accents in illustrations or for buttons.
intouch grey palette

Neutral
Colour Palette

Pages should be mostly white. Body text should be the darkest grey with headings medium grey. 100% black should never be used.

Typography

The body text should be set in Roboto Light. Headings should be set in either a large-sized Roboto Light or medium-sized Roboto Medium. Button text should be set in Roboto Regular.
Roboto Light
ABCdefghijklmnopq
1234567890
Roboto Regular
ABCdefghijklmnopq
1234567890
Roboto Medium
ABCdefghijklmnopq
1234567890

Intouch Connect Button

Add an Intouch Connect button to allow your users to connect with you and share their most recent contact details. We provide buttons for both dark and light backgrounds. Do you prefer CSS? All buttons are available in CSS on jsfiddle.
Intouch Autofill blue
Intouch Autofill dark
Intouch Autofill bright

Powered by Intouch Badges

These badges were designed to match bright and dark backround colours of your website. We would strongly suggest the badge to link to our Intouch.com website.
Powered by Intouch blue
Powered by Intouch dark
Powered by Intouch bright