contact us
contact
menu
close
HomeServicesSolutionsStoriesAbout

Styleguide

scroll to discover
FontsColorsHeadings & TitlesGlobal text classesrich textformmarginsglobal classes
Fonts

Lora

Font Type
Serif
Download Font

Switzer

Font Type
Sans-Serif
Download Font
Colors
Color Name
Black
Hex Code
#000000
Color Name
Beige
Hex Code
#f1ede8
HTML Headings

HTML Heading 1

Font-size
5.625 EM
Line Height
100%
Letter Spacing
-0.3 VW
Title XL
Font-size
4.5 REM
Line Height
100%
Letter Spacing
-0.3 VW
Title XL - Lora
Font-size
4.5 REM
Line Height
100%
Letter Spacing
-0.3 VW

HTML Heading 2

Font-size
3.875 EM
Line Height
110%
Letter Spacing
-0.15 VW
Title Large
Font-size
3.875 EM
Line Height
110%
Letter Spacing
-0.15 VW

HTML Heading 3

Font-size
3.625 EM
Line Height
110%
Letter Spacing
-0.15 VW
Title Medium
Font-size
3.625 EM
Line Height
110%
Letter Spacing
-0.15 VW

HTML Heading 4

Font-size
2.625 EM
Line Height
110%
Letter Spacing
-0.1 VW
Title Small
Font-size
2.625 EM
Line Height
110%
Letter Spacing
-0.1 VW
HTML Heading 5
Font-size
32 PX
Line Height
32. 64 PX
Letter Spacing
-0.1 VW
Title XSmall
Font-size
2 EM
Line Height
110%
Letter Spacing
-0.1 VW
HTML Heading 6
Font-size
1.75 EM
Line Height
110%
Letter Spacing
-0.075 VW
Title XXSmall
Font-size
1.75 EM
Line Height
110%
Letter Spacing
-0.075 VW
Global Text Classes

Default paragraph

Font-size
1.25 EM
Line Height
140%
Font Spacing
-0.05 VW

Paragraph Large

Font-size
2 EM 
Line Height
140%
Font Spacing
-0.1 VW

Paragraph Medium

Font-size
24 PX
Line Height
33.6 PX
Font Spacing
-0.075 VW

Paragraph Small

Font-size
1 EM
Line Height
140%
Font Spacing
-0.05 VW

Paragraph XSmall

Font-size
0.75 EM
Line Height
140%
Font Spacing
-0.025 VW

Text Style Italic

Text Style
Italic

Text Style All Caps

Text Style
Caps

Text Align Left

Text Align
Left

Text Align Center

Text Align
Center

Text Align Right

Text Align
Right

Text Color Beige

Text Color
Beige

Text Color Black

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 EM
Line Height
140%
Letter Spacing
-0.05 VW
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
  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
H6 rich text Button

‍

This is an example of a block of code

‍

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.
Margins
Margin Bottom - XXSmall
Spacing Size
Spacing Value
0.25 VW
Margin Bottom - XSmall
Spacing Size
Spacing Value
0.5 VW
Margin Bottom - Small
Spacing Size
Spacing Value
1 VW
Margin Bottom - Medium
Spacing Size
Spacing Value
1.5 VW
Margin Bottom - Large
Spacing Size
Spacing Value
2 VW
Margin Bottom - XLarge
Spacing Size
Spacing Value
2.5 VW
Margin Bottom - XXLarge
Spacing Size
Spacing Value
3 VW
Margin Bottom - Huge
Spacing Size
Spacing Value
4 VW
Margin Bottom - XHuge
Spacing Size
Spacing Value
5 VW
Margin Top - XXSmall
Spacing Size
Spacing Value
0.25 VW
Margin Top - XSmall
Spacing Size
Spacing Value
0.5 VW
Margin Top - Small
Spacing Size
Spacing Value
1 VW
Margin Top - Medium
Spacing Size
Spacing Value
1.5 VW
Margin Top - Large
Spacing Size
Spacing Value
2 VW
Margin Top - XLarge
Spacing Size
Spacing Value
2.5 VW
Margin Top - XXLarge
Spacing Size
Spacing Value
3 VW
Margin Top - Huge
Spacing Size
Spacing Value
4 VW
Margin Top - XHuge
Spacing Size
Spacing Value
5 VW
Global Classes

Default Wrapper

Margin Right & Left
Auto
Width
100%
Left & Right Padding
1.25 EM

Bg Color Black

Background Color
Black

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