Welcome to the style guide for your website! You can use this page to quickly make changes to things such as fonts, text sizes, colors, buttons, and more. These changes will then be applied across your website. Just be sure to edit global styles and classes. Learn more.

To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.

If you have any questions, please contact your site administrator.

Brand Colors

White

R 255
G 255
B 255

Hex
#FFFFFF

Cadet Blue

R 75
G 163
B 171

Hex
#4BA3AB

Cadmium Orange

R 241
G 137
B 41

Hex
#F18929

Platinum

R 226
G 226
B 226

Hex
#E2E2E2

System Colors

Body

R 245
G 245
B 245

Hex
#F5F5F5

Greyed Out

R 119
G 119
B 119

Hex
#777777

Text

R 51
G 51
B 51

Hex
#333333

Ming

R 42
G 104
B 109

Hex
#2A686D

Rajah

R 248
G 171
B 100

Hex
#F8AB64

Error

R 219
G 34
B 42

Hex
#DB222A

Alt. Section

R 233
G 223
B 208

Hex
#E9DFD0

DL
Desktop size: 92px
Mobile size: 54px

Display LG

DM
Desktop size: 76px
Mobile size: 44px

Display MD

DS
‍Desktop size: 66px
Mobile size: 36px

Display SM

H1
Size: 54px

Heading 1

H2
Size: 44px

Heading 2

H3
Size: 36px

Heading 3

H4
Size: 28px

Heading 4

H5
Size: 22px

Heading 5

H6
Size: 18px

Heading 6

tEXT cOLORS

‍Neutral Colored Text

T1 Rich Black FOGRA 39

T2 Grey

T3 Platinum

T4 White

Solid Colored Text

TO Orange

TLO Light Orange

TC Cadet

TM Ming

TR Red

Plain text

Badge w

Badge 4

TXS
Size: 14px

TS
‍Size: 16px

TM
Size: 18px

TL
Size: 22px

TXL
Size: 28px

TXXL
Size: 36px

Paragraphs

Paragraph XS
Size: 14px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod est tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimego veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex each ab commodo divad consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph SM
Size: 18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad miniatom veniam, quis nostrud exercitt cupidatat non proident, in culpa qui officia deserunt mollit anim id est laborum.

Paragraph MD
Size: 22px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adim veniam, quids nostrud exercitation cupidatat non proident, sunt in culpa qui offici deserunt mollit anim id est laborum.

Paragraph LG
Size: 25px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Excepteur sint occaecat cupidatat non proident, inta caulpa qui officia deserunt mollit anim id est laborum.

Paragraph XL
Size: 28px

Lorem ipsum dolor sit amet, consectetur adipiscing, sedowip dolore eiusmod tempor incididunt ut labore etdolore magna aliqua. Apac excepteur sint occaecat, sunt in tango. Excepteur sint occaecat cupidatat proident.

Paragraph XXL
Size: 36px

Lorem ipsum dolor sit amet, consectetur adipiscing, sedowip dolore eiusmod tempor incididunt ut labore etdolore magna aliqua. Apac excepteur sint occaecat, sunt in tango.

Rich Text

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sunt in culpa qui officia deserunt mollit anim id est laborum.

1. Main Point

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. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Bold Text:

Ordered List Item
Ordered List Item
Ordered List Item
Ordered List Item

- Supporting paragraph

‍

“Typefaces are to the written word what different dialects are to different languages.” ― Steven Heller

2. Main Point

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 italics consequat. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

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.

Numbered List Item
Numbered List Item
Numbered List Item

- Supporting paragraph.

3. Main Point

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sunt in culpa qui officia deserunt mollit anim id est laborum.

1. Main Point

- Supporting paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Bold Text:

Ordered List Item
Ordered List Item
Ordered List Item
Ordered List Item

- Supporting paragraph

‍

“Typefaces are to the written word what different dialects are to different languages.” ― Steven Heller

2. Main Point

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 italics consequat. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

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.

Numbered List Item
Numbered List Item
Numbered List Item

- Supporting paragraph.

3. Main Point

Icons / Interface / Black

Icons / Social / Black

 Share  Share Tweet Save Share

Icons / Misc. / Black

Icons / Misc. / Colored

Button
Primary

Button 1

Button 2
Secondary

Button 2

Button 3
Text LInk

Link Text Link Text Download Brochure

Form Block / Text Fields / Inputs

Thank you! Your submission has been received!
We'll get back to you within 48 hours.

Oops! Something went wrong while submitting the form.

Spacers

10px

15px

20px

30px

Layout

Section

Page Width

Section Padding

Heading

Exit Intent Popup

How it works

When mouse leaves the screen (only on desktop)

Fallback

After scrolling 50% of page height
After 10 seconds

Required elements (DO NOT TOUCH)

Only requirement is to keep these 3 elements named exactly as follows: popup__wrapper, popup__close-btn, popup__js-code. They are required for the JavaScript to work

‍

To change the settings of the popup:

You can edit the JavaScript code in the popup__js-code embed element to change the popup behavior:

To change the number of days before showing the popup again after it is closed ; change the number 3 in this code line:

Cookies.set('popup-wf', 'value', { expires: 3 })

To change the percentage of screen scrolled before it shows the popup ; change the number 50 in the below code line:

if(getScrollPercent()>50)

To change the number of milliseconds before showing the popup ; change the number 10000 in the below code line:

setTimeout("showWfPopup()", 10000);

Style Guide & UI Elements

Brand Colors

White

Cadet Blue

Cadmium Orange

Platinum

System Colors

Body

Greyed Out

Text

Ming

Rajah

Error

Alt. Section

Display LG

Display MD

Display SM

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

tEXT cOLORS

Plain text

Paragraphs

Rich Text

Intro

1. Main Point

- Supporting paragraph

- Supporting paragraph

2. Main Point

- Supporting paragraph

- Supporting paragraph.

3. Main Point

Intro

1. Main Point

- Supporting paragraph

- Supporting paragraph

2. Main Point

- Supporting paragraph

- Supporting paragraph.

3. Main Point

Heading

Heading

How it works

Required elements (DO NOT TOUCH)

To change the settings of the popup:

To change the number of days before showing the popup again after it is closed ; change the number 3 in this code line:

To change the percentage of screen scrolled before it shows the popup ; change the number 50 in the below code line:

To change the number of milliseconds before showing the popup ; change the number 10000 in the below code line:

WEBINAR STARTS IN:

This event is over. Thanks to all who attended!

WAIT!

INTRODUCTION TO MARKETING