Complete
Styleguide

FontsColorsHeadings & TitlesGlobal text classesrich textformglobal classes
Fonts

Gloock

Font Type
Serif
Download Font

Cabinet Grotesk

Font Type
Sans-Serif
Download Font
Colors
Color Name
Light Grey
Hex Code
#e2e2e2
Color Name
Grey
Hex Code
#6b6b6b
Color Name
Pure White
Hex Code
#ffffff
HTML Headings

HTML Heading 1

Font-size
4.5 REM
Line Height
100%
Font Spacing
-0.1 REM
Title XL
Font-size
4.5 REM
Line Height
100%
Font Spacing
-0.1 REM

HTML Heading 2

Font-size
2.625 REM
Line Height
100%
Font Spacing
-0.1 REM
Title Large
Font-size
2.625 REM
Line Height
100%
Font Spacing
-0.1 REM

HTML Heading 3

Font-size
2.125 REM
Line Height
100%
Font Spacing
-0.05 REM
Title Medium
Font-size
2.125 REM
Line Height
100%
Font Spacing
-0.05 REM

HTML Heading 4

Font-size
1.75 REM
Line Height
100%
Font Spacing
-0.04 REM
Title Small
Font-size
1.75 REM
Line Height
100%
Font Spacing
-0.04 REM
HTML Heading 5
Font-size
1.5 REM
Line Height
100%
Font Spacing
-0.02 REM
Title XSmall
Font-size
1.5 REM
Line Height
100%
Font Spacing
-0.02 REM
HTML Heading 6
Font-size
1.25 REM
Line Height
100%
Font Spacing
-0.02 REM
Title XXSmall
Font-size
1.25 REM
Line Height
100%
Font Spacing
-0.02 REM
Global Text Classes

Default paragraph

Font-size
1 REM
Line Height
100%
Font Spacing
-0.01 REM

Paragraph Large

Font-size
1.25 REM 
Line Height
100%
Font Spacing
-0.01 REM

Paragraph Small

Font-size
0.875 REM
Line Height
100%
Font Spacing
-0.01 REM

Paragraph XSmall

Font-size
0.75 REM
Line Height
100%
Font Spacing
-0.01 REM

Overline Default

Font-size
0.75 REM
Line Height
100%
Font Spacing
-0.01 REM

Overline large

Font-size
0.75 REM
Line Height
100%
Font Spacing
-0.01 REM

Text Align Left

Text Align
Left

Text Align Center

Text Align
Center

Text Align Right

Text Align
Right

Text Align Right

Text Align
Right

Text Color Grey

Text Color
Grey

Text Color Light Grey

Text Color
Light Grey
  • This an unordered list item
  • This an unordered list item
  • This an unordered list item
  • This an unordered list item
List Element Padding
Left : 1.5 EM
Bottom : 1 EM
List Item Margin
Bottom : 0.5 EM
  1. This an ordered list item
  2. This an ordered list item
  3. This an ordered list item
  4. This an ordered list item
List Element Padding
Left : 1.5 EM
Bottom : 1 EM
List Item Margin
Bottom : 0.5 EM
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
Block Quote Element Padding
All : 1.5 EM
Font-size
1.25 REM
Line Height
120%
Letter Spacing
-0.02 REM
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!

Lorem ipsum sim dolor amet nec consegir

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
Infos about Rich Text Element
This Element comes with a specific class named "Default Rich Text". It allows to have different styles from the HTML text headings. 
If you want to have the exact same styles as those tags, just remove the class on the Rich Text Element above :)
Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Global Classes

Default Wrapper

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

Bg Color White

Background Color
White

Bg Color Light Grey

Background Color
Light Grey

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