Enlightium Academy Styleguide

Color

Blue

text-blue

bg-blue

Blue Dark

text-blue-dark

bg-blue-dark

Blue Light

text-blue-light

bg-blue-light

Blue Tint

text-blue-tint

bg-blue-tint

900

text-900

bg-900

800

text-800

bg-800

700

text-700

bg-700

600

text-600

bg-600

500

text-500

bg-500

White

text-white

bg-white

100

text-100

bg-100

200

text-200

bg-200

300

text-300

bg-300

400

text-400

bg-400

Purple

text-purple

bg-purple

Cobalt

text-cobalt

bg-cobalt

Teal

text-teal

bg-teal

Green

text-green

bg-green

Yellow

text-yellow

bg-yellow

Orange

text-orange

bg-orange

Vermillion

color-vermillion

bg-vermillion

Pink

color-pink

bg-pink

Red

color-red

bg-red

Purple Tint

bg-purple-tint

Cobalt Tint

bg-cobalt-tint

bg-teal-tint

Teal Tint

Green Tint

bg-green-tint

bg-yellow-tint

Yellow Tint

Orange Tint

bg-orange-tint

Vermillion Tint

bg-vermillion-tint

bg-pink-tint

Pink Tint

Red Tint

bg-red-tint

Enroll Now

Shadows

Small Shadow

Medium Shadow

Large Shadow

Typography

display

Heading

heading-1

Heading

heading-2

Heading

heading-3

Heading

heading-4

Heading

heading-5

heading-5 eyebrow text-blue

Heading

Eyebrow

heading-6

heading-6 eyebrow text-blue

Heading

Eyebrow

paragraph text-lg

This is normal paragraph text.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus mauris a diam maecenas sed. Ultricies mi quis hendrerit dolor magna eget. Id nibh tortor id aliquet lectus. Turpis egestas sed tempus urna et pharetra pharetra massa massa.

paragraph font-bold text-lg

This is bold paragraph text. 

paragraph italic text-lg

This is italic paragraph text

paragraph

This is normal paragraph text.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus mauris a diam maecenas sed. Ultricies mi quis hendrerit dolor magna eget. Id nibh tortor id aliquet lectus. Turpis egestas sed tempus urna et pharetra pharetra massa massa.

paragraph font-bold

This is bold paragraph text. 

paragraph italic

This is italic paragraph text

paragraph text-sm

This is normal paragraph text.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus mauris a diam maecenas sed. Ultricies mi quis hendrerit dolor magna eget. Id nibh tortor id aliquet lectus. Turpis egestas sed tempus urna et pharetra pharetra massa massa.

paragraph font-bold text-sm

This is bold paragraph text. 

paragraph italic text-sm

This is italic paragraph text

paragraph text-xs

This is normal paragraph text.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus mauris a diam maecenas sed. Ultricies mi quis hendrerit dolor magna eget. Id nibh tortor id aliquet lectus. Turpis egestas sed tempus urna et pharetra pharetra massa massa.

paragraph font-bold text-xs

This is bold paragraph text. 

paragraph italic text-xs

This is italic paragraph text