diff --git a/assets/styles/variables/colors.css b/assets/styles/variables/colors.css
new file mode 100644
index 0000000..819eeb5
--- /dev/null
+++ b/assets/styles/variables/colors.css
@@ -0,0 +1,203 @@
+:root {
+  /* COLOR */
+  --base-black: rgb(0, 0, 0);
+  --base-white: rgb(255, 255, 255);
+  --danger-100: rgb(254, 226, 226);
+  --danger-200: rgb(254, 202, 202);
+  --danger-300: rgb(252, 165, 165);
+  --danger-400: rgb(248, 113, 113);
+  --danger-50: rgb(254, 242, 242);
+  --danger-500: rgb(239, 68, 68);
+  --danger-600: rgb(220, 38, 38);
+  --danger-700: rgb(185, 28, 28);
+  --danger-800: rgb(153, 27, 27);
+  --danger-900: rgb(127, 29, 29);
+  --informative-100: rgb(219, 234, 254);
+  --informative-200: rgb(191, 219, 254);
+  --informative-300: rgb(147, 197, 253);
+  --informative-400: rgb(96, 165, 250);
+  --informative-50: rgb(239, 246, 255);
+  --informative-500: rgb(59, 130, 246);
+  --informative-600: rgb(37, 99, 235);
+  --informative-700: rgb(29, 78, 216);
+  --informative-800: rgb(30, 64, 175);
+  --informative-900: rgb(30, 58, 138);
+  --neutral-100: rgb(241, 245, 249);
+  --neutral-200: rgb(226, 232, 240);
+  --neutral-300: rgb(203, 213, 225);
+  --neutral-400: rgb(148, 163, 184);
+  --neutral-50: rgb(248, 250, 252);
+  --neutral-500: rgb(100, 116, 139);
+  --neutral-600: rgb(71, 85, 105);
+  --neutral-700: rgb(51, 65, 85);
+  --neutral-800: rgb(30, 41, 59);
+  --neutral-900: rgb(15, 23, 42);
+  --primary-100: rgb(237, 233, 254);
+  --primary-200: rgb(221, 214, 254);
+  --primary-300: rgb(196, 181, 253);
+  --primary-400: rgb(167, 139, 250);
+  --primary-50: rgb(245, 243, 255);
+  --primary-500: rgb(139, 92, 246);
+  --primary-600: rgb(124, 58, 237);
+  --primary-700: rgb(109, 40, 217);
+  --primary-800: rgb(91, 33, 182);
+  --primary-900: rgb(76, 29, 149);
+  --success-100: rgb(220, 252, 231);
+  --success-200: rgb(187, 247, 208);
+  --success-300: rgb(134, 239, 172);
+  --success-400: rgb(74, 222, 128);
+  --success-50: rgb(240, 253, 244);
+  --success-500: rgb(34, 197, 94);
+  --success-600: rgb(22, 163, 74);
+  --success-700: rgb(21, 128, 61);
+  --success-800: rgb(22, 101, 52);
+  --success-900: rgb(20, 83, 45);
+  --warning-100: rgb(254, 243, 199);
+  --warning-200: rgb(253, 230, 138);
+  --warning-300: rgb(252, 211, 77);
+  --warning-400: rgb(251, 191, 36);
+  --warning-50: rgb(255, 251, 235);
+  --warning-500: rgb(245, 158, 11);
+  --warning-600: rgb(217, 119, 6);
+  --warning-700: rgb(180, 83, 9);
+  --warning-800: rgb(146, 64, 14);
+  --warning-900: rgb(120, 53, 15);
+  --checkout-optimized-checkout-header-text-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-body-background-color: rgb(255, 255, 255);
+  --checkout-optimized-checkout-button-primary-background-color: rgb(
+    51,
+    51,
+    51
+  );
+  --checkout-optimized-checkout-button-primary-background-color-active: rgb(
+    0,
+    0,
+    0
+  );
+  --checkout-optimized-checkout-button-primary-background-color-disabled: rgb(
+    204,
+    204,
+    204
+  );
+  --checkout-optimized-checkout-button-primary-background-color-hover: rgb(
+    102,
+    102,
+    102
+  );
+  --checkout-optimized-checkout-button-primary-border-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-button-primary-border-color-active: rgb(
+    255,
+    255,
+    255
+  );
+  --checkout-optimized-checkout-button-primary-border-color-disabled: rgb(
+    255,
+    255,
+    255
+  );
+  --checkout-optimized-checkout-button-primary-border-color-hover: rgb(
+    255,
+    255,
+    255
+  );
+  --checkout-optimized-checkout-button-primary-color: rgb(255, 255, 255);
+  --checkout-optimized-checkout-button-primary-color-active: rgb(255, 255, 255);
+  --checkout-optimized-checkout-button-primary-color-disabled: rgb(
+    255,
+    255,
+    255
+  );
+  --checkout-optimized-checkout-button-primary-color-hover: rgb(255, 255, 255);
+  --checkout-optimized-checkout-button-secondary-background-color: rgb(
+    255,
+    255,
+    255
+  );
+  --checkout-optimized-checkout-button-secondary-background-color-active: rgb(
+    229,
+    229,
+    229
+  );
+  --checkout-optimized-checkout-button-secondary-background-color-hover: rgb(
+    245,
+    245,
+    245
+  );
+  --checkout-optimized-checkout-button-secondary-border-color: rgb(
+    204,
+    204,
+    204
+  );
+  --checkout-optimized-checkout-button-secondary-border-color-active: rgb(
+    117,
+    117,
+    117
+  );
+  --checkout-optimized-checkout-button-secondary-border-color-hover: rgb(
+    153,
+    153,
+    153
+  );
+  --checkout-optimized-checkout-button-secondary-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-button-secondary-color-active: rgb(0, 0, 0);
+  --checkout-optimized-checkout-button-secondary-color-hover: rgb(51, 51, 51);
+  --checkout-optimized-checkout-color-focus: rgb(68, 150, 246);
+  --checkout-optimized-checkout-content-primary-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-content-secondary-color: rgb(117, 117, 117);
+  --checkout-optimized-checkout-discount-banner-background-color: rgb(
+    229,
+    229,
+    229
+  );
+  --checkout-optimized-checkout-discount-banner-icon-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-discount-banner-text-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-form-text-color: rgb(102, 102, 102);
+  --checkout-optimized-checkout-form-checklist-background-color: rgb(
+    255,
+    255,
+    255
+  );
+  --checkout-optimized-checkout-form-checklist-background-color-selected: rgb(
+    245,
+    245,
+    245
+  );
+  --checkout-optimized-checkout-form-checklist-border-color: rgb(204, 204, 204);
+  --checkout-optimized-checkout-form-checklist-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-form-field-background-color: rgb(255, 255, 255);
+  --checkout-optimized-checkout-form-field-border-color: rgb(204, 204, 204);
+  --checkout-optimized-checkout-form-field-error-color: rgb(209, 67, 67);
+  --checkout-optimized-checkout-form-field-input-control-color: rgb(
+    71,
+    107,
+    239
+  );
+  --checkout-optimized-checkout-form-field-placeholder-color: rgb(
+    153,
+    153,
+    153
+  );
+  --checkout-optimized-checkout-form-field-shadow-color: rgb(255, 255, 255);
+  --checkout-optimized-checkout-form-field-text-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-header-background-color: rgb(245, 245, 245);
+  --checkout-optimized-checkout-header-border-color: rgb(221, 221, 221);
+  --checkout-optimized-checkout-heading-primary-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-heading-secondary-color: rgb(51, 51, 51);
+  --checkout-optimized-checkout-link-color: rgb(71, 107, 239);
+  --checkout-optimized-checkout-link-hover-color: rgb(0, 47, 225);
+  --checkout-optimized-checkout-loading-toaster-background-color: rgb(
+    51,
+    51,
+    51
+  );
+  --checkout-optimized-checkout-loading-toaster-text-color: rgb(255, 255, 255);
+  --checkout-optimized-checkout-order-summary-background-color: rgb(
+    255,
+    255,
+    255
+  );
+  --checkout-optimized-checkout-order-summary-border-color: rgb(221, 221, 221);
+  --checkout-optimized-checkout-step-background-color: rgb(117, 117, 117);
+  --checkout-optimized-checkout-step-border-color: rgb(221, 221, 221);
+  --checkout-optimized-checkout-step-text-color: rgb(255, 255, 255);
+}