Skip to main content
Colors
Name Description Example
--primary-black grayscale
--primary-gray-shade2 grayscale
--primary-gray-shade1 grayscale
--primary-white grayscale
--primary-gray-tint3 grayscale
--primary-gray grayscale
--primary-gray-tint2 grayscale
--primary-gray-tint1 grayscale
--primary-blue-shade3 blues
--primary-blue-shade2 blues
--primary-blue-shade1 blues
--primary-blue blues
--primary-blue-tint1 blues
--primary-blue-tint2 blues
--primary-green greens
--primary-green-shade1 greens
--secondary-green greens
--primary-teal teals
--primary-teal-tint1 teals
--primary-teal-tint2 teals
--primary-pink pinks
--primary-pink-tint1 pinks
--primary-orange oranges
--primary-orange-tint1 oranges
--primary-orange-tint2 oranges
--primary-red reds
--secondary-red reds
Gradients
Name Description Example
--blue-gradient #253a6e, #1d5389, #146ea6, #0c85be, #059bd6
--green-gradient #9fd64d, #75c170, #49ab95, #2297b6, #0086d2
--dark-green-gradient #9fd64d, #44873c, #2c736e, #186299, #059bd6
--light-green-gradient rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6)
--bg-blue-gradient rgba(#253a6e, .93), rgba(#1d5389, .93), rgba(#146ea6, .93), rgba(#0c85be, .93), rgba(#059bd6, .93)
--black-gradient transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 75%, rgba(0, 0, 0, 1) 100%
--black-gradient-mobile transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, 1) 100%
Special cases
Name Description Example
--font-sans-serif font-family property value example font-family
--body-font-size font-size property value example font-size
--body-line-height line-height property value example line-height
--body-color color value example body color
--body-color-rgb rgb array example body color rgb