diff --git a/packages/ui/src/styles/colors.css b/packages/ui/src/styles/colors.css
index 61e3ac950..5ef17d1cc 100644
--- a/packages/ui/src/styles/colors.css
+++ b/packages/ui/src/styles/colors.css
@@ -1,52 +1,100 @@
 :root {
-  --smoke-dark-1: #131010;
-  --smoke-dark-2: #1b1818;
-  --smoke-dark-3: #252121;
-  --smoke-dark-4: #2d2828;
-  --smoke-dark-5: #343030;
-  --smoke-dark-6: #3e3939;
-  --smoke-dark-7: #4b4646;
-  --smoke-dark-8: #645f5f;
-  --smoke-dark-9: #716c6b;
-  --smoke-dark-10: #7f7979;
-  --smoke-dark-11: #b7b1b1;
-  --smoke-dark-12: #f1ecec;
-  --smoke-light-1: #fdfcfc;
-  --smoke-light-2: #f9f8f8;
-  --smoke-light-3: #f1f0f0;
-  --smoke-light-4: #e9e8e8;
-  --smoke-light-5: #e2e0e0;
-  --smoke-light-6: #dad9d9;
-  --smoke-light-7: #cfcecd;
-  --smoke-light-8: #bcbbbb;
-  --smoke-light-9: #8e8b8b;
-  --smoke-light-10: #848181;
-  --smoke-light-11: #656363;
-  --smoke-light-12: #211e1e;
-  --smoke-dark-alpha-1: #82383803;
-  --smoke-dark-alpha-2: #e6c6c60b;
-  --smoke-dark-alpha-3: #edd5d516;
-  --smoke-dark-alpha-4: #f2e1e11e;
-  --smoke-dark-alpha-5: #f5e8e826;
-  --smoke-dark-alpha-6: #f5e8e831;
-  --smoke-dark-alpha-7: #f7ecec3f;
-  --smoke-dark-alpha-8: #faf5f559;
-  --smoke-dark-alpha-9: #faf5f467;
-  --smoke-dark-alpha-10: #fbf5f576;
-  --smoke-dark-alpha-11: #fcf9f9b2;
-  --smoke-dark-alpha-12: #fdfbfbf0;
-  --smoke-light-alpha-1: #55000003;
-  --smoke-light-alpha-2: #25000007;
-  --smoke-light-alpha-3: #1100000f;
-  --smoke-light-alpha-4: #0c000017;
-  --smoke-light-alpha-5: #1100001f;
-  --smoke-light-alpha-6: #07000026;
-  --smoke-light-alpha-7: #0b060032;
-  --smoke-light-alpha-8: #04000044;
-  --smoke-light-alpha-9: #07000074;
-  --smoke-light-alpha-10: #0400009c;
-  --smoke-light-alpha-11: #0700007e;
-  --smoke-light-alpha-12: #020000df;
+  --gray-dark-1: #161616;
+  --gray-dark-2: #1C1C1C;
+  --gray-dark-3: #232323;
+  --gray-dark-4: #282828;
+  --gray-dark-5: #2E2E2E;
+  --gray-dark-6: #343434;
+  --gray-dark-7: #3E3E3E;
+  --gray-dark-8: #505050;
+  --gray-dark-9: #707070;
+  --gray-dark-10: #7E7E7E;
+  --gray-dark-11: #A0A0A0;
+  --gray-dark-12: #EDEDED;
+  --gray-light-1: #FCFCFC;
+  --gray-light-2: #F8F8F8;
+  --gray-light-3: #F3F3F3;
+  --gray-light-4: #EDEDED;
+  --gray-light-5: #E8E8E8;
+  --gray-light-6: #E2E2E2;
+  --gray-light-7: #DBDBDB;
+  --gray-light-8: #C7C7C7;
+  --gray-light-9: #8F8F8F;
+  --gray-light-10: #858585;
+  --gray-light-11: #6F6F6F;
+  --gray-light-12: #171717;
+  --gray-dark-alpha-1: #00000000;
+  --gray-dark-alpha-2: #FFFFFF08;
+  --gray-dark-alpha-3: #FFFFFF0F;
+  --gray-dark-alpha-4: #FFFFFF14;
+  --gray-dark-alpha-5: #FFFFFF1A;
+  --gray-dark-alpha-6: #FFFFFF21;
+  --gray-dark-alpha-7: #FFFFFF2B;
+  --gray-dark-alpha-8: #FFFFFF40;
+  --gray-dark-alpha-9: #FFFFFF63;
+  --gray-dark-alpha-10: #FFFFFF73;
+  --gray-dark-alpha-11: #FFFFFF96;
+  --gray-dark-alpha-12: #FFFFFFEB;
+  --gray-light-alpha-1: #00000003;
+  --gray-light-alpha-2: #00000008;
+  --gray-light-alpha-3: #0000000D;
+  --gray-light-alpha-4: #00000012;
+  --gray-light-alpha-5: #00000017;
+  --gray-light-alpha-6: #0000001C;
+  --gray-light-alpha-7: #00000024;
+  --gray-light-alpha-8: #00000038;
+  --gray-light-alpha-9: #00000070;
+  --gray-light-alpha-10: #0000007A;
+  --gray-light-alpha-11: #0000008F;
+  --gray-light-alpha-12: #000000E8;
+  --gray-dark-1: #131010;
+  --gray-dark-2: #1b1818;
+  --gray-dark-3: #252121;
+  --gray-dark-4: #2d2828;
+  --gray-dark-5: #343030;
+  --gray-dark-6: #3e3939;
+  --gray-dark-7: #4b4646;
+  --gray-dark-8: #645f5f;
+  --gray-dark-9: #716c6b;
+  --gray-dark-10: #7f7979;
+  --gray-dark-11: #b7b1b1;
+  --gray-dark-12: #f1ecec;
+  --gray-light-1: #fdfcfc;
+  --gray-light-2: #f9f8f8;
+  --gray-light-3: #f1f0f0;
+  --gray-light-4: #e9e8e8;
+  --gray-light-5: #e2e0e0;
+  --gray-light-6: #dad9d9;
+  --gray-light-7: #cfcecd;
+  --gray-light-8: #bcbbbb;
+  --gray-light-9: #8e8b8b;
+  --gray-light-10: #848181;
+  --gray-light-11: #656363;
+  --gray-light-12: #211e1e;
+  --gray-dark-alpha-1: #82383803;
+  --gray-dark-alpha-2: #e6c6c60b;
+  --gray-dark-alpha-3: #edd5d516;
+  --gray-dark-alpha-4: #f2e1e11e;
+  --gray-dark-alpha-5: #f5e8e826;
+  --gray-dark-alpha-6: #f5e8e831;
+  --gray-dark-alpha-7: #f7ecec3f;
+  --gray-dark-alpha-8: #faf5f559;
+  --gray-dark-alpha-9: #faf5f467;
+  --gray-dark-alpha-10: #fbf5f576;
+  --gray-dark-alpha-11: #fcf9f9b2;
+  --gray-dark-alpha-12: #fdfbfbf0;
+  --gray-light-alpha-1: #55000003;
+  --gray-light-alpha-2: #25000007;
+  --gray-light-alpha-3: #1100000f;
+  --gray-light-alpha-4: #0c000017;
+  --gray-light-alpha-5: #1100001f;
+  --gray-light-alpha-6: #07000026;
+  --gray-light-alpha-7: #0b060032;
+  --gray-light-alpha-8: #04000044;
+  --gray-light-alpha-9: #07000074;
+  --gray-light-alpha-10: #0400009c;
+  --gray-light-alpha-11: #0700007e;
+  --gray-light-alpha-12: #020000df;
   --yuzu-dark-1: #11120c;
   --yuzu-light-1: #fdfdfb;
   --yuzu-light-2: #fbfceb;