Style Guide
We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.
The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ...
Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.
Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.
Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.
Other uncategorised cookies are those that are being analysed and have not been classified into a category as yet.
Grid System
The table of grid system sizes
Device Width
≥ 992px
< 992px
< 767px
< 479px
Max Container Width
1200px
100%
100%
100%
Spacing System
Spacing - Desktop
130 px
100 px
130 px
- Paddings Tops for blocks - 130 px
- Inside of Blocks (between headlines and inside a content block) - 100 px
- Paddings Bottom for blocks - 130 px
Spacing - Tablet
100 px
60 px
100 px
- Paddings Tops for blocks - 100 px
- Inside of Blocks (between headlines and inside a content block) - 60 px
- Paddings Bottom for blocks - 100 px
Spacing - Mobile
80 px
60 px
80 px
- Paddings Tops for blocks - 80 px
- Inside of Blocks (between headlines and inside a content block) - 40 px
- Paddings Bottom for blocks - 80 px
Color Palette
Primary
#1c276d
#ff7eae
#213344
Secondary
#ffffff
#e5f33c
#f7f7f7
#eaf7fb
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Headers - Desktop
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Headers - Tablet
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Headers - Mobile
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body
Paragraph Small
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.
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.
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.