Moodboard

Background Color Classes

brand-primary-bg

brand-secondary-bg

brand-third-bg

brand-fourth-bg

brand-fifth-bg

brand-sixth-bg

gray-darker-bg

gray-dark-bg

gray-bg

gray-light-bg

gray-lighter-bg

gray-white-bg

brand-success-bg

brand-info-bg

brand-warning-bg

brand-danger-bg

brand-white-bg

brand-black-bg

Text Color Classes

brand-primary

brand-secondary

brand-third

brand-fourth

brand-fifth

brand-sixth

brand-darker

brand-dark

gray

gray-light

gray-lighter

gray-white

brand-success

brand-info

brand-warning

brand-danger

brand-white

brand-black

Typography

Heading 1(h1)

Heading 2(h2)

Heading 3(h3)

Heading 4(h4)

Heading 5(h5)
Heading 6(h6)

Paragrapth text look like this

link text look like this

Fonts Palette

font-size-smallest Font Size =
font-size-smaller Font Size =
font-size-small Font Size =
font-size-base Font Size =
font-size-big Font Size =
font-size-large Font Size =
font-size-larger Font Size =
font-size-largest Font Size =
font-size-huge Font Size =
font-size-jumbo Font Size =
font-size-giant Font Size =

Line height classes

line-height-1 Line Height =
line-height-2 Line Height =
line-height-3 Line Height =
line-height-4 Line Height =
line-height-5 Line Height =
line-height-6 Line Height =
line-height-7 Line Height =
line-height-8 Line Height =
line-height-9 Line Height =
line-height-10 Line Height =

Font Weight classes

font-light Font Weight =
font-regular Font Weight =
font-medium Font Weight =
font-semibold Font Weight =
font-bold Font Weight =
font-ultrabold Font Weight =

Gap classes

gap-1
gap-2
gap-3
gap-4
gap-5
gap-6
gap-7
gap-8
gap-9
gap-10

Padding classes

pad-1
pad-x-1
pad-y-1
pad-2
pad-x-2
pad-y-2
pad-3
pad-x-3
pad-y-3
pad-4
pad-x-4
pad-y-4
pad-5
pad-x-5
pad-y-5
pad-6
pad-x-6
pad-y-6
pad-7
pad-x-7
pad-y-7
pad-8
pad-x-8
pad-y-8
pad-9
pad-x-9
pad-y-9
pad-10
pad-x-10
pad-y-10

Buttons