Style Guide

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

Aa

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

.largeButton.small

.btn.secondary

.largeButton.small

.btn.tertiery

.largeButton.small

.btn.slight

.largeButton.small

.btn.ghost

.largeButton.small

Icons

.icon

Avatars

.avatar

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

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

Discover The Best Products

Selling the best products in beauty. Rated number 1 worldwide and still growing.

Buy Now Learn More

Our Great Reviews from Awesome Customers

Rated 4.7 / 5

Natural ingredients, a real difference in skin.

The next generation of hydration

Shop Fagar

Dermatologist Approved

Discover our amazing products and unleash freshness in your skin

Rated by many

Shop All

Style Guide

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Card Heading Here

Discover The Best Products

Our Great Reviews from Awesome Customers

Natural ingredients, a real difference in skin.

Dermatologist Approved

Discover our amazing products and unleash freshness in your skin