Style Guide

This style guide serves as a page that outlines clear visuals on typography, color schemes and other design elements as used on this website.

Colors

--primary

--primary-90

--primary-80

--primary-50

--primary-70

--primary-60

--primary-40

--primary-30

--primary-20

--primary-10

--primary-d-5

--primary-d-3

--primary-d-2

--primary-d-4

--primary-d-1

--primary-5

--primary-l-4

--primary-l-3

--primary-l-2

--primary-l-1

--secondary

--secondary-90

--secondary-80

--secondary-50

--secondary-70

--secondary-60

--secondary-40

--secondary-30

--secondary-20

--secondary-10

--secondary-d-5

--secondary-d-3

--secondary-d-2

--secondary-d-4

--secondary-d-1

--secondary-5

--secondary-l-4

--secondary-l-3

--secondary-l-2

--secondary-l-1

Typography

Body Font: Something

.text-4xl

.text-3xl

.text-2xl

.text-xl

.text-l

.text-m

.text-s

.text-xs

.font-100 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-200 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-300 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-400 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-500 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-600 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-700 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-800 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-900 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Header Font: Something

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

This is a hyperlink

Elements

Buttons

.btn

.largeButton.small

.btn.secondary

.largeButton.small

.btn.slight

.largeButton.small

.btn.ghost

.largeButton.small

Card

.card

Card Heading Here

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.

Main ButtonNext Button

Icons

.icon

Sizing

.space-4xl

.space-3xl

.space-2xl

.space-xl

.space-l

.space-m

.space-s

.space-xs

.space-2xs

.space-3xs

.space-4xs

PADDING

.padding-4xl

.padding-3xl

.padding-2xl

.padding-xl

.padding-l

.padding-m

.padding-s

.padding-xs

.padding-2xs

.padding-3xs

.padding-4xs

Widths

max-width-10 (10rem)

max-width-20 (20rem)

max-width-30 (30rem)

max-width-40 (40rem)

max-width-50 (50rem)

max-width-60 (60rem)

max-width-70 (70rem)

max-width-80 (80rem)

max-width-90 (90rem)

max-width-100 (100rem)

max-width-110 (110rem)

max-width-120 (120rem)

max-width-130 (130rem)

max-width-140 (140rem)

screen-width (100vw)

max-site-width (width: 100%)