diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index 25dfcb72a..04b80404e 100644
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@@ -33,7 +33,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
-                <span className="rounded-full border border-gray-700 mr-2">
+                <span className="rounded-full border border-accent-6 mr-2">
                   <Logo />
                 </span>
                 <span>ACME</span>
diff --git a/components/common/SidebarLayout/SidebarLayout.tsx b/components/common/SidebarLayout/SidebarLayout.tsx
index 1122cad4e..a4e60a758 100644
--- a/components/common/SidebarLayout/SidebarLayout.tsx
+++ b/components/common/SidebarLayout/SidebarLayout.tsx
@@ -22,7 +22,7 @@ const SidebarLayout: FC<ComponentProps> = ({
           <button
             onClick={handleClose}
             aria-label="Close"
-            className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
+            className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
           >
             <Cross className="h-6 w-6 hover:text-accent-3" />
             <span className="ml-2 text-accent-7 text-sm ">Close</span>
@@ -32,7 +32,7 @@ const SidebarLayout: FC<ComponentProps> = ({
           <button
             onClick={handleBack}
             aria-label="Go back"
-            className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
+            className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
           >
             <ChevronLeft className="h-6 w-6 hover:text-accent-3" />
             <span className="ml-2 text-accent-7 text-xs">Back</span>
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
index 719f69b7c..cae1e4391 100644
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@@ -3,7 +3,7 @@
   composes: root from 'components/ui/Button/Button.module.css';
   @apply h-10 w-10 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
-  p-0 shadow-none border-gray-200 border box-border select-none;
+  p-0 shadow-none border-accent-3 border box-border select-none;
   margin-right: calc(0.75rem - 1px);
   overflow: hidden;
   width: 48px;
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index 35ba2cf27..8b0487d5c 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -15,7 +15,7 @@
 }
 
 .root[data-active] {
-  @apply bg-gray-600;
+  @apply bg-accent-6;
 }
 
 .loading {
diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css
index 638917d85..f30d7c90a 100644
--- a/components/ui/Modal/Modal.module.css
+++ b/components/ui/Modal/Modal.module.css
@@ -13,5 +13,5 @@
 }
 
 .close {
-  @apply hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6;
+  @apply hover:text-accent-5 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6;
 }