Brand Colors
These are the official MSState colors from OPA Visual Identity Standards. There is a tint/shade range of variants for each color as demonstrated. Bootstrap does have some other predefined default colors, but you should only use the defined colors listed here or on OPA website.
Example usage:
.bg-maroon .bg-maroon-700 .text-maroon .text-maroon-700 .btn-maroon .btn-maroon-700
Maroon (Primary)
.*-primary
.*-maroon-100
.*-maroon-200
.*-maroon-300
.*-maroon-400
.*-maroon, .*-maroon-500, .*-primary
.*-maroon-600
.*-maroon-700
.*-maroon-800
.*-maroon-900
Gray (Secondary)
.*-secondary
.*-gray-100
.*-gray-200
.*-gray-300
.*-gray-400 (light gray)
.gray, .*-gray-500
.*-gray-600 (dark gray)
.*-gray-700, .*-secondary
.*-gray-800
.*-gray-900
Accent Colors
.*-taupe (sandstone)
.*-sand
.*-soil (walnut brown)
.*-orange (burnt orange)
.*-yellow, .*-warning (sunburst)
.*-gold (honey gold)
.*-lime
.*-green, .*-success (moss green)
.*-purple (eggplant)
.*-cyan, .*-info (teal)
.*-pink (hot pink) cancer
Maroon is set as the Bootstrap Primary color.
Background
.bg-maroon-100
.bg-maroon-200
.bg-maroon-300
.bg-maroon-400
.bg-primary .bg-maroon .bg-maroon-500
.bg-maroon-600
.bg-maroon-700
.bg-maroon-800
.bg-maroon-900
Text
.text-maroon-100
.text-maroon-200
.text-maroon-300
.text-maroon-400
.text-maroon .text-maroon-500
.text-maroon-600
.text-maroon-700
.text-maroon-800
.text-maroon-900
Gray is set as the Bootstrap Secondary color.
Background
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-secondary .bg-gray .bg-gray-700
.bg-gray-800
.bg-gray-900
Text
.text-gray-100
.text-gray-200
.text-gray-300
.text-gray-400
.text-gray .text-gray-500
.text-gray-600
.text-secondary .text-gray-700
.text-gray-800
.text-gray-900
Taupe is an accent color in the MSU Visual Identity Standard. Labeled Sandstone in our Figma assets.
Background
.bg-taupe-100
.bg-taupe-200
.bg-taupe-300
.bg-taupe-400
.bg-taupe .bg-taupe-500
.bg-taupe-600
.bg-taupe-700
.bg-taupe-800
.bg-taupe-900
Text
.text-taupe-100
.text-taupe-200
.text-taupe-300
.text-taupe-400
.text-taupe .text-taupe-500
.text-taupe-600
.text-taupe-700
.text-taupe-800
.text-taupe-900
Sand is an accent color in the MSU Visual Identity Standard.
Background
.bg-sand-100
.bg-sand-200
.bg-sand-300
.bg-sand-400
.bg-sand .bg-sand-500
.bg-sand-600
.bg-sand-700
.bg-sand-800
.bg-sand-900
Text
.text-sand-100
.text-sand-200
.text-sand-300
.text-sand-400
.text-taupe .text-sand-500
.text-sand-600
.text-sand-700
.text-sand-800
.text-sand-900
Soil is an accent color in the MSU Visual Identity Standard. Labeled Walnut Brown in our Figma assets.
Background
.bg-soil-100
.bg-soil-200
.bg-soil-300
.bg-soil-400
.bg-soil .bg-soil-500
.bg-soil-600
.bg-soil-700
.bg-soil-800
.bg-soil-900
Text
.text-soil-100
.text-soil-200
.text-soil-300
.text-soil-400
.text-soil .text-soil-500
.text-soil-600
.text-soil-700
.text-soil-800
.text-soil-900
Orange is an accent color in the MSU Visual Identity Standard. Labeled Burnt Orange in our Figma assets.
Background
.bg-orange-100
.bg-orange-200
.bg-orange-300
.bg-orange-400
.bg-orange .bg-orange-500
.bg-orange-600
.bg-orange-700
.bg-orange-800
.bg-orange-900
Text
.text-orange-100
.text-orange-200
.text-orange-300
.text-orange-400
.text-orange .text-orange-500
.text-orange-600
.text-orange-700
.text-orange-800
.text-orange-900
Yellow is an accent color in the MSU Visual Identity Standard. Labeled Sunburst in our Figma assets.
Background
.bg-yellow-100
.bg-yellow-200
.bg-yellow-300
.bg-yellow-400
.bg-yellow .bg-yellow-500
.bg-yellow-600
.bg-yellow-700
.bg-yellow-800
.bg-yellow-900
Text
.text-yellow-100
.text-yellow-200
.text-yellow-300
.text-yellow-400
.text-yellow .text-yellow-500
.text-yellow-600
.text-yellow-700
.text-yellow-800
.text-yellow-900
Gold is an accent color in the MSU Visual Identity Standard. Labeled Honey Gold in our Figma assets.
Background
.bg-gold-100
.bg-gold-200
.bg-gold-300
.bg-gold-400
.bg-gold .bg-gold-500
.bg-gold-600
.bg-gold-700
.bg-gold-800
.bg-gold-900
Text
.text-gold-100
.text-gold-200
.text-gold-300
.text-gold-400
.text-gold .text-gold-500
.text-gold-600
.text-gold-700
.text-gold-800
.text-gold-900
Lime is an accent color in the MSU Visual Identity Standard.
Background
.bg-lime-100
.bg-lime-200
.bg-lime-300
.bg-lime-400
.bg-lime .bg-lime-500
.bg-lime-600
.bg-lime-700
.bg-lime-800
.bg-lime-900
Text
.text-lime-100
.text-lime-200
.text-lime-300
.text-lime-400
.text-lime .text-lime-500
.text-lime-600
.text-lime-700
.text-lime-800
.text-lime-900
Green is an accent color in the MSU Visual Identity Standard. Labeled Moss Green in our Figma assets.
Background
.bg-green-100
.bg-green-200
.bg-green-300
.bg-green-400
.bg-green .bg-green-500
.bg-green-600
.bg-green-700
.bg-green-800
.bg-green-900
Text
.text-green-100
.text-green-200
.text-green-300
.text-green-400
.text-green .text-green-500
.text-green-600
.text-green-700
.text-green-800
.text-green-900
Purple is an accent color in the MSU Visual Identity Standard. Labeled Eggplant in our Figma assets.
Background
.bg-purple-100
.bg-purple-200
.bg-purple-300
.bg-purple-400
.bg-purple .bg-purple-500
.bg-purple-600
.bg-purple-700
.bg-purple-800
.bg-purple-900
Text
.text-purple-100
.text-purple-200
.text-purple-300
.text-purple-400
.text-purple .text-purple-500
.text-purple-600
.text-purple-700
.text-purple-800
.text-purple-900
Cyan is an accent color in the MSU Visual Identity Standard. Labeled Teal in our Figma assets.
Background
.bg-cyan-100
.bg-cyan-200
.bg-cyan-300
.bg-cyan-400
.bg-cyan .bg-cyan-500
.bg-cyan-600
.bg-cyan-700
.bg-cyan-800
.bg-cyan-900
Text
.text-cyan-100
.text-cyan-200
.text-cyan-300
.text-cyan-400
.text-cyan .text-cyan-500
.text-cyan-600
.text-cyan-700
.text-cyan-800
.text-cyan-900
Pink is an accent color in the MSU Visual Identity Standard. Labeled Hot Pink in our Figma assets.
Background
.bg-pink-100
.bg-pink-200
.bg-pink-300
.bg-pink-400
.bg-pink .bg-pink-500
.bg-pink-600
.bg-pink-700
.bg-pink-800
.bg-pink-900
Text
.text-pink-100
.text-pink-200
.text-pink-300
.text-pink-400
.text-pink .text-pink-500
.text-pink-600
.text-pink-700
.text-pink-800
.text-pink-900