diff --git a/components/badge/__tests__/__snapshots__/index.test.tsx.snap b/components/badge/__tests__/__snapshots__/index.test.tsx.snap
index 968e4024b..8c063d9a4 100644
--- a/components/badge/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/badge/__tests__/__snapshots__/index.test.tsx.snap
@@ -316,7 +316,7 @@ initialize {
           font-variant: tabular-nums;
           line-height: 1;
           vertical-align: middle;
-          background-color: #ff0000;
+          background-color: #e00;
           color: white;
           font-size: .875rem;
           border: 0;
@@ -358,7 +358,7 @@ initialize {
           font-variant: tabular-nums;
           line-height: 1;
           vertical-align: middle;
-          background-color: #ff0000;
+          background-color: #e00;
           color: white;
           font-size: .875rem;
           border: 0;
@@ -645,7 +645,7 @@ initialize {
           font-variant: tabular-nums;
           line-height: 1;
           vertical-align: middle;
-          background-color: #ff0000;
+          background-color: #e00;
           color: white;
           font-size: .875rem;
           border: 0;
@@ -687,7 +687,7 @@ initialize {
           font-variant: tabular-nums;
           line-height: 1;
           vertical-align: middle;
-          background-color: #ff0000;
+          background-color: #e00;
           color: white;
           font-size: .875rem;
           border: 0;
@@ -974,7 +974,7 @@ initialize {
           font-variant: tabular-nums;
           line-height: 1;
           vertical-align: middle;
-          background-color: #ff0000;
+          background-color: #e00;
           color: white;
           font-size: .875rem;
           border: 0;
@@ -1016,7 +1016,7 @@ initialize {
           font-variant: tabular-nums;
           line-height: 1;
           vertical-align: middle;
-          background-color: #ff0000;
+          background-color: #e00;
           color: white;
           font-size: .875rem;
           border: 0;
@@ -1303,7 +1303,7 @@ initialize {
           font-variant: tabular-nums;
           line-height: 1;
           vertical-align: middle;
-          background-color: #ff0000;
+          background-color: #e00;
           color: white;
           font-size: .875rem;
           border: 0;
@@ -1345,7 +1345,7 @@ initialize {
           font-variant: tabular-nums;
           line-height: 1;
           vertical-align: middle;
-          background-color: #ff0000;
+          background-color: #e00;
           color: white;
           font-size: .875rem;
           border: 0;
diff --git a/components/button-dropdown/__tests__/__snapshots__/index.test.tsx.snap b/components/button-dropdown/__tests__/__snapshots__/index.test.tsx.snap
index abc495ca2..df8b830ce 100644
--- a/components/button-dropdown/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/button-dropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -301,8 +301,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                               "next": null,
@@ -353,8 +353,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
@@ -407,7 +407,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -417,8 +417,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                                 "next": null,
@@ -459,7 +459,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -469,8 +469,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                               "next": null,
@@ -544,7 +544,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -554,8 +554,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                               "next": null,
@@ -596,7 +596,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -606,8 +606,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -672,8 +672,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                                 "next": null,
@@ -724,8 +724,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                               "next": null,
@@ -832,8 +832,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
@@ -884,8 +884,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                           "next": null,
@@ -938,7 +938,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -948,8 +948,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                               "next": null,
@@ -990,7 +990,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -1000,8 +1000,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -1075,7 +1075,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -1085,8 +1085,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -1127,7 +1127,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -1137,8 +1137,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                           "next": null,
@@ -1203,8 +1203,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                               "next": null,
@@ -1255,8 +1255,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
@@ -1733,8 +1733,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
@@ -1785,8 +1785,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                           "next": null,
@@ -1839,7 +1839,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -1849,8 +1849,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                               "next": null,
@@ -1891,7 +1891,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -1901,8 +1901,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -1976,7 +1976,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -1986,8 +1986,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -2028,7 +2028,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -2038,8 +2038,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                           "next": null,
@@ -2104,8 +2104,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                               "next": null,
@@ -2156,8 +2156,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
@@ -2264,8 +2264,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                           "next": null,
@@ -2316,8 +2316,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                         "next": null,
@@ -2370,7 +2370,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -2380,8 +2380,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -2422,7 +2422,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -2432,8 +2432,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                           "next": null,
@@ -2507,7 +2507,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -2517,8 +2517,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                           "next": null,
@@ -2559,7 +2559,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -2569,8 +2569,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                         "next": null,
@@ -2635,8 +2635,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
@@ -2687,8 +2687,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                           "next": null,
@@ -3356,8 +3356,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                               "next": null,
@@ -3408,8 +3408,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
@@ -3462,7 +3462,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -3472,8 +3472,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                                 "next": null,
@@ -3514,7 +3514,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -3524,8 +3524,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                               "next": null,
@@ -3599,7 +3599,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -3609,8 +3609,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                               "next": null,
@@ -3651,7 +3651,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -3661,8 +3661,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -3727,8 +3727,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                                 "next": null,
@@ -3779,8 +3779,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                               "next": null,
@@ -3887,8 +3887,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
@@ -3939,8 +3939,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                           "next": null,
@@ -3993,7 +3993,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -4003,8 +4003,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                               "next": null,
@@ -4045,7 +4045,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -4055,8 +4055,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -4130,7 +4130,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -4140,8 +4140,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                             "next": null,
@@ -4182,7 +4182,7 @@ initialize {
           box-sizing: border-box;
           margin: 0;
           border: none;
-          background-color: #ff0000;
+          background-color: #e00;
           color: #fff;
           width: 100%;
           height: 2.5rem;
@@ -4192,8 +4192,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #c00;
-          background-color: #c00;
+          border-color: #c50000;
+          background-color: #c50000;
         }
       ",
                           "next": null,
@@ -4258,8 +4258,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                               "next": null,
@@ -4310,8 +4310,8 @@ initialize {
         }
 
         button:hover {
-          border-color: #f49b0b;
-          background-color: #f49b0b;
+          border-color: #ab570a;
+          background-color: #ab570a;
         }
       ",
                             "next": null,
diff --git a/components/capacity/__tests__/__snapshots__/index.test.tsx.snap b/components/capacity/__tests__/__snapshots__/index.test.tsx.snap
index 930c48bd6..1997334ee 100644
--- a/components/capacity/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/capacity/__tests__/__snapshots__/index.test.tsx.snap
@@ -176,7 +176,7 @@ initialize {
 
         span {
           width: 20%;
-          background-color: #79ffe1;
+          background-color: #50e3c2;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -219,7 +219,7 @@ initialize {
 
         span {
           width: 20%;
-          background-color: #79ffe1;
+          background-color: #50e3c2;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -386,7 +386,7 @@ initialize {
 
         span {
           width: 66.67%;
-          background-color: #c00;
+          background-color: #c50000;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -429,7 +429,7 @@ initialize {
 
         span {
           width: 66.67%;
-          background-color: #c00;
+          background-color: #c50000;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -633,7 +633,7 @@ initialize {
 
         span {
           width: 66.67%;
-          background-color: #c00;
+          background-color: #c50000;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -676,7 +676,7 @@ initialize {
 
         span {
           width: 66.67%;
-          background-color: #c00;
+          background-color: #c50000;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -752,7 +752,7 @@ initialize {
 
         span {
           width: 20%;
-          background-color: #79ffe1;
+          background-color: #50e3c2;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -795,7 +795,7 @@ initialize {
 
         span {
           width: 20%;
-          background-color: #79ffe1;
+          background-color: #50e3c2;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -880,7 +880,7 @@ initialize {
 
         span {
           width: 66.67%;
-          background-color: #c00;
+          background-color: #c50000;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -923,7 +923,7 @@ initialize {
 
         span {
           width: 66.67%;
-          background-color: #c00;
+          background-color: #c50000;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -1094,7 +1094,7 @@ initialize {
 
         span {
           width: 20%;
-          background-color: #79ffe1;
+          background-color: #50e3c2;
           height: 100%;
           margin: 0;
           padding: 0;
@@ -1137,7 +1137,7 @@ initialize {
 
         span {
           width: 20%;
-          background-color: #79ffe1;
+          background-color: #50e3c2;
           height: 100%;
           margin: 0;
           padding: 0;
diff --git a/components/dot/__tests__/__snapshots__/index.test.tsx.snap b/components/dot/__tests__/__snapshots__/index.test.tsx.snap
index 883959dbb..a42e9bfbf 100644
--- a/components/dot/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/dot/__tests__/__snapshots__/index.test.tsx.snap
@@ -721,7 +721,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -787,7 +787,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -853,7 +853,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -1443,7 +1443,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -1509,7 +1509,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -1575,7 +1575,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -2165,7 +2165,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -2231,7 +2231,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -2297,7 +2297,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -2887,7 +2887,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -2953,7 +2953,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
@@ -3019,7 +3019,7 @@ initialize {
           width: 0.625rem;
           height: 0.625rem;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           user-select: none;
         }
 
diff --git a/components/grid/__tests__/__snapshots__/index.test.tsx.snap b/components/grid/__tests__/__snapshots__/index.test.tsx.snap
index c0253ff72..233206f97 100644
--- a/components/grid/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/grid/__tests__/__snapshots__/index.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
           flex-grow: 0;
           max-width: 4.166666666666667%;
           flex-basis: 4.166666666666667%;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -33,7 +33,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 4.166666666666667%;
             flex-basis: 4.166666666666667%;
-            display: flex;
+            
           }
         }
 
@@ -42,7 +42,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 8.333333333333334%;
             flex-basis: 8.333333333333334%;
-            display: flex;
+            
           }
         }
 
@@ -51,7 +51,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 12.5%;
             flex-basis: 12.5%;
-            display: flex;
+            
           }
         }
 
@@ -60,7 +60,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 16.666666666666668%;
             flex-basis: 16.666666666666668%;
-            display: flex;
+            
           }
         }
 
@@ -69,7 +69,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 20.833333333333336%;
             flex-basis: 20.833333333333336%;
-            display: flex;
+            
           }
         }
       </style></div><style>
@@ -96,7 +96,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
           flex-grow: 0;
           max-width: 4.166666666666667%;
           flex-basis: 4.166666666666667%;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -104,7 +104,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 4.166666666666667%;
             flex-basis: 4.166666666666667%;
-            display: flex;
+            
           }
         }
 
@@ -113,7 +113,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 8.333333333333334%;
             flex-basis: 8.333333333333334%;
-            display: flex;
+            
           }
         }
 
@@ -122,7 +122,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 12.5%;
             flex-basis: 12.5%;
-            display: flex;
+            
           }
         }
 
@@ -131,7 +131,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 16.666666666666668%;
             flex-basis: 16.666666666666668%;
-            display: flex;
+            
           }
         }
 
@@ -140,7 +140,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
             flex-grow: 0;
             max-width: 20.833333333333336%;
             flex-basis: 20.833333333333336%;
-            display: flex;
+            
           }
         }
       </style></div>"
@@ -171,7 +171,7 @@ exports[`Grid css value should be passed through 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -179,7 +179,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -188,7 +188,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -197,7 +197,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -206,7 +206,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -215,7 +215,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><style>
@@ -242,7 +242,7 @@ exports[`Grid css value should be passed through 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -250,7 +250,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -259,7 +259,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -268,7 +268,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -277,7 +277,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -286,7 +286,7 @@ exports[`Grid css value should be passed through 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div>"
@@ -317,7 +317,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -325,7 +325,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -334,7 +334,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -343,7 +343,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -352,7 +352,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -361,7 +361,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><style>
@@ -388,7 +388,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -396,7 +396,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -405,7 +405,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -414,7 +414,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -423,7 +423,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -432,7 +432,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div>"
@@ -463,7 +463,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -471,7 +471,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -480,7 +480,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -489,7 +489,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -498,7 +498,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -507,7 +507,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><div class=\\"item  mock \\"><div class=\\"item  mock \\">test<style>
@@ -534,7 +534,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -542,7 +542,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -551,7 +551,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -560,7 +560,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -569,7 +569,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -578,7 +578,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><div class=\\"item  mock \\"><div class=\\"item  mock \\">test<style>
@@ -605,7 +605,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -613,7 +613,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -622,7 +622,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -631,7 +631,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -640,7 +640,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -649,7 +649,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><div class=\\"item  mock \\"><div class=\\"item  mock \\">test<style>
@@ -676,7 +676,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -684,7 +684,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -693,7 +693,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -702,7 +702,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -711,7 +711,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -720,7 +720,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><style>
@@ -747,7 +747,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -755,7 +755,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -764,7 +764,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -773,7 +773,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -782,7 +782,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -791,7 +791,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div>,<style>
@@ -818,7 +818,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -826,7 +826,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -835,7 +835,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -844,7 +844,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -853,7 +853,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -862,7 +862,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div>,<style>
@@ -889,7 +889,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -897,7 +897,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -906,7 +906,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -915,7 +915,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -924,7 +924,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -933,7 +933,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div>,<style>
@@ -960,7 +960,7 @@ exports[`Grid nested components should be supported 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -968,7 +968,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -977,7 +977,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -986,7 +986,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -995,7 +995,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1004,7 +1004,7 @@ exports[`Grid nested components should be supported 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div>"
@@ -1035,7 +1035,7 @@ exports[`Grid should render correctly 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -1043,7 +1043,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1052,7 +1052,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1061,7 +1061,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1070,7 +1070,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1079,7 +1079,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><div class=\\"item  mock \\">test<style>
@@ -1106,7 +1106,7 @@ exports[`Grid should render correctly 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -1114,7 +1114,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1123,7 +1123,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1132,7 +1132,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1141,7 +1141,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1150,7 +1150,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><style>
@@ -1177,7 +1177,7 @@ exports[`Grid should render correctly 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -1185,7 +1185,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1194,7 +1194,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1203,7 +1203,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1212,7 +1212,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1221,7 +1221,7 @@ exports[`Grid should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div>"
@@ -1252,7 +1252,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
           flex-grow: 0;
           max-width: 100%;
           flex-basis: 100%;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -1260,7 +1260,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 0;
             max-width: 100%;
             flex-basis: 100%;
-            display: flex;
+            
           }
         }
 
@@ -1269,7 +1269,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1278,7 +1278,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1287,7 +1287,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1296,7 +1296,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><div class=\\"item xs mock \\">test<style>
@@ -1323,7 +1323,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
           flex-grow: 0;
           max-width: 0;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -1331,7 +1331,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 0;
             max-width: 0;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1340,7 +1340,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1349,7 +1349,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1358,7 +1358,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1367,7 +1367,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><style>
@@ -1394,7 +1394,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -1402,7 +1402,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1411,7 +1411,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1420,7 +1420,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1429,7 +1429,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -1438,7 +1438,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div>"
diff --git a/components/grid/basic-item.tsx b/components/grid/basic-item.tsx
index 1233b3e7f..a4332025d 100644
--- a/components/grid/basic-item.tsx
+++ b/components/grid/basic-item.tsx
@@ -35,7 +35,7 @@ type ItemLayoutValue = {
   display: string
 }
 const getItemLayout = (val: BreakpointsValue): ItemLayoutValue => {
-  const display = val === 0 ? 'none' : 'flex'
+  const display = val === 0 ? 'display: none;' : ''
   if (typeof val === 'number') {
     const width = (100 / 24) * val
     const ratio = width > 100 ? '100%' : width < 0 ? '0' : `${width}%`
@@ -66,6 +66,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
   alignContent,
   children,
   className,
+  ...props
 }) => {
   const theme = useTheme()
   const classes = useMemo(() => {
@@ -103,7 +104,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
   )
 
   return (
-    <div className={`item ${classes} ${className}`}>
+    <div className={`item ${classes} ${className}`} {...props}>
       {children}
       <style jsx>{`
         .item {
@@ -129,7 +130,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
           flex-grow: ${layout.xs.grow};
           max-width: ${layout.xs.width};
           flex-basis: ${layout.xs.basis};
-          display: ${layout.xs.display};
+          ${layout.xs.display}
         }
 
         @media only screen and (max-width: ${theme.breakpoints.xs.max}) {
@@ -137,7 +138,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
             flex-grow: ${layout.xs.grow};
             max-width: ${layout.xs.width};
             flex-basis: ${layout.xs.basis};
-            display: ${layout.xs.display};
+            ${layout.xs.display}
           }
         }
 
@@ -146,7 +147,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
             flex-grow: ${layout.sm.grow};
             max-width: ${layout.sm.width};
             flex-basis: ${layout.sm.basis};
-            display: ${layout.sm.display};
+            ${layout.sm.display}
           }
         }
 
@@ -155,7 +156,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
             flex-grow: ${layout.md.grow};
             max-width: ${layout.md.width};
             flex-basis: ${layout.md.basis};
-            display: ${layout.md.display};
+            ${layout.md.display}
           }
         }
 
@@ -164,7 +165,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
             flex-grow: ${layout.lg.grow};
             max-width: ${layout.lg.width};
             flex-basis: ${layout.lg.basis};
-            display: ${layout.lg.display};
+            ${layout.lg.display}
           }
         }
 
@@ -173,7 +174,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
             flex-grow: ${layout.xl.grow};
             max-width: ${layout.xl.width};
             flex-basis: ${layout.xl.basis};
-            display: ${layout.xl.display};
+            ${layout.xl.display}
           }
         }
       `}</style>
diff --git a/components/loading/__tests__/__snapshots__/index.test.tsx.snap b/components/loading/__tests__/__snapshots__/index.test.tsx.snap
index a6643f37e..555dd6687 100644
--- a/components/loading/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/loading/__tests__/__snapshots__/index.test.tsx.snap
@@ -760,7 +760,7 @@ exports[`Loading should work with different types 1`] = `
           width: 4px;
           height: 4px;
           border-radius: 50%;
-          background-color: #ff0000;
+          background-color: #e00;
           margin: 0 1px;
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
diff --git a/components/note/__tests__/__snapshots__/index.test.tsx.snap b/components/note/__tests__/__snapshots__/index.test.tsx.snap
index 98b46118a..c092a49db 100644
--- a/components/note/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/note/__tests__/__snapshots__/index.test.tsx.snap
@@ -182,8 +182,8 @@ exports[`Note should work with different types 1`] = `
           padding: 8pt 16pt;
           font-size: 14px;
           line-height: 1.8;
-          border: 1px solid #ff0000;
-          color: #ff0000;
+          border: 1px solid #e00;
+          color: #e00;
           background-color: #fff;
           border-radius: 5px;
         }
diff --git a/components/progress/__tests__/__snapshots__/index.test.tsx.snap b/components/progress/__tests__/__snapshots__/index.test.tsx.snap
index db6d0c7e9..a37497aaf 100644
--- a/components/progress/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/progress/__tests__/__snapshots__/index.test.tsx.snap
@@ -414,7 +414,7 @@ exports[`Progress should work with different types 1`] = `
           bottom: 0;
           transition: all 100ms ease-in;
           border-radius: 5px;
-          background-color: #ff0000;
+          background-color: #e00;
           width: 1%;
         }
       </style></div></div>"
diff --git a/components/select/__tests__/__snapshots__/multiple.test.tsx.snap b/components/select/__tests__/__snapshots__/multiple.test.tsx.snap
index f850dbe87..171bea83e 100644
--- a/components/select/__tests__/__snapshots__/multiple.test.tsx.snap
+++ b/components/select/__tests__/__snapshots__/multiple.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`Select Multiple should render correctly 1`] = `
           flex-grow: 1;
           max-width: 100%;
           flex-basis: 0;
-          display: flex;
+          
         }
 
         @media only screen and (max-width: 650px) {
@@ -40,7 +40,7 @@ exports[`Select Multiple should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -49,7 +49,7 @@ exports[`Select Multiple should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -58,7 +58,7 @@ exports[`Select Multiple should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -67,7 +67,7 @@ exports[`Select Multiple should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
 
@@ -76,7 +76,7 @@ exports[`Select Multiple should render correctly 1`] = `
             flex-grow: 1;
             max-width: 100%;
             flex-basis: 0;
-            display: flex;
+            
           }
         }
       </style></div><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
diff --git a/components/styles/themes/dark.ts b/components/styles/themes/dark.ts
index b6fa291f3..adcc36ab2 100644
--- a/components/styles/themes/dark.ts
+++ b/components/styles/themes/dark.ts
@@ -18,19 +18,29 @@ export const palette: ZeitUIThemesPalette = {
   secondary: '#888',
   code: '#79ffe1',
   border: '#333',
-  error: '#ff0000',
+  error: '#e00',
+  errorLighter: '#f7d4d6',
   errorLight: '#ff1a1a',
-  errorDark: '#c00',
+  errorDark: '#c50000',
   success: '#0070f3',
+  successLighter: '#d3e5ff',
   successLight: '#3291ff',
-  successDark: '#0366d6',
+  successDark: '#0761d1',
   warning: '#f5a623',
+  warningLighter: '#ffefcf',
   warningLight: '#f7b955',
-  warningDark: '#f49b0b',
-  cyan: '#79ffe1',
+  warningDark: '#ab570a',
+  cyan: '#50e3c2',
+  cyanLighter: '#aaffec',
+  cyanLight: '#79ffe1',
+  cyanDark: '#29bc9b',
+  violet: '#7928ca',
+  violetLighter: '#e3d7fc',
+  violetLight: '#8a63d2',
+  violetDark: '#4c2889',
   purple: '#f81ce5',
   alert: '#ff0080',
-  violet: '#7928ca',
+  magenta: '#eb367f',
   link: '#3291ff',
 }
 
diff --git a/components/styles/themes/default.ts b/components/styles/themes/default.ts
index 9d81c00ca..9135dd5d7 100644
--- a/components/styles/themes/default.ts
+++ b/components/styles/themes/default.ts
@@ -18,19 +18,29 @@ export const palette: ZeitUIThemesPalette = {
   secondary: '#666',
   code: '#f81ce5',
   border: '#eaeaea',
-  error: '#ff0000',
+  error: '#e00',
   errorLight: '#ff1a1a',
-  errorDark: '#c00',
+  errorLighter: '#f7d4d6',
+  errorDark: '#c50000',
   success: '#0070f3',
   successLight: '#3291ff',
-  successDark: '#0366d6',
+  successLighter: '#d3e5ff',
+  successDark: '#0761d1',
   warning: '#f5a623',
   warningLight: '#f7b955',
-  warningDark: '#f49b0b',
-  cyan: '#79ffe1',
+  warningLighter: '#ffefcf',
+  warningDark: '#ab570a',
+  cyan: '#50e3c2',
+  cyanLighter: '#aaffec',
+  cyanLight: '#79ffe1',
+  cyanDark: '#29bc9b',
+  violet: '#7928ca',
+  violetLighter: '#e3d7fc',
+  violetLight: '#8a63d2',
+  violetDark: '#4c2889',
   purple: '#f81ce5',
   alert: '#ff0080',
-  violet: '#7928ca',
+  magenta: '#eb367f',
   link: '#0070f3',
 }
 
diff --git a/components/styles/themes/index.ts b/components/styles/themes/index.ts
index e99530afc..dbaea2c1c 100644
--- a/components/styles/themes/index.ts
+++ b/components/styles/themes/index.ts
@@ -18,19 +18,29 @@ export interface ZeitUIThemesPalette {
   code: string
   border: string
   success: string
+  successLighter: string
   successLight: string
   successDark: string
   error: string
+  errorLighter: string
   errorLight: string
   errorDark: string
   warning: string
+  warningLighter: string
   warningLight: string
   warningDark: string
   cyan: string
-  purple: string
-  alert: string
+  cyanLighter: string
+  cyanLight: string
+  cyanDark: string
   violet: string
+  violetLighter: string
+  violetLight: string
+  violetDark: string
   link: string
+  purple: string
+  magenta: string
+  alert: string
 }
 
 export interface ZeitUIThemesExpressiveness {
diff --git a/components/tag/__tests__/__snapshots__/index.test.tsx.snap b/components/tag/__tests__/__snapshots__/index.test.tsx.snap
index 7ca54656c..86bc61fe2 100644
--- a/components/tag/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tag/__tests__/__snapshots__/index.test.tsx.snap
@@ -319,9 +319,9 @@ initialize {
           font-size: 0.875rem;
           height: 1.75rem;
           border-radius: 5px;
-          border: 1px solid #ff0000;
+          border: 1px solid #e00;
           background-color: #fff;
-          color: #ff0000;
+          color: #e00;
           padding: 6px;
           box-sizing: border-box;
         }
@@ -356,9 +356,9 @@ initialize {
           font-size: 0.875rem;
           height: 1.75rem;
           border-radius: 5px;
-          border: 1px solid #ff0000;
+          border: 1px solid #e00;
           background-color: #fff;
-          color: #ff0000;
+          color: #e00;
           padding: 6px;
           box-sizing: border-box;
         }
@@ -618,9 +618,9 @@ initialize {
           font-size: 0.875rem;
           height: 1.75rem;
           border-radius: 5px;
-          border: 1px solid #ff0000;
+          border: 1px solid #e00;
           background-color: #fff;
-          color: #ff0000;
+          color: #e00;
           padding: 6px;
           box-sizing: border-box;
         }
@@ -655,9 +655,9 @@ initialize {
           font-size: 0.875rem;
           height: 1.75rem;
           border-radius: 5px;
-          border: 1px solid #ff0000;
+          border: 1px solid #e00;
           background-color: #fff;
-          color: #ff0000;
+          color: #e00;
           padding: 6px;
           box-sizing: border-box;
         }
@@ -917,9 +917,9 @@ initialize {
           font-size: 0.875rem;
           height: 1.75rem;
           border-radius: 5px;
-          border: 1px solid #ff0000;
+          border: 1px solid #e00;
           background-color: #fff;
-          color: #ff0000;
+          color: #e00;
           padding: 6px;
           box-sizing: border-box;
         }
@@ -954,9 +954,9 @@ initialize {
           font-size: 0.875rem;
           height: 1.75rem;
           border-radius: 5px;
-          border: 1px solid #ff0000;
+          border: 1px solid #e00;
           background-color: #fff;
-          color: #ff0000;
+          color: #e00;
           padding: 6px;
           box-sizing: border-box;
         }
@@ -1390,9 +1390,9 @@ initialize {
           font-size: 0.875rem;
           height: 1.75rem;
           border-radius: 5px;
-          border: 1px solid #ff0000;
+          border: 1px solid #e00;
           background-color: #fff;
-          color: #ff0000;
+          color: #e00;
           padding: 6px;
           box-sizing: border-box;
         }
@@ -1427,9 +1427,9 @@ initialize {
           font-size: 0.875rem;
           height: 1.75rem;
           border-radius: 5px;
-          border: 1px solid #ff0000;
+          border: 1px solid #e00;
           background-color: #fff;
-          color: #ff0000;
+          color: #e00;
           padding: 6px;
           box-sizing: border-box;
         }
diff --git a/components/text/__tests__/__snapshots__/index.test.tsx.snap b/components/text/__tests__/__snapshots__/index.test.tsx.snap
index c5292be57..784e0be1c 100644
--- a/components/text/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/text/__tests__/__snapshots__/index.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`Text should work with different styles 1`] = `
         }
       </style><p class=\\" \\">test-value</p><style>
         p {
-          color: #ff0000;
+          color: #e00;
         }
 
         .custom-size {
diff --git a/lib/components/displays/colors-data.ts b/lib/components/displays/colors-data.ts
index 2c55aead7..6e99bdc68 100644
--- a/lib/components/displays/colors-data.ts
+++ b/lib/components/displays/colors-data.ts
@@ -20,28 +20,44 @@ const normal: ColorEnum = {
 /* eslint-enable camelcase */
 
 const error: ColorEnum = {
+  errorLighter: 'Lighter',
   errorLight: 'Light',
   error: 'Default',
   errorDark: 'Dark',
 }
 
 const success: ColorEnum = {
+  successLighter: 'Lighter',
   successLight: 'Light',
   success: 'Default',
   successDark: 'Dark',
 }
 
 const warning: ColorEnum = {
+  warningLighter: 'Lighter',
   warningLight: 'Light',
   warning: 'Default',
   warningDark: 'Dark',
 }
 
+const violet: ColorEnum = {
+  violetLighter: 'Lighter',
+  violetLight: 'Light',
+  violet: 'Default',
+  violetDark: 'Dark',
+}
+
+const cyan: ColorEnum = {
+  cyanLighter: 'Lighter',
+  cyanLight: 'Light',
+  cyan: 'Default',
+  cyanDark: 'Dark',
+}
+
 const highlight: ColorEnum = {
   alert: 'Alert',
   purple: 'Purple',
-  violet: 'Violet',
-  cyan: 'Cyan',
+  magenta: 'Violet',
 }
 
 const colorsData: { [key: string]: ColorEnum } = {
@@ -49,6 +65,8 @@ const colorsData: { [key: string]: ColorEnum } = {
   success,
   warning,
   error,
+  violet,
+  cyan,
   highlight,
 }
 
@@ -72,5 +90,15 @@ export const getCurrentColor = (
     return 'black'
   }
 
+  if (type === 'warning' || type === 'cyan') {
+    if (index < 3) return 'black'
+    return 'white'
+  }
+
+  if (Object.keys(colorsData[type]).find(key => key.endsWith('Lighter'))) {
+    if (index === 0) return 'black'
+    return 'white'
+  }
+
   return palette.background
 }
diff --git a/lib/components/displays/colors.tsx b/lib/components/displays/colors.tsx
index ba02aeab7..dbb58f7e2 100644
--- a/lib/components/displays/colors.tsx
+++ b/lib/components/displays/colors.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { useTheme, useToasts, Code, ZeitUIThemesPalette } from 'components'
+import { useTheme, useToasts, Code, Grid, ZeitUIThemesPalette } from 'components'
 import useClipboard from 'components/utils/use-clipboard'
 import { getColorData, getCurrentColor } from './colors-data'
 
@@ -14,13 +14,21 @@ const getColorItem = (type: string, palette: ZeitUIThemesPalette, copy: Function
 
   return (keys as Array<keyof ZeitUIThemesPalette>).map((key, index) => (
     <div className="color" key={`color-item-${index}`}>
-      <h4>{data[key]}</h4>
-      <span className="usage" onClick={() => copy(`theme.palette.${key}`)}>
-        theme.palette.{key}
-      </span>
-      <span className="value" onClick={() => copy(palette[key])}>
-        {palette[key]}
-      </span>
+      <Grid.Container justify="space-between" style={{ height: '4.5rem' }}>
+        <Grid.Container alignItems="center" sm={8} xs={16}>
+          <h4>{data[key]}</h4>
+        </Grid.Container>
+        <Grid.Container alignItems="center" justify="center" sm={8} xs={0}>
+          <span className="usage" onClick={() => copy(`theme.palette.${key}`)}>
+            theme.palette.{key}
+          </span>
+        </Grid.Container>
+        <Grid.Container alignItems="center" justify="flex-end" sm={8} xs>
+          <span className="value" onClick={() => copy(palette[key])}>
+            {palette[key]}
+          </span>
+        </Grid.Container>
+      </Grid.Container>
       <style jsx>{`
         .color {
           background-color: ${palette[key]};
@@ -61,13 +69,8 @@ const Colors: React.FC<Props> = ({ type }) => {
         }
 
         .colors :global(.color) {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
           padding: ${theme.layout.gap};
-          height: 6rem;
           position: relative;
-          cursor: pointer;
           user-select: none;
         }
 
@@ -86,18 +89,16 @@ const Colors: React.FC<Props> = ({ type }) => {
         }
 
         .colors :global(.usage) {
-          font-size: 0.875rem;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
+          font-size: 1rem;
           padding: 1rem;
+          cursor: pointer;
         }
 
         .colors :global(.value) {
           font-size: 0.875rem;
           text-transform: uppercase;
-          padding: 1rem 0;
+          padding: 1rem;
+          cursor: pointer;
         }
       `}</style>
     </div>
diff --git a/package.json b/package.json
index 4a842101a..e312f4e6e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zeit-ui/react",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "types": "dist/index.d.ts",
diff --git a/pages/en-us/guide/colors.mdx b/pages/en-us/guide/colors.mdx
index 58b762e4d..fd428214a 100644
--- a/pages/en-us/guide/colors.mdx
+++ b/pages/en-us/guide/colors.mdx
@@ -38,27 +38,43 @@ const myComponent = () => {
 <Colors type="normal" />
 <Spacer y={3} />
 
-### Status
+### STATUS
 
 Use different colors to express more emotional changes.
 
-#### Success
+### Success
 
+<Spacer y={.75} />
 <Colors type="success" />
 <Spacer y={3} />
 
-#### Error
+### Error
 
+<Spacer y={.75} />
 <Colors type="error" />
 <Spacer y={3} />
 
-#### Warning
+### Warning
 
+<Spacer y={.75} />
 <Colors type="warning" />
 <Spacer y={3} />
 
-#### Highlight
+### Cyan
 
+<Spacer y={.75} />
+<Colors type="cyan" />
+<Spacer y={3} />
+
+### Violet
+
+<Spacer y={.75} />
+<Colors type="violet" />
+<Spacer y={3} />
+
+### Highlight
+
+<Spacer y={.75} />
 <Colors type="highlight" />
 <Spacer y={3} />