diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 640e1395f..912cbec4b 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -31,7 +31,7 @@ button {
 }
 
 .button {
-  @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
+  @apply items-center bg-n-brand px-2.5 text-n-slate-12 dark:text-n-slate-12 inline-flex h-10 mb-0 gap-2 font-medium;
 
   .button__content {
     @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
@@ -52,23 +52,23 @@ button {
   }
 
   &.success {
-    @apply bg-[#44ce4b] dark:bg-[#44ce4b] text-white dark:text-white;
+    @apply dark:bg-n-teal-7 bg-n-teal-10 text-white hover:bg-n-teal-11 dark:hover:bg-n-teal-8;
   }
 
   &.secondary {
-    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
+    @apply dark:bg-n-solid-3 hover:bg-n-slate-3 dark:hover:bg-n-solid-2 bg-n-slate-5 text-n-slate-12;
   }
 
   &.primary {
-    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
+    @apply bg-n-brand text-white hover:brightness-110;
   }
 
   &.clear {
-    @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent;
+    @apply text-n-blue-text bg-transparent dark:bg-transparent;
   }
 
   &.alert {
-    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;
+    @apply bg-n-ruby-9 dark:bg-n-ruby-9 text-white dark:text-white;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -76,7 +76,7 @@ button {
   }
 
   &.warning {
-    @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white;
+    @apply bg-n-amber-9 dark:bg-n-amber-6 text-white hover:bg-n-amber-10 dark:hover:bg-n-amber-7;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -115,114 +115,114 @@ button {
   }
 
   &.hollow {
-    @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-n-brand bg-transparent dark:bg-transparent dark:border-n-brand text-n-blue-text dark:text-n-brand;
 
     &.secondary {
-      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-n-slate-12 border-n-strong dark:text-n-slate-12 hover:bg-n-slate-4 dark:hover:bg-n-solid-3;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-n-teal-8 dark:text-n-teal-9 border-n-teal-8 hover:bg-n-teal-3 dark:hover:bg-n-teal-4;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
+      @apply text-n-ruby-11 dark:text-n-ruby-11 border-n-ruby-8 hover:bg-n-ruby-4 dark:hover:bg-n-ruby-4;
     }
 
     &.warning {
-      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
+      @apply text-n-amber-10 dark:text-n-amber-10 border-n-amber-9 dark:border-n-amber-8 hover:bg-n-amber-4 dark:hover:bg-n-amber-4;
     }
 
     &:hover {
-      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
+      @apply hover:bg-n-brand/20 dark:hover:bg-n-brand/30 border-n-brand dark:border-n-brand/60;
 
       &.secondary {
-        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
+        @apply border-n-strong text-n-slate-12 dark:text-n-slate-12;
       }
 
       &.success {
-        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
+        @apply border-n-teal-8 dark:border-n-teal-7 text-n-teal-8 dark:text-n-teal-9;
       }
 
       &.alert {
-        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
+        @apply border-n-ruby-8 text-n-ruby-11 dark:text-n-ruby-11;
       }
 
       &.warning {
-        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
+        @apply border-n-amber-9 dark:border-n-amber-8 text-n-amber-10 dark:text-n-amber-10;
       }
     }
   }
 
   // Smooth style
   &.smooth {
-    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;
+    @apply bg-n-brand/10 dark:bg-n-brand/50 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/60;
 
     &.secondary {
-      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
+      @apply bg-n-alpha-1 dark:bg-n-solid-3 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2 text-n-slate-12;
     }
 
     &.success {
-      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
+      @apply bg-n-teal-9/10 text-n-teal-10 hover:bg-n-teal-9/20;
     }
 
     &.alert {
-      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
+      @apply bg-n-ruby-9/20 text-n-ruby-11 hover:bg-n-ruby-9/30;
     }
 
     &.warning {
-      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
+      @apply bg-n-amber-9/20 text-n-amber-10 hover:bg-n-amber-9/30;
     }
   }
 
   &.clear {
-    @apply text-woot-500 dark:text-woot-500;
+    @apply text-n-blue-text;
 
     &.secondary {
-      @apply text-slate-700 dark:text-slate-100;
+      @apply text-n-slate-12 dark:text-n-slate-12;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100;
+      @apply text-n-teal-10 dark:text-n-teal-9;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-100;
+      @apply text-n-ruby-11 dark:text-n-ruby-11;
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-600;
+      @apply text-n-amber-11 dark:text-n-amber-11;
     }
 
     &:hover {
-      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
+      @apply hover:bg-n-brand/10 dark:hover:bg-n-brand/30 hover:text-n-brand;
 
       &.secondary {
-        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
+        @apply hover:bg-n-slate-4 dark:hover:bg-n-solid-3 hover:text-n-slate-12 dark:hover:text-n-slate-12;
       }
 
       &.success {
-        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
+        @apply hover:bg-n-teal-4 dark:hover:bg-n-teal-4 hover:text-n-teal-11 dark:hover:text-n-teal-9;
       }
 
       &.alert {
-        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
+        @apply hover:bg-n-ruby-4 dark:hover:bg-n-ruby-4 hover:text-n-ruby-11 dark:hover:text-n-ruby-11;
       }
 
       &.warning {
-        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
+        @apply hover:bg-n-amber-3 dark:hover:bg-n-amber-2 hover:text-n-amber-11 dark:hover:text-n-amber-11;
       }
     }
 
     &:active {
       &.secondary {
-        @apply active:bg-slate-100 dark:active:bg-slate-900;
+        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
       }
     }
 
     &:focus {
       &.secondary {
-        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
+        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
       }
     }
   }