diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index 895dd06..b11105d 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -26,13 +26,13 @@
 
 <style>
   :root {
-    --size: 2px
+    --sc-arrow-size: 2px;
   }
   .sc-carousel-arrow__circle {
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background-color: rgba(93, 93, 93, 0.5); /* #5d5d5d */
+    background-color: var(--sc-color-rgb-light-50p);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -44,18 +44,18 @@
     opacity: 0.9;
   }
   .sc-carousel-arrow__arrow {
-    border: solid #1e1e1e;
-    border-width: 0 var(--size) var(--size) 0;
-    padding: var(--size);
+    border: solid var(--sc-color-hex-dark);
+    border-width: 0 var(--sc-arrow-size) var(--sc-arrow-size) 0;
+    padding: var(--sc-arrow-size);
     position: relative;
   }
   .sc-carousel-arrow__arrow-next {
     transform: rotate(-45deg);
-    left: calc(var(--size) / -2);
+    left: calc(var(--sc-arrow-size) / -2);
   }
   .sc-carousel-arrow__arrow-prev {
     transform: rotate(135deg);
-    right: calc(var(--size) / -2);
+    right: calc(var(--sc-arrow-size) / -2);
   }
   .sc-carousel-arrow__circle_disabled,
   .sc-carousel-arrow__circle_disabled:hover {
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 1d5d93a..32e0996 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -318,6 +318,12 @@
 </div>
 
 <style>
+  :root {
+    --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
+    --sc-color-rgb-light: #5d5d5d;
+    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5);
+    --sc-color-hex-dark: #1e1e1e;
+  }
   .sc-carousel__carousel-container {
     display: flex;
     width: 100%;
diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index 0442063..0b6d62d 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -41,7 +41,7 @@
     width: 16px;
   }
   .sc-carousel-dot__dot {
-    background-color: #5d5d5d;
+    background-color: var(--sc-color-rgb-light);
     border-radius: 50%;
     display: inline-block;
     opacity: 0.5;
diff --git a/src/components/Dots/Dots.svelte b/src/components/Dots/Dots.svelte
index 4242be5..2524d38 100644
--- a/src/components/Dots/Dots.svelte
+++ b/src/components/Dots/Dots.svelte
@@ -32,7 +32,7 @@
 
 <style>
   :root {
-    --dot-size: 10px; 
+    --sc-dot-size: 10px; 
   }
   .sc-carousel-dots__container {
     display: flex;
@@ -42,8 +42,8 @@
     padding: 0 30px;
   }
   .sc-carousel-dots__dot-container {
-    height: calc(var(--dot-size) + 10px);
-    width: calc(var(--dot-size) + 10x);
+    height: calc(var(--sc-dot-size) + 10px);
+    width: calc(var(--sc-dot-size) + 10px);
     display: flex;
     align-items: center;
     justify-content: center;