Meta

Grid System

The table of grid system sizes

Device Width

≥ 1920px

≥ 992px

< 992px

< 767px

< 479px

Max Container Width

1440px

1200px

100%

100%

100%

Spacing System

Spacing - Desktop

illustration

150 px

150 px

50 px

- Paddings Tops and Bottom for blocks -150 px
- Inside of Blocks (between headlines and inside a content block) - 50px

Spacing - Tablet

illustration

80 px

40 px

80  px

- Paddings Tops and Bottom for blocks -80 px
- Inside of Blocks (between headlines and inside a content block) - 40px

Spacing - Mobile

illustration

60 px

30 px

60 px

- Paddings Tops and Bottom for blocks - 60 px
- Inside of Blocks (between headlines and inside a content block) - 30px

Typography

Headers - Desktop

Heading 1

Font:

Kaneda

Weight:

Black

Font Size:

84px

Heading 2

Font:

Kaneda

Weight:

Black

Font Size:

64px

Heading 3

Font:

Kaneda

Weight:

Black

Font Size:

50px

Heading 4

Font:

Kaneda

Weight:

Bold

Font Size:

36px

Heading 5

Font:

Kaneda

Weight:

Bold

Font Size:

30px

Heading 6

Font:

Kaneda

Weight:

Bold

Font Size:

24px

Subheading

Font:

Sarvatrik Latin

Weight:

Thin

Font Size:

18px

Headers - Tablet/Mobile

Heading 1

Font:

Kaneda

Weight:

Black

Font Size:

60px

Heading 2

Font:

Kaneda

Weight:

Black

Font Size:

48px

Heading 3

Font:

Kaneda

Weight:

Black

Font Size:

42px

Heading 4

Font:

Kaneda

Weight:

Bold

Font Size:

36px

Heading 5

Font:

Kaneda

Weight:

Bold

Font Size:

30px

Heading 6

Font:

Kaneda

Weight:

Bold

Font Size:

24px

Subheading

Font:

Sarvatrik Latin

Weight:

Thin

Font Size:

16px

Body - Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Body - Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Lists

  • List item
  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
  4. List item

BlockQuote

Pellentesque non cursus leo, eu vestibulum ipsum. Aliquam in elit lorem. Aliquam vulputate velit a dignissim mattis. Mauris ac semper nisi, vitae gravida tortor. Maecenas vestibulum massa a ultricies.

Rich Text

Aliquam vulputate velit a dignissim mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta, sem quis consequat scelerisque, velit urna pellentesque velit, ut posuere diam sapien in purus. Morbi id lacinia ex. Suspendisse ante libero, feugiat vel nisl semper, euismod iaculis nunc. Donec feugiat pulvinar magna, a luctus elit consectetur tempor. Phasellus molestie bibendum lectus, et aliquam neque iaculis nec. Sed non porttitor nulla.

Sed non metus tincidunt.

Cras placerat malesuada mi, sed suscipit arcu posuere a. Etiam sed dui ac justo pharetra finibus vel at dolor. Cras eget risus rhoncus, euismod dui non, dapibus mauris. Praesent porta dolor turpis, non blandit velit placerat a. Nunc auctor facilisis est, sed faucibus nulla consequat porta. Nunc fringilla sem in dolor dictum eleifend.

Nulla mollis orci magna.

Sed non metus tincidunt, egestas felis a, imperdiet sapien. Mauris rutrum tortor et massa hendrerit imperdiet. Nulla mollis orci magna, in consectetur leo consectetur non. Aliquam ut imperdiet felis, vel pharetra mauris.

Nulla mollis orci magna.

Colors

Thorns Red

#C8102E

Rich Black

#010203

White

#ffffff

Links

Links w/icon

Buttons

Primary Button Angled

Secondary Button