MelangeCSS Reference

Current Version: 1.0.0-RC4

Colors ( Not Small Width )†

All colors can be used for text, borders, or backgrounds by using the color name and tint on its own (for text), with bc- (for borders), or bg- (for backgrounds). Hover styles are available by prefixing hover- in front of the class.

You are encouraged to use colors with maximum accessible combinations. I have built a tool called Ghola that can help. This palette can be viewed here

red

 
-100
 
-200
 
-300
 
-400
 
-500
 
-600
 
-700
 
-800
 
-900

orange

 
-100
 
-200
 
-300
 
-400
 
-500
 
-600
 
-700
 
-800
 
-900

yellow

 
-100
 
-200
 
-300
 
-400
 
-500
 
-600
 
-700
 
-800
 
-900

green

 
-100
 
-200
 
-300
 
-400
 
-500
 
-600
 
-700
 
-800
 
-900

blue

 
-100
 
-200
 
-300
 
-400
 
-500
 
-600
 
-700
 
-800
 
-900

purple

 
-100
 
-200
 
-300
 
-400
 
-500
 
-600
 
-700
 
-800
 
-900

gray

 
-100
 
-200
 
-300
 
-400
 
-500
 
-600
 
-700
 
-800
 
-900

black

 
black
 
-ish

white

 
white
 
-ish
Black
black*
Black Text
black-ns 
.black-ns {
  color: var(--mg-black);
}
.black-ns
.black-ns
black-ish-ns 
.black-ish-ns {
  color: var(--mg-black-ish);
}
.black-ish-ns
.black-ish-ns
hover-black-ns 
.hover-black-ns:hover {
  color: var(--mg-black);
}
.hover-black-ns
.hover-black-ns
hover-black-ish-ns 
.hover-black-ish-ns:hover {
  color: var(--mg-black-ish);
}
.hover-black-ish-ns
.hover-black-ish-ns
bg-black*
Black Background
bg-black-ns 
.bg-black-ns {
  background-color: var(--mg-black);
}
.bg-black-ns
.bg-black-ns
bg-black-ish-ns 
.bg-black-ish-ns {
  background-color: var(--mg-black-ish);
}
.bg-black-ish-ns
.bg-black-ish-ns
hover-bg-black-ns 
.hover-bg-black-ns:hover {
  background-color: var(--mg-black);
}
.hover-bg-black-ns
.hover-bg-black-ns
hover-bg-black-ish-ns 
.hover-bg-black-ish-ns:hover {
  background-color: var(--mg-black-ish);
}
.hover-bg-black-ish-ns
.hover-bg-black-ish-ns
bc-black*
Black Border
bc-black-ns 
.bc-black-ns {
  border-color: var(--mg-black);
}
.bc-black-ns
.bc-black-ns
bc-black-ish-ns 
.bc-black-ish-ns {
  border-color: var(--mg-black-ish);
}
.bc-black-ish-ns
.bc-black-ish-ns
hover-bc-black-ns 
.hover-bc-black-ns:hover {
  border-color: var(--mg-black);
}
.hover-bc-black-ns
.hover-bc-black-ns
hover-bc-black-ish-ns 
.hover-bc-black-ish-ns:hover {
  border-color: var(--mg-black-ish);
}
.hover-bc-black-ish-ns
.hover-bc-black-ish-ns
Blue
blue*
Blue Text
blue-100-ns 
.blue-100-ns {
  color: var(--mg-blue-100);
}
.blue-100-ns
.blue-100-ns
blue-200-ns 
.blue-200-ns {
  color: var(--mg-blue-200);
}
.blue-200-ns
.blue-200-ns
blue-300-ns 
.blue-300-ns {
  color: var(--mg-blue-300);
}
.blue-300-ns
.blue-300-ns
blue-400-ns 
.blue-400-ns {
  color: var(--mg-blue-400);
}
.blue-400-ns
.blue-400-ns
blue-500-ns 
.blue-500-ns {
  color: var(--mg-blue-500);
}
.blue-500-ns
.blue-500-ns
blue-600-ns 
.blue-600-ns {
  color: var(--mg-blue-600);
}
.blue-600-ns
.blue-600-ns
blue-700-ns 
.blue-700-ns {
  color: var(--mg-blue-700);
}
.blue-700-ns
.blue-700-ns
blue-800-ns 
.blue-800-ns {
  color: var(--mg-blue-800);
}
.blue-800-ns
.blue-800-ns
blue-900-ns 
.blue-900-ns {
  color: var(--mg-blue-900);
}
.blue-900-ns
.blue-900-ns
hover-blue-100-ns 
.hover-blue-100-ns:hover {
  color: var(--mg-blue-100);
}
.hover-blue-100-ns
.hover-blue-100-ns
hover-blue-200-ns 
.hover-blue-200-ns:hover {
  color: var(--mg-blue-200);
}
.hover-blue-200-ns
.hover-blue-200-ns
hover-blue-300-ns 
.hover-blue-300-ns:hover {
  color: var(--mg-blue-300);
}
.hover-blue-300-ns
.hover-blue-300-ns
hover-blue-400-ns 
.hover-blue-400-ns:hover {
  color: var(--mg-blue-400);
}
.hover-blue-400-ns
.hover-blue-400-ns
hover-blue-500-ns 
.hover-blue-500-ns:hover {
  color: var(--mg-blue-500);
}
.hover-blue-500-ns
.hover-blue-500-ns
hover-blue-600-ns 
.hover-blue-600-ns:hover {
  color: var(--mg-blue-600);
}
.hover-blue-600-ns
.hover-blue-600-ns
hover-blue-700-ns 
.hover-blue-700-ns:hover {
  color: var(--mg-blue-700);
}
.hover-blue-700-ns
.hover-blue-700-ns
hover-blue-800-ns 
.hover-blue-800-ns:hover {
  color: var(--mg-blue-800);
}
.hover-blue-800-ns
.hover-blue-800-ns
hover-blue-900-ns 
.hover-blue-900-ns:hover {
  color: var(--mg-blue-900);
}
.hover-blue-900-ns
.hover-blue-900-ns
bg-blue*
Blue Background
bg-blue-100-ns 
.bg-blue-100-ns {
  background-color: var(--mg-blue-100);
}
.bg-blue-100-ns
.bg-blue-100-ns
bg-blue-200-ns 
.bg-blue-200-ns {
  background-color: var(--mg-blue-200);
}
.bg-blue-200-ns
.bg-blue-200-ns
bg-blue-300-ns 
.bg-blue-300-ns {
  background-color: var(--mg-blue-300);
}
.bg-blue-300-ns
.bg-blue-300-ns
bg-blue-400-ns 
.bg-blue-400-ns {
  background-color: var(--mg-blue-400);
}
.bg-blue-400-ns
.bg-blue-400-ns
bg-blue-500-ns 
.bg-blue-500-ns {
  background-color: var(--mg-blue-500);
}
.bg-blue-500-ns
.bg-blue-500-ns
bg-blue-600-ns 
.bg-blue-600-ns {
  background-color: var(--mg-blue-600);
}
.bg-blue-600-ns
.bg-blue-600-ns
bg-blue-700-ns 
.bg-blue-700-ns {
  background-color: var(--mg-blue-700);
}
.bg-blue-700-ns
.bg-blue-700-ns
bg-blue-800-ns 
.bg-blue-800-ns {
  background-color: var(--mg-blue-800);
}
.bg-blue-800-ns
.bg-blue-800-ns
bg-blue-900-ns 
.bg-blue-900-ns {
  background-color: var(--mg-blue-900);
}
.bg-blue-900-ns
.bg-blue-900-ns
hover-bg-blue-100-ns 
.hover-bg-blue-100-ns:hover {
  background-color: var(--mg-blue-100);
}
.hover-bg-blue-100-ns
.hover-bg-blue-100-ns
hover-bg-blue-200-ns 
.hover-bg-blue-200-ns:hover {
  background-color: var(--mg-blue-200);
}
.hover-bg-blue-200-ns
.hover-bg-blue-200-ns
hover-bg-blue-300-ns 
.hover-bg-blue-300-ns:hover {
  background-color: var(--mg-blue-300);
}
.hover-bg-blue-300-ns
.hover-bg-blue-300-ns
hover-bg-blue-400-ns 
.hover-bg-blue-400-ns:hover {
  background-color: var(--mg-blue-400);
}
.hover-bg-blue-400-ns
.hover-bg-blue-400-ns
hover-bg-blue-500-ns 
.hover-bg-blue-500-ns:hover {
  background-color: var(--mg-blue-500);
}
.hover-bg-blue-500-ns
.hover-bg-blue-500-ns
hover-bg-blue-600-ns 
.hover-bg-blue-600-ns:hover {
  background-color: var(--mg-blue-600);
}
.hover-bg-blue-600-ns
.hover-bg-blue-600-ns
hover-bg-blue-700-ns 
.hover-bg-blue-700-ns:hover {
  background-color: var(--mg-blue-700);
}
.hover-bg-blue-700-ns
.hover-bg-blue-700-ns
hover-bg-blue-800-ns 
.hover-bg-blue-800-ns:hover {
  background-color: var(--mg-blue-800);
}
.hover-bg-blue-800-ns
.hover-bg-blue-800-ns
hover-bg-blue-900-ns 
.hover-bg-blue-900-ns:hover {
  background-color: var(--mg-blue-900);
}
.hover-bg-blue-900-ns
.hover-bg-blue-900-ns
bc-blue*
Blue Border
bc-blue-100-ns 
.bc-blue-100-ns {
  border-color: var(--mg-blue-100);
}
.bc-blue-100-ns
.bc-blue-100-ns
bc-blue-200-ns 
.bc-blue-200-ns {
  border-color: var(--mg-blue-200);
}
.bc-blue-200-ns
.bc-blue-200-ns
bc-blue-300-ns 
.bc-blue-300-ns {
  border-color: var(--mg-blue-300);
}
.bc-blue-300-ns
.bc-blue-300-ns
bc-blue-400-ns 
.bc-blue-400-ns {
  border-color: var(--mg-blue-400);
}
.bc-blue-400-ns
.bc-blue-400-ns
bc-blue-500-ns 
.bc-blue-500-ns {
  border-color: var(--mg-blue-500);
}
.bc-blue-500-ns
.bc-blue-500-ns
bc-blue-600-ns 
.bc-blue-600-ns {
  border-color: var(--mg-blue-600);
}
.bc-blue-600-ns
.bc-blue-600-ns
bc-blue-700-ns 
.bc-blue-700-ns {
  border-color: var(--mg-blue-700);
}
.bc-blue-700-ns
.bc-blue-700-ns
bc-blue-800-ns 
.bc-blue-800-ns {
  border-color: var(--mg-blue-800);
}
.bc-blue-800-ns
.bc-blue-800-ns
bc-blue-900-ns 
.bc-blue-900-ns {
  border-color: var(--mg-blue-900);
}
.bc-blue-900-ns
.bc-blue-900-ns
hover-bc-blue-100-ns 
.hover-bc-blue-100-ns:hover {
  border-color: var(--mg-blue-100);
}
.hover-bc-blue-100-ns
.hover-bc-blue-100-ns
hover-bc-blue-200-ns 
.hover-bc-blue-200-ns:hover {
  border-color: var(--mg-blue-200);
}
.hover-bc-blue-200-ns
.hover-bc-blue-200-ns
hover-bc-blue-300-ns 
.hover-bc-blue-300-ns:hover {
  border-color: var(--mg-blue-300);
}
.hover-bc-blue-300-ns
.hover-bc-blue-300-ns
hover-bc-blue-400-ns 
.hover-bc-blue-400-ns:hover {
  border-color: var(--mg-blue-400);
}
.hover-bc-blue-400-ns
.hover-bc-blue-400-ns
hover-bc-blue-500-ns 
.hover-bc-blue-500-ns:hover {
  border-color: var(--mg-blue-500);
}
.hover-bc-blue-500-ns
.hover-bc-blue-500-ns
hover-bc-blue-600-ns 
.hover-bc-blue-600-ns:hover {
  border-color: var(--mg-blue-600);
}
.hover-bc-blue-600-ns
.hover-bc-blue-600-ns
hover-bc-blue-700-ns 
.hover-bc-blue-700-ns:hover {
  border-color: var(--mg-blue-700);
}
.hover-bc-blue-700-ns
.hover-bc-blue-700-ns
hover-bc-blue-800-ns 
.hover-bc-blue-800-ns:hover {
  border-color: var(--mg-blue-800);
}
.hover-bc-blue-800-ns
.hover-bc-blue-800-ns
hover-bc-blue-900-ns 
.hover-bc-blue-900-ns:hover {
  border-color: var(--mg-blue-900);
}
.hover-bc-blue-900-ns
.hover-bc-blue-900-ns
Gray
gray*
Gray Text
gray-100-ns 
.gray-100-ns {
  color: var(--mg-gray-100);
}
.gray-100-ns
.gray-100-ns
gray-200-ns 
.gray-200-ns {
  color: var(--mg-gray-200);
}
.gray-200-ns
.gray-200-ns
gray-300-ns 
.gray-300-ns {
  color: var(--mg-gray-300);
}
.gray-300-ns
.gray-300-ns
gray-400-ns 
.gray-400-ns {
  color: var(--mg-gray-400);
}
.gray-400-ns
.gray-400-ns
gray-500-ns 
.gray-500-ns {
  color: var(--mg-gray-500);
}
.gray-500-ns
.gray-500-ns
gray-600-ns 
.gray-600-ns {
  color: var(--mg-gray-600);
}
.gray-600-ns
.gray-600-ns
gray-700-ns 
.gray-700-ns {
  color: var(--mg-gray-700);
}
.gray-700-ns
.gray-700-ns
gray-800-ns 
.gray-800-ns {
  color: var(--mg-gray-800);
}
.gray-800-ns
.gray-800-ns
gray-900-ns 
.gray-900-ns {
  color: var(--mg-gray-900);
}
.gray-900-ns
.gray-900-ns
hover-gray-100-ns 
.hover-gray-100-ns:hover {
  color: var(--mg-gray-100);
}
.hover-gray-100-ns
.hover-gray-100-ns
hover-gray-200-ns 
.hover-gray-200-ns:hover {
  color: var(--mg-gray-200);
}
.hover-gray-200-ns
.hover-gray-200-ns
hover-gray-300-ns 
.hover-gray-300-ns:hover {
  color: var(--mg-gray-300);
}
.hover-gray-300-ns
.hover-gray-300-ns
hover-gray-400-ns 
.hover-gray-400-ns:hover {
  color: var(--mg-gray-400);
}
.hover-gray-400-ns
.hover-gray-400-ns
hover-gray-500-ns 
.hover-gray-500-ns:hover {
  color: var(--mg-gray-500);
}
.hover-gray-500-ns
.hover-gray-500-ns
hover-gray-600-ns 
.hover-gray-600-ns:hover {
  color: var(--mg-gray-600);
}
.hover-gray-600-ns
.hover-gray-600-ns
hover-gray-700-ns 
.hover-gray-700-ns:hover {
  color: var(--mg-gray-700);
}
.hover-gray-700-ns
.hover-gray-700-ns
hover-gray-800-ns 
.hover-gray-800-ns:hover {
  color: var(--mg-gray-800);
}
.hover-gray-800-ns
.hover-gray-800-ns
hover-gray-900-ns 
.hover-gray-900-ns:hover {
  color: var(--mg-gray-900);
}
.hover-gray-900-ns
.hover-gray-900-ns
bg-gray*
Gray Background
bg-gray-100-ns 
.bg-gray-100-ns {
  background-color: var(--mg-gray-100);
}
.bg-gray-100-ns
.bg-gray-100-ns
bg-gray-200-ns 
.bg-gray-200-ns {
  background-color: var(--mg-gray-200);
}
.bg-gray-200-ns
.bg-gray-200-ns
bg-gray-300-ns 
.bg-gray-300-ns {
  background-color: var(--mg-gray-300);
}
.bg-gray-300-ns
.bg-gray-300-ns
bg-gray-400-ns 
.bg-gray-400-ns {
  background-color: var(--mg-gray-400);
}
.bg-gray-400-ns
.bg-gray-400-ns
bg-gray-500-ns 
.bg-gray-500-ns {
  background-color: var(--mg-gray-500);
}
.bg-gray-500-ns
.bg-gray-500-ns
bg-gray-600-ns 
.bg-gray-600-ns {
  background-color: var(--mg-gray-600);
}
.bg-gray-600-ns
.bg-gray-600-ns
bg-gray-700-ns 
.bg-gray-700-ns {
  background-color: var(--mg-gray-700);
}
.bg-gray-700-ns
.bg-gray-700-ns
bg-gray-800-ns 
.bg-gray-800-ns {
  background-color: var(--mg-gray-800);
}
.bg-gray-800-ns
.bg-gray-800-ns
bg-gray-900-ns 
.bg-gray-900-ns {
  background-color: var(--mg-gray-900);
}
.bg-gray-900-ns
.bg-gray-900-ns
hover-bg-gray-100-ns 
.hover-bg-gray-100-ns:hover {
  background-color: var(--mg-gray-100);
}
.hover-bg-gray-100-ns
.hover-bg-gray-100-ns
hover-bg-gray-200-ns 
.hover-bg-gray-200-ns:hover {
  background-color: var(--mg-gray-200);
}
.hover-bg-gray-200-ns
.hover-bg-gray-200-ns
hover-bg-gray-300-ns 
.hover-bg-gray-300-ns:hover {
  background-color: var(--mg-gray-300);
}
.hover-bg-gray-300-ns
.hover-bg-gray-300-ns
hover-bg-gray-400-ns 
.hover-bg-gray-400-ns:hover {
  background-color: var(--mg-gray-400);
}
.hover-bg-gray-400-ns
.hover-bg-gray-400-ns
hover-bg-gray-500-ns 
.hover-bg-gray-500-ns:hover {
  background-color: var(--mg-gray-500);
}
.hover-bg-gray-500-ns
.hover-bg-gray-500-ns
hover-bg-gray-600-ns 
.hover-bg-gray-600-ns:hover {
  background-color: var(--mg-gray-600);
}
.hover-bg-gray-600-ns
.hover-bg-gray-600-ns
hover-bg-gray-700-ns 
.hover-bg-gray-700-ns:hover {
  background-color: var(--mg-gray-700);
}
.hover-bg-gray-700-ns
.hover-bg-gray-700-ns
hover-bg-gray-800-ns 
.hover-bg-gray-800-ns:hover {
  background-color: var(--mg-gray-800);
}
.hover-bg-gray-800-ns
.hover-bg-gray-800-ns
hover-bg-gray-900-ns 
.hover-bg-gray-900-ns:hover {
  background-color: var(--mg-gray-900);
}
.hover-bg-gray-900-ns
.hover-bg-gray-900-ns
bc-gray*
Gray Border
bc-gray-100-ns 
.bc-gray-100-ns {
  border-color: var(--mg-gray-100);
}
.bc-gray-100-ns
.bc-gray-100-ns
bc-gray-200-ns 
.bc-gray-200-ns {
  border-color: var(--mg-gray-200);
}
.bc-gray-200-ns
.bc-gray-200-ns
bc-gray-300-ns 
.bc-gray-300-ns {
  border-color: var(--mg-gray-300);
}
.bc-gray-300-ns
.bc-gray-300-ns
bc-gray-400-ns 
.bc-gray-400-ns {
  border-color: var(--mg-gray-400);
}
.bc-gray-400-ns
.bc-gray-400-ns
bc-gray-500-ns 
.bc-gray-500-ns {
  border-color: var(--mg-gray-500);
}
.bc-gray-500-ns
.bc-gray-500-ns
bc-gray-600-ns 
.bc-gray-600-ns {
  border-color: var(--mg-gray-600);
}
.bc-gray-600-ns
.bc-gray-600-ns
bc-gray-700-ns 
.bc-gray-700-ns {
  border-color: var(--mg-gray-700);
}
.bc-gray-700-ns
.bc-gray-700-ns
bc-gray-800-ns 
.bc-gray-800-ns {
  border-color: var(--mg-gray-800);
}
.bc-gray-800-ns
.bc-gray-800-ns
bc-gray-900-ns 
.bc-gray-900-ns {
  border-color: var(--mg-gray-900);
}
.bc-gray-900-ns
.bc-gray-900-ns
hover-bc-gray-100-ns 
.hover-bc-gray-100-ns:hover {
  border-color: var(--mg-gray-100);
}
.hover-bc-gray-100-ns
.hover-bc-gray-100-ns
hover-bc-gray-200-ns 
.hover-bc-gray-200-ns:hover {
  border-color: var(--mg-gray-200);
}
.hover-bc-gray-200-ns
.hover-bc-gray-200-ns
hover-bc-gray-300-ns 
.hover-bc-gray-300-ns:hover {
  border-color: var(--mg-gray-300);
}
.hover-bc-gray-300-ns
.hover-bc-gray-300-ns
hover-bc-gray-400-ns 
.hover-bc-gray-400-ns:hover {
  border-color: var(--mg-gray-400);
}
.hover-bc-gray-400-ns
.hover-bc-gray-400-ns
hover-bc-gray-500-ns 
.hover-bc-gray-500-ns:hover {
  border-color: var(--mg-gray-500);
}
.hover-bc-gray-500-ns
.hover-bc-gray-500-ns
hover-bc-gray-600-ns 
.hover-bc-gray-600-ns:hover {
  border-color: var(--mg-gray-600);
}
.hover-bc-gray-600-ns
.hover-bc-gray-600-ns
hover-bc-gray-700-ns 
.hover-bc-gray-700-ns:hover {
  border-color: var(--mg-gray-700);
}
.hover-bc-gray-700-ns
.hover-bc-gray-700-ns
hover-bc-gray-800-ns 
.hover-bc-gray-800-ns:hover {
  border-color: var(--mg-gray-800);
}
.hover-bc-gray-800-ns
.hover-bc-gray-800-ns
hover-bc-gray-900-ns 
.hover-bc-gray-900-ns:hover {
  border-color: var(--mg-gray-900);
}
.hover-bc-gray-900-ns
.hover-bc-gray-900-ns
Green
green*
Green Text
green-100-ns 
.green-100-ns {
  color: var(--mg-green-100);
}
.green-100-ns
.green-100-ns
green-200-ns 
.green-200-ns {
  color: var(--mg-green-200);
}
.green-200-ns
.green-200-ns
green-300-ns 
.green-300-ns {
  color: var(--mg-green-300);
}
.green-300-ns
.green-300-ns
green-400-ns 
.green-400-ns {
  color: var(--mg-green-400);
}
.green-400-ns
.green-400-ns
green-500-ns 
.green-500-ns {
  color: var(--mg-green-500);
}
.green-500-ns
.green-500-ns
green-600-ns 
.green-600-ns {
  color: var(--mg-green-600);
}
.green-600-ns
.green-600-ns
green-700-ns 
.green-700-ns {
  color: var(--mg-green-700);
}
.green-700-ns
.green-700-ns
green-800-ns 
.green-800-ns {
  color: var(--mg-green-800);
}
.green-800-ns
.green-800-ns
green-900-ns 
.green-900-ns {
  color: var(--mg-green-900);
}
.green-900-ns
.green-900-ns
hover-green-100-ns 
.hover-green-100-ns:hover {
  color: var(--mg-green-100);
}
.hover-green-100-ns
.hover-green-100-ns
hover-green-200-ns 
.hover-green-200-ns:hover {
  color: var(--mg-green-200);
}
.hover-green-200-ns
.hover-green-200-ns
hover-green-300-ns 
.hover-green-300-ns:hover {
  color: var(--mg-green-300);
}
.hover-green-300-ns
.hover-green-300-ns
hover-green-400-ns 
.hover-green-400-ns:hover {
  color: var(--mg-green-400);
}
.hover-green-400-ns
.hover-green-400-ns
hover-green-500-ns 
.hover-green-500-ns:hover {
  color: var(--mg-green-500);
}
.hover-green-500-ns
.hover-green-500-ns
hover-green-600-ns 
.hover-green-600-ns:hover {
  color: var(--mg-green-600);
}
.hover-green-600-ns
.hover-green-600-ns
hover-green-700-ns 
.hover-green-700-ns:hover {
  color: var(--mg-green-700);
}
.hover-green-700-ns
.hover-green-700-ns
hover-green-800-ns 
.hover-green-800-ns:hover {
  color: var(--mg-green-800);
}
.hover-green-800-ns
.hover-green-800-ns
hover-green-900-ns 
.hover-green-900-ns:hover {
  color: var(--mg-green-900);
}
.hover-green-900-ns
.hover-green-900-ns
bg-green*
Green Background
bg-green-100-ns 
.bg-green-100-ns {
  background-color: var(--mg-green-100);
}
.bg-green-100-ns
.bg-green-100-ns
bg-green-200-ns 
.bg-green-200-ns {
  background-color: var(--mg-green-200);
}
.bg-green-200-ns
.bg-green-200-ns
bg-green-300-ns 
.bg-green-300-ns {
  background-color: var(--mg-green-300);
}
.bg-green-300-ns
.bg-green-300-ns
bg-green-400-ns 
.bg-green-400-ns {
  background-color: var(--mg-green-400);
}
.bg-green-400-ns
.bg-green-400-ns
bg-green-500-ns 
.bg-green-500-ns {
  background-color: var(--mg-green-500);
}
.bg-green-500-ns
.bg-green-500-ns
bg-green-600-ns 
.bg-green-600-ns {
  background-color: var(--mg-green-600);
}
.bg-green-600-ns
.bg-green-600-ns
bg-green-700-ns 
.bg-green-700-ns {
  background-color: var(--mg-green-700);
}
.bg-green-700-ns
.bg-green-700-ns
bg-green-800-ns 
.bg-green-800-ns {
  background-color: var(--mg-green-800);
}
.bg-green-800-ns
.bg-green-800-ns
bg-green-900-ns 
.bg-green-900-ns {
  background-color: var(--mg-green-900);
}
.bg-green-900-ns
.bg-green-900-ns
hover-bg-green-100-ns 
.hover-bg-green-100-ns:hover {
  background-color: var(--mg-green-100);
}
.hover-bg-green-100-ns
.hover-bg-green-100-ns
hover-bg-green-200-ns 
.hover-bg-green-200-ns:hover {
  background-color: var(--mg-green-200);
}
.hover-bg-green-200-ns
.hover-bg-green-200-ns
hover-bg-green-300-ns 
.hover-bg-green-300-ns:hover {
  background-color: var(--mg-green-300);
}
.hover-bg-green-300-ns
.hover-bg-green-300-ns
hover-bg-green-400-ns 
.hover-bg-green-400-ns:hover {
  background-color: var(--mg-green-400);
}
.hover-bg-green-400-ns
.hover-bg-green-400-ns
hover-bg-green-500-ns 
.hover-bg-green-500-ns:hover {
  background-color: var(--mg-green-500);
}
.hover-bg-green-500-ns
.hover-bg-green-500-ns
hover-bg-green-600-ns 
.hover-bg-green-600-ns:hover {
  background-color: var(--mg-green-600);
}
.hover-bg-green-600-ns
.hover-bg-green-600-ns
hover-bg-green-700-ns 
.hover-bg-green-700-ns:hover {
  background-color: var(--mg-green-700);
}
.hover-bg-green-700-ns
.hover-bg-green-700-ns
hover-bg-green-800-ns 
.hover-bg-green-800-ns:hover {
  background-color: var(--mg-green-800);
}
.hover-bg-green-800-ns
.hover-bg-green-800-ns
hover-bg-green-900-ns 
.hover-bg-green-900-ns:hover {
  background-color: var(--mg-green-900);
}
.hover-bg-green-900-ns
.hover-bg-green-900-ns
bc-green*
Green Border
bc-green-100-ns 
.bc-green-100-ns {
  border-color: var(--mg-green-100);
}
.bc-green-100-ns
.bc-green-100-ns
bc-green-200-ns 
.bc-green-200-ns {
  border-color: var(--mg-green-200);
}
.bc-green-200-ns
.bc-green-200-ns
bc-green-300-ns 
.bc-green-300-ns {
  border-color: var(--mg-green-300);
}
.bc-green-300-ns
.bc-green-300-ns
bc-green-400-ns 
.bc-green-400-ns {
  border-color: var(--mg-green-400);
}
.bc-green-400-ns
.bc-green-400-ns
bc-green-500-ns 
.bc-green-500-ns {
  border-color: var(--mg-green-500);
}
.bc-green-500-ns
.bc-green-500-ns
bc-green-600-ns 
.bc-green-600-ns {
  border-color: var(--mg-green-600);
}
.bc-green-600-ns
.bc-green-600-ns
bc-green-700-ns 
.bc-green-700-ns {
  border-color: var(--mg-green-700);
}
.bc-green-700-ns
.bc-green-700-ns
bc-green-800-ns 
.bc-green-800-ns {
  border-color: var(--mg-green-800);
}
.bc-green-800-ns
.bc-green-800-ns
bc-green-900-ns 
.bc-green-900-ns {
  border-color: var(--mg-green-900);
}
.bc-green-900-ns
.bc-green-900-ns
hover-bc-green-100-ns 
.hover-bc-green-100-ns:hover {
  border-color: var(--mg-green-100);
}
.hover-bc-green-100-ns
.hover-bc-green-100-ns
hover-bc-green-200-ns 
.hover-bc-green-200-ns:hover {
  border-color: var(--mg-green-200);
}
.hover-bc-green-200-ns
.hover-bc-green-200-ns
hover-bc-green-300-ns 
.hover-bc-green-300-ns:hover {
  border-color: var(--mg-green-300);
}
.hover-bc-green-300-ns
.hover-bc-green-300-ns
hover-bc-green-400-ns 
.hover-bc-green-400-ns:hover {
  border-color: var(--mg-green-400);
}
.hover-bc-green-400-ns
.hover-bc-green-400-ns
hover-bc-green-500-ns 
.hover-bc-green-500-ns:hover {
  border-color: var(--mg-green-500);
}
.hover-bc-green-500-ns
.hover-bc-green-500-ns
hover-bc-green-600-ns 
.hover-bc-green-600-ns:hover {
  border-color: var(--mg-green-600);
}
.hover-bc-green-600-ns
.hover-bc-green-600-ns
hover-bc-green-700-ns 
.hover-bc-green-700-ns:hover {
  border-color: var(--mg-green-700);
}
.hover-bc-green-700-ns
.hover-bc-green-700-ns
hover-bc-green-800-ns 
.hover-bc-green-800-ns:hover {
  border-color: var(--mg-green-800);
}
.hover-bc-green-800-ns
.hover-bc-green-800-ns
hover-bc-green-900-ns 
.hover-bc-green-900-ns:hover {
  border-color: var(--mg-green-900);
}
.hover-bc-green-900-ns
.hover-bc-green-900-ns
Orange
orange*
Orange Text
orange-100-ns 
.orange-100-ns {
  color: var(--mg-orange-100);
}
.orange-100-ns
.orange-100-ns
orange-200-ns 
.orange-200-ns {
  color: var(--mg-orange-200);
}
.orange-200-ns
.orange-200-ns
orange-300-ns 
.orange-300-ns {
  color: var(--mg-orange-300);
}
.orange-300-ns
.orange-300-ns
orange-400-ns 
.orange-400-ns {
  color: var(--mg-orange-400);
}
.orange-400-ns
.orange-400-ns
orange-500-ns 
.orange-500-ns {
  color: var(--mg-orange-500);
}
.orange-500-ns
.orange-500-ns
orange-600-ns 
.orange-600-ns {
  color: var(--mg-orange-600);
}
.orange-600-ns
.orange-600-ns
orange-700-ns 
.orange-700-ns {
  color: var(--mg-orange-700);
}
.orange-700-ns
.orange-700-ns
orange-800-ns 
.orange-800-ns {
  color: var(--mg-orange-800);
}
.orange-800-ns
.orange-800-ns
orange-900-ns 
.orange-900-ns {
  color: var(--mg-orange-900);
}
.orange-900-ns
.orange-900-ns
hover-orange-100-ns 
.hover-orange-100-ns:hover {
  color: var(--mg-orange-100);
}
.hover-orange-100-ns
.hover-orange-100-ns
hover-orange-200-ns 
.hover-orange-200-ns:hover {
  color: var(--mg-orange-200);
}
.hover-orange-200-ns
.hover-orange-200-ns
hover-orange-300-ns 
.hover-orange-300-ns:hover {
  color: var(--mg-orange-300);
}
.hover-orange-300-ns
.hover-orange-300-ns
hover-orange-400-ns 
.hover-orange-400-ns:hover {
  color: var(--mg-orange-400);
}
.hover-orange-400-ns
.hover-orange-400-ns
hover-orange-500-ns 
.hover-orange-500-ns:hover {
  color: var(--mg-orange-500);
}
.hover-orange-500-ns
.hover-orange-500-ns
hover-orange-600-ns 
.hover-orange-600-ns:hover {
  color: var(--mg-orange-600);
}
.hover-orange-600-ns
.hover-orange-600-ns
hover-orange-700-ns 
.hover-orange-700-ns:hover {
  color: var(--mg-orange-700);
}
.hover-orange-700-ns
.hover-orange-700-ns
hover-orange-800-ns 
.hover-orange-800-ns:hover {
  color: var(--mg-orange-800);
}
.hover-orange-800-ns
.hover-orange-800-ns
hover-orange-900-ns 
.hover-orange-900-ns:hover {
  color: var(--mg-orange-900);
}
.hover-orange-900-ns
.hover-orange-900-ns
bg-orange*
Orange Background
bg-orange-100-ns 
.bg-orange-100-ns {
  background-color: var(--mg-orange-100);
}
.bg-orange-100-ns
.bg-orange-100-ns
bg-orange-200-ns 
.bg-orange-200-ns {
  background-color: var(--mg-orange-200);
}
.bg-orange-200-ns
.bg-orange-200-ns
bg-orange-300-ns 
.bg-orange-300-ns {
  background-color: var(--mg-orange-300);
}
.bg-orange-300-ns
.bg-orange-300-ns
bg-orange-400-ns 
.bg-orange-400-ns {
  background-color: var(--mg-orange-400);
}
.bg-orange-400-ns
.bg-orange-400-ns
bg-orange-500-ns 
.bg-orange-500-ns {
  background-color: var(--mg-orange-500);
}
.bg-orange-500-ns
.bg-orange-500-ns
bg-orange-600-ns 
.bg-orange-600-ns {
  background-color: var(--mg-orange-600);
}
.bg-orange-600-ns
.bg-orange-600-ns
bg-orange-700-ns 
.bg-orange-700-ns {
  background-color: var(--mg-orange-700);
}
.bg-orange-700-ns
.bg-orange-700-ns
bg-orange-800-ns 
.bg-orange-800-ns {
  background-color: var(--mg-orange-800);
}
.bg-orange-800-ns
.bg-orange-800-ns
bg-orange-900-ns 
.bg-orange-900-ns {
  background-color: var(--mg-orange-900);
}
.bg-orange-900-ns
.bg-orange-900-ns
hover-bg-orange-100-ns 
.hover-bg-orange-100-ns:hover {
  background-color: var(--mg-orange-100);
}
.hover-bg-orange-100-ns
.hover-bg-orange-100-ns
hover-bg-orange-200-ns 
.hover-bg-orange-200-ns:hover {
  background-color: var(--mg-orange-200);
}
.hover-bg-orange-200-ns
.hover-bg-orange-200-ns
hover-bg-orange-300-ns 
.hover-bg-orange-300-ns:hover {
  background-color: var(--mg-orange-300);
}
.hover-bg-orange-300-ns
.hover-bg-orange-300-ns
hover-bg-orange-400-ns 
.hover-bg-orange-400-ns:hover {
  background-color: var(--mg-orange-400);
}
.hover-bg-orange-400-ns
.hover-bg-orange-400-ns
hover-bg-orange-500-ns 
.hover-bg-orange-500-ns:hover {
  background-color: var(--mg-orange-500);
}
.hover-bg-orange-500-ns
.hover-bg-orange-500-ns
hover-bg-orange-600-ns 
.hover-bg-orange-600-ns:hover {
  background-color: var(--mg-orange-600);
}
.hover-bg-orange-600-ns
.hover-bg-orange-600-ns
hover-bg-orange-700-ns 
.hover-bg-orange-700-ns:hover {
  background-color: var(--mg-orange-700);
}
.hover-bg-orange-700-ns
.hover-bg-orange-700-ns
hover-bg-orange-800-ns 
.hover-bg-orange-800-ns:hover {
  background-color: var(--mg-orange-800);
}
.hover-bg-orange-800-ns
.hover-bg-orange-800-ns
hover-bg-orange-900-ns 
.hover-bg-orange-900-ns:hover {
  background-color: var(--mg-orange-900);
}
.hover-bg-orange-900-ns
.hover-bg-orange-900-ns
bc-orange*
Orange Border
bc-orange-100-ns 
.bc-orange-100-ns {
  border-color: var(--mg-orange-100);
}
.bc-orange-100-ns
.bc-orange-100-ns
bc-orange-200-ns 
.bc-orange-200-ns {
  border-color: var(--mg-orange-200);
}
.bc-orange-200-ns
.bc-orange-200-ns
bc-orange-300-ns 
.bc-orange-300-ns {
  border-color: var(--mg-orange-300);
}
.bc-orange-300-ns
.bc-orange-300-ns
bc-orange-400-ns 
.bc-orange-400-ns {
  border-color: var(--mg-orange-400);
}
.bc-orange-400-ns
.bc-orange-400-ns
bc-orange-500-ns 
.bc-orange-500-ns {
  border-color: var(--mg-orange-500);
}
.bc-orange-500-ns
.bc-orange-500-ns
bc-orange-600-ns 
.bc-orange-600-ns {
  border-color: var(--mg-orange-600);
}
.bc-orange-600-ns
.bc-orange-600-ns
bc-orange-700-ns 
.bc-orange-700-ns {
  border-color: var(--mg-orange-700);
}
.bc-orange-700-ns
.bc-orange-700-ns
bc-orange-800-ns 
.bc-orange-800-ns {
  border-color: var(--mg-orange-800);
}
.bc-orange-800-ns
.bc-orange-800-ns
bc-orange-900-ns 
.bc-orange-900-ns {
  border-color: var(--mg-orange-900);
}
.bc-orange-900-ns
.bc-orange-900-ns
hover-bc-orange-100-ns 
.hover-bc-orange-100-ns:hover {
  border-color: var(--mg-orange-100);
}
.hover-bc-orange-100-ns
.hover-bc-orange-100-ns
hover-bc-orange-200-ns 
.hover-bc-orange-200-ns:hover {
  border-color: var(--mg-orange-200);
}
.hover-bc-orange-200-ns
.hover-bc-orange-200-ns
hover-bc-orange-300-ns 
.hover-bc-orange-300-ns:hover {
  border-color: var(--mg-orange-300);
}
.hover-bc-orange-300-ns
.hover-bc-orange-300-ns
hover-bc-orange-400-ns 
.hover-bc-orange-400-ns:hover {
  border-color: var(--mg-orange-400);
}
.hover-bc-orange-400-ns
.hover-bc-orange-400-ns
hover-bc-orange-500-ns 
.hover-bc-orange-500-ns:hover {
  border-color: var(--mg-orange-500);
}
.hover-bc-orange-500-ns
.hover-bc-orange-500-ns
hover-bc-orange-600-ns 
.hover-bc-orange-600-ns:hover {
  border-color: var(--mg-orange-600);
}
.hover-bc-orange-600-ns
.hover-bc-orange-600-ns
hover-bc-orange-700-ns 
.hover-bc-orange-700-ns:hover {
  border-color: var(--mg-orange-700);
}
.hover-bc-orange-700-ns
.hover-bc-orange-700-ns
hover-bc-orange-800-ns 
.hover-bc-orange-800-ns:hover {
  border-color: var(--mg-orange-800);
}
.hover-bc-orange-800-ns
.hover-bc-orange-800-ns
hover-bc-orange-900-ns 
.hover-bc-orange-900-ns:hover {
  border-color: var(--mg-orange-900);
}
.hover-bc-orange-900-ns
.hover-bc-orange-900-ns
Purple
purple*
Purple Text
purple-100-ns 
.purple-100-ns {
  color: var(--mg-purple-100);
}
.purple-100-ns
.purple-100-ns
purple-200-ns 
.purple-200-ns {
  color: var(--mg-purple-200);
}
.purple-200-ns
.purple-200-ns
purple-300-ns 
.purple-300-ns {
  color: var(--mg-purple-300);
}
.purple-300-ns
.purple-300-ns
purple-400-ns 
.purple-400-ns {
  color: var(--mg-purple-400);
}
.purple-400-ns
.purple-400-ns
purple-500-ns 
.purple-500-ns {
  color: var(--mg-purple-500);
}
.purple-500-ns
.purple-500-ns
purple-600-ns 
.purple-600-ns {
  color: var(--mg-purple-600);
}
.purple-600-ns
.purple-600-ns
purple-700-ns 
.purple-700-ns {
  color: var(--mg-purple-700);
}
.purple-700-ns
.purple-700-ns
purple-800-ns 
.purple-800-ns {
  color: var(--mg-purple-800);
}
.purple-800-ns
.purple-800-ns
purple-900-ns 
.purple-900-ns {
  color: var(--mg-purple-900);
}
.purple-900-ns
.purple-900-ns
hover-purple-100-ns 
.hover-purple-100-ns:hover {
  color: var(--mg-purple-100);
}
.hover-purple-100-ns
.hover-purple-100-ns
hover-purple-200-ns 
.hover-purple-200-ns:hover {
  color: var(--mg-purple-200);
}
.hover-purple-200-ns
.hover-purple-200-ns
hover-purple-300-ns 
.hover-purple-300-ns:hover {
  color: var(--mg-purple-300);
}
.hover-purple-300-ns
.hover-purple-300-ns
hover-purple-400-ns 
.hover-purple-400-ns:hover {
  color: var(--mg-purple-400);
}
.hover-purple-400-ns
.hover-purple-400-ns
hover-purple-500-ns 
.hover-purple-500-ns:hover {
  color: var(--mg-purple-500);
}
.hover-purple-500-ns
.hover-purple-500-ns
hover-purple-600-ns 
.hover-purple-600-ns:hover {
  color: var(--mg-purple-600);
}
.hover-purple-600-ns
.hover-purple-600-ns
hover-purple-700-ns 
.hover-purple-700-ns:hover {
  color: var(--mg-purple-700);
}
.hover-purple-700-ns
.hover-purple-700-ns
hover-purple-800-ns 
.hover-purple-800-ns:hover {
  color: var(--mg-purple-800);
}
.hover-purple-800-ns
.hover-purple-800-ns
hover-purple-900-ns 
.hover-purple-900-ns:hover {
  color: var(--mg-purple-900);
}
.hover-purple-900-ns
.hover-purple-900-ns
bg-purple*
Purple Background
bg-purple-100-ns 
.bg-purple-100-ns {
  background-color: var(--mg-purple-100);
}
.bg-purple-100-ns
.bg-purple-100-ns
bg-purple-200-ns 
.bg-purple-200-ns {
  background-color: var(--mg-purple-200);
}
.bg-purple-200-ns
.bg-purple-200-ns
bg-purple-300-ns 
.bg-purple-300-ns {
  background-color: var(--mg-purple-300);
}
.bg-purple-300-ns
.bg-purple-300-ns
bg-purple-400-ns 
.bg-purple-400-ns {
  background-color: var(--mg-purple-400);
}
.bg-purple-400-ns
.bg-purple-400-ns
bg-purple-500-ns 
.bg-purple-500-ns {
  background-color: var(--mg-purple-500);
}
.bg-purple-500-ns
.bg-purple-500-ns
bg-purple-600-ns 
.bg-purple-600-ns {
  background-color: var(--mg-purple-600);
}
.bg-purple-600-ns
.bg-purple-600-ns
bg-purple-700-ns 
.bg-purple-700-ns {
  background-color: var(--mg-purple-700);
}
.bg-purple-700-ns
.bg-purple-700-ns
bg-purple-800-ns 
.bg-purple-800-ns {
  background-color: var(--mg-purple-800);
}
.bg-purple-800-ns
.bg-purple-800-ns
bg-purple-900-ns 
.bg-purple-900-ns {
  background-color: var(--mg-purple-900);
}
.bg-purple-900-ns
.bg-purple-900-ns
hover-bg-purple-100-ns 
.hover-bg-purple-100-ns:hover {
  background-color: var(--mg-purple-100);
}
.hover-bg-purple-100-ns
.hover-bg-purple-100-ns
hover-bg-purple-200-ns 
.hover-bg-purple-200-ns:hover {
  background-color: var(--mg-purple-200);
}
.hover-bg-purple-200-ns
.hover-bg-purple-200-ns
hover-bg-purple-300-ns 
.hover-bg-purple-300-ns:hover {
  background-color: var(--mg-purple-300);
}
.hover-bg-purple-300-ns
.hover-bg-purple-300-ns
hover-bg-purple-400-ns 
.hover-bg-purple-400-ns:hover {
  background-color: var(--mg-purple-400);
}
.hover-bg-purple-400-ns
.hover-bg-purple-400-ns
hover-bg-purple-500-ns 
.hover-bg-purple-500-ns:hover {
  background-color: var(--mg-purple-500);
}
.hover-bg-purple-500-ns
.hover-bg-purple-500-ns
hover-bg-purple-600-ns 
.hover-bg-purple-600-ns:hover {
  background-color: var(--mg-purple-600);
}
.hover-bg-purple-600-ns
.hover-bg-purple-600-ns
hover-bg-purple-700-ns 
.hover-bg-purple-700-ns:hover {
  background-color: var(--mg-purple-700);
}
.hover-bg-purple-700-ns
.hover-bg-purple-700-ns
hover-bg-purple-800-ns 
.hover-bg-purple-800-ns:hover {
  background-color: var(--mg-purple-800);
}
.hover-bg-purple-800-ns
.hover-bg-purple-800-ns
hover-bg-purple-900-ns 
.hover-bg-purple-900-ns:hover {
  background-color: var(--mg-purple-900);
}
.hover-bg-purple-900-ns
.hover-bg-purple-900-ns
bc-purple*
Purple Border
bc-purple-100-ns 
.bc-purple-100-ns {
  border-color: var(--mg-purple-100);
}
.bc-purple-100-ns
.bc-purple-100-ns
bc-purple-200-ns 
.bc-purple-200-ns {
  border-color: var(--mg-purple-200);
}
.bc-purple-200-ns
.bc-purple-200-ns
bc-purple-300-ns 
.bc-purple-300-ns {
  border-color: var(--mg-purple-300);
}
.bc-purple-300-ns
.bc-purple-300-ns
bc-purple-400-ns 
.bc-purple-400-ns {
  border-color: var(--mg-purple-400);
}
.bc-purple-400-ns
.bc-purple-400-ns
bc-purple-500-ns 
.bc-purple-500-ns {
  border-color: var(--mg-purple-500);
}
.bc-purple-500-ns
.bc-purple-500-ns
bc-purple-600-ns 
.bc-purple-600-ns {
  border-color: var(--mg-purple-600);
}
.bc-purple-600-ns
.bc-purple-600-ns
bc-purple-700-ns 
.bc-purple-700-ns {
  border-color: var(--mg-purple-700);
}
.bc-purple-700-ns
.bc-purple-700-ns
bc-purple-800-ns 
.bc-purple-800-ns {
  border-color: var(--mg-purple-800);
}
.bc-purple-800-ns
.bc-purple-800-ns
bc-purple-900-ns 
.bc-purple-900-ns {
  border-color: var(--mg-purple-900);
}
.bc-purple-900-ns
.bc-purple-900-ns
hover-bc-purple-100-ns 
.hover-bc-purple-100-ns:hover {
  border-color: var(--mg-purple-100);
}
.hover-bc-purple-100-ns
.hover-bc-purple-100-ns
hover-bc-purple-200-ns 
.hover-bc-purple-200-ns:hover {
  border-color: var(--mg-purple-200);
}
.hover-bc-purple-200-ns
.hover-bc-purple-200-ns
hover-bc-purple-300-ns 
.hover-bc-purple-300-ns:hover {
  border-color: var(--mg-purple-300);
}
.hover-bc-purple-300-ns
.hover-bc-purple-300-ns
hover-bc-purple-400-ns 
.hover-bc-purple-400-ns:hover {
  border-color: var(--mg-purple-400);
}
.hover-bc-purple-400-ns
.hover-bc-purple-400-ns
hover-bc-purple-500-ns 
.hover-bc-purple-500-ns:hover {
  border-color: var(--mg-purple-500);
}
.hover-bc-purple-500-ns
.hover-bc-purple-500-ns
hover-bc-purple-600-ns 
.hover-bc-purple-600-ns:hover {
  border-color: var(--mg-purple-600);
}
.hover-bc-purple-600-ns
.hover-bc-purple-600-ns
hover-bc-purple-700-ns 
.hover-bc-purple-700-ns:hover {
  border-color: var(--mg-purple-700);
}
.hover-bc-purple-700-ns
.hover-bc-purple-700-ns
hover-bc-purple-800-ns 
.hover-bc-purple-800-ns:hover {
  border-color: var(--mg-purple-800);
}
.hover-bc-purple-800-ns
.hover-bc-purple-800-ns
hover-bc-purple-900-ns 
.hover-bc-purple-900-ns:hover {
  border-color: var(--mg-purple-900);
}
.hover-bc-purple-900-ns
.hover-bc-purple-900-ns
Red
red*
Red Text
red-100-ns 
.red-100-ns {
  color: var(--mg-red-100);
}
.red-100-ns
.red-100-ns
red-200-ns 
.red-200-ns {
  color: var(--mg-red-200);
}
.red-200-ns
.red-200-ns
red-300-ns 
.red-300-ns {
  color: var(--mg-red-300);
}
.red-300-ns
.red-300-ns
red-400-ns 
.red-400-ns {
  color: var(--mg-red-400);
}
.red-400-ns
.red-400-ns
red-500-ns 
.red-500-ns {
  color: var(--mg-red-500);
}
.red-500-ns
.red-500-ns
red-600-ns 
.red-600-ns {
  color: var(--mg-red-600);
}
.red-600-ns
.red-600-ns
red-700-ns 
.red-700-ns {
  color: var(--mg-red-700);
}
.red-700-ns
.red-700-ns
red-800-ns 
.red-800-ns {
  color: var(--mg-red-800);
}
.red-800-ns
.red-800-ns
red-900-ns 
.red-900-ns {
  color: var(--mg-red-900);
}
.red-900-ns
.red-900-ns
hover-red-100-ns 
.hover-red-100-ns:hover {
  color: var(--mg-red-100);
}
.hover-red-100-ns
.hover-red-100-ns
hover-red-200-ns 
.hover-red-200-ns:hover {
  color: var(--mg-red-200);
}
.hover-red-200-ns
.hover-red-200-ns
hover-red-300-ns 
.hover-red-300-ns:hover {
  color: var(--mg-red-300);
}
.hover-red-300-ns
.hover-red-300-ns
hover-red-400-ns 
.hover-red-400-ns:hover {
  color: var(--mg-red-400);
}
.hover-red-400-ns
.hover-red-400-ns
hover-red-500-ns 
.hover-red-500-ns:hover {
  color: var(--mg-red-500);
}
.hover-red-500-ns
.hover-red-500-ns
hover-red-600-ns 
.hover-red-600-ns:hover {
  color: var(--mg-red-600);
}
.hover-red-600-ns
.hover-red-600-ns
hover-red-700-ns 
.hover-red-700-ns:hover {
  color: var(--mg-red-700);
}
.hover-red-700-ns
.hover-red-700-ns
hover-red-800-ns 
.hover-red-800-ns:hover {
  color: var(--mg-red-800);
}
.hover-red-800-ns
.hover-red-800-ns
hover-red-900-ns 
.hover-red-900-ns:hover {
  color: var(--mg-red-900);
}
.hover-red-900-ns
.hover-red-900-ns
bg-red*
Red Background
bg-red-100-ns 
.bg-red-100-ns {
  background-color: var(--mg-red-100);
}
.bg-red-100-ns
.bg-red-100-ns
bg-red-200-ns 
.bg-red-200-ns {
  background-color: var(--mg-red-200);
}
.bg-red-200-ns
.bg-red-200-ns
bg-red-300-ns 
.bg-red-300-ns {
  background-color: var(--mg-red-300);
}
.bg-red-300-ns
.bg-red-300-ns
bg-red-400-ns 
.bg-red-400-ns {
  background-color: var(--mg-red-400);
}
.bg-red-400-ns
.bg-red-400-ns
bg-red-500-ns 
.bg-red-500-ns {
  background-color: var(--mg-red-500);
}
.bg-red-500-ns
.bg-red-500-ns
bg-red-600-ns 
.bg-red-600-ns {
  background-color: var(--mg-red-600);
}
.bg-red-600-ns
.bg-red-600-ns
bg-red-700-ns 
.bg-red-700-ns {
  background-color: var(--mg-red-700);
}
.bg-red-700-ns
.bg-red-700-ns
bg-red-800-ns 
.bg-red-800-ns {
  background-color: var(--mg-red-800);
}
.bg-red-800-ns
.bg-red-800-ns
bg-red-900-ns 
.bg-red-900-ns {
  background-color: var(--mg-red-900);
}
.bg-red-900-ns
.bg-red-900-ns
hover-bg-red-100-ns 
.hover-bg-red-100-ns:hover {
  background-color: var(--mg-red-100);
}
.hover-bg-red-100-ns
.hover-bg-red-100-ns
hover-bg-red-200-ns 
.hover-bg-red-200-ns:hover {
  background-color: var(--mg-red-200);
}
.hover-bg-red-200-ns
.hover-bg-red-200-ns
hover-bg-red-300-ns 
.hover-bg-red-300-ns:hover {
  background-color: var(--mg-red-300);
}
.hover-bg-red-300-ns
.hover-bg-red-300-ns
hover-bg-red-400-ns 
.hover-bg-red-400-ns:hover {
  background-color: var(--mg-red-400);
}
.hover-bg-red-400-ns
.hover-bg-red-400-ns
hover-bg-red-500-ns 
.hover-bg-red-500-ns:hover {
  background-color: var(--mg-red-500);
}
.hover-bg-red-500-ns
.hover-bg-red-500-ns
hover-bg-red-600-ns 
.hover-bg-red-600-ns:hover {
  background-color: var(--mg-red-600);
}
.hover-bg-red-600-ns
.hover-bg-red-600-ns
hover-bg-red-700-ns 
.hover-bg-red-700-ns:hover {
  background-color: var(--mg-red-700);
}
.hover-bg-red-700-ns
.hover-bg-red-700-ns
hover-bg-red-800-ns 
.hover-bg-red-800-ns:hover {
  background-color: var(--mg-red-800);
}
.hover-bg-red-800-ns
.hover-bg-red-800-ns
hover-bg-red-900-ns 
.hover-bg-red-900-ns:hover {
  background-color: var(--mg-red-900);
}
.hover-bg-red-900-ns
.hover-bg-red-900-ns
bc-red*
Red Border
bc-red-100-ns 
.bc-red-100-ns {
  border-color: var(--mg-red-100);
}
.bc-red-100-ns
.bc-red-100-ns
bc-red-200-ns 
.bc-red-200-ns {
  border-color: var(--mg-red-200);
}
.bc-red-200-ns
.bc-red-200-ns
bc-red-300-ns 
.bc-red-300-ns {
  border-color: var(--mg-red-300);
}
.bc-red-300-ns
.bc-red-300-ns
bc-red-400-ns 
.bc-red-400-ns {
  border-color: var(--mg-red-400);
}
.bc-red-400-ns
.bc-red-400-ns
bc-red-500-ns 
.bc-red-500-ns {
  border-color: var(--mg-red-500);
}
.bc-red-500-ns
.bc-red-500-ns
bc-red-600-ns 
.bc-red-600-ns {
  border-color: var(--mg-red-600);
}
.bc-red-600-ns
.bc-red-600-ns
bc-red-700-ns 
.bc-red-700-ns {
  border-color: var(--mg-red-700);
}
.bc-red-700-ns
.bc-red-700-ns
bc-red-800-ns 
.bc-red-800-ns {
  border-color: var(--mg-red-800);
}
.bc-red-800-ns
.bc-red-800-ns
bc-red-900-ns 
.bc-red-900-ns {
  border-color: var(--mg-red-900);
}
.bc-red-900-ns
.bc-red-900-ns
hover-bc-red-100-ns 
.hover-bc-red-100-ns:hover {
  border-color: var(--mg-red-100);
}
.hover-bc-red-100-ns
.hover-bc-red-100-ns
hover-bc-red-200-ns 
.hover-bc-red-200-ns:hover {
  border-color: var(--mg-red-200);
}
.hover-bc-red-200-ns
.hover-bc-red-200-ns
hover-bc-red-300-ns 
.hover-bc-red-300-ns:hover {
  border-color: var(--mg-red-300);
}
.hover-bc-red-300-ns
.hover-bc-red-300-ns
hover-bc-red-400-ns 
.hover-bc-red-400-ns:hover {
  border-color: var(--mg-red-400);
}
.hover-bc-red-400-ns
.hover-bc-red-400-ns
hover-bc-red-500-ns 
.hover-bc-red-500-ns:hover {
  border-color: var(--mg-red-500);
}
.hover-bc-red-500-ns
.hover-bc-red-500-ns
hover-bc-red-600-ns 
.hover-bc-red-600-ns:hover {
  border-color: var(--mg-red-600);
}
.hover-bc-red-600-ns
.hover-bc-red-600-ns
hover-bc-red-700-ns 
.hover-bc-red-700-ns:hover {
  border-color: var(--mg-red-700);
}
.hover-bc-red-700-ns
.hover-bc-red-700-ns
hover-bc-red-800-ns 
.hover-bc-red-800-ns:hover {
  border-color: var(--mg-red-800);
}
.hover-bc-red-800-ns
.hover-bc-red-800-ns
hover-bc-red-900-ns 
.hover-bc-red-900-ns:hover {
  border-color: var(--mg-red-900);
}
.hover-bc-red-900-ns
.hover-bc-red-900-ns
White
white*
White Text
white-ns 
.white-ns {
  color: var(--mg-white);
}
.white-ns
.white-ns
white-ish-ns 
.white-ish-ns {
  color: var(--mg-white-ish);
}
.white-ish-ns
.white-ish-ns
hover-white-ns 
.hover-white-ns:hover {
  color: var(--mg-white);
}
.hover-white-ns
.hover-white-ns
hover-white-ish-ns 
.hover-white-ish-ns:hover {
  color: var(--mg-white-ish);
}
.hover-white-ish-ns
.hover-white-ish-ns
bg-white*
White Background
bg-white-ns 
.bg-white-ns {
  background-color: var(--mg-white);
}
.bg-white-ns
.bg-white-ns
bg-white-ish-ns 
.bg-white-ish-ns {
  background-color: var(--mg-white-ish);
}
.bg-white-ish-ns
.bg-white-ish-ns
hover-bg-white-ns 
.hover-bg-white-ns:hover {
  background-color: var(--mg-white);
}
.hover-bg-white-ns
.hover-bg-white-ns
hover-bg-white-ish-ns 
.hover-bg-white-ish-ns:hover {
  background-color: var(--mg-white-ish);
}
.hover-bg-white-ish-ns
.hover-bg-white-ish-ns
bc-white*
White Border
bc-white-ns 
.bc-white-ns {
  border-color: var(--mg-white);
}
.bc-white-ns
.bc-white-ns
bc-white-ish-ns 
.bc-white-ish-ns {
  border-color: var(--mg-white-ish);
}
.bc-white-ish-ns
.bc-white-ish-ns
hover-bc-white-ns 
.hover-bc-white-ns:hover {
  border-color: var(--mg-white);
}
.hover-bc-white-ns
.hover-bc-white-ns
hover-bc-white-ish-ns 
.hover-bc-white-ish-ns:hover {
  border-color: var(--mg-white-ish);
}
.hover-bc-white-ish-ns
.hover-bc-white-ish-ns
Yellow
yellow*
Yellow Text
yellow-100-ns 
.yellow-100-ns {
  color: var(--mg-yellow-100);
}
.yellow-100-ns
.yellow-100-ns
yellow-200-ns 
.yellow-200-ns {
  color: var(--mg-yellow-200);
}
.yellow-200-ns
.yellow-200-ns
yellow-300-ns 
.yellow-300-ns {
  color: var(--mg-yellow-300);
}
.yellow-300-ns
.yellow-300-ns
yellow-400-ns 
.yellow-400-ns {
  color: var(--mg-yellow-400);
}
.yellow-400-ns
.yellow-400-ns
yellow-500-ns 
.yellow-500-ns {
  color: var(--mg-yellow-500);
}
.yellow-500-ns
.yellow-500-ns
yellow-600-ns 
.yellow-600-ns {
  color: var(--mg-yellow-600);
}
.yellow-600-ns
.yellow-600-ns
yellow-700-ns 
.yellow-700-ns {
  color: var(--mg-yellow-700);
}
.yellow-700-ns
.yellow-700-ns
yellow-800-ns 
.yellow-800-ns {
  color: var(--mg-yellow-800);
}
.yellow-800-ns
.yellow-800-ns
yellow-900-ns 
.yellow-900-ns {
  color: var(--mg-yellow-900);
}
.yellow-900-ns
.yellow-900-ns
hover-yellow-100-ns 
.hover-yellow-100-ns:hover {
  color: var(--mg-yellow-100);
}
.hover-yellow-100-ns
.hover-yellow-100-ns
hover-yellow-200-ns 
.hover-yellow-200-ns:hover {
  color: var(--mg-yellow-200);
}
.hover-yellow-200-ns
.hover-yellow-200-ns
hover-yellow-300-ns 
.hover-yellow-300-ns:hover {
  color: var(--mg-yellow-300);
}
.hover-yellow-300-ns
.hover-yellow-300-ns
hover-yellow-400-ns 
.hover-yellow-400-ns:hover {
  color: var(--mg-yellow-400);
}
.hover-yellow-400-ns
.hover-yellow-400-ns
hover-yellow-500-ns 
.hover-yellow-500-ns:hover {
  color: var(--mg-yellow-500);
}
.hover-yellow-500-ns
.hover-yellow-500-ns
hover-yellow-600-ns 
.hover-yellow-600-ns:hover {
  color: var(--mg-yellow-600);
}
.hover-yellow-600-ns
.hover-yellow-600-ns
hover-yellow-700-ns 
.hover-yellow-700-ns:hover {
  color: var(--mg-yellow-700);
}
.hover-yellow-700-ns
.hover-yellow-700-ns
hover-yellow-800-ns 
.hover-yellow-800-ns:hover {
  color: var(--mg-yellow-800);
}
.hover-yellow-800-ns
.hover-yellow-800-ns
hover-yellow-900-ns 
.hover-yellow-900-ns:hover {
  color: var(--mg-yellow-900);
}
.hover-yellow-900-ns
.hover-yellow-900-ns
bg-yellow*
Yellow Background
bg-yellow-100-ns 
.bg-yellow-100-ns {
  background-color: var(--mg-yellow-100);
}
.bg-yellow-100-ns
.bg-yellow-100-ns
bg-yellow-200-ns 
.bg-yellow-200-ns {
  background-color: var(--mg-yellow-200);
}
.bg-yellow-200-ns
.bg-yellow-200-ns
bg-yellow-300-ns 
.bg-yellow-300-ns {
  background-color: var(--mg-yellow-300);
}
.bg-yellow-300-ns
.bg-yellow-300-ns
bg-yellow-400-ns 
.bg-yellow-400-ns {
  background-color: var(--mg-yellow-400);
}
.bg-yellow-400-ns
.bg-yellow-400-ns
bg-yellow-500-ns 
.bg-yellow-500-ns {
  background-color: var(--mg-yellow-500);
}
.bg-yellow-500-ns
.bg-yellow-500-ns
bg-yellow-600-ns 
.bg-yellow-600-ns {
  background-color: var(--mg-yellow-600);
}
.bg-yellow-600-ns
.bg-yellow-600-ns
bg-yellow-700-ns 
.bg-yellow-700-ns {
  background-color: var(--mg-yellow-700);
}
.bg-yellow-700-ns
.bg-yellow-700-ns
bg-yellow-800-ns 
.bg-yellow-800-ns {
  background-color: var(--mg-yellow-800);
}
.bg-yellow-800-ns
.bg-yellow-800-ns
bg-yellow-900-ns 
.bg-yellow-900-ns {
  background-color: var(--mg-yellow-900);
}
.bg-yellow-900-ns
.bg-yellow-900-ns
hover-bg-yellow-100-ns 
.hover-bg-yellow-100-ns:hover {
  background-color: var(--mg-yellow-100);
}
.hover-bg-yellow-100-ns
.hover-bg-yellow-100-ns
hover-bg-yellow-200-ns 
.hover-bg-yellow-200-ns:hover {
  background-color: var(--mg-yellow-200);
}
.hover-bg-yellow-200-ns
.hover-bg-yellow-200-ns
hover-bg-yellow-300-ns 
.hover-bg-yellow-300-ns:hover {
  background-color: var(--mg-yellow-300);
}
.hover-bg-yellow-300-ns
.hover-bg-yellow-300-ns
hover-bg-yellow-400-ns 
.hover-bg-yellow-400-ns:hover {
  background-color: var(--mg-yellow-400);
}
.hover-bg-yellow-400-ns
.hover-bg-yellow-400-ns
hover-bg-yellow-500-ns 
.hover-bg-yellow-500-ns:hover {
  background-color: var(--mg-yellow-500);
}
.hover-bg-yellow-500-ns
.hover-bg-yellow-500-ns
hover-bg-yellow-600-ns 
.hover-bg-yellow-600-ns:hover {
  background-color: var(--mg-yellow-600);
}
.hover-bg-yellow-600-ns
.hover-bg-yellow-600-ns
hover-bg-yellow-700-ns 
.hover-bg-yellow-700-ns:hover {
  background-color: var(--mg-yellow-700);
}
.hover-bg-yellow-700-ns
.hover-bg-yellow-700-ns
hover-bg-yellow-800-ns 
.hover-bg-yellow-800-ns:hover {
  background-color: var(--mg-yellow-800);
}
.hover-bg-yellow-800-ns
.hover-bg-yellow-800-ns
hover-bg-yellow-900-ns 
.hover-bg-yellow-900-ns:hover {
  background-color: var(--mg-yellow-900);
}
.hover-bg-yellow-900-ns
.hover-bg-yellow-900-ns
bc-yellow*
Yellow Border
bc-yellow-100-ns 
.bc-yellow-100-ns {
  border-color: var(--mg-yellow-100);
}
.bc-yellow-100-ns
.bc-yellow-100-ns
bc-yellow-200-ns 
.bc-yellow-200-ns {
  border-color: var(--mg-yellow-200);
}
.bc-yellow-200-ns
.bc-yellow-200-ns
bc-yellow-300-ns 
.bc-yellow-300-ns {
  border-color: var(--mg-yellow-300);
}
.bc-yellow-300-ns
.bc-yellow-300-ns
bc-yellow-400-ns 
.bc-yellow-400-ns {
  border-color: var(--mg-yellow-400);
}
.bc-yellow-400-ns
.bc-yellow-400-ns
bc-yellow-500-ns 
.bc-yellow-500-ns {
  border-color: var(--mg-yellow-500);
}
.bc-yellow-500-ns
.bc-yellow-500-ns
bc-yellow-600-ns 
.bc-yellow-600-ns {
  border-color: var(--mg-yellow-600);
}
.bc-yellow-600-ns
.bc-yellow-600-ns
bc-yellow-700-ns 
.bc-yellow-700-ns {
  border-color: var(--mg-yellow-700);
}
.bc-yellow-700-ns
.bc-yellow-700-ns
bc-yellow-800-ns 
.bc-yellow-800-ns {
  border-color: var(--mg-yellow-800);
}
.bc-yellow-800-ns
.bc-yellow-800-ns
bc-yellow-900-ns 
.bc-yellow-900-ns {
  border-color: var(--mg-yellow-900);
}
.bc-yellow-900-ns
.bc-yellow-900-ns
hover-bc-yellow-100-ns 
.hover-bc-yellow-100-ns:hover {
  border-color: var(--mg-yellow-100);
}
.hover-bc-yellow-100-ns
.hover-bc-yellow-100-ns
hover-bc-yellow-200-ns 
.hover-bc-yellow-200-ns:hover {
  border-color: var(--mg-yellow-200);
}
.hover-bc-yellow-200-ns
.hover-bc-yellow-200-ns
hover-bc-yellow-300-ns 
.hover-bc-yellow-300-ns:hover {
  border-color: var(--mg-yellow-300);
}
.hover-bc-yellow-300-ns
.hover-bc-yellow-300-ns
hover-bc-yellow-400-ns 
.hover-bc-yellow-400-ns:hover {
  border-color: var(--mg-yellow-400);
}
.hover-bc-yellow-400-ns
.hover-bc-yellow-400-ns
hover-bc-yellow-500-ns 
.hover-bc-yellow-500-ns:hover {
  border-color: var(--mg-yellow-500);
}
.hover-bc-yellow-500-ns
.hover-bc-yellow-500-ns
hover-bc-yellow-600-ns 
.hover-bc-yellow-600-ns:hover {
  border-color: var(--mg-yellow-600);
}
.hover-bc-yellow-600-ns
.hover-bc-yellow-600-ns
hover-bc-yellow-700-ns 
.hover-bc-yellow-700-ns:hover {
  border-color: var(--mg-yellow-700);
}
.hover-bc-yellow-700-ns
.hover-bc-yellow-700-ns
hover-bc-yellow-800-ns 
.hover-bc-yellow-800-ns:hover {
  border-color: var(--mg-yellow-800);
}
.hover-bc-yellow-800-ns
.hover-bc-yellow-800-ns
hover-bc-yellow-900-ns 
.hover-bc-yellow-900-ns:hover {
  border-color: var(--mg-yellow-900);
}
.hover-bc-yellow-900-ns
.hover-bc-yellow-900-ns