Style Guide

Basic design system for site-wide styling.

Select Option

Typeface

Font
Primary
Aloevera Display
Aloevera Display /  Font weights
Weight
400 - Normal
Aa
Aloevera Display /  Font Charachters
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b b d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ?
Font
Secondary
Lato
Lato /  Font weights
Weight
300 - Light
Aa
Weight
400 - Normal
Aa
Weight
700- Bold
Aa
Lato /  Font Charachters
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b b d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ?

Color Palettes

Color
Brand V1
Color
Brand V2
Color
Brand V3
Color
Brand V4
Color
Brand V5
Color
Brand V6
Color
Brand V7
Color
Brand V8
Color
Brand V9
Color
Brand V10
Color
Brand V11
Color
Brand V12
Color
Brand V13
Color
Brand V14

Headings

Typescale
Typescale /  1.250 Major Third
Heading Settings - H1
Size: 48.83px
No class added

Heading 1

Heading Settings - H2
Size: 39.06px
No class added

Heading 2

Heading Settings - H3
Size: 31.25px
No class added

Heading 3

Heading Settings - H4
Size: 25px
No class added

Heading 4

Heading Settings - H5
Size: 20px
No class added
Heading 5
Heading Settings - H6
Size: 16px
No class added
Heading 6
All heading setting - Orange Heading
Heading
Brand V1

Heading

Paragraphs

Paragraph
Max Width: 50 characters

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
is-long
Max Width: 90 characters

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
is-Medium
Max Width: 70 characters

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Block

Large Titles
Size: 32px
Title
is-medium
Title M
Medium Titles
Size: 25px
Title
is-medium
Title M
Small Titles
Size: 20px
Title
is-small
Title M
X Small Titles
Size: 16px
Title
is-xsmall
Title M

rich text

Rich-text

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Buttons

Primary-Button
Schedule a Demo
Schedule a Demo
Primary-button
is-secondary
Schedule a Demo
Schedule a Demo
Primary-button
is-third
Schedule a Demo
Schedule a Demo

Links

Learn-more
Learn more
Nav-link
Navbar Link
Footer-Link
Footer Link

Icons

Icons  /  Interface

Logos

Brand Logo

Brand-logo
Brand-logo
is-V1
Brand-logo
is-V2
Brand-logo
is-V3
Brand-logo
is-V4
Brand-logo
is-V5

Clients Logos