Fixed_Assets_Header_BG

B2C Patterns

One of our most distinctive design elements is the pattern. Patterns vary as our colours do. You can recolour the pattern if needed, preserving the rule of 3 colours in one pattern.

Our colourful patterns are made up of fluid lines and bold shapes. that can be used in a versatile way. These patterns must always feel smooth and fluid.

When used all three colours of a background should be visible, but it’s okay if you can’t recognise the shape of a body part. When you combine one of the backgrounds with other elements of the brand, make sure that all elements fit in the colour palette used for the background. So stick to only three colours.

B2C _Patterns

Crop examples

Our patterns are very versatile and lend themselves to different formats. Below are just a few examples of how the patterns work in portrait, landscape and square formats. These will come in useful for display banners, social tiles and printed collateral. To allow flexibility, the patterns can be rotated or flipped to fit the composition.

B2C _Patterns2

B2B Patterns

our B2B patterns follow a similar look and feel however they are made from salon tools to speak to our partners....

B2B_Patterns

Crop examples

Our patterns are very versatile and lend themselves to different formats. Below are just a few examples of how the patterns work in portrait, landscape and square formats. These will come in useful for display banners, social tiles and printed collateral. To allow flexibility, the patterns can be rotated or flipped to fit the composition.

B2B_Patterns_Crops

Movement lines

Movement lines are a very distinctive Treatwell brand mark. They are colourful lines added on top of our images and used in our videos. Lines on the photos of a person represent the movement of a model. When making them, don’t just outline the person or use really short or overtly long lines. Try to make the lines work together with the model by overlapping it and follow the movement. One to two lines can be added on an image. If two lines are used, they need to be the same colour and weight. Also make the length of the lines different so you get a longer and shorter line. Lines should not be placed over or in front of the faces.

Movement lines can, but don’t have to be used on photos. In certain cases, a visual is so complex that the movement line adds only more chaos to it. Lines should not be over used.

We can use animated lines in combination with the text and other animations that don’t include footage of the models.

Movement line misuses

(what not to do)

Here are some things you should avoid when using or making the movement lines:

Movement_lines_misuses

DO NOT use very short lines.

Movement_lines_misuses4

DO NOT different colour or weight lines on the same image.

Movement_lines_misuses2

DO NOT use very long lines.

Movement_lines_misuses5

DO NOT place the lines over a model’s face.

Movement_lines_misuses3

DO NOT use more than 2 lines per image.

Movement_lines_misuses6

DO NOT use lines that are too thick.

NEVER use a movement line with one of our patterns.

Movement_lines_misuses9

Logo in use

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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

B2B Connect logo

Our master brand logo plays a central role in the Treatwell Group brand world and must feature on every piece of  B2C communication from large above the line campaigns to branded pens. It is also the foundation of our other logos. Wherever possible our primary logo should be used and for instances where it isn’t fit for purpose we have a secondary version.

Please go to the colour usage section for more guidance on colour.

Treatwell Connect_logotype-07

Clear space
It’s important that an area of clear space is left around our logo, to allow for legibility and clear stand out. Clear space is determined by using the ‘L’ from our logo as a unit of measurement, as shown. As shown on the right, we must always leave a minimum of the 1 times the width of the letter ‘L’ from the logo.

This area should be kept free of any other logos text and imagery. This space is the minimum amount and should be increased wherever possible.

Treatwell Connect_logotype-01
Treatwell Connect_logotype-04

Minimum size
To ensure legibility and brand stand out please do not use our logo below 14 mm wide for print and 50px wide for digital.

 

Primary_logotype-min-size-04
Primary_logotype-min-size-05

B2B Primary
Connect Pro log
o

 

Our master brand logo plays a central role in the Treatwell Group brand world and must feature on every piece of  B2C communication from large above the line campaigns to branded pens. It is also the foundation of our other logos. Wherever possible our primary logo should be used and for instances where it isn’t fit for purpose we have a secondary version.

Please go to the colour usage section for more guidance on colour.

Treatwell Connect_logotype-06

Clear space
It’s important that an area of clear space is left around our logo, to allow for legibility and clear stand out. Clear space is determined by using the ‘L’ from our logo as a unit of measurement, as shown. As shown on the right, we must always leave a minimum of the 1 times the width of the letter ‘L’ from the logo.

This area should be kept free of any other logos text and imagery. This space is the minimum amount and should be increased wherever possible.

Treatwell Connect_Pro_Primary_logo-01
Treatwell Connect_logotype-05

Minimum size
To ensure legibility and brand stand out please do not use our logo below 14 mm wide for print and 50px wide for digital.

 

Primary_logotype-min-size-04
Primary_logotype-min-size-05

B2B Secondary
Connect Pro log
o

 

Our master brand logo plays a central role in the Treatwell Group brand world and must feature on every piece of  B2C communication from large above the line campaigns to branded pens. It is also the foundation of our other logos. Wherever possible our primary logo should be used and for instances where it isn’t fit for purpose we have a secondary version.

Please go to the colour usage section for more guidance on colour.

Treatwell Connect_Secondary_logo-02

Clear space
It’s important that an area of clear space is left around our logo, to allow for legibility and clear stand out. Clear space is determined by using the ‘L’ from our logo as a unit of measurement, as shown. As shown on the right, we must always leave a minimum of the 1 times the width of the letter ‘L’ from the logo.

This area should be kept free of any other logos text and imagery. This space is the minimum amount and should be increased wherever possible.

Treatwell Connect_Secondary_logo-01

Minimum size
To ensure legibility and brand stand out please do not use our logo below 14 mm wide for print and 50px wide for digital.

 

Primary_logotype-min-size-04
Primary_logotype-min-size-05


Positioning & layout

Print placement

To provide flexibility we can place our logo in four
places on both p
ortrait  and landscape formats.

1. Top left corner
2. Top right corner
3. Bottom left corner
4. Bottom right corner

Please ensure the logo follows
the clearspace guidance.


Logo colour usage

xxx

We have a few ways to use colour with our B2C logos. Scroll through to see the options.

1. White on a brand colour from our palette.
2. We want our logo to be as visible as possible. When using it on photographs, please choose a colour which ensures the best possible legibility.

Please ensure the logo follows
the clearspace guidance.


Logo colour usage

xxx

We have a few ways to use colour with our B2C logos. Scroll through to see the options.

1. White on a brand colour from our palette.
2. We want our logo to be as visible as possible. When using it on photographs, please choose a colour which ensures the best possible legibility.

Please ensure the logo follows
the clearspace guidance.


Logo colour guidance

xxx

We have a few ways to use colour with our B2C logos. Scroll through to see the options.

1. White on a brand colour from our palette.
2. We want our logo to be as visible as possible. When using it on photographs, please choose a colour which ensures the best possible legibility.

Please ensure the logo follows
the clearspace guidance.

Our colour system

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 nisi ut aliquip ex ea commodo consequat. 

Please go to the colour usage section for more guidance on colour.

Primary colour palette

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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

Please go to the colour usage section for more guidance on colour.

Primary_Colours
Primary_Colours3
Primary_Colours4
Primary_Colours5
Primary_Colours6
Primary_Colours2
Primary_Colours7

Secondary colour palette

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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

Please go to the colour usage section for more guidance on colour.

Dark orange

Dark pink

Dark yellow

Dark beige

Dark green

Dark teal

Dark navy

Secondary_Colours_Dark2

Light orange

Secondary_Colours_Light
Secondary_Colours_Dark4

Light pink

Secondary_Colours_Light2
Secondary_Colours_Dark6

Light yellow

Secondary_Colours_Light3
Secondary_Colours_Dark8

Light beige

Secondary_Colours_Light4
Secondary_Colours_Dark10

Light green

Secondary_Colours_Light5
Secondary_Colours_Dark14

Light teal

Secondary_Colours_Light7
Secondary_Colours_Dark12

Light navy

Secondary_Colours_Light6

Product colour guidance

For colours guidance around product please follow the link below.

Max_colours

Colour usage 3 maximum 

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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

Please go to the colour usage section for more guidance on colour.

Colour in use

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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Our typefaces

Our bespoke typeface is part of our brand personality....

Primary typeface

Treatwell sans is 

 

 

our bespoke typeface

 

 

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 nisi ut aliquip ex ea commodo consequat. 

Please go to the colour usage section for more guidance on colour.

Aa  Bb  Cc  Dd  Ee  Ff  Gg  Hg  Ii  Jj  Kk  Ll  Mm  Nn  Oo  Pp  Qq  Rr  Ss  Tt  Uu  Vv Ww  Xx Yy  Zz
1234567890

Bold  Italic  Regular Italic

Web typeface

Montserrat is our 

 

 

web safe typeface

 

 

Montserrat is only to be used as a fallback if Treatwell Sans is not available.

Montserrat is a free Google typeface with no restrictions on licensing.

Montserrat can be downloaded at
https://fonts.google.com/specimen/Montserrat/

Aa  Bb  Cc  Dd  Ee  Ff  Gg  Hg  Ii  Jj  Kk  Ll  Mm  Nn  Oo  Pp  Qq  Rr  Ss  Tt  Uu  Vv Ww  Xx Yy  Zz
1234567890

Bold  Italic  Regular Italic 

Typesetting

Treatwell sans is 

 

 

our bespoke typeface

 

 

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 nisi ut aliquip ex ea commodo consequat. 

Please go to the colour usage section for more guidance on colour.

Product type guidance

For colours guidance around product please follow the link below.

Type in use

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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.