Complete
Styleguide

FontsColorsHeadings & TitlesGlobal text classesButtonsrich textformglobal classes
Fonts

New Baskerville

Font Type
Serif

Helvetica

Font Type
Sans-serif
Colors
Color Name
Blue
Hex Code
#2680ff
Color Name
Black
Hex Code
#000000
Color Name
White
Hex Code
#FFFFFF
Color Name
Grey
Hex Code
#3b3b3b
Color Name
Grey 300
Hex Code
#d7d7d7
Color Name
Grey 200
Hex Code
#ebebeb
Color Name
Grey 100
Hex Code
#f4f4f4
Headings

HTML Heading 1

Heading 1
Font-size
7.5EM
Line Height
0.9
Font Spacing
-2%

HTML Heading 2

Heading 2
Font-size
5EM
Line Height
1
Font Spacing
-2%

HTML Heading 3

Heading 3
Font-size
4.5EM
Line Height
1.1
Font Spacing
-2%

HTML Heading 4

Heading 4
Font-size
4EM
Line Height
1
Font Spacing
-2%
HTML Heading 5
Heading 5
Font-size
3.5EM
Line Height
1
Font Spacing
-2%
HTML Heading 6
Heading 6
Font-size
3EM
Line Height
1
Font Spacing
-2%
Global Text Classes
Subheading 1
Font-size
2.5EM
Line Height
1
Font Spacing
-2%
Subheading 2
Font-size
2EM
Line Height
1.1
Font Spacing
-2%
Subheading 3
Font-size
1.875EM
Line Height
1.1
Font Spacing
-2%

Paragraph XLarge

Font-size
2EM
Line Height
1.3
Font Spacing
-2%

Paragraph Large

Font-size
1.5EM
Line Height
1.3
Font Spacing
-2%

Paragraph Medium

Font-size
1.125EM
Line Height
1.3
Font Spacing
-2%
Paragraph default
Font-size
1EM
Line Height
1.3
Font Spacing
-1%

Paragraph Small

Font-size
0.9375EM
Line Height
1.3
Font Spacing
-1%
Text gradient on Light 1
Class Name
txt-gradient_dark1
Gradient Infos
Linear Gradient - 90°
0% - #727272
52% - #000000
100% - #727272
Text gradient on Light 2
Class Name
txt-gradient_dark1
Gradient Infos
Linear Gradient - 82°
0% - #606060
52% - #525252
100% - #000000
Text gradient on Dark 1
Class Name
txt-gradient_dark1
Gradient Infos
Linear Gradient - 90°
0% - #FFFFFF
52% - #8E8E8E
100% - #E1E1E1

+ 

A black overlay (20% opacity)  is applied on the gradient
Text gradient on Dark 2
Class Name
txt-gradient_dark1
Gradient Infos
Linear Gradient - 82°
0% - #8E8E8E  
44% - #A2A2A2
80% - #E1E1E1
Buttons
Component Name
Button - Blue
Component Name
Button - Border on Dark
Button Label
Component Name
Button - Gradient
Button Label
Component Name
Button - Gradient on Light
Rich Text Element

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

‍

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

Agricultural silos and equipment at sunset
Lorem ipsum sim dolor amet

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit
Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

  • Et molestias atque et repellat repellat
  • Et molestias atque et repellat repellat
  • Et molestias atque et repellat repellat
  • Et molestias atque et repellat repellat
Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

  1. Lorem ispum sim dolor amet nec consegir
  2. Lorem ispum sim dolor amet nec consegir
  3. Lorem ispum sim dolor amet nec consegir
  4. Lorem ispum sim dolor amet nec consegir
Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Global Classes

Blue Gradient

Gradient Breakdown
Linear Gradient - 180°
0% - #181528  - 75% Opacity
52% - #2862a3 - 75% Opacity
100% - #181528 - 75% Opacity

Gradient should also be set to 35% Opacity

Gradient - On Light 1

Gradient Breakdown
Linear Gradient - 90°
0% - #FFFFFF
52% - #8a8a8a
100% - #E1E1E1

Gradient - On Light 2

Gradient Breakdown
Linear Gradient - 90°
0% - #FFFFFF
52% - #8a8a8a
100% - #E1E1E1

+ 

A black overlay (20% opacity)  is applied on the gradient

Default Wrapper

Margin Right & Left
Auto
Width
90%
Max Width
80 REM

Div Hide

Overflow
Hidden

Div Flex

Display
Flex Horizontal

Div Relative

Position
Relative

Div Z-Index 0

Z-Index
0

Div Z-Index 1

Z-Index
1

Div Z-Index 2

Z-Index
2

Align Right

Margin Left
Auto

Align Left

Margin Right
Auto

Hide Tablet

On Tablet (and smaller screen sizes)
Display : None

Hide Mobile Landscape

On Mobile Landscape (and smaller screen sizes)
Display : None

Hide Mobile Portrait

On Mobile Portrait
Display : None

Hide Full

On Mobile Portrait
Display : None