Updated 2020/10/02

Our Brand

Curaprox: A product Brand of Curaden

Curaden’s vision is a healthier world, and its product brand Curaprox has been delivering this vision in a colourful and happy fashion since 1972.

Yes, Curaprox products are designed to fall in love with. And people do. First with its look, then with its function. Of course, good design is great for its own sake. But a good design also motivates. It helps to get people brushing, and this is our main goal.

We love to see people realise how effective our products are. Curaprox products are best in its class, non-traumatic, effective and accepted. And even better: most of them are made in Switzerland.

Foreword

The following guidelines show the basic principles of how to use the revised WebSupport identity.

The WebSupport identity is built as a set of components. When used according to the rules, together they form the distinctive visual expression of the WebSupport brand.

This kit outlines these parts, their structure and how they are linked, in order to help you communicate the WebSupport brand consistently across all channels.

Get on Board

Here is an overview of the individual elements that make up our brand. Think of them as tools in your brand toolkit.

Principal Assets

Standard logo
Our logo is the primary expression of our brand. It should feature prominently in all internal and external communications.

Primary Brand Colours
Colour plays an important role in brand recognition. We have selected a set of primary and secondary WebSupport colours.

Typeface
The primary brand typeface is Bebas Neue. It works to strengthen the brand look and feel and to express the WebSupport personality.

Visual Style
The WebSupport visual style can be used to deliver immediate impact by separating the logo and placing it as a dynamic element within the layout of the design.

Typeface
The primary brand typeface is Bebas Neue. It works to strengthen the brand look and feel and to express the WebSupport personality.

Visual Style
The WebSupport visual style can be used to deliver immediate impact by separating the logo and placing it as a dynamic element within the layout of the design.

Substitutes Assets

Stacked Logo
This version should be used for use when the legibility of the Standard Logo is compromised due to the scale of usage.

Partnership Logo
This version is intended for use when our brand has a dominant position in a partnership.

Symbol
The Standard Logo should be used on all corporate materials, whenever possible. However, there may be instances when branding is required, but where the space available does not allow the Standard Logo to be used effectively. In these rare cases, the symbol may be used on its own.

Secondary Brand Colours
Our secondary colours form the main palette for illustration and icons.

Supporting Typeface
Optimized for legibility, clarity, and consistency, SF Pro is the WebSupport body copy typeface.

Photography
Our photography reinforces our brand that is bright, confident, positive and inspiring.

Icon
To support our imagery and typography, we use fitting icons for clear navigation.

Pattern
To allow flexibility within our brand applications, we have created a pattern structure.

Updated 2020/10/22

Logo Test

Here is our logo, it hasn’t been changed much since 1979. We use Futura typeface at the beginning, and it still endures by its timeless modern look.

Our Logo

Download Logo Pack

Construction

Logo Variants

For grayscale printing, use either solid black or white versions. On dark backgrounds, use the solid white version.

Positive application

Negative application

Logo Sizing

Minimum size It is sometimes necessary to increase and decrease the logo depending on the print area. Always keep in proportion. Always ensure the text is legible.

Minimum Size Web

Minimum Size Print

Clear Space

The logo should always be separated from all other surrounding elements. This minimum isolated space ensures that headlines, text and other visual elements do not encroach on the logo. When using the logo, please comply with the regulations shown here.v
The specifications shown here represent the minimum protected area required and should be increased wherever possible.
The height of the word “Curaprox” dictates the size of the isolated area.

Logo Placement

The position of our logo is flexible and responds to the content of the application. Below are examples of how our logos could be placed.

Key visuals
Our Logo can appear in the the e. However, it is always important to observe and maintain the rules for proper clear space.

Format A4

Example A4

Stacked Logo
Our Stacked Logo can appear in the top-centre or bottom-centre. However, it is always important to observe and maintain the rules for proper clear space.

Updated 2020/10/22

Colour Test

Overview

The use of colour is an important aspect of the WebSupport identity. The primary colours are WS Navy, WS Red, WS Black and WS White. The logo colour should be shown in WS Black when the background colour is white or light, and in WS White when the background colour is black or dark.

Colour Specifications

Avoid using any other tints. Colour is a key element of this design, therefore it is important that Pantone colours are used to print the designs rather than CMYK.

Primary Brand Colours

The CURAPROX House Blue is served as our brand’s corporate colour for print, digital and environmental applications. The white background dominates always. Alternatively, we use a grey background (10% black)

Curaprox House Blue
RGB — 00 55 66
CMYK — 99 78 00 00
HEX — 003da6
PMS — 293 C

Grey
RGB — 221 86 86
CMYK — 0 78 57 0
HEX — xxxx
PMS — xxxx

Black
RGB — 0 0 0
CMYK — 0 0 0 100
HEX — 000000
PMS — Black

White
RGB — 255 255 255
CMYK — 0 0 0 0
HEX — FFFFFF
PMS — White

Secondary Colours

Besides the primary colours palette, secondary colours might be used depending on the projects and sub-brands. These diverse family colours are developed to support a broad range of communication needs. They help to build brand recognition through emotions of happiness

Curaprox Swiss Red
RGB — 77 95 109
CMYK — 73 55 43 20
HEX — AD5F6D
PMS — 485 C

Curaprox Hot Pink
RGB — 224 0 113
CMYK — 0 96 12 0
HEX — 7B97AC
PMS — 213 C

Curaprox Baby Pink
RGB — 225 110 169
CMYK — 2 60 0 0
HEX — AAB4BF
PMS — 231 C

Curaprox Lemon
RGB —225 327 0
CMYK — 0 0 100 0
HEX — F5F4EC
PMS — 151 C

Curaprox Orange
RGB — 225 104 33
CMYK — 0 62 90 90
HEX — DB8C3B
PMS — 715

Curaprox Apple Green
RGB — 149 214 0
CMYK — 50 0 100 0
HEX — 3A3A3A
PMS — 375 C

Curaprox Purple
RGB — 77 35 132
CMYK — 76 96 0 0
HEX — AD5F6D
PMS — 526 C

Curaprox Lavender
RGB — 134 92 165
CMYK — 42 62 0 0
HEX — 7B97AC
PMS — 528 C

Curaprox Sea
RGB — 219 140 59
CMYK — 0 53 86 0
HEX — DB8C3B
PMS — 715

Curaprox Turquoise
RGB — 0 156 157
CMYK — 100 40 0 0
HEX — AAB4BF
PMS — 320 C

Curaprox Tagline
RGB — 88 89 91
CMYK — 0 0 0 80
HEX — 7B97AC

Curaprox Light grey
RGB — 241 241 241
CMYK — 4 3 3 0
HEX — AAB4BF

Light Grey

Background Opacity Control

These examples should be used as a guide for selecting the correct option (Black or White) for your background.

Light Background
This is the preferred method of reproducing the logo.

Mid Background
The Black or White option of the logo may be used depending on the tone of the background.

Dark Background
The White option of the logo must be used on dark backgrounds.

Incorrect Use

Here are some examples of unacceptable colour misuse.

Do not use the logo that does not stand out from the background.

Do not use the logo in any colour other than white or black.

Test †itel

Updated 2020/09/21

Typography

Overview

At WebSupport, we use two typefaces: Bebas Neue (Fontfabric) and SF Pro (Apple). Both typefaces come in a variety of weights and offer the flexibility of use. Commitment to these typefaces will create a consistent and strong identity.

Where using these typefaces isn’t possible (for example in emails), we use Arial.

External Suppliers

You can download the typefaces at:

Primary Typeface

Bebas Neue

The primary brand typeface is Bebas Neue. It works to strengthen the brand look and feel and to express the WebSupport personality. The primary typeface is used for headings — not for body copy and buttons.

Download Bebas Neue

button

f

Supporting Typeface

SF Pro

Optimized for legibility, clarity, and consistency, SF Pro is the WebSupport body copy typeface.

Download SF Pro

Applying The Type

Main headlines can be aligned to the left, right or centred.

Left-aligned

Right-aligned

Centred

Numbers
Bebas Neue can be used for numbering and for number highlights.

Kerning and Tracking

Kerning is the adjustment of space between individual letters in a word. In most design applications you can easily set the application to optical kerning which allows the computer to adjust kerning for you — use this setting for all of our copy.

Tracking is the overall setting of the space between the letters in a body of copy. In most design applications you can easily adjust the tracking settings.

Bebas Neue
Always set Bebas Neue kerning to optical and track to plus 50px.

SF Pro
Always leave SF Pro kerning set to Auto and tracking at zero.

Leading

Leading is the space between the lines of type in a body of copy. Follow these guidelines to control your leading.

Note: This formula is a guide and should be followed when possible, but there may be applications when it is not appropriate.

Bebas Neue
The minimum leading point should always be set at two points above the chosen font size.

SF Pro
The minimum leading point should always be set at six points above the chosen font size.

Hierarchy

It is crucial to organize typography in a hierarchical system according to importance and use.

Awareness
In this example, the most important elements are made to hold the most attention through scale and type.

Call to Action
Even with just the smallest adjustments, the focus moves to the „Call to Action“ message.

Call to Action

There are two ways to create and signify a call to action for brand communications. Use SF Pro Bold for Action and for Buttons.

Label Button

Label buttons with what they do. Add a clear message of what happens after the click.

Text Button

The text buttons are text labels that fall outside of a block of text. The text should describe the action that will occur if a user clicks or taps a button.

Colour Palette

The colour palette is set to help communicate different moods. Below are examples of how to use it.

White and Navy Background

Purple on a navy background (this option is not approved)

Coloured Background

Incorrect Use

Below are examples of incorrect typography uses.

Do not use more than one colour on the same page unless you are working with graphs and charts.

Do not change kerning or tracking.

Do not use Bebas Neue for different levels of hierarchy.

Do not make different levels of hierarchy using the same size.

The Type System Recommendation

We use typography to present our design and content as clearly and efficiently as possible. The type system includes a range of contrasting styles that support the needs of WebSupport and its content.

Recommended Styles for Digital Use

Here are the 14 standard type system styles for all the digital formats.

You can access the type system using type styles in Sketch by downloading this file.

Category	Typeface	Font	Size	Letter Spacing	Line Height
Heading 1	Bebas Neue	Bold	56 px	20 px / 1 em	56 px
Heading 2	Bebas Neue	Bold	40 px	10 px / 0,5 em	40 px
Heading 3	Bebas Neue	Bold	32 px	10 px / 0,5 em	32 px
Heading 4	Bebas Neue	Bold	24 px	10 px / 0,5 em	24 px
Subtitle 1	SF Pro	Regular	32 px	Normal	40 px
Subtitle 2	SF Pro	Regular	24 px	Normal	32 px
Subtitle 3	SF Pro	Regular	18px	Normal	24 px
Subtitle 4	SF Pro	Bold	14 px	Normal	16 px
Body 1	SF Pro	Regular	14 px	Normal	16 px
Body 2	SF Pro	Regular	12 px	Normal	16 px
Button 1	SF Pro	Bold	12 px	60 px / 3 em	16 px
Button 2	SF Pro	Bold	12 px	10 px / 0,5 em	16 px
Caption	SF Pro	Regular	10 px	10 px / 0,5 em	16 px
Overline	SF Pro	Medium	9 px	20 px / 1 em	16 px

Download Typography Styles (Sketch)

Recommended Styles for Print Use

Here are the 12 standard type system styles for A4 print format.

Category	Typeface	Font	Size	Letter Spacing	Line Height
Heading 1	Bebas Neue	Bold	54 pt	50pt	56 pt
Heading 2	Bebas Neue	Bold	38 pt	50pt	40 pt
Heading 3	Bebas Neue	Bold	30 pt	50 pt	32 pt
Heading 4	Bebas Neue	Bold	22 pt	50 pt	24 pt
Subtitle 1	SF Pro	Regular	24 pt	Normal	30 pt
Subtitle 2	SF Pro	Regular	18 pt	Normal	22 pt
Subtitle 3	SF Pro	Bold	14 pt	Normal	20 pt
Body 1	SF Pro	Regular	12 pt	Normal	18 pt
Body 2	SF Pro	Regular	10 pt	Normal	16 pt
Body 3	SF Pro	Regular	8 pt	Normal	14 pt
Caption	SF Pro	Bold	10 pt	10 pt	16 pt
Overline	SF Pro	Medium	9 pt	20 pt	16 pt

Download Typography Styles (Illustrator)

Pairings

It is essential to maintain these type pairings. This allows for accuracy, persistence, and a strong hierarchy for all communications.

Recommended Pairings

Category	Typeface	Font	Size	Letter Spacing	Line Height
Heading 1	Bebas Neue	Bold	54 pt	50 pt	56 pt
Subtitle 1	SF Pro	Regular	24 pt	Normal	30 pt
Body 3	SF Pro	Regular	8 pt	Normal	14 pt
Caption	SF Pro	Bold	10 pt	10 pt	16 pt
Overline	SF Pro	Medium	9 pt	20 pt	16 pt

Category	Typeface	Font	Size	Letter Spacing	Line Height
Heading 2	Bebas Neue	Regular	38 pt	50 pt	40 pt
Subtitle 2	SF Pro	Regular	18 pt	Normal	22 pt
Body 3	SF Pro	Regular	8 pt	Normal	14 pt
Caption	SF Pro	Bold	10 pt	10 pt	16 pt

Category	Typeface	Font	Size	Letter Spacing	Line Height
Heading 1	Bebas Neue	Bold	56 px	20 px / 1 em	56 px
Subtitle 1	SF Pro	Regular	24 px	Normal	32 px
Body 2	SF Pro	Regular	12 px	Normal	16 px
Caption	SF Pro	Regular	10 px	10 px / 0,5 em	16 px
Overline	SF Pro	Medium	9 px	20 px / 1 em	16 px

Examples

Updated 2020/08/18

Visual Style

Overview

Never static, always scalable, the visual style is a brand-building element that can be used in multiple ways.

Construction

These are the six steps we follow to create a basic visual style.

Step 1
Select format. This could be either portrait or landscape.

Step 2
Add a grid of squares (not to be confused with grid layouts) that always fits the screen no matter the width or height of the screen. Use this fixed sizing scale: 8x8px on web and 8x8mm on print.