Style Guide
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
Secondary
Brand
Tertiary
Brand
Brand BG
Typography
Heading 1
Looks like this.
Heading 2
Looks like this.
Heading 3
H3 Looks like this.
Heading 4
H4 Looks like this.
Heading 5
H5 Looks like this.
Heading 6
H6 Looks like this.
LARGE PARAGRAPH
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.
Text inline Link
Grid System
20%
25%
33%
50%
67%
80%
100%
Common Grid Layouts
20%
80%
100%
33%
33%
33%
33%
67%
80%
20%
25%
25%
25%
25%
Spacers System
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
112px
128px
184px
