Style Guide & UI Elements

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
© Copyright n3tworth.com
TS
Size: 16px
© Copyright n3tworth.com
TM
Size: 18px
© Copyright n3tworth.com
TL  
Size: 22px
© Copyright n3tworth.com
TXL
Size: 28px
© Copyright n3tworth.com
TXXL 
Size: 36px
© Copyright n3tworth.com

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

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.

“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.

  1. Numbered List Item
  2. Numbered List Item
  3. Numbered List Item

- 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 nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

3. 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. This is a link.

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

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.

“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.

  1. Numbered List Item
  2. Numbered List Item
  3. Numbered List Item

- 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 nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

3. 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. This is a link.

Icons  /  Interface  /  Black
email link
phone link
Icons  /  Misc. /  Black
Icons  /  Misc. /  Colored
arrow right
Button
Primary
Button 2
Secondary
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

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);