diff --git a/examples/nextjs-contributing/src/app/globals.css b/examples/nextjs-contributing/src/app/globals.css
index 494f3f29..b3192130 100644
--- a/examples/nextjs-contributing/src/app/globals.css
+++ b/examples/nextjs-contributing/src/app/globals.css
@@ -1,13 +1,13 @@
 :root {
-    --accent50: #eff6ff;
-    --accent100: #dbeafe;
-    --accent200: #bfdbfe;
-    --accent300: #93c5fd;
-    --accent400: #60a5fa;
-    --accent500: #3b82f6;
-    --accent600: #2563eb;
-    --accent700: #1d4ed8;
-    --accent800: #1e40af;
-    --accent900: #1e3a8a;
-    --accent950: #172554;
+    --accent-50: #eff6ff;
+    --accent-100: #dbeafe;
+    --accent-200: #bfdbfe;
+    --accent-300: #93c5fd;
+    --accent-400: #60a5fa;
+    --accent-500: #3b82f6;
+    --accent-600: #2563eb;
+    --accent-700: #1d4ed8;
+    --accent-800: #1e40af;
+    --accent-900: #1e3a8a;
+    --accent-950: #172554;
 }
diff --git a/packages/robindoc/src/assets/base.scss b/packages/robindoc/src/assets/base.scss
index 023a6aa1..f4c45efc 100644
--- a/packages/robindoc/src/assets/base.scss
+++ b/packages/robindoc/src/assets/base.scss
@@ -2,17 +2,17 @@
 
 :root {
   overflow: hidden;
-  --accent50: #fff7ed;
-  --accent100: #ffedd5;
-  --accent200: #fed7aa;
-  --accent300: #fdba74;
-  --accent400: #fb923c;
-  --accent500: #f97316;
-  --accent600: #ea580c;
-  --accent700: #c2410c;
-  --accent800: #9a3412;
-  --accent900: #7c2d12;
-  --accent950: #27130d;
+  --accent-50: #fff7ed;
+  --accent-100: #ffedd5;
+  --accent-200: #fed7aa;
+  --accent-300: #fdba74;
+  --accent-400: #fb923c;
+  --accent-500: #f97316;
+  --accent-600: #ea580c;
+  --accent-700: #c2410c;
+  --accent-800: #9a3412;
+  --accent-900: #7c2d12;
+  --accent-950: #27130d;
 }
 
 body {
@@ -20,14 +20,14 @@ body {
   position: relative;
   padding: 0;
   margin: 0;
-  accent-color: var(--primary600, #ea580c);
+  accent-color: var(--primary-600, #ea580c);
   box-sizing: border-box;
   background-color: var(--body);
-  color: var(--neutral950);
+  color: var(--neutral-950);
   height: 100vh;
   overflow: hidden auto;
   scroll-padding-top: calc(var(--header-height) + 20px);
-  scrollbar-color: var(--neutral400) var(--neutral200);
+  scrollbar-color: var(--neutral-400) var(--neutral-200);
 
   @media screen and (width < $sm) {
     scroll-padding-top: calc(var(--header-height) + 60px);
@@ -82,28 +82,28 @@ svg {
 .theme-light {
   color-scheme: light;
   --body: #ffffff;
-  --neutral50: #f8fafc;
-  --neutral100: #f1f5f9;
-  --neutral200: #e2e8f0;
-  --neutral300: #cbd5e1;
-  --neutral400: #94a3b8;
-  --neutral500: #64748b;
-  --neutral600: #475569;
-  --neutral700: #334155;
-  --neutral800: #1e293b;
-  --neutral900: #0f172a;
-  --neutral950: #020617;
-  --primary50: var(--accent50, #fff7ed);
-  --primary100: var(--accent100, #ffedd5);
-  --primary200: var(--accent200, #fed7aa);
-  --primary300: var(--accent300, #fdba74);
-  --primary400: var(--accent400, #fb923c);
-  --primary500: var(--accent500, #f97316);
-  --primary600: var(--accent600, #ea580c);
-  --primary700: var(--accent700, #c2410c);
-  --primary800: var(--accent800, #9a3412);
-  --primary900: var(--accent900, #7c2d12);
-  --primary950: var(--accent950, #27130d);
+  --neutral-50: #f8fafc;
+  --neutral-100: #f1f5f9;
+  --neutral-200: #e2e8f0;
+  --neutral-300: #cbd5e1;
+  --neutral-400: #94a3b8;
+  --neutral-500: #64748b;
+  --neutral-600: #475569;
+  --neutral-700: #334155;
+  --neutral-800: #1e293b;
+  --neutral-900: #0f172a;
+  --neutral-950: #020617;
+  --primary-50: var(--accent-50, #fff7ed);
+  --primary-100: var(--accent-100, #ffedd5);
+  --primary-200: var(--accent-200, #fed7aa);
+  --primary-300: var(--accent-300, #fdba74);
+  --primary-400: var(--accent-400, #fb923c);
+  --primary-500: var(--accent-500, #f97316);
+  --primary-600: var(--accent-600, #ea580c);
+  --primary-700: var(--accent-700, #c2410c);
+  --primary-800: var(--accent-800, #9a3412);
+  --primary-900: var(--accent-900, #7c2d12);
+  --primary-950: var(--accent-950, #27130d);
   --success: #15803d;
   --link-base: #2563eb;
   --link-base-hovered: #1e3a8a;
@@ -113,7 +113,7 @@ svg {
 
   /* SHIKI */
   --r-cl-1: #f9826c;
-  --r-cl-2: var(--neutral100);
+  --r-cl-2: var(--neutral-100);
   --r-cl-3: #e1e4e8;
   --r-cl-4: #2f363d;
   --r-cl-5: #959da5;
@@ -179,28 +179,28 @@ svg {
 .theme-dark {
   color-scheme: dark;
   --body: #00020a;
-  --neutral50: #020617;
-  --neutral100: #0f172a;
-  --neutral200: #1e293b;
-  --neutral300: #334155;
-  --neutral400: #475569;
-  --neutral500: #64748b;
-  --neutral600: #94a3b8;
-  --neutral700: #cbd5e1;
-  --neutral800: #e2e8f0;
-  --neutral900: #f1f5f9;
-  --neutral950: #f8fafc;
-  --primary50: var(--accent950, #27130d);
-  --primary100: var(--accent900, #7c2d12);
-  --primary200: var(--accent800, #9a3412);
-  --primary300: var(--accent700, #c2410c);
-  --primary400: var(--accent600, #ea580c);
-  --primary500: var(--accent500, #f97316);
-  --primary600: var(--accent400, #fb923c);
-  --primary700: var(--accent300, #fdba74);
-  --primary800: var(--accent200, #fed7aa);
-  --primary900: var(--accent100, #ffedd5);
-  --primary950: var(--accent50, #fff7ed);
+  --neutral-50: #020617;
+  --neutral-100: #0f172a;
+  --neutral-200: #1e293b;
+  --neutral-300: #334155;
+  --neutral-400: #475569;
+  --neutral-500: #64748b;
+  --neutral-600: #94a3b8;
+  --neutral-700: #cbd5e1;
+  --neutral-800: #e2e8f0;
+  --neutral-900: #f1f5f9;
+  --neutral-950: #f8fafc;
+  --primary-50: var(--accent-950, #27130d);
+  --primary-100: var(--accent-900, #7c2d12);
+  --primary-200: var(--accent-800, #9a3412);
+  --primary-300: var(--accent-700, #c2410c);
+  --primary-400: var(--accent-600, #ea580c);
+  --primary-500: var(--accent-500, #f97316);
+  --primary-600: var(--accent-400, #fb923c);
+  --primary-700: var(--accent-300, #fdba74);
+  --primary-800: var(--accent-200, #fed7aa);
+  --primary-900: var(--accent-100, #ffedd5);
+  --primary-950: var(--accent-50, #fff7ed);
   --success: #86efac;
   --link-base: #3b82f6;
   --link-base-hovered: #93c5fd;
@@ -210,7 +210,7 @@ svg {
 
   /* SHIKI */
   --r-cl-1: #f9826c;
-  --r-cl-2: var(--neutral100);
+  --r-cl-2: var(--neutral-100);
   --r-cl-3: #444d56;
   --r-cl-4: #e1e4e8;
   --r-cl-5: #959da5;
diff --git a/packages/robindoc/src/components/blocks/anchor-heading/anchor-heading.scss b/packages/robindoc/src/components/blocks/anchor-heading/anchor-heading.scss
index 34f333d4..2cf472a1 100644
--- a/packages/robindoc/src/components/blocks/anchor-heading/anchor-heading.scss
+++ b/packages/robindoc/src/components/blocks/anchor-heading/anchor-heading.scss
@@ -13,7 +13,7 @@
   transition: opacity 0.3s allow-discrete;
   padding-inline: 8px;
   margin-inline-start: -4px;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   text-decoration: none;
 
   &:hover {
diff --git a/packages/robindoc/src/components/blocks/breadcrumbs/breadcrumbs.scss b/packages/robindoc/src/components/blocks/breadcrumbs/breadcrumbs.scss
index 5dad0b24..7b93ceb3 100644
--- a/packages/robindoc/src/components/blocks/breadcrumbs/breadcrumbs.scss
+++ b/packages/robindoc/src/components/blocks/breadcrumbs/breadcrumbs.scss
@@ -25,11 +25,11 @@
 }
 
 .r-breadcrumb-link {
-  color: var(--neutral700);
+  color: var(--neutral-700);
   text-decoration: none;
 
   &:hover {
-    color: var(--primary800);
+    color: var(--primary-800);
   }
 }
 
@@ -41,6 +41,6 @@
 }
 
 .r-breadcrumb-title {
-  color: var(--neutral950);
+  color: var(--neutral-950);
   font-weight: 600;
 }
diff --git a/packages/robindoc/src/components/blocks/code-section/code-section.scss b/packages/robindoc/src/components/blocks/code-section/code-section.scss
index 6ce36658..52fbeb4d 100644
--- a/packages/robindoc/src/components/blocks/code-section/code-section.scss
+++ b/packages/robindoc/src/components/blocks/code-section/code-section.scss
@@ -12,9 +12,9 @@
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   padding: 6px 20px;
-  background-color: var(--neutral100);
-  border: 1px solid var(--neutral300);
-  color: var(--neutral700);
+  background-color: var(--neutral-100);
+  border: 1px solid var(--neutral-300);
+  color: var(--neutral-700);
 }
 
 .r-code-section-header + .r-code-section-block {
diff --git a/packages/robindoc/src/components/blocks/contents/contents.scss b/packages/robindoc/src/components/blocks/contents/contents.scss
index c68f1cfa..58f5b8b3 100644
--- a/packages/robindoc/src/components/blocks/contents/contents.scss
+++ b/packages/robindoc/src/components/blocks/contents/contents.scss
@@ -14,7 +14,7 @@
     max-height: calc(100vh - var(--header-height));
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--neutral200) transparent;
+    scrollbar-color: var(--neutral-200) transparent;
     scrollbar-gutter: stable;
   }
 }
@@ -38,7 +38,7 @@
 
   .r-contents-title {
     @media screen and (width < $lg) {
-      color: var(--neutral800);
+      color: var(--neutral-800);
     }
   }
 
@@ -65,7 +65,7 @@
 
 .r-contents-details {
   @media screen and (width < $lg) {
-    background: var(--neutral100);
+    background: var(--neutral-100);
     border-radius: 4px;
   }
 }
@@ -77,7 +77,7 @@
   cursor: pointer;
   margin-top: 20px;
   padding: 12px;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   z-index: 1;
 
   @media screen and (width < $lg) {
@@ -87,7 +87,7 @@
   }
 
   @media screen and (width >= $lg) {
-    color: var(--neutral900);
+    color: var(--neutral-900);
     background: var(--body);
     font-weight: 600;
     margin-top: 0;
@@ -97,7 +97,7 @@
 
   &:hover {
     @media screen and (width < $lg) {
-      color: var(--neutral900);
+      color: var(--neutral-900);
     }
   }
 }
@@ -116,7 +116,7 @@
 .r-contents-link {
   display: block;
   position: relative;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   text-decoration: none;
   padding-top: 4px;
   padding-bottom: 4px;
@@ -127,7 +127,7 @@
   transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 
   &.r-contents-link:hover {
-    color: var(--primary800);
+    color: var(--primary-800);
     transition-delay: initial;
   }
 
@@ -141,11 +141,11 @@
     height: calc(100% + 8px);
     border-style: solid;
     border-width: 0 2px 0 0;
-    border-color: var(--primary800);
+    border-color: var(--primary-800);
   }
 
   &::before {
-    border-color: var(--neutral200);
+    border-color: var(--neutral-200);
   }
 
   &::after {
@@ -193,7 +193,7 @@
 
 .r-contents-link._passed {
   @media screen and (width >= $lg) {
-    color: var(--neutral800);
+    color: var(--neutral-800);
   }
 
   &::after {
@@ -205,7 +205,7 @@
 
 .r-contents-link._active {
   @media screen and (width >= $lg) {
-    color: var(--primary800);
+    color: var(--primary-800);
   }
 
   &::after,
@@ -231,7 +231,7 @@
   display: block;
   width: 100%;
   position: relative;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   text-decoration: none;
   padding-top: 10px;
   padding-bottom: 10px;
@@ -239,6 +239,6 @@
   font-weight: 600;
 
   &:hover {
-    color: var(--neutral900);
+    color: var(--neutral-900);
   }
 }
diff --git a/packages/robindoc/src/components/blocks/header-menu/header-menu.scss b/packages/robindoc/src/components/blocks/header-menu/header-menu.scss
index 8b814022..6cadd53c 100644
--- a/packages/robindoc/src/components/blocks/header-menu/header-menu.scss
+++ b/packages/robindoc/src/components/blocks/header-menu/header-menu.scss
@@ -61,7 +61,7 @@
   width: 20px;
   height: 1.5px;
   position: absolute;
-  background-color: var(--neutral700);
+  background-color: var(--neutral-700);
   margin: auto;
   transition: transform 0.3s;
 }
diff --git a/packages/robindoc/src/components/blocks/header-social/header-social.scss b/packages/robindoc/src/components/blocks/header-social/header-social.scss
index a42ed7fe..ab3521ab 100644
--- a/packages/robindoc/src/components/blocks/header-social/header-social.scss
+++ b/packages/robindoc/src/components/blocks/header-social/header-social.scss
@@ -12,11 +12,11 @@
 }
 
 .r-header-social-git {
-  color: var(--neutral700);
+  color: var(--neutral-700);
   transition: color 0.2s;
 
   &:hover,
   &:focus {
-    color: var(--neutral950);
+    color: var(--neutral-950);
   }
 }
diff --git a/packages/robindoc/src/components/blocks/last-modified/last-modified.scss b/packages/robindoc/src/components/blocks/last-modified/last-modified.scss
index 88a957a9..13710801 100644
--- a/packages/robindoc/src/components/blocks/last-modified/last-modified.scss
+++ b/packages/robindoc/src/components/blocks/last-modified/last-modified.scss
@@ -1,6 +1,6 @@
 @import "src/assets/_vars";
 
 .r-last-modified {
-  color: var(--neutral700);
+  color: var(--neutral-700);
   margin-block-start: 16px;
 }
diff --git a/packages/robindoc/src/components/blocks/pagination/pagination.scss b/packages/robindoc/src/components/blocks/pagination/pagination.scss
index 85b610af..8c0c46c5 100644
--- a/packages/robindoc/src/components/blocks/pagination/pagination.scss
+++ b/packages/robindoc/src/components/blocks/pagination/pagination.scss
@@ -14,10 +14,10 @@
   padding-bottom: 8px;
   text-decoration: none;
   font-size: 14px;
-  color: var(--neutral700);
+  color: var(--neutral-700);
 
   &:hover {
-    color: var(--neutral900);
+    color: var(--neutral-900);
   }
 }
 
@@ -38,7 +38,7 @@
 .r-pagination-title {
   font-weight: 600;
   font-size: 18px;
-  color: var(--neutral950);
+  color: var(--neutral-950);
 }
 
 .r-pagination-icon {
diff --git a/packages/robindoc/src/components/blocks/search/search.scss b/packages/robindoc/src/components/blocks/search/search.scss
index 8f28c1df..2f981210 100644
--- a/packages/robindoc/src/components/blocks/search/search.scss
+++ b/packages/robindoc/src/components/blocks/search/search.scss
@@ -3,10 +3,10 @@
 .r-search-btn {
   position: relative;
   border-radius: 6px;
-  background-color: var(--neutral100);
-  color: var(--neutral600);
+  background-color: var(--neutral-100);
+  color: var(--neutral-600);
   padding: 8px 20px;
-  border: 1px solid var(--neutral200);
+  border: 1px solid var(--neutral-200);
   width: 100%;
   text-align: left;
   cursor: text;
@@ -17,10 +17,10 @@
   }
 
   &:hover {
-    border-color: var(--neutral600);
+    border-color: var(--neutral-600);
 
     & .r-search-kbd {
-      color: var(--neutral950);
+      color: var(--neutral-950);
     }
   }
 }
@@ -46,15 +46,15 @@
 
 .r-search-popup-header {
   position: relative;
-  border-bottom: 1px solid var(--neutral200);
+  border-bottom: 1px solid var(--neutral-200);
 }
 
 .r-search-input {
   border-radius: 12px 12px 0 0;
-  background-color: var(--neutral50);
+  background-color: var(--neutral-50);
   padding: 16px 20px;
   border: none;
-  border-bottom: 2px solid var(--neutral300);
+  border-bottom: 2px solid var(--neutral-300);
   width: 100%;
   font-size: 16px;
 
@@ -63,21 +63,21 @@
   }
 
   &:hover {
-    border-bottom-color: var(--primary800);
+    border-bottom-color: var(--primary-800);
   }
 
   &:focus {
     outline: none;
-    border-bottom-color: var(--primary600);
+    border-bottom-color: var(--primary-600);
   }
 
   &::placeholder {
-    color: var(--neutral500);
+    color: var(--neutral-500);
   }
 }
 
 .r-search-popup-kbd {
-  color: var(--neutral600);
+  color: var(--neutral-600);
   right: 20px;
 }
 
@@ -87,24 +87,24 @@
   overflow-y: auto;
   list-style: none;
   scrollbar-width: thin;
-  scrollbar-color: var(--neutral200) transparent;
+  scrollbar-color: var(--neutral-200) transparent;
   margin: 0;
 }
 
 .r-search-item {
   display: block;
   text-decoration: none;
-  color: var(--neutral700);
+  color: var(--neutral-700);
   padding: 8px 12px;
-  border: 1px solid var(--neutral100);
+  border: 1px solid var(--neutral-100);
   border-radius: 6px;
   width: 100%;
   margin-top: 6px;
 
   &:hover,
   &:focus {
-    color: var(--neutral950);
-    background-color: var(--neutral50);
+    color: var(--neutral-950);
+    background-color: var(--neutral-50);
   }
 }
 
@@ -114,6 +114,6 @@
 
 .r-search-item-desc {
   font-size: 14px;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   margin: 12px 0 0;
 }
diff --git a/packages/robindoc/src/components/blocks/section-dropdown/section-dropdown.scss b/packages/robindoc/src/components/blocks/section-dropdown/section-dropdown.scss
index e9fdd0ac..5ed5f0da 100644
--- a/packages/robindoc/src/components/blocks/section-dropdown/section-dropdown.scss
+++ b/packages/robindoc/src/components/blocks/section-dropdown/section-dropdown.scss
@@ -2,12 +2,12 @@
 
 .r-dropdown {
   position: relative;
-  color: var(--neutral600);
+  color: var(--neutral-600);
   transition: color 0.2s 0.1s;
 
   &:hover,
   &:focus-within {
-    color: var(--neutral950);
+    color: var(--neutral-950);
 
     & .r-dropdown-drop {
       visibility: visible;
@@ -54,8 +54,8 @@
     transform 0.3s 0.1s,
     opacity 0.3s 0.1s,
     visibility 0.3s 0.1s;
-  background-color: var(--neutral50);
-  border: 1px solid var(--neutral100);
+  background-color: var(--neutral-50);
+  border: 1px solid var(--neutral-100);
   border-radius: 8px;
   margin: 0;
   padding: 2px 6px;
@@ -67,7 +67,7 @@
   display: block;
   width: 100%;
   text-decoration: none;
-  color: var(--neutral700);
+  color: var(--neutral-700);
   padding: 4px 8px;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -75,11 +75,11 @@
   transition: background-color 0.2s;
 
   &:hover {
-    color: var(--neutral900);
-    background-color: var(--neutral100);
+    color: var(--neutral-900);
+    background-color: var(--neutral-100);
   }
 }
 
 .r-dropdown-link._active {
-  color: var(--primary700);
+  color: var(--primary-700);
 }
diff --git a/packages/robindoc/src/components/blocks/theme/theme.scss b/packages/robindoc/src/components/blocks/theme/theme.scss
index 4e69d63c..79b175a5 100644
--- a/packages/robindoc/src/components/blocks/theme/theme.scss
+++ b/packages/robindoc/src/components/blocks/theme/theme.scss
@@ -7,7 +7,7 @@
   width: 108px;
   height: 36px;
   padding: 2px;
-  background-color: var(--neutral950);
+  background-color: var(--neutral-950);
   border-radius: 14px;
 
   &::before {
@@ -30,16 +30,16 @@
   border: 0;
   border-radius: 12px;
   cursor: pointer;
-  color: var(--neutral50);
-  fill: var(--neutral950);
+  color: var(--neutral-50);
+  fill: var(--neutral-950);
   z-index: 1;
   transition:
     color 0.2s 0.1s,
     fill 0.2s;
 
   &:hover {
-    color: var(--neutral50);
-    fill: var(--neutral50);
+    color: var(--neutral-50);
+    fill: var(--neutral-50);
   }
 }
 
@@ -48,7 +48,7 @@
 }
 
 .theme-dark:not(.theme-system) .r-theme-btn__dark {
-  color: var(--neutral950);
+  color: var(--neutral-950);
   pointer-events: none;
 }
 
@@ -57,7 +57,7 @@
 }
 
 .theme-system .r-theme-btn__system {
-  color: var(--neutral950);
+  color: var(--neutral-950);
   pointer-events: none;
 }
 
@@ -66,6 +66,6 @@
 }
 
 .theme-light:not(.theme-system) .r-theme-btn__light {
-  color: var(--neutral950);
+  color: var(--neutral-950);
   pointer-events: none;
 }
diff --git a/packages/robindoc/src/components/elements/footer/footer.scss b/packages/robindoc/src/components/elements/footer/footer.scss
index 2afaabeb..14409ea1 100644
--- a/packages/robindoc/src/components/elements/footer/footer.scss
+++ b/packages/robindoc/src/components/elements/footer/footer.scss
@@ -1,7 +1,7 @@
 @import "src/assets/_vars";
 
 .r-footer {
-  border-top: 1px solid var(--neutral300);
+  border-top: 1px solid var(--neutral-300);
   padding-top: 24px;
   padding-bottom: 24px;
 }
@@ -19,21 +19,21 @@
 }
 
 .r-copyright {
-  color: var(--neutral800);
+  color: var(--neutral-800);
 }
 
 .r-powered {
   font-size: 14px;
   display: block;
-  color: var(--neutral600);
+  color: var(--neutral-600);
 }
 
 .r-powered-link {
   font-weight: 600;
   text-decoration: none;
-  color: var(--neutral950);
+  color: var(--neutral-950);
 
   &:hover {
-    color: var(--primary900);
+    color: var(--primary-900);
   }
 }
diff --git a/packages/robindoc/src/components/elements/header/header.scss b/packages/robindoc/src/components/elements/header/header.scss
index 489e5690..c2b31ca2 100644
--- a/packages/robindoc/src/components/elements/header/header.scss
+++ b/packages/robindoc/src/components/elements/header/header.scss
@@ -4,7 +4,7 @@
   position: sticky;
   background-color: var(--body);
   top: 0;
-  border-bottom: 1px solid var(--neutral300);
+  border-bottom: 1px solid var(--neutral-300);
   height: 60px;
   z-index: 1000;
 }
@@ -20,12 +20,12 @@
 .r-header-logo {
   display: block;
   margin-right: 24px;
-  color: var(--neutral700);
+  color: var(--neutral-700);
   transition: color 0.2s;
 
   &:hover,
   &:focus {
-    color: var(--neutral950);
+    color: var(--neutral-950);
   }
 }
 
@@ -40,23 +40,23 @@
 }
 
 .r-header-link {
-  color: var(--neutral600);
+  color: var(--neutral-600);
   text-decoration: none;
   padding: 4px 0;
   transition: color 0.2s;
 
   &:hover,
   &:focus-visible {
-    color: var(--neutral950);
+    color: var(--neutral-950);
   }
 }
 
 .r-header-link._target {
-  color: var(--primary800);
+  color: var(--primary-800);
 
   &:hover,
   &:focus-visible {
-    color: var(--primary700);
+    color: var(--primary-700);
   }
 }
 
diff --git a/packages/robindoc/src/components/elements/sidebar/sidebar.scss b/packages/robindoc/src/components/elements/sidebar/sidebar.scss
index f4b48614..f49d078d 100644
--- a/packages/robindoc/src/components/elements/sidebar/sidebar.scss
+++ b/packages/robindoc/src/components/elements/sidebar/sidebar.scss
@@ -10,7 +10,7 @@
     left: 0;
     margin: 0 -12px;
     background-color: var(--body);
-    border-bottom: 1px solid var(--neutral200);
+    border-bottom: 1px solid var(--neutral-200);
     z-index: 10;
     opacity: 0.98;
     padding: 0;
@@ -45,7 +45,7 @@
   padding-top: 2px;
 
   &:hover::before {
-    background-color: var(--primary800);
+    background-color: var(--primary-800);
     transition-delay: initial;
   }
 }
@@ -58,7 +58,7 @@
   right: 0;
   height: 2px;
   border-bottom-left-radius: 2px;
-  background-color: var(--neutral200);
+  background-color: var(--neutral-200);
   z-index: 1;
   transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 }
@@ -75,7 +75,7 @@
     top: var(--header-height);
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--neutral200) transparent;
+    scrollbar-color: var(--neutral-200) transparent;
     scrollbar-gutter: stable;
     max-height: calc(100vh - var(--header-height));
   }
@@ -98,7 +98,7 @@
   padding: 12px;
   background: none;
   cursor: pointer;
-  color: var(--neutral800);
+  color: var(--neutral-800);
   background-color: var(--body);
   z-index: 1;
 
@@ -118,7 +118,7 @@
 }
 
 .r-sidebar-list {
-  color: var(--neutral700);
+  color: var(--neutral-700);
   list-style: none;
   padding: 0;
   margin: 0;
@@ -153,7 +153,7 @@
     top: -1px;
     width: 2px;
     height: calc(100% + 4px);
-    background-color: var(--neutral200);
+    background-color: var(--neutral-200);
     transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
   }
 }
@@ -166,7 +166,7 @@
 }
 
 .r-sidebar-li._separator {
-  background: var(--neutral200);
+  background: var(--neutral-200);
   padding: 1px;
 }
 
@@ -184,7 +184,7 @@
 }
 
 .r-sidebar-heading {
-  color: var(--neutral900);
+  color: var(--neutral-900);
   font-weight: 600;
   margin-block-end: 4px;
 
@@ -206,13 +206,13 @@
 }
 
 .r-sidebar-link._target {
-  color: var(--primary950);
-  background-color: var(--neutral50);
+  color: var(--primary-950);
+  background-color: var(--neutral-50);
 }
 
 .r-sidebar-link:hover {
-  color: var(--primary800);
-  background-color: var(--neutral100);
+  color: var(--primary-800);
+  background-color: var(--neutral-100);
   transition-delay: initial;
 
   &::before {
@@ -222,8 +222,8 @@
 }
 
 .r-sidebar-link._active {
-  color: var(--primary700);
-  background-color: var(--neutral50);
+  color: var(--primary-700);
+  background-color: var(--neutral-50);
 
   &::before {
     background-color: currentColor;
@@ -236,7 +236,7 @@
   top: 5px;
   border-radius: 4px;
   padding: 4px;
-  background-color: var(--neutral200);
+  background-color: var(--neutral-200);
   list-style: none;
   cursor: pointer;
   transition:
@@ -244,8 +244,8 @@
     color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 
   &:hover {
-    background-color: var(--neutral300);
-    color: var(--primary500);
+    background-color: var(--neutral-300);
+    color: var(--primary-500);
     transition-delay: initial;
   }
 
diff --git a/packages/robindoc/src/components/ui/block/block.scss b/packages/robindoc/src/components/ui/block/block.scss
index 4c110fbc..d8561c4e 100644
--- a/packages/robindoc/src/components/ui/block/block.scss
+++ b/packages/robindoc/src/components/ui/block/block.scss
@@ -4,5 +4,5 @@
   margin-block-start: 12px;
   margin-block-end: 12px;
   scrollbar-width: thin;
-  scrollbar-color: var(--neutral200) transparent;
+  scrollbar-color: var(--neutral-200) transparent;
 }
diff --git a/packages/robindoc/src/components/ui/blockquote/blockquote.scss b/packages/robindoc/src/components/ui/blockquote/blockquote.scss
index 6bc2580d..2edd5877 100644
--- a/packages/robindoc/src/components/ui/blockquote/blockquote.scss
+++ b/packages/robindoc/src/components/ui/blockquote/blockquote.scss
@@ -1,7 +1,7 @@
 .r-blockquote {
-  background-color: var(--neutral100);
+  background-color: var(--neutral-100);
   padding: 12px;
-  border-left: 6px solid var(--primary800);
+  border-left: 6px solid var(--primary-800);
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
   font: inherit;
diff --git a/packages/robindoc/src/components/ui/code-block/code-block.scss b/packages/robindoc/src/components/ui/code-block/code-block.scss
index faf2f576..cd7158a4 100644
--- a/packages/robindoc/src/components/ui/code-block/code-block.scss
+++ b/packages/robindoc/src/components/ui/code-block/code-block.scss
@@ -6,10 +6,10 @@
   padding: 16px 20px;
   margin-block-start: 1.5em;
   margin-block-end: 1.75em;
-  color: var(--primary800);
-  background-color: var(--neutral50);
-  border: 1px solid var(--neutral300);
+  color: var(--primary-800);
+  background-color: var(--neutral-50);
+  border: 1px solid var(--neutral-300);
   overflow-x: auto;
   scrollbar-width: thin;
-  scrollbar-color: var(--neutral200) transparent;
+  scrollbar-color: var(--neutral-200) transparent;
 }
diff --git a/packages/robindoc/src/components/ui/code-span/code-span.scss b/packages/robindoc/src/components/ui/code-span/code-span.scss
index c3d61f9c..ebf5c0cd 100644
--- a/packages/robindoc/src/components/ui/code-span/code-span.scss
+++ b/packages/robindoc/src/components/ui/code-span/code-span.scss
@@ -1,6 +1,6 @@
 .r-code-span {
   font-family: var(--monospace-font, monospace, monospace);
-  background-color: var(--neutral100);
+  background-color: var(--neutral-100);
   border-radius: 4px;
   padding: 2px 6px;
   font-size: 16px;
diff --git a/packages/robindoc/src/components/ui/copy-button/copy-button.scss b/packages/robindoc/src/components/ui/copy-button/copy-button.scss
index 89ed25c4..af722951 100644
--- a/packages/robindoc/src/components/ui/copy-button/copy-button.scss
+++ b/packages/robindoc/src/components/ui/copy-button/copy-button.scss
@@ -2,8 +2,8 @@
   position: relative;
   padding: 8px;
   background: none;
-  color: var(--neutral700);
-  background-color: var(--neutral100);
+  color: var(--neutral-700);
+  background-color: var(--neutral-100);
   border: 0;
   border-radius: 6px;
   cursor: pointer;
@@ -25,8 +25,8 @@
 }
 
 .copy-button:hover {
-  color: var(--neutral950);
-  background-color: var(--neutral200);
+  color: var(--neutral-950);
+  background-color: var(--neutral-200);
 }
 
 .copy-button:active,
diff --git a/packages/robindoc/src/components/ui/copy-text/copy-text.scss b/packages/robindoc/src/components/ui/copy-text/copy-text.scss
index 46d8cefd..7e2cdad1 100644
--- a/packages/robindoc/src/components/ui/copy-text/copy-text.scss
+++ b/packages/robindoc/src/components/ui/copy-text/copy-text.scss
@@ -7,7 +7,7 @@
   font: inherit;
 
   &:hover {
-    color: var(--neutral950);
+    color: var(--neutral-950);
   }
 
   &::after {
diff --git a/packages/robindoc/src/components/ui/kbd/kbd-container/kbd-container.scss b/packages/robindoc/src/components/ui/kbd/kbd-container/kbd-container.scss
index adc039c9..323ac551 100644
--- a/packages/robindoc/src/components/ui/kbd/kbd-container/kbd-container.scss
+++ b/packages/robindoc/src/components/ui/kbd/kbd-container/kbd-container.scss
@@ -7,6 +7,6 @@
   cursor: pointer;
 
   &:hover {
-    color: var(--neutral950);
+    color: var(--neutral-950);
   }
 }
diff --git a/packages/robindoc/src/components/ui/kbd/kbd-key/kbd-key.scss b/packages/robindoc/src/components/ui/kbd/kbd-key/kbd-key.scss
index 64976d3c..ab9c5db1 100644
--- a/packages/robindoc/src/components/ui/kbd/kbd-key/kbd-key.scss
+++ b/packages/robindoc/src/components/ui/kbd/kbd-key/kbd-key.scss
@@ -1,7 +1,7 @@
 @import "src/assets/vars";
 
 .r-kbd-key {
-  background-color: var(--neutral200);
+  background-color: var(--neutral-200);
   font-size: 12px;
   border-radius: 4px;
   padding: 5px 8px;
diff --git a/packages/robindoc/src/components/ui/keylink/keylink.scss b/packages/robindoc/src/components/ui/keylink/keylink.scss
index e4012385..f07ae9a8 100644
--- a/packages/robindoc/src/components/ui/keylink/keylink.scss
+++ b/packages/robindoc/src/components/ui/keylink/keylink.scss
@@ -2,7 +2,7 @@
   display: block;
   position: relative;
   padding: 8px 12px;
-  border: 2px solid var(--neutral500);
+  border: 2px solid var(--neutral-500);
   border-radius: 6px;
   text-decoration: none;
   background: var(--body);
diff --git a/packages/robindoc/src/components/ui/table/td/td.scss b/packages/robindoc/src/components/ui/table/td/td.scss
index 5aee4f8f..561aa6f3 100644
--- a/packages/robindoc/src/components/ui/table/td/td.scss
+++ b/packages/robindoc/src/components/ui/table/td/td.scss
@@ -1,5 +1,5 @@
 .r-td {
   padding: 6px 12px;
-  border-bottom: 1px solid var(--neutral400);
+  border-bottom: 1px solid var(--neutral-400);
   border-collapse: collapse;
 }
diff --git a/packages/robindoc/src/components/ui/table/th/th.scss b/packages/robindoc/src/components/ui/table/th/th.scss
index ac670b7f..9c7d9533 100644
--- a/packages/robindoc/src/components/ui/table/th/th.scss
+++ b/packages/robindoc/src/components/ui/table/th/th.scss
@@ -1,6 +1,6 @@
 .r-th {
   padding: 6px 12px;
-  border-top: 1px solid var(--neutral500);
-  border-bottom: 1px solid var(--neutral500);
+  border-top: 1px solid var(--neutral-500);
+  border-bottom: 1px solid var(--neutral-500);
   border-collapse: collapse;
 }
diff --git a/packages/robindoc/src/components/ui/table/thead/thead.scss b/packages/robindoc/src/components/ui/table/thead/thead.scss
index bae0afdd..c509fefb 100644
--- a/packages/robindoc/src/components/ui/table/thead/thead.scss
+++ b/packages/robindoc/src/components/ui/table/thead/thead.scss
@@ -1,3 +1,3 @@
 .r-thead {
-  background-color: var(--neutral100);
+  background-color: var(--neutral-100);
 }
diff --git a/packages/robindoc/src/components/ui/tabs/tabs-styles/index.tsx b/packages/robindoc/src/components/ui/tabs/tabs-styles/index.tsx
index b5d454c6..69daeab8 100644
--- a/packages/robindoc/src/components/ui/tabs/tabs-styles/index.tsx
+++ b/packages/robindoc/src/components/ui/tabs/tabs-styles/index.tsx
@@ -10,9 +10,9 @@ export const TabsStyles: React.FC<TabsStylesProps> = ({ tabsTypeId, tabsKeys })
         dangerouslySetInnerHTML={{
             __html: `
 html:not(.r-tabs-global__${tabsTypeId}) .r-tabs__${tabsTypeId} .r-tab:not(.r-tab_${tabsKeys[0]}) {display: none}
-html:not(.r-tabs-global__${tabsTypeId}) .r-tabs__${tabsTypeId} .r-tab-header_${tabsKeys[0]} {background: var(--neutral50);z-index: 2;pointer-events: none;color:var(--neutral950)}
+html:not(.r-tabs-global__${tabsTypeId}) .r-tabs__${tabsTypeId} .r-tab-header_${tabsKeys[0]} {background: var(--neutral-50);z-index: 2;pointer-events: none;color:var(--neutral-950)}
 ${tabsKeys.map((tabKey) => `.r-tabs-global__${tabsTypeId}_${tabKey} .r-tabs__${tabsTypeId} .r-tab:not(.r-tab_${tabKey}) {display: none}`).join("")}
-${tabsKeys.map((tabKey) => `.r-tabs-global__${tabsTypeId}_${tabKey} .r-tabs__${tabsTypeId} .r-tab-header_${tabKey} {background: var(--neutral50);z-index: 2;pointer-events: none;color:var(--neutral950)}`).join("")}
+${tabsKeys.map((tabKey) => `.r-tabs-global__${tabsTypeId}_${tabKey} .r-tabs__${tabsTypeId} .r-tab-header_${tabKey} {background: var(--neutral-50);z-index: 2;pointer-events: none;color:var(--neutral-950)}`).join("")}
 `,
         }}
     />
diff --git a/packages/robindoc/src/components/ui/tabs/tabs.scss b/packages/robindoc/src/components/ui/tabs/tabs.scss
index ced442a7..4ffbe155 100644
--- a/packages/robindoc/src/components/ui/tabs/tabs.scss
+++ b/packages/robindoc/src/components/ui/tabs/tabs.scss
@@ -15,7 +15,7 @@
   margin-block-end: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  background-color: var(--neutral50);
+  background-color: var(--neutral-50);
 }
 
 .r-tabs-header {
@@ -24,8 +24,8 @@
 
 .r-tab-header {
   cursor: pointer;
-  border: 1px solid var(--neutral300);
-  color: var(--neutral600);
+  border: 1px solid var(--neutral-300);
+  color: var(--neutral-600);
   border-bottom: 0;
   margin-bottom: -1px;
   background-color: var(--body);
@@ -34,8 +34,8 @@
   padding: 8px 20px;
 
   &:hover {
-    background-color: var(--neutral50);
-    color: var(--primary600);
+    background-color: var(--neutral-50);
+    color: var(--primary-600);
   }
 }
 
diff --git a/packages/robindoc/src/components/ui/tooltip/tooltip.scss b/packages/robindoc/src/components/ui/tooltip/tooltip.scss
index 91d1e985..c9fbee00 100644
--- a/packages/robindoc/src/components/ui/tooltip/tooltip.scss
+++ b/packages/robindoc/src/components/ui/tooltip/tooltip.scss
@@ -2,7 +2,7 @@
   font-family: var(--monospace-font, monospace, monospace);
   opacity: 0;
   position: absolute;
-  background: var(--neutral200);
+  background: var(--neutral-200);
   width: max-content;
   padding: 6px 12px;
   border-radius: 4px;
diff --git a/site/src/components/sections/features/features.scss b/site/src/components/sections/features/features.scss
index c52e0ab5..ae09e6d3 100644
--- a/site/src/components/sections/features/features.scss
+++ b/site/src/components/sections/features/features.scss
@@ -14,14 +14,14 @@
   align-content: space-between;
   border-radius: 12px;
   padding: 48px 32px;
-  background: var(--neutral50);
+  background: var(--neutral-50);
 }
 
 .features-card-1 {
   background: radial-gradient(
     50.69% 38.39% at 10.59% 64.42%,
-    var(--primary50) 0%,
-    var(--neutral50) 100%
+    var(--primary-50) 0%,
+    var(--neutral-50) 100%
   );
 
   @media screen and (width >= 768px) {
@@ -33,8 +33,8 @@
 .features-card-2 {
   background: radial-gradient(
     64.59% 64.59% at 46.08% 31.57%,
-    var(--primary50) 0%,
-    var(--neutral50) 100%
+    var(--primary-50) 0%,
+    var(--neutral-50) 100%
   );
 
   @media screen and (width >= 768px) {
@@ -46,8 +46,8 @@
 .features-card-3 {
   background: radial-gradient(
     34.95% 63.28% at 96.22% 96.73%,
-    var(--primary50) 0%,
-    var(--neutral50) 100%
+    var(--primary-50) 0%,
+    var(--neutral-50) 100%
   );
 
   @media screen and (width >= 768px) {
@@ -59,8 +59,8 @@
 .features-card-4 {
   background: radial-gradient(
     54.17% 69.64% at 46.8% 78.55%,
-    var(--primary50) 0%,
-    var(--neutral50) 100%
+    var(--primary-50) 0%,
+    var(--neutral-50) 100%
   );
 
   @media screen and (width >= 768px) {
@@ -72,8 +72,8 @@
 .features-card-5 {
   background: radial-gradient(
     75% 75.87% at 78.57% 45.14%,
-    var(--primary50) 0%,
-    var(--neutral50) 100%
+    var(--primary-50) 0%,
+    var(--neutral-50) 100%
   );
 
   @media screen and (width >= 768px) {
@@ -99,11 +99,11 @@
 
 .features-sources._visible {
   .features-source {
-    stroke: var(--primary500);
+    stroke: var(--primary-500);
   }
 
   .features-source-box {
-    fill: var(--primary500);
+    fill: var(--primary-500);
   }
 }
 
diff --git a/site/src/components/sections/intro/index.tsx b/site/src/components/sections/intro/index.tsx
index 6c202e4e..b255bebf 100644
--- a/site/src/components/sections/intro/index.tsx
+++ b/site/src/components/sections/intro/index.tsx
@@ -37,8 +37,8 @@ export const Intro: React.FC = () => {
             </div>
             <div>
                 <svg className='intro-logo' width="456" height="456" viewBox="0 0 456 456">
-                    <path className='intro-logo-inner' d="M187.421 187.351L187.366 187.366L187.351 187.421C183.847 200.354 181.977 213.959 181.977 228C181.977 242.041 183.847 255.646 187.351 268.579L187.366 268.634L187.421 268.649C200.354 272.153 213.959 274.023 228 274.023C242.041 274.023 255.646 272.153 268.579 268.649L268.634 268.634L268.649 268.579C272.153 255.646 274.023 242.041 274.023 228C274.023 213.959 272.153 200.354 268.649 187.421L268.634 187.366L268.579 187.351C255.646 183.847 242.041 181.977 228 181.977C213.959 181.977 200.354 183.847 187.421 187.351Z" fill="var(--neutral800)"/>
-                    <path className='intro-logo-outer' d="M187.473 187.544L187.529 187.529L187.544 187.473C194.766 160.817 208.94 137.02 228 118.148C247.06 137.02 261.234 160.817 268.456 187.473L268.471 187.529L268.527 187.544C295.183 194.766 318.98 208.94 337.852 228C318.98 247.06 295.183 261.234 268.527 268.456L268.471 268.471L268.456 268.527C261.234 295.183 247.06 318.98 228 337.852C208.94 318.98 194.766 295.183 187.544 268.527L187.529 268.471L187.473 268.456C160.817 261.234 137.02 247.06 118.148 228C137.02 208.94 160.817 194.766 187.473 187.544ZM228 117.866C200.045 90.2567 161.631 73.2125 119.235 73.2125C110.69 73.2125 102.307 73.9049 94.1379 75.2368C88.8839 76.0934 83.7187 77.2146 78.6565 78.5861L78.6011 78.6011L78.5861 78.6565C77.2146 83.7187 76.0934 88.8839 75.2368 94.1379C73.9049 102.307 73.2125 110.69 73.2125 119.235C73.2125 161.631 90.2567 200.045 117.866 228C90.2567 255.955 73.2125 294.369 73.2125 336.765C73.2125 345.31 73.9049 353.693 75.2368 361.862C76.0934 367.116 77.2146 372.281 78.5861 377.344L78.6011 377.399L78.6565 377.414C83.7187 378.785 88.8839 379.907 94.1379 380.763C102.307 382.095 110.69 382.788 119.235 382.788C161.631 382.788 200.045 365.743 228 338.134C255.955 365.743 294.369 382.788 336.765 382.788C345.31 382.788 353.693 382.095 361.862 380.763C367.116 379.907 372.281 378.785 377.344 377.414L377.399 377.399L377.414 377.344C378.785 372.281 379.907 367.116 380.763 361.862C382.095 353.693 382.788 345.31 382.788 336.765C382.788 294.369 365.743 255.955 338.134 228C365.743 200.045 382.788 161.631 382.788 119.235C382.788 110.69 382.095 102.307 380.763 94.1379C379.907 88.8839 378.785 83.7187 377.414 78.6565L377.399 78.6011L377.344 78.5861C372.281 77.2146 367.116 76.0934 361.862 75.2368C353.693 73.9049 345.31 73.2125 336.765 73.2125C294.369 73.2125 255.955 90.2567 228 117.866Z" fill="var(--neutral800)"/>
+                    <path className='intro-logo-inner' d="M187.421 187.351L187.366 187.366L187.351 187.421C183.847 200.354 181.977 213.959 181.977 228C181.977 242.041 183.847 255.646 187.351 268.579L187.366 268.634L187.421 268.649C200.354 272.153 213.959 274.023 228 274.023C242.041 274.023 255.646 272.153 268.579 268.649L268.634 268.634L268.649 268.579C272.153 255.646 274.023 242.041 274.023 228C274.023 213.959 272.153 200.354 268.649 187.421L268.634 187.366L268.579 187.351C255.646 183.847 242.041 181.977 228 181.977C213.959 181.977 200.354 183.847 187.421 187.351Z" fill="var(--neutral-800)"/>
+                    <path className='intro-logo-outer' d="M187.473 187.544L187.529 187.529L187.544 187.473C194.766 160.817 208.94 137.02 228 118.148C247.06 137.02 261.234 160.817 268.456 187.473L268.471 187.529L268.527 187.544C295.183 194.766 318.98 208.94 337.852 228C318.98 247.06 295.183 261.234 268.527 268.456L268.471 268.471L268.456 268.527C261.234 295.183 247.06 318.98 228 337.852C208.94 318.98 194.766 295.183 187.544 268.527L187.529 268.471L187.473 268.456C160.817 261.234 137.02 247.06 118.148 228C137.02 208.94 160.817 194.766 187.473 187.544ZM228 117.866C200.045 90.2567 161.631 73.2125 119.235 73.2125C110.69 73.2125 102.307 73.9049 94.1379 75.2368C88.8839 76.0934 83.7187 77.2146 78.6565 78.5861L78.6011 78.6011L78.5861 78.6565C77.2146 83.7187 76.0934 88.8839 75.2368 94.1379C73.9049 102.307 73.2125 110.69 73.2125 119.235C73.2125 161.631 90.2567 200.045 117.866 228C90.2567 255.955 73.2125 294.369 73.2125 336.765C73.2125 345.31 73.9049 353.693 75.2368 361.862C76.0934 367.116 77.2146 372.281 78.5861 377.344L78.6011 377.399L78.6565 377.414C83.7187 378.785 88.8839 379.907 94.1379 380.763C102.307 382.095 110.69 382.788 119.235 382.788C161.631 382.788 200.045 365.743 228 338.134C255.955 365.743 294.369 382.788 336.765 382.788C345.31 382.788 353.693 382.095 361.862 380.763C367.116 379.907 372.281 378.785 377.344 377.414L377.399 377.399L377.414 377.344C378.785 372.281 379.907 367.116 380.763 361.862C382.095 353.693 382.788 345.31 382.788 336.765C382.788 294.369 365.743 255.955 338.134 228C365.743 200.045 382.788 161.631 382.788 119.235C382.788 110.69 382.095 102.307 380.763 94.1379C379.907 88.8839 378.785 83.7187 377.414 78.6565L377.399 78.6011L377.344 78.5861C372.281 77.2146 367.116 76.0934 361.862 75.2368C353.693 73.9049 345.31 73.2125 336.765 73.2125C294.369 73.2125 255.955 90.2567 228 117.866Z" fill="var(--neutral-800)"/>
                 </svg>
             </div>
         </div>
diff --git a/site/src/components/sections/intro/intro.scss b/site/src/components/sections/intro/intro.scss
index 120b9bae..5786f6ec 100644
--- a/site/src/components/sections/intro/intro.scss
+++ b/site/src/components/sections/intro/intro.scss
@@ -21,7 +21,7 @@
     content: "#";
     position: absolute;
     left: -32px;
-    color: var(--neutral300);
+    color: var(--neutral-300);
     pointer-events: none;
   }
 }
@@ -35,7 +35,7 @@
     content: "**";
     position: absolute;
     top: -10px;
-    color: var(--neutral300);
+    color: var(--neutral-300);
     pointer-events: none;
   }
 
@@ -56,7 +56,7 @@
   &::after {
     content: "_";
     position: absolute;
-    color: var(--neutral300);
+    color: var(--neutral-300);
     pointer-events: none;
   }
 
@@ -146,7 +146,7 @@
   &::after {
     position: absolute;
     left: 0;
-    color: var(--neutral300);
+    color: var(--neutral-300);
     pointer-events: none;
   }
 
@@ -165,13 +165,13 @@
   line-height: 22px;
   display: block;
   text-decoration: none;
-  background: var(--primary700);
-  color: var(--neutral50);
+  background: var(--primary-700);
+  color: var(--neutral-50);
   border-radius: 6px;
   padding: 8px 16px;
 
   &:hover {
-    background: var(--primary800);
+    background: var(--primary-800);
   }
 }
 
@@ -180,14 +180,14 @@
   line-height: 22px;
   border-radius: 6px;
   padding: 8px 12px;
-  background-color: var(--neutral50);
-  border: 1px solid var(--neutral300);
+  background-color: var(--neutral-50);
+  border: 1px solid var(--neutral-300);
 
   &::before,
   &::after {
     position: absolute;
     left: 0;
-    color: var(--neutral300);
+    color: var(--neutral-300);
     pointer-events: none;
   }
 
diff --git a/site/src/components/sections/showcases/showcases.scss b/site/src/components/sections/showcases/showcases.scss
index 002824e7..c1eee57a 100644
--- a/site/src/components/sections/showcases/showcases.scss
+++ b/site/src/components/sections/showcases/showcases.scss
@@ -12,7 +12,7 @@
 
 .showcases-name {
   position: relative;
-  color: var(--primary600);
+  color: var(--primary-600);
 
   &::before,
   &::after {
@@ -29,16 +29,16 @@
     left: -40px;
     top: -20px;
     border-radius: 50% 10% 30% 25% / 35% 20% 70% 80%;
-    background-color: var(--primary700);
-    box-shadow: 0 0 80px 100px var(--primary700);
+    background-color: var(--primary-700);
+    box-shadow: 0 0 80px 100px var(--primary-700);
   }
 
   &::after {
     right: -200px;
     bottom: -140px;
     border-radius: 10% 25% 15% 80% / 60% 20% 25% 50%;
-    background-color: var(--neutral700);
-    box-shadow: 0 0 80px 100px var(--neutral700);
+    background-color: var(--neutral-700);
+    box-shadow: 0 0 80px 100px var(--neutral-700);
   }
 }
 
@@ -54,7 +54,7 @@
 }
 
 .showcases-btn {
-  --main-color: var(--neutral900);
+  --main-color: var(--neutral-900);
   display: block;
   text-decoration: none;
   border-radius: 6px;
@@ -68,12 +68,12 @@
 
   &:hover {
     background-color: var(--main-color);
-    color: var(--neutral100);
+    color: var(--neutral-100);
   }
 }
 
 .showcases-btn_primary {
-  --main-color: var(--primary700);
+  --main-color: var(--primary-700);
 }
 
 .showcases-list {
@@ -91,7 +91,7 @@
   display: block;
   border-radius: 12px;
   text-decoration: none;
-  background-color: var(--neutral50);
+  background-color: var(--neutral-50);
   padding: 16px;
   color: inherit;
   text-align: left;
@@ -100,7 +100,7 @@
 
   &:hover {
     filter: grayscale(0);
-    background-color: var(--neutral100);
+    background-color: var(--neutral-100);
   }
 }
 
@@ -121,7 +121,7 @@
   top: 16px;
   right: 16px;
   padding: 6px 10px;
-  background-color: var(--neutral100);
+  background-color: var(--neutral-100);
   backdrop-filter: opacity(0.4);
   border-top-right-radius: 8px;
   border-bottom-left-radius: 8px;
diff --git a/site/src/components/ui/note/note.scss b/site/src/components/ui/note/note.scss
index 7c04a88f..fa21e8c2 100644
--- a/site/src/components/ui/note/note.scss
+++ b/site/src/components/ui/note/note.scss
@@ -4,6 +4,6 @@
 }
 
 .note_info {
-  background-color: var(--neutral50);
-  border: 2px solid var(--neutral300);
+  background-color: var(--neutral-50);
+  border: 2px solid var(--neutral-300);
 }
diff --git a/site/src/components/ui/package-links/package-links.scss b/site/src/components/ui/package-links/package-links.scss
index cddb1dce..692e44b9 100644
--- a/site/src/components/ui/package-links/package-links.scss
+++ b/site/src/components/ui/package-links/package-links.scss
@@ -23,5 +23,5 @@
 }
 
 .package-links-link-github {
-  background: var(--neutral800);
+  background: var(--neutral-800);
 }