Getting Started
Style Guide
Components
Changelog
Instructions
License
View All Templates

Styleguide

Typography

Starting the website with global typography is the easiest way to build a scalable website.

Manrope

Headings

Headings - H1 to H6

This is a heading 1
in two rows

H1 / 4.85vw / 1.2 EM

This is a heading 2
in two rows

H2 / 3.9vw / 1.2 EM

This is a heading 3
in two rows

H3 / 2.6vw / 1.4 EM

This is a heading 4
in two rows

H4 / 2.2vw / 1.5 EM
This is a heading 5
in two rows
H5 / 2vw / 1.5 EM
This is a heading 6
in two rows
H6 / 1.4vw / 1.6 EM

Jumbo Heading

Jumbo / 7.5vw / 1.3 EM
Paragraphs - Small, Normal, Big

I'll know it when i see it can you make it pop, nor make it sexy, yet I really like the colour but can you change it, make it pop we need more images of groups of people having non.

Medium paragraph / 1.3vw / 1.6 EM

I'll know it when i see it can you make it pop, nor make it sexy, yet I really like the colour but can you change it, make it pop we need more images of groups of people having non.

big paragraph / 1.6vw / 1.8 EM
Labels
This is some text inside of a div block.
SMALL LABEL / 1vw / 1.3 EM
This is some text inside of a div block.
label caps / 1.1vw / 1.3 EM
Labels
This is some text inside of a div block.
Bold Text
This is some text inside of a div block.
Italic Text
Links
Text Link
Normal Link
Go to Jazz it up a little
Small Link / 1vw / 1.4 EM
Go to Jazz it up a little
MEDIUM LINK / 16PX / 1.2 EM
Misc
"Quote Text!"
Global Block QUote / 4vw / 1.2 EM
  • LIST ITEM
  • LIST ITEM
  • LIST ITEM
Unordered List/ 1vw / 1.6 EM
  1. LIST ITEM
  2. LIST ITEM
  3. LIST ITEM
Ordered List/ 1vw / 1.6 EM
Rich Element - Testing how styles fit together

Something

Elit, sed placerat consectetur sed ornare maecenas adipiscing id dignissim. Nisl adipiscing condimentum aliquam nascetur tortor risus tellus. Nibh venenatis euismod orci curabitur cum faucibus duis.

“How much bandwidth do you have meeting assassin window of opportunity can”

Elit, sed placerat consectetur sed ornare maecenas adipiscing id dignissim. Nisl adipiscing condimentum aliquam nascetur tortor risus tellus. Nibh venenatis euismod orci curabitur cum faucibus duis. Elit, sed placerat consectetur sed ornare maecenas adipiscing id dignissim. Nisl adipiscing condimentum aliquam nascetur tortor risus tellus. Nibh venenatis euismod orci curabitur cum faucibus duis.

  • List item
  • List item
  • List item

Elit, sed placerat consectetur sed ornare maecenas adipiscing id dignissim. Nisl adipiscing condimentum aliquam nascetur tortor risus tellus. Nibh venenatis euismod orci curabitur cum faucibus duis. Elit, sed placerat consectetur sed ornare maecenas adipiscing id dignissim. Nisl adipiscing condimentum aliquam nascetur tortor risus tellus. Nibh venenatis euismod orci curabitur cum faucibus duis.

Image Caption

Colors

Brand Color 1 / #F2E9E9
Use class
Brand 1
Brand Color 2 / #DFD2CD
Use class
Brand 2
Brand Color 3 / #DFEAEE
Use class
Brand 3
Gray 1 / #737373
Use class
Gray 1
Gray 2 / #E1E1E1
Use class
Gray 2
Black / #000000
Use class
Brand black
White / #ffffff
Use class
Brand White

Icons

Coco Chanel LogoNetflix LogoAirbnb LogoPinterest logoInstagram IconFacebook IconLinkedIn Icon

Illustrations