Style Guide

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

Colors

Light Mode
Dark Mode
--primary
Value Here
Light Mode
Dark Mode
--secondary
Value Here
Light Mode
Dark Mode
--accent
Value Here
Light Mode
Dark Mode
--bg-card
Value Here
Light Mode
Dark Mode
--bg-beige
Value Here
Light Mode
Dark Mode
--bg-green
Value Here
Light Mode
Dark Mode
--bg-blue
Value Here
Light Mode
Dark Mode
--bg-sand
Value Here
Light Mode
Dark Mode
--text-muted
Value Here
Light Mode
Dark Mode
--gradient-start
Value Here
Light Mode
Dark Mode
--gradient-end
Value Here

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

.btn.secondary

.btn.tertiery

.btn.slight

.btn.ghost

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

About Blog Content

Purchase

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

This design set was brought to you by the awesome guys at Core Framework.

Links

Text Link
Text Link
Text Link
Text Link

Links

Text Link
Text Link
Text Link
Text Link

Links

Text Link
Text Link
Text Link
Text Link

Accessibility Table

Legend:

AA Passes WCAG AA (Contrast Ratio >= 4.5)

AAA Passes WCAG AAA (Contrast Ratio >= 7)

AA Large Passes for Large Text Only (Contrast Ratio >= 3)

DNP Does Not Pass (Contrast Ratio < 3)

Text Color

Background Color

Text \ Backgroundprimaryprimary-d-1primary-d-2primary-d-3primary-d-4primary-l-1primary-l-2primary-l-3primary-l-4secondarysecondary-d-1secondary-d-2secondary-d-3secondary-d-4secondary-l-1secondary-l-2secondary-l-3secondary-l-4accentaccent-d-1accent-d-2accent-d-3accent-d-4accent-l-1accent-l-2accent-l-3accent-l-4bg-bodybg-surfacebg-cardbg-overlaybg-beigebg-greenbg-bluebg-sandtext-bodytext-titletext-body-overlaytext-title-overlaytext-mutedlightdarksuccesserrorgradient-startgradient-end
primary
primary-d-1
primary-d-2
primary-d-3
primary-d-4
primary-l-1
primary-l-2
primary-l-3
primary-l-4
secondary
secondary-d-1
secondary-d-2
secondary-d-3
secondary-d-4
secondary-l-1
secondary-l-2
secondary-l-3
secondary-l-4
accent
accent-d-1
accent-d-2
accent-d-3
accent-d-4
accent-l-1
accent-l-2
accent-l-3
accent-l-4
bg-body
bg-surface
bg-card
bg-overlay
bg-beige
bg-green
bg-blue
bg-sand
text-body
text-title
text-body-overlay
text-title-overlay
text-muted
light
dark
success
error
gradient-start
gradient-end

Text \ Background	primary	primary-d-1	primary-d-2	primary-d-3	primary-d-4	primary-l-1	primary-l-2	primary-l-3	primary-l-4	secondary	secondary-d-1	secondary-d-2	secondary-d-3	secondary-d-4	secondary-l-1	secondary-l-2	secondary-l-3	secondary-l-4	accent	accent-d-1	accent-d-2	accent-d-3	accent-d-4	accent-l-1	accent-l-2	accent-l-3	accent-l-4	bg-body	bg-surface	bg-card	bg-overlay	bg-beige	bg-green	bg-blue	bg-sand	text-body	text-title	text-body-overlay	text-title-overlay	text-muted	light	dark	success	error	gradient-start	gradient-end
primary
primary-d-1
primary-d-2
primary-d-3
primary-d-4
primary-l-1
primary-l-2
primary-l-3
primary-l-4
secondary
secondary-d-1
secondary-d-2
secondary-d-3
secondary-d-4
secondary-l-1
secondary-l-2
secondary-l-3
secondary-l-4
accent
accent-d-1
accent-d-2
accent-d-3
accent-d-4
accent-l-1
accent-l-2
accent-l-3
accent-l-4
bg-body
bg-surface
bg-card
bg-overlay
bg-beige
bg-green
bg-blue
bg-sand
text-body
text-title
text-body-overlay
text-title-overlay
text-muted
light
dark
success
error
gradient-start
gradient-end