Style Guide

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

--primary
Value Here
Light Mode
Dark Mode
Shades
Tints
--secondary
Value Here
Light Mode
Dark Mode
Shades
Tints
--tertiary
Value Here
Light Mode
Dark Mode
Shades
Tints
--default-14
Value Here
Light Mode
Dark Mode
--default-15
Value Here
Light Mode
Dark Mode
--default-16
Value Here
Light Mode
Dark Mode
--default-17
Value Here
Light Mode
Dark Mode

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

This is a hyperlink

Buttons

.btn

.btn.secondary

.btn.tertiery

.btn.slight

.btn.ghost

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 Button Next Button

Sizing

.space-4xl

.space-3xl

.space-2xl

.space-xl

.space-l

.space-m

.space-s

.space-xs

.space-2xs

.space-3xs

.space-4xs

.padding-4xl

.padding-3xl

.padding-2xl

.padding-xl

.padding-l

.padding-m

.padding-s

.padding-xs

.padding-2xs

.padding-3xs

.padding-4xs

Style Guide

Contents

Colors

Typography

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Elements

Card Heading Here