Style Guide

This page contains all styles and components used throught the website. This page help you to change any style from this style guide and it will apply throughout the site.

Colors

Grey Scale
100%
Grey Scale
80%
Grey Scale
60%
Grey Scale
40%
Grey Scale
20%
Grey Scale
15%
Grey Scale
8%
White Scale
100%
White Scale
75%
White Scale
50%
White Scale
25%

COLORED

Brand
Primary
Brand
Brand BG

Typography

Heading 1

Looks like this.

Heading 2

Looks like this.

Heading 3

Looks like this.

Heading 4

Looks like this.

Heading 5

H5 Looks like this.

Heading 6

H6 Looks like this.

LARGE PARAGRAPH – Light

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

LARGE PARAGRAPH – Medium

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

PARAGRAPH

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Small PARAGRAPH

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Extra Small PARAGRAPH

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Decorative

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Decorative Large

98%

Text inline Link

Rich Text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Buttons

Form Elements

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Buttons

Form Elements

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Grid System

Use this Grid for creating new layouts. You can combine this percentages with each other for creating uniq layouts.

20%
25%
33%
50%
67%
80%
100%

Spacers System

Use this additional spaces if needed.
You can easily choose predefined space just input combo class that you need or create your own.

8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
112px
128px
184px