Colours

Primary Colours

Primary
#eba37a

Secondary Colours

Secondary 1
#eba37a
Secondary 1
#eba37a

Neutral Colours

Neutral 1000
#eba37a
Neutral 800
#eba37a
Neutral 700
#eba37a
Neutral 600
#eba37a
Neutral 500
#eba37a
Neutral 400
#eba37a
Neutral 300
#eba37a
Neutral 200
#eba37a
Neutral 100
#ffffff

Text Colours

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Typography

Super Heading Number 1 King of Headings

H1 - Cormorant | 80px font-size / 1.2 line-height

Super Heading Number 2
Heading's Revenge

H2 - Cormorant | 65px font-size / 1.2 line-height

Super Heading Number
3 Rise of Headings

H3 - Cormorant | 55px font-size / 1.2 line-height

Super Heading Number 4
Heading's Fall

H4 - Cormorant | 45px font-size / 1.2 line-height
Super Heading Number 5
Return of the Heading
H5 - Space Grotesk | 24px font-size / 30px line-height
Super Heading Number 6
The Last Heading
H6 - Space Grotesk | 18px font-size / 26px line-height

Heading h3 size

Heading h2 size

Heading h1 size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Tincidunt praesent semper feugiat nibh sed. Lorem dolor sed viverra ipsum. Sed euismod nisi porta lorem mollis. Tincidunt tortor aliquam nulla facilisi cras fermentum odio.

Paragraph Small  - 18px font-size / 26px line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Tincidunt praesent semper feugiat nibh sed. Lorem dolor sed viverra ipsum. Sed euismod nisi porta lorem mollis. Tincidunt tortor aliquam nulla facilisi cras fermentum odio.

Paragraph Default  - 18px font-size / 26px line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Tincidunt praesent semper feugiat nibh sed. Lorem dolor sed viverra ipsum. Sed euismod nisi porta lorem mollis. Tincidunt tortor aliquam nulla facilisi cras fermentum odio.

Paragraph Medium  - 18px font-size / 26px line-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Tincidunt praesent semper feugiat nibh sed. Lorem dolor sed viverra ipsum. Sed euismod nisi porta lorem mollis. Tincidunt tortor aliquam nulla facilisi cras fermentum odio.

Paragraph Large  - 18px font-size / 26px line-height
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Tincidunt praesent semper feugiat nibh sed. Lorem dolor sed viverra ipsum. Sed euismod nisi porta lorem mollis. Tincidunt tortor aliquam nulla facilisi cras fermentum odio.
Block Quote
  1. Fully Responsive
  2. Easy To Customize
  3. Clean Code
  4. Smooth Animations
Ordered List
  • Fully Responsive
  • Easy To Customize
  • Clean Code
  • Smooth Animations
Unordered List
This is some text
This is some text
Figure and Figure Caption

Buttons

Button text
Filled Button | 10px / 20px
Button text
Outlined Button | 10px / 20px
Button
Filled Button Arrow | 10px / 20px

Icons

Utility Icons

close
check-circle-1
road-sign-warning
alert-circle
arrow-button-left
arrow-right-1
office-file-pdf-1
email-action-unread
information-circle
social-media-facebook-1
professional-network-linkedin
social-media-twitter
search-alternate

Brand Icons

Imagery & Ratios

Cover
Contain
Scale down

Global Layouts

Container (wide)
Container (default)
Container (narrow)
Container (thin)
Flex
Flex Center
Flex Right
Columns
2 columns
3 columns
4 columns
5 Columns
6 Columns
6 Columns ( 2 mob)
7 Columns
8 Columns
9 Columns
10 Columns
11 Columns
12 Columns
Animation