Style Guide

Typography

  • Heading Font : Poppins
  • Button Font : Roboto
  • Body Font : Roboto

Heading 1

  • Desktop Font Size : 55px
  • Mobile Font Size : 38px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 62px

Heading 2

  • Desktop Font Size : 46px
  • Mobile Font Size : 30px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 52px

Heading 3

  • Desktop Font Size : 38px
  • Mobile Font Size : 26px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 44px

Heading 4

  • Desktop Font Size : 24px
  • Mobile Font Size : 20px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 28px
Heading 5
  • Desktop Font Size : 20px
  • Mobile Font Size : 18px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 1em
Heading 6
  • Desktop Font Size : 18px
  • Mobile Font Size : 16px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 1em

Site Width

  • Container: 1180px
  • Default Section Padding: 20px(right, left) Top and bottom padding depends Recommended Padding values: 0,10, 20,40,80,160
  • Default Column padding: 20px

Color pallete

Primary
Secondary
Text
Accent
Greyscale

#000000

#D2D2D2

#F1F1F1

#FFFFFF

Additional Colors that may appear

#192747
#890020

Buttons

Primary
Sample Button
  • Font Size : 16px
  • Font Weight : Normal
  • Font Style : Normal
  • Line Height : 1em
  • Background Color : #5aa0d7
  • Font Color : #ffffff
Secondary
Sample Button
  • Font Size : 16px
  • Font Weight : Normal
  • Font Style : Normal
  • Line Height : 1em
  • Background Color : #5aa0d7
  • Font Color : #ffffff

Body 1 The quick brown fox jumps over the lazy dog

  • Desktop Font Size : 18px
  • Mobile Font Size : 16px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 30px

Body 2 The quick brown fox jumps over the lazy dog

  • Desktop Font Size : 16px
  • Mobile Font Size : 14px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 26px

Body 3 The quick brown fox jumps over the lazy dog

  • Desktop Font Size : 14px
  • Mobile Font Size : 14px
  • Font Weight : Bold
  • Font Style : Normal
  • Line Height : 20px

Paragraph

This is a sample sentence with a body font, Font Size of 18px, Line height of 1.8em, Normal Font Weight and Normal Font style. This is a sample link with a body font, Font Size of 18px, Line height of 1.8em, Normal Font Weight and Normal Font style.

This is a sample sentence with a body font, Font Size of 18px, Line height of 1.8em, Normal Font Weight and Normal Font style. This is a sample link with a body font, Font Size of 18px, Line height of 1.8em, Normal Font Weight and Normal Font style.

This second sentence is a sample of bold font.

 

This sentence is a sample of italic font.

 

This is a sample sentence with hyperlink.