From eb0714319b6dd0c16e7aa4ada35c1bea6c96df5e Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Fri, 2 Oct 2026 21:44:23 +0200
Subject: [PATCH] [theme] update naming for spacing-content vars names

---
 .../accordion/src/style/accordion.shadow.css  |  24 +-
 .../src/components/hint/style/hint.shadow.css |   2 +-
 .../scroll-area/style/scroll-bar.shadow.css   |   8 +-
 .../src/style/base-trigger.shadow.css         |  10 +-
 .../src/style/breadcrumbs.shadow.css          |   2 +-
 .../InputField/inputField.shadow.css          |  22 +-
 .../src/component/Button/button.shadow.css    |  40 +--
 semcore/card/src/style/card.shadow.css        |  10 +-
 .../carousel/src/style/carousel.shadow.css    |  12 +-
 .../checkbox/src/style/checkbox.shadow.css    |   4 +-
 .../src/style/color-picker.shadow.css         |  12 +-
 semcore/counter/src/style/counter.shadow.css  |   6 +-
 .../LegendFlex/legend-flex.shadow.css         |   4 +-
 .../LegendItem/legend-item.shadow.css         |  18 +-
 .../LegendTable/legend-table.shadow.css       |   4 +-
 .../src/style/abstract-chart.shadow.css       |   4 +-
 semcore/d3-chart/src/style/tooltip.shadow.css |  10 +-
 .../src/components/Body/style.shadow.css      |  30 +-
 .../src/components/Head/style.shadow.css      |  28 +-
 .../date-picker/src/style/calendar.shadow.css |   6 +-
 .../src/style/dropdown-menu.shadow.css        |   8 +-
 .../dropdown/src/style/dropdown.shadow.css    |  16 +-
 .../src/style/dropdownNotice.shadow.css       |   4 +-
 .../src/style/feature-popover.shadow.css      |   8 +-
 .../src/style/fullscreen-modal.shadow.css     |  28 +-
 .../src/style/inline-input.shadow.css         |   2 +-
 .../input-tags/src/style/input-tag.shadow.css |   4 +-
 semcore/input/src/style/input.shadow.css      |  10 +-
 semcore/link/src/style/link.shadow.css        |   4 +-
 semcore/modal/src/style/modal.shadow.css      |  10 +-
 .../src/style/notice-bubble.shadow.css        |  12 +-
 semcore/notice/src/style/notice.shadow.css    |  22 +-
 .../src/style/pagination.shadow.css           |  20 +-
 semcore/pills/src/style/pills.shadow.css      |  14 +-
 .../src/styles/radio-cards.shadow.css         |  12 +-
 semcore/radio/src/style/radio.shadow.css      |   4 +-
 .../select/src/style/input-search.shadow.css  |   2 +-
 semcore/select/src/style/select.shadow.css    |   4 +-
 .../src/style/side-panel.shadow.css           |  18 +-
 .../tab-line/src/style/tab-line.shadow.css    |   6 +-
 .../tab-panel/src/style/tab-panel.shadow.css  |   4 +-
 semcore/tag/src/style/tag.shadow.css          |  16 +-
 .../textarea/src/style/textarea.shadow.css    |   4 +-
 .../PickerInput/picker-input.shadow.css       |   4 +-
 semcore/tooltip/src/style/tooltip.shadow.css  |   2 +-
 .../src/style/blockquote.shadow.css           |   4 +-
 semcore/typography/src/style/list.shadow.css  |   6 +-
 semcore/typography/src/style/text.shadow.css  |  66 ++--
 semcore/wizard/src/style/wizard.shadow.css    |  18 +-
 tools/theme/src/theme.ts                      | 302 ++++++------------
 50 files changed, 397 insertions(+), 493 deletions(-)

diff --git a/semcore/accordion/src/style/accordion.shadow.css b/semcore/accordion/src/style/accordion.shadow.css
index 3b32b274bd..2e2533126a 100644
--- a/semcore/accordion/src/style/accordion.shadow.css
+++ b/semcore/accordion/src/style/accordion.shadow.css
@@ -1,6 +1,6 @@
 SAccordion {
   flex-direction: column;
-  gap: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+  gap: var(--intergalactic-spacing-content-gap-xxs, 2px);
 }
 
 SItemToggle {
@@ -14,10 +14,10 @@ SItemToggle {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
     background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
     border-radius: var(--intergalactic-surface-rounded, 8px);
-    padding: var(--intergalactic-spacing-content-padding-small, 8px)
-      var(--intergalactic-spacing-content-padding-large, 16px)
-      var(--intergalactic-spacing-content-padding-small, 8px)
-      var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding: var(--intergalactic-spacing-content-padding-s, 8px)
+      var(--intergalactic-spacing-content-padding-l, 16px)
+      var(--intergalactic-spacing-content-padding-s, 8px)
+      var(--intergalactic-spacing-content-padding-xl, 20px);
       
 
     &:has(SItemChevron[selected]) {
@@ -30,7 +30,7 @@ SItemToggle {
     }
 
     SItemToggleButton {
-      gap: var(--intergalactic-spacing-content-gap-large, 8px);
+      gap: var(--intergalactic-spacing-content-gap-s, 8px);
       justify-content: space-between;
     }
 
@@ -42,13 +42,13 @@ SItemToggle {
   &[use='secondary'] {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
     padding:
-      var(--intergalactic-spacing-content-gap-large, 8px)
-      var(--intergalactic-spacing-content-padding-xxsmall, 2px)
-      var(--intergalactic-spacing-content-padding-small, 8px)
-      var(--intergalactic-spacing-content-padding-xxsmall, 2px);
+      var(--intergalactic-spacing-content-gap-s, 8px)
+      var(--intergalactic-spacing-content-padding-xxs, 2px)
+      var(--intergalactic-spacing-content-padding-s, 8px)
+      var(--intergalactic-spacing-content-padding-xxs, 2px);
 
     SItemToggleButton {
-      gap: var(--intergalactic-spacing-content-gap-small, 4px);
+      gap: var(--intergalactic-spacing-content-gap-xs, 4px);
       justify-content: unset;
     }
 
@@ -119,7 +119,7 @@ SAccordionItem {
 }
 
 SItemCollapseContainer {
-  padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-xlarge, 20px);
+  padding: var(--intergalactic-spacing-content-padding-m, 12px) var(--intergalactic-spacing-content-padding-xl, 20px);
 }
 
 @media (prefers-reduced-motion) {
diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css
index 7af94d81e6..aa76eff30e 100644
--- a/semcore/base-components/src/components/hint/style/hint.shadow.css
+++ b/semcore/base-components/src/components/hint/style/hint.shadow.css
@@ -11,7 +11,7 @@ SHintPopper {
   background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
   border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
   color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949));
-  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px);
+  padding: var(--intergalactic-spacing-content-padding-xs, 4px) var(--intergalactic-spacing-content-padding-s, 8px);
   border-radius: var(--intergalactic-rounded-small, 4px);
   font-size: var(--intergalactic-fs-100, 12px);
   line-height: var(--intergalactic-lh-100, 1.3334);
diff --git a/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css b/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css
index 910fb777b5..773ad698ec 100644
--- a/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css
+++ b/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css
@@ -4,21 +4,21 @@ SScrollBar {
 }
 
 SScrollBar[orientation='vertical'] {
-  margin-top: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  margin-top: var(--intergalactic-spacing-content-padding-xs, 4px);
   top: 0;
   right: 0;
   width: 8px;
-  height: calc(100% - var(--offsetSum) - var(--intergalactic-spacing-content-padding-small, 8px));
+  height: calc(100% - var(--offsetSum) - var(--intergalactic-spacing-content-padding-s, 8px));
   justify-content: center;
 }
 
 SScrollBar[orientation='horizontal'] {
-  margin-left: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  margin-left: var(--intergalactic-spacing-content-padding-xs, 4px);
   left: 0;
   bottom: 0;
   height: 12px;
   align-items: center;
-  width: calc(100% - var(--offsetSum) - var(--intergalactic-spacing-content-padding-medium, 12px));
+  width: calc(100% - var(--offsetSum) - var(--intergalactic-spacing-content-padding-m, 12px));
 }
 
 SSlider {
diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css
index ee906ed751..e09c09bb83 100644
--- a/semcore/base-trigger/src/style/base-trigger.shadow.css
+++ b/semcore/base-trigger/src/style/base-trigger.shadow.css
@@ -25,7 +25,7 @@ SBaseTrigger {
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
   border-radius: var(--intergalactic-control-rounded, 6px);
-  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: 0 var(--intergalactic-spacing-content-padding-m, 12px);
 
   &::-moz-focus-inner {
     border: none;
@@ -67,7 +67,7 @@ SInner {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
+  gap: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   height: 100%;
   width: 100%;
 }
@@ -90,8 +90,8 @@ SAddon {
   pointer-events: none;
 
   &:only-child {
-    margin-left: calc(-1 * var(--intergalactic-spacing-content-gap-small, 4px));
-    margin-right: calc(-1 * var(--intergalactic-spacing-content-gap-small, 4px));
+    margin-left: calc(-1 * var(--intergalactic-spacing-content-gap-xs, 4px));
+    margin-right: calc(-1 * var(--intergalactic-spacing-content-gap-xs, 4px));
   }
 }
 
@@ -150,5 +150,5 @@ SBaseTrigger[state='invalid'] {
 
 SInvalidPattern[size='m'],
 SInvalidPattern[size='l'] {
-  margin-left: calc(-1 * var(--intergalactic-spacing-content-padding-medium, 12px));
+  margin-left: calc(-1 * var(--intergalactic-spacing-content-padding-m, 12px));
 }
diff --git a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css
index fe86f45b0c..e950d2f967 100644
--- a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css
+++ b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css
@@ -3,7 +3,7 @@ SBreadcrumbs {
   align-items: center;
   padding: 0;
   margin: 0;
-  gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  gap: var(--intergalactic-spacing-content-gap-s, 8px);
 
   SListContainer {
     display: contents;
diff --git a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
index 431a4beca2..d4688e564a 100644
--- a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
+++ b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
@@ -23,14 +23,14 @@ SInputField>ol {
     color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337));
     position: absolute;
     white-space: pre-wrap;
-    padding-left: var(--intergalactic-spacing-content-padding-medium, 12px);
-    padding-right: var(--intergalactic-spacing-content-padding-large, 16px);
-    text-indent: calc(-1 * var(--intergalactic-spacing-content-padding-medium, 12px));
+    padding-left: var(--intergalactic-spacing-content-padding-m, 12px);
+    padding-right: var(--intergalactic-spacing-content-padding-l, 16px);
+    text-indent: calc(-1 * var(--intergalactic-spacing-content-padding-m, 12px));
   }
 
   >li {
     counter-increment: list-counter;
-    margin: 0 0 var(--intergalactic-spacing-content-padding-xsmall, 4px) 0;
+    margin: 0 0 var(--intergalactic-spacing-content-padding-xs, 4px) 0;
     position: relative;
     word-break: break-all;
     white-space: pre-wrap;
@@ -49,7 +49,7 @@ SInputField>ol {
 
       text-align: right;
       color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
-      margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
+      margin-right: var(--intergalactic-spacing-content-gap-xs, 4px);
       font-variant-numeric: normal;
       font-weight: 300;
     }
@@ -114,7 +114,7 @@ SInputField[showErrors]>ol[aria-invalid]>li[aria-invalid]:after {
 }
 
 SInputField[size='m']>ol {
-  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-xs, 4px) var(--intergalactic-spacing-content-padding-l, 16px) var(--intergalactic-spacing-content-padding-xs, 4px) var(--intergalactic-spacing-content-padding-m, 12px);
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 1.4286);
 
@@ -123,16 +123,16 @@ SInputField[size='m']>ol {
   max-height: calc((var(--maxRows) - 1) * (20px + var(--intergalactic-spacing-1x, 4px)) + 18px);
 
   &:empty {
-    padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + 6px);
+    padding-left: calc(var(--intergalactic-spacing-content-padding-xl, 20px) + 6px);
 
     &::before {
-      left: var(--intergalactic-spacing-content-padding-medium, 12px);
+      left: var(--intergalactic-spacing-content-padding-m, 12px);
     }
   }
 }
 
 SInputField[size='l']>ol {
-  padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-s, 8px) var(--intergalactic-spacing-content-padding-l, 16px) var(--intergalactic-spacing-content-padding-s, 8px) var(--intergalactic-spacing-content-padding-m, 12px);
   font-size: var(--intergalactic-fs-300, 16px);
   line-height: var(--intergalactic-lh-300, 1.5);
 
@@ -140,10 +140,10 @@ SInputField[size='l']>ol {
   max-height: calc((var(--maxRows) - 1) * (24px + var(--intergalactic-spacing-1x, 4px)) + 20px);
 
   &:empty {
-    padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + var(--intergalactic-spacing-content-padding-small, 8px));
+    padding-left: calc(var(--intergalactic-spacing-content-padding-xl, 20px) + var(--intergalactic-spacing-content-padding-s, 8px));
 
     &::before {
-      left: var(--intergalactic-spacing-content-padding-medium, 12px);
+      left: var(--intergalactic-spacing-content-padding-m, 12px);
     }
   }
 }
diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css
index f02975043b..392cba69f0 100644
--- a/semcore/button/src/component/Button/button.shadow.css
+++ b/semcore/button/src/component/Button/button.shadow.css
@@ -315,40 +315,40 @@ SText {
 }
 
 SText[size='m'] {
-  margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
-  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
+  margin-left: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   line-height: var(--intergalactic-lh-200, 1.4286);
 
   &:only-child {
-    margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
-    margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-left: var(--intergalactic-spacing-content-padding-m, 12px);
+    margin-right: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 
   &:first-child {
-    margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-left: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 
   &:last-child {
-    margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-right: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 }
 
 SText[size='l'] {
-  margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
-  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
+  margin-left: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   line-height: var(--intergalactic-lh-300, 1.5);
 
   &:only-child {
-    margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
-    margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-left: var(--intergalactic-spacing-content-padding-m, 12px);
+    margin-right: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 
   &:first-child {
-    margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-left: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 
   &:last-child {
-    margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-right: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 }
 
@@ -361,30 +361,30 @@ SAddon {
 
 SAddon[size='m'] {
   &:not(:only-child):first-child {
-    margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-left: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 
   &:not(:only-child):last-child {
-    margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-right: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 
   &:only-child {
-    margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
-    margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
+    margin-left: var(--intergalactic-spacing-content-gap-s, 8px);
+    margin-right: var(--intergalactic-spacing-content-gap-s, 8px);
   }
 }
 
 SAddon[size='l'] {
   &:not(:only-child):first-child {
-    margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-left: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 
   &:not(:only-child):last-child {
-    margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-right: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 
   &:only-child {
-    margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
-    margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin-left: var(--intergalactic-spacing-content-padding-m, 12px);
+    margin-right: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 }
diff --git a/semcore/card/src/style/card.shadow.css b/semcore/card/src/style/card.shadow.css
index 3651a93096..6c51bab061 100644
--- a/semcore/card/src/style/card.shadow.css
+++ b/semcore/card/src/style/card.shadow.css
@@ -24,14 +24,14 @@ SCard {
   }
 
   SHeader {
-    padding-top: var(--intergalactic-spacing-content-padding-xlarge, 20px);
-    padding-bottom: var(--intergalactic-spacing-content-padding-medium, 12px);
-    padding-left: var(--intergalactic-spacing-content-padding-xlarge, 20px);
-    padding-right: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding-top: var(--intergalactic-spacing-content-padding-xl, 20px);
+    padding-bottom: var(--intergalactic-spacing-content-padding-m, 12px);
+    padding-left: var(--intergalactic-spacing-content-padding-xl, 20px);
+    padding-right: var(--intergalactic-spacing-content-padding-xl, 20px);
   }
 
   SBody {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-    padding: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding: var(--intergalactic-spacing-content-padding-xl, 20px);
   }
 }
diff --git a/semcore/carousel/src/style/carousel.shadow.css b/semcore/carousel/src/style/carousel.shadow.css
index 230372536b..277523a9c9 100644
--- a/semcore/carousel/src/style/carousel.shadow.css
+++ b/semcore/carousel/src/style/carousel.shadow.css
@@ -76,14 +76,14 @@ SItem[zoomOut] {
 SIndicators {
   display: flex;
   justify-content: center;
-  margin: var(--intergalactic-spacing-content-gap-xxlarge, 16px) var(--intergalactic-spacing-content-gap-small, 4px) var(--intergalactic-spacing-content-gap-small, 4px) var(--intergalactic-spacing-content-gap-small, 4px);
+  margin: var(--intergalactic-spacing-content-gap-l, 16px) var(--intergalactic-spacing-content-gap-xs, 4px) var(--intergalactic-spacing-content-gap-xs, 4px) var(--intergalactic-spacing-content-gap-xs, 4px);
   outline: none;
   position: relative;
   border-radius: var(--intergalactic-rounded-extra-small, 2px);
 }
 
 SIndicator {
-  margin: 0 calc(0.5 * var(--intergalactic-spacing-content-gap-xlarge, 12px));
+  margin: 0 calc(0.5 * var(--intergalactic-spacing-content-gap-m, 12px));
   cursor: pointer;
   display: block;
   flex-shrink: 0;
@@ -142,17 +142,17 @@ SNext {
 
   SPrevButton span:has(> svg:only-child),
   SNextButton span:has(> svg:only-child) {
-    margin-left: calc(2 * var(--intergalactic-spacing-content-gap-small, 4px) - 1px);
-    margin-right: calc(2 * var(--intergalactic-spacing-content-gap-small, 4px) - 1px);
+    margin-left: calc(2 * var(--intergalactic-spacing-content-gap-xs, 4px) - 1px);
+    margin-right: calc(2 * var(--intergalactic-spacing-content-gap-xs, 4px) - 1px);
   }
 }
 
 SPrev {
-  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SNext {
-  margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-left: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SPrev[disabled],
diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css
index be89f82cb9..13de2d9e24 100644
--- a/semcore/checkbox/src/style/checkbox.shadow.css
+++ b/semcore/checkbox/src/style/checkbox.shadow.css
@@ -9,7 +9,7 @@ SLabel {
   }
 
   SText {
-    margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
+    margin-left: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
     &[disabled] {
@@ -18,7 +18,7 @@ SLabel {
   }
 
   SText[size='l'] {
-    margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
+    margin-left: var(--intergalactic-spacing-content-gap-s, 8px);
   }
 
   SText[color] {
diff --git a/semcore/color-picker/src/style/color-picker.shadow.css b/semcore/color-picker/src/style/color-picker.shadow.css
index f981d0e96e..23f15d2ae3 100644
--- a/semcore/color-picker/src/style/color-picker.shadow.css
+++ b/semcore/color-picker/src/style/color-picker.shadow.css
@@ -1,10 +1,10 @@
 SColorPickerPopper {
-  max-width: calc(var(--intergalactic-form-control-m, 32px) * 6 + var(--intergalactic-spacing-content-gap-xsmall, 2px) * 5 + var(--intergalactic-spacing-content-padding-large, 16px) * 2 + 2px);
-  padding: var(--intergalactic-spacing-content-padding-large, 16px);
+  max-width: calc(var(--intergalactic-form-control-m, 32px) * 6 + var(--intergalactic-spacing-content-gap-xxs, 2px) * 5 + var(--intergalactic-spacing-content-padding-l, 16px) * 2 + 2px);
+  padding: var(--intergalactic-spacing-content-padding-l, 16px);
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+  gap: var(--intergalactic-spacing-content-gap-m, 12px);
 }
 
 SItemContainer {
@@ -72,7 +72,7 @@ SColorsContainer, SColors {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+  gap: var(--intergalactic-spacing-content-gap-xxs, 2px);
 
   &:empty {
     display: none;
@@ -82,7 +82,7 @@ SColorsContainer, SColors {
 SPaletteManager {
   display: flex;
   align-items: center;
-  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
+  gap: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
 }
 
 SPlusButton {
@@ -108,7 +108,7 @@ SDefaultTrigger {
   align-items: center;
   outline-color: transparent;
   cursor: pointer;
-  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
+  gap: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   border: 0;
   background: transparent;
   padding: 0;
diff --git a/semcore/counter/src/style/counter.shadow.css b/semcore/counter/src/style/counter.shadow.css
index c3f45b544e..fddd935a6b 100644
--- a/semcore/counter/src/style/counter.shadow.css
+++ b/semcore/counter/src/style/counter.shadow.css
@@ -18,21 +18,21 @@ SCounter[size='s'] {
   height: 16px;
   min-width: 16px;
   font-size: var(--intergalactic-fs-50, 10px);
-  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  padding: var(--intergalactic-spacing-content-padding-xs, 4px);
 }
 
 SCounter[size='m'] {
   height: 20px;
   min-width: 20px;
   font-size: var(--intergalactic-fs-100, 12px);
-  padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px) var(--intergalactic-spacing-content-padding-xsmall-extended, 6px);
+  padding: var(--intergalactic-spacing-content-padding-xxs, 2px) var(--intergalactic-spacing-content-padding-xs-extended, 6px);
 }
 
 SCounter[size='l'] {
   height: 24px;
   min-width: 24px;
   font-size: var(--intergalactic-fs-200, 14px);
-  padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px) var(--intergalactic-spacing-content-padding-xsmall-extended, 6px);
+  padding: var(--intergalactic-spacing-content-padding-xxs, 2px) var(--intergalactic-spacing-content-padding-xs-extended, 6px);
 }
 
 SCounter[theme] {
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
index f62bebd282..f886cbf376 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
@@ -2,11 +2,11 @@ SLegendFlex[direction='row'] {
   align-items: flex-start;
   align-content: flex-start;
   flex-wrap: wrap;
-  gap: var(--intergalactic-spacing-content-gap-large, 8px) var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  gap: var(--intergalactic-spacing-content-gap-s, 8px) var(--intergalactic-spacing-content-gap-l, 16px);
 }
 
 SLegendFlex[direction='column'] {
   align-items: flex-start;
   flex-wrap: wrap;
-  gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  gap: var(--intergalactic-spacing-content-gap-s, 8px);
 }
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
index 8edfe8659a..1930ef7ba6 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
@@ -17,7 +17,7 @@ SLegendItem[transparent] {
 
 SPointShape[color] {
   background-color: var(--color);
-  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   flex-shrink: 0;
 }
 
@@ -25,32 +25,32 @@ SPointShape[shape='Circle'][size='l'] {
   width: 16px;
   height: 16px;
   border-radius: 8px;
-  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-top: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SPointShape[shape='Circle'][size='m'] {
   width: 12px;
   height: 12px;
   border-radius: 6px;
-  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-top: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SPointShape[shape='Pattern'] {
   background-color: transparent;
-  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SIcon {
   line-height: 0;
-  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SIcon[size='l'] {
-  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-top: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SIcon[size='m'] {
-  margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+  margin-top: var(--intergalactic-spacing-content-gap-xxs, 2px);
 }
 
 SLabel {
@@ -73,7 +73,7 @@ SCount[size='m'] {
 
 SAdditionalLabel,
 SCount {
-  margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-left: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SAdditionalLabel {
@@ -89,7 +89,7 @@ SAdditionalLabel::before {
   height: 4px;
   width: 4px;
   border-radius: 2px;
-  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SAdditionalLabel[size='l']::before {
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
index 821a7b6bb4..0a829b305b 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
@@ -4,8 +4,8 @@ SLegendTable[columns-count] {
   grid-template-columns: auto 0.2fr;
   align-items: center;
   height: fit-content;
-  grid-column-gap: var(--intergalactic-spacing-content-gap-large, 8px);
-  grid-row-gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  grid-column-gap: var(--intergalactic-spacing-content-gap-s, 8px);
+  grid-row-gap: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SColumnItem[size='l'] {
diff --git a/semcore/d3-chart/src/style/abstract-chart.shadow.css b/semcore/d3-chart/src/style/abstract-chart.shadow.css
index 924bb5aa08..e6c8724e81 100644
--- a/semcore/d3-chart/src/style/abstract-chart.shadow.css
+++ b/semcore/d3-chart/src/style/abstract-chart.shadow.css
@@ -7,7 +7,7 @@ SChart {
 
 STooltipChildrenWrapper {
   display: grid;
-  gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  gap: var(--intergalactic-spacing-content-gap-s, 8px);
   align-items: center;
 
   &[columnsCount='2'] {
@@ -28,7 +28,7 @@ STooltipChildrenWrapper {
 }
 
 STooltipDeltaWrapper {
-  gap: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+  gap: var(--intergalactic-spacing-content-gap-xxs, 2px);
   justify-content: flex-end;
 
   &[trend='upward'] {
diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css
index e53a9f7ea2..6b0e486899 100644
--- a/semcore/d3-chart/src/style/tooltip.shadow.css
+++ b/semcore/d3-chart/src/style/tooltip.shadow.css
@@ -11,12 +11,12 @@ STooltip {
   border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
   box-sizing: border-box;
   box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07));
-  padding: var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-m, 12px);
 }
 
 STitle {
   color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684));
-  margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-bottom: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SDotGroup {
@@ -25,7 +25,7 @@ SDotGroup {
 }
 
 SDot {
-  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SDotCircle[color][lightness] {
@@ -40,9 +40,9 @@ SDotCircle[color][lightness] {
 SFooter {
   background: var(--intergalactic-bg-secondary-invert, oklch(0.969 0.057 140 / 0.118));
   color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684));
-  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-xs, 4px) var(--intergalactic-spacing-content-padding-m, 12px);
   border-radius: 0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px);
-  margin: var(--intergalactic-spacing-content-gap-xlarge, 12px) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px));
+  margin: var(--intergalactic-spacing-content-gap-m, 12px) calc(-1 * var(--intergalactic-spacing-content-gap-m, 12px)) calc(-1 * var(--intergalactic-spacing-content-gap-m, 12px));
 }
 
 SDotPattern {
diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css
index 4f516e01a2..eae11ea273 100644
--- a/semcore/data-table/src/components/Body/style.shadow.css
+++ b/semcore/data-table/src/components/Body/style.shadow.css
@@ -15,31 +15,31 @@ SAccordionRows {
 
 SBody[compact] {
   SCell {
-    padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-small, 8px);
+    padding: var(--intergalactic-spacing-content-padding-m, 12px) var(--intergalactic-spacing-content-padding-s, 8px);
   }
 
   SCell[data-aria-level] {
-    padding-left: calc(var(--intergalactic-spacing-content-padding-small, 8px) + ((var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px)) * (var(--data-aria-level) - 1)));
+    padding-left: calc(var(--intergalactic-spacing-content-padding-s, 8px) + ((var(--intergalactic-spacing-content-padding-l, 16px) + var(--intergalactic-spacing-content-padding-xs, 4px) + var(--intergalactic-spacing-content-padding-xxs, 2px)) * (var(--data-aria-level) - 1)));
   }
 
   SRow {
     SCellWrapper:first-child SCell[data-aria-level] {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-small, 8px) + ((var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px)) * (var(--data-aria-level) - 1)));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-s, 8px) + ((var(--intergalactic-spacing-content-padding-l, 16px) + var(--intergalactic-spacing-content-padding-xs, 4px) + var(--intergalactic-spacing-content-padding-xxs, 2px)) * (var(--data-aria-level) - 1)));
     }
   }
   SRow[sideIndents='wide'] {
     SCellWrapper:first-child SCell[data-aria-level] {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + ((var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px)) * (var(--data-aria-level) - 1)));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xl, 20px) + ((var(--intergalactic-spacing-content-padding-l, 16px) + var(--intergalactic-spacing-content-padding-xs, 4px) + var(--intergalactic-spacing-content-padding-xxs, 2px)) * (var(--data-aria-level) - 1)));
     }
   }
   SCollapseRow[sideIndents='wide'] {
     SCellWrapper:first-child SCell[data-aria-level] {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + ((var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px)) * (var(--data-aria-level) - 1)));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xl, 20px) + ((var(--intergalactic-spacing-content-padding-l, 16px) + var(--intergalactic-spacing-content-padding-xs, 4px) + var(--intergalactic-spacing-content-padding-xxs, 2px)) * (var(--data-aria-level) - 1)));
     }
   }
 
   SCell SAccordionToggle {
-    margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
+    margin-right: var(--intergalactic-spacing-content-gap-s, 8px);
   }
 }
 
@@ -176,8 +176,8 @@ SCell {
   overflow: hidden;
 
   SAccordionToggle {
-    margin-right: var(--intergalactic-spacing-content-gap-xlarge, 12px);
-    margin-left: calc(var(--intergalactic-spacing-content-gap-xsmall, 2px) * -1);
+    margin-right: var(--intergalactic-spacing-content-gap-m, 12px);
+    margin-left: calc(var(--intergalactic-spacing-content-gap-xxs, 2px) * -1);
     height: fit-content;
 
     svg {
@@ -194,20 +194,20 @@ SCell {
   }
 
   &[use='primary'] {
-    padding: var(--intergalactic-spacing-content-padding-medium, 12px);
+    padding: var(--intergalactic-spacing-content-padding-m, 12px);
     min-height: 45px;
 
     &[data-aria-level] {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-medium, 12px) + ((var(--intergalactic-spacing-content-padding-xlarge, 20px) + var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px)) * (var(--data-aria-level) - 1)));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-m, 12px) + ((var(--intergalactic-spacing-content-padding-xl, 20px) + var(--intergalactic-spacing-content-padding-xs, 4px) + var(--intergalactic-spacing-content-padding-xxs, 2px)) * (var(--data-aria-level) - 1)));
     }
   }
 
   &[use='secondary'] {
-    padding: var(--intergalactic-spacing-content-padding-small, 8px);
+    padding: var(--intergalactic-spacing-content-padding-s, 8px);
     min-height: 37px;
 
     &[data-aria-level] {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-small, 8px) + ((var(--intergalactic-spacing-content-padding-xlarge, 20px) + var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px)) * (var(--data-aria-level) - 1)));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-s, 8px) + ((var(--intergalactic-spacing-content-padding-xl, 20px) + var(--intergalactic-spacing-content-padding-xs, 4px) + var(--intergalactic-spacing-content-padding-xxs, 2px)) * (var(--data-aria-level) - 1)));
     }
   }
 
@@ -326,15 +326,15 @@ SEmptyData {
 
 SRow[sideIndents='wide'], SCollapseRow[sideIndents='wide'] {
   SCellWrapper:first-child SCell[aria-colindex="1"] {
-    padding-left: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding-left: var(--intergalactic-spacing-content-padding-xl, 20px);
 
     &[data-aria-level] {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + ((var(--intergalactic-spacing-content-padding-xlarge, 20px) + var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px)) * (var(--data-aria-level) - 1)));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xl, 20px) + ((var(--intergalactic-spacing-content-padding-xl, 20px) + var(--intergalactic-spacing-content-padding-xs, 4px) + var(--intergalactic-spacing-content-padding-xxs, 2px)) * (var(--data-aria-level) - 1)));
     }
   }
 
   SCellWrapper:last-child SCell {
-    padding-right: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding-right: var(--intergalactic-spacing-content-padding-xl, 20px);
   }
 }
 
diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css
index 67d65bce10..8ff23f4be8 100644
--- a/semcore/data-table/src/components/Head/style.shadow.css
+++ b/semcore/data-table/src/components/Head/style.shadow.css
@@ -42,7 +42,7 @@ SHead[sticky] SColumn, SHead[sticky] SGroup {
 }
 
 SHead[compact] SColumn {
-  padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-small, 8px);
+  padding: var(--intergalactic-spacing-content-padding-m, 12px) var(--intergalactic-spacing-content-padding-s, 8px);
 }
 
 SGroup, SColumn {
@@ -70,14 +70,14 @@ SGroup {
 }
 
 SGroup[use='primary'] {
-  padding: var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-m, 12px);
 
   &:has(~ SColumn[visibleSort]) {
     background-color: var(--intergalactic-table-th-primary-cell-active, oklch(1 0 0));
   }
 }
 SGroup[use='secondary'] {
-  padding: var(--intergalactic-spacing-content-padding-small, 8px);
+  padding: var(--intergalactic-spacing-content-padding-s, 8px);
 }
 
 SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='left'], SColumn[borders='left'] {
@@ -89,7 +89,7 @@ SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='right'], SColum
 }
 
 SColumn[use='primary'] {
-  padding: var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-m, 12px);
   border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   background-color: var(--intergalactic-table-th-primary-cell, oklch(1 0 0));
 
@@ -111,7 +111,7 @@ SColumn[use='primary'] {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
     SSortWrapper {
-      flex-basis: calc(var(--intergalactic-spacing-content-padding-xsmall, 4px) + 16px);
+      flex-basis: calc(var(--intergalactic-spacing-content-padding-xs, 4px) + 16px);
       opacity: 1;
 
       &::before {
@@ -140,7 +140,7 @@ SColumn[use='primary'] {
 }
 
 SColumn[use='secondary'] {
-  padding: var(--intergalactic-spacing-content-padding-small, 8px);
+  padding: var(--intergalactic-spacing-content-padding-s, 8px);
   border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.137 0.026 175.7 / 0.161));
   background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0));
 
@@ -162,7 +162,7 @@ SColumn[use='secondary'] {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
     SSortWrapper {
-      flex-basis: calc(var(--intergalactic-spacing-content-padding-xsmall, 4px) + 16px);
+      flex-basis: calc(var(--intergalactic-spacing-content-padding-xs, 4px) + 16px);
       opacity: 1;
 
       &::before {
@@ -232,17 +232,17 @@ SSortButton, SSortIndicator {
   fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   position: absolute;
   right: 0;
-  margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-left: var(--intergalactic-spacing-content-gap-xs, 4px);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
 SHead[sideIndents='wide'] {
   SColumn:first-child {
-    padding-left: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding-left: var(--intergalactic-spacing-content-padding-xl, 20px);
   }
   SColumn:last-child {
-    padding-right: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding-right: var(--intergalactic-spacing-content-padding-xl, 20px);
   }
 }
 
@@ -279,10 +279,10 @@ SGroup[fixed='left'][shadowVertical='start'] {
   border-right-color: transparent;
 
   &[use='primary'] {
-    padding-right: calc(var(--intergalactic-spacing-content-padding-medium, 12px) + 5px);
+    padding-right: calc(var(--intergalactic-spacing-content-padding-m, 12px) + 5px);
   }
   &[use='secondary'] {
-    padding-right: calc(var(--intergalactic-spacing-content-padding-small, 8px) + 5px);
+    padding-right: calc(var(--intergalactic-spacing-content-padding-s, 8px) + 5px);
   }
 
   &:after {
@@ -300,10 +300,10 @@ SGroup[fixed='right'][shadowVertical='end'] {
   border-left-color: transparent;
 
   &[use='primary'] {
-    padding-left: calc(var(--intergalactic-spacing-content-padding-medium, 12px) + 5px);
+    padding-left: calc(var(--intergalactic-spacing-content-padding-m, 12px) + 5px);
   }
   &[use='secondary'] {
-    padding-left: calc(var(--intergalactic-spacing-content-padding-small, 8px) + 5px);
+    padding-left: calc(var(--intergalactic-spacing-content-padding-s, 8px) + 5px);
   }
 
   &:after {
diff --git a/semcore/date-picker/src/style/calendar.shadow.css b/semcore/date-picker/src/style/calendar.shadow.css
index be5a8f9c30..1472052229 100644
--- a/semcore/date-picker/src/style/calendar.shadow.css
+++ b/semcore/date-picker/src/style/calendar.shadow.css
@@ -2,7 +2,7 @@ SCalendar {
   display: flex;
   flex-direction: column;
   border-radius: var(--intergalactic-rounded-small, 4px);
-  gap: var(--intergalactic-spacing-content-gap-small, 4px);
+  gap: var(--intergalactic-spacing-content-gap-xs, 4px);
 
   SCalendarUnit:focus-visible {
     outline: none;
@@ -13,12 +13,12 @@ SGridDays {
   display: grid;
   grid-template-columns: repeat(7, minmax(32px, auto));
   grid-template-rows: repeat(auto-fit, minmax(32px, auto));
-  grid-row-gap: var(--intergalactic-spacing-content-gap-small, 4px);
+  grid-row-gap: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SGridMonths {
   display: grid;
-  grid-row-gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  grid-row-gap: var(--intergalactic-spacing-content-gap-s, 8px);
   grid-template-columns: repeat(3, minmax(60px, auto));
   grid-template-rows: repeat(4, minmax(32px, auto));
 }
diff --git a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css
index 1bb3ecfc0e..1da79b2fce 100644
--- a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css
+++ b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css
@@ -1,6 +1,6 @@
 SDropdownMenuList {
   max-height: 246px;
-  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) 0;
+  padding: var(--intergalactic-spacing-content-padding-xs, 4px) 0;
   position: relative;
   min-height: 26px;
   min-width: 32px;
@@ -47,12 +47,12 @@ SDropdownMenuItemAddon,
 SItemContentText {
   display: inline-flex; /* todo: Brauer Ilia - why? should be changed to inline/inline-block for SItemContentText */
 
-  margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
-  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-left: var(--intergalactic-spacing-content-gap-xs, 4px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs, 4px);
 
   &:first-child {
     margin-left: 0;
-    margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
+    margin-right: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   }
 
   &:last-child {
diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css
index 08fde0121b..4e4568905b 100644
--- a/semcore/dropdown/src/style/dropdown.shadow.css
+++ b/semcore/dropdown/src/style/dropdown.shadow.css
@@ -99,19 +99,19 @@ SDropdownPopper {
   SDropdownItem[size='l'] {
     font-size: var(--intergalactic-fs-300, 16px);
     line-height: var(--intergalactic-lh-300, 1.5);
-    padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
+    padding: var(--intergalactic-spacing-content-padding-s, 8px) var(--intergalactic-spacing-content-padding-m, 12px);
     min-height: 40px;
 
     &[isMenuItemCheckbox] {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-medium, 12px) + var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-content-gap-large, 8px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-m, 12px) + var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-content-gap-s, 8px));
       /* padding before + checkbox + padding after */
 
       &::before,
       &::after {
         width: 20px;
         height: 20px;
-        top: calc(var(--intergalactic-spacing-content-padding-small, 8px) + var(--intergalactic-spacing-05x, 2px));
-        left: var(--intergalactic-spacing-content-padding-medium, 12px);
+        top: calc(var(--intergalactic-spacing-content-padding-s, 8px) + var(--intergalactic-spacing-05x, 2px));
+        left: var(--intergalactic-spacing-content-padding-m, 12px);
       }
     }
   }
@@ -119,19 +119,19 @@ SDropdownPopper {
   SDropdownItem[size='m'] {
     font-size: var(--intergalactic-fs-200, 14px);
     line-height: var(--intergalactic-lh-200, 1.4286);
-    padding: calc(var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-content-padding-medium, 12px);
+    padding: calc(var(--intergalactic-spacing-content-padding-xs, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-content-padding-m, 12px);
     min-height: 32px;
 
     &[isMenuItemCheckbox] {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-medium, 12px) + var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-content-gap-medium, 6px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-m, 12px) + var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-content-gap-xs-extended, 6px));
       /* padding before + checkbox + padding after */
 
       &::before,
       &::after {
         width: 16px;
         height: 16px;
-        top: var(--intergalactic-spacing-content-padding-small, 8px);
-        left: var(--intergalactic-spacing-content-padding-medium, 12px);
+        top: var(--intergalactic-spacing-content-padding-s, 8px);
+        left: var(--intergalactic-spacing-content-padding-m, 12px);
       }
     }
   }
diff --git a/semcore/dropdown/src/style/dropdownNotice.shadow.css b/semcore/dropdown/src/style/dropdownNotice.shadow.css
index 5e7b676858..780794a3b2 100644
--- a/semcore/dropdown/src/style/dropdownNotice.shadow.css
+++ b/semcore/dropdown/src/style/dropdownNotice.shadow.css
@@ -1,6 +1,6 @@
 SDropdownNotice {
-  padding-top: var(--intergalactic-spacing-content-padding-medium, 12px);
-  padding-bottom: var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding-top: var(--intergalactic-spacing-content-padding-m, 12px);
+  padding-bottom: var(--intergalactic-spacing-content-padding-m, 12px);
   border-left: none;
   border-right: none;
   border-bottom: none;
diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css
index dec6a4200f..c0c20f8464 100644
--- a/semcore/feature-popover/src/style/feature-popover.shadow.css
+++ b/semcore/feature-popover/src/style/feature-popover.shadow.css
@@ -1,8 +1,8 @@
 SFeaturePopover {
-  padding-top: var(--intergalactic-spacing-content-padding-large, 16px);
-  padding-right: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
-  padding-bottom: var(--intergalactic-spacing-content-padding-large, 16px);
-  padding-left: var(--intergalactic-spacing-content-padding-large, 16px);
+  padding-top: var(--intergalactic-spacing-content-padding-l, 16px);
+  padding-right: var(--intergalactic-spacing-content-padding-xxxl, 40px);
+  padding-bottom: var(--intergalactic-spacing-content-padding-l, 16px);
+  padding-left: var(--intergalactic-spacing-content-padding-l, 16px);
   border-radius: var(--intergalactic-popper-rounded, 6px);
   box-sizing: border-box;
   box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07));
diff --git a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css
index 1c04137af1..005c0b1241 100644
--- a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css
+++ b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css
@@ -17,16 +17,16 @@ SFullscreenOverlay {
 
   SClose {
     position: absolute;
-    top: var(--intergalactic-spacing-content-padding-large, 16px);
-    right: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    top: var(--intergalactic-spacing-content-padding-l, 16px);
+    right: var(--intergalactic-spacing-content-padding-xxxl, 40px);
   }
 
   SBack {
     cursor: pointer;
     position: absolute;
     z-index: 1;
-    top: var(--intergalactic-spacing-content-padding-small, 8px);
-    left: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    top: var(--intergalactic-spacing-content-padding-s, 8px);
+    left: var(--intergalactic-spacing-content-padding-xxxl, 40px);
   }
 
   STitle,
@@ -44,23 +44,23 @@ SFullscreenOverlay {
   SHeader {
     display: flex;
     flex-direction: column;
-    gap: var(--intergalactic-spacing-content-gap-large, 8px);
+    gap: var(--intergalactic-spacing-content-gap-s, 8px);
     align-items: flex-start;
 
-    padding-left: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
-    padding-bottom: var(--intergalactic-spacing-content-padding-large, 16px);
+    padding-left: var(--intergalactic-spacing-content-padding-xxxl, 40px);
+    padding-bottom: var(--intergalactic-spacing-content-padding-l, 16px);
     padding-right: 72px;
-    padding-top: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    padding-top: var(--intergalactic-spacing-content-padding-xxxl, 40px);
     border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 
   SFooter {
     min-height: 52px;
     border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-    padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    padding: var(--intergalactic-spacing-content-padding-m, 12px) var(--intergalactic-spacing-content-padding-xxxl, 40px);
     justify-content: center;
     align-items: center;
-    gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+    gap: var(--intergalactic-spacing-content-gap-m, 12px);
   }
 
   SBody {
@@ -70,10 +70,10 @@ SFullscreenOverlay {
   }
 
   SSection {
-    padding-top: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
-    padding-bottom: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
-    padding-left: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
-    padding-right: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    padding-top: var(--intergalactic-spacing-content-padding-xxl, 24px);
+    padding-bottom: var(--intergalactic-spacing-content-padding-xxl, 24px);
+    padding-left: var(--intergalactic-spacing-content-padding-xxxl, 40px);
+    padding-right: var(--intergalactic-spacing-content-padding-xxxl, 40px);
     flex: 1 1 auto;
   }
 
diff --git a/semcore/inline-input/src/style/inline-input.shadow.css b/semcore/inline-input/src/style/inline-input.shadow.css
index 9b0ad6ac4d..ec22297fd8 100644
--- a/semcore/inline-input/src/style/inline-input.shadow.css
+++ b/semcore/inline-input/src/style/inline-input.shadow.css
@@ -110,7 +110,7 @@ SAddon {
   flex: 0 0 auto;
   height: 100%;
   color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262));
-  padding: 0 var(--intergalactic-spacing-content-gap-small, 4px);
+  padding: 0 var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SAddon[disabled] {
diff --git a/semcore/input-tags/src/style/input-tag.shadow.css b/semcore/input-tags/src/style/input-tag.shadow.css
index 4ce8540053..bd9b5e9149 100644
--- a/semcore/input-tags/src/style/input-tag.shadow.css
+++ b/semcore/input-tags/src/style/input-tag.shadow.css
@@ -39,13 +39,13 @@ SInputTags>div[data-ui-name='ScrollArea.Bar'][orientation='vertical'] {
 SInputTags[size='m'] {
   min-height: var(--intergalactic-form-control-m, 32px);
   height: auto;
-  padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px) var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-xxs, 2px) var(--intergalactic-spacing-content-padding-m, 12px);
 }
 
 SInputTags[size='l'] {
   min-height: var(--intergalactic-form-control-l, 44px);
   height: auto;
-  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-xs, 4px) var(--intergalactic-spacing-content-padding-m, 12px);
 }
 
 SInputTags STag:focus-visible, SInputTags STagContainerClose:focus-visible {
diff --git a/semcore/input/src/style/input.shadow.css b/semcore/input/src/style/input.shadow.css
index a80528b7ff..4f3c0b3c04 100644
--- a/semcore/input/src/style/input.shadow.css
+++ b/semcore/input/src/style/input.shadow.css
@@ -83,7 +83,7 @@ SAddon {
   justify-content: center;
   align-items: center;
   flex: 0 0 auto;
-  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: 0 var(--intergalactic-spacing-content-padding-m, 12px);
   height: 100%;
   color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262));
 }
@@ -104,12 +104,12 @@ SAddon[disabled] {
 
 SAddon[size='m'][neighborLocation='right']:not(SButton),
 SAddon[size='l'][neighborLocation='right']:not(SButton) {
-  padding: 0 var(--intergalactic-spacing-content-gap-medium, 6px) 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: 0 var(--intergalactic-spacing-content-gap-xs-extended, 6px) 0 var(--intergalactic-spacing-content-padding-m, 12px);
 }
 
 SAddon[size='m'][neighborLocation='left']:not(SButton),
 SAddon[size='l'][neighborLocation='left']:not(SButton) {
-  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px) 0 var(--intergalactic-spacing-content-gap-medium, 6px);
+  padding: 0 var(--intergalactic-spacing-content-padding-m, 12px) 0 var(--intergalactic-spacing-content-gap-xs-extended, 6px);
 }
 
 SInput SAddon:nth-last-child(2) {
@@ -117,11 +117,11 @@ SInput SAddon:nth-last-child(2) {
 }
 
 SValue[size='m'] {
-  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: 0 var(--intergalactic-spacing-content-padding-m, 12px);
 }
 
 SValue[size='l'] {
-  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: 0 var(--intergalactic-spacing-content-padding-m, 12px);
 }
 
 SInput[size='m'] {
diff --git a/semcore/link/src/style/link.shadow.css b/semcore/link/src/style/link.shadow.css
index 24b3669296..c3948364d6 100644
--- a/semcore/link/src/style/link.shadow.css
+++ b/semcore/link/src/style/link.shadow.css
@@ -114,11 +114,11 @@ SAddon {
 
 SLink SAddon {
   &:not(:only-child):first-child {
-    margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
+    margin-right: var(--intergalactic-spacing-content-gap-xs, 4px);
   }
 
   &:not(:only-child):last-child {
-    margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
+    margin-left: var(--intergalactic-spacing-content-gap-xs, 4px);
   }
 }
 
diff --git a/semcore/modal/src/style/modal.shadow.css b/semcore/modal/src/style/modal.shadow.css
index 229be86af6..f2a0d19e7b 100644
--- a/semcore/modal/src/style/modal.shadow.css
+++ b/semcore/modal/src/style/modal.shadow.css
@@ -4,7 +4,7 @@ SWindow {
   background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
   box-sizing: border-box;
   margin: auto;
-  padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+  padding: var(--intergalactic-spacing-content-padding-xxxl, 40px);
   box-shadow: var(--intergalactic-box-shadow-modal, 0px 1px 5px 0px oklch(0.176 0.033 175.7 / 0.07));
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
@@ -28,8 +28,8 @@ SWindow {
   SClose {
     display: inline-flex;
     position: absolute;
-    right: var(--intergalactic-spacing-content-padding-small, 8px);
-    top: var(--intergalactic-spacing-content-padding-small, 8px);
+    right: var(--intergalactic-spacing-content-padding-s, 8px);
+    top: var(--intergalactic-spacing-content-padding-s, 8px);
     width: var(--intergalactic-form-control-l, 44px);
   }
   SClose[ghost] {
@@ -48,7 +48,7 @@ SOverlayContentWrapper {
   flex: 1;
   max-width: 100%;
   box-sizing: border-box;
-  padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+  padding: var(--intergalactic-spacing-content-padding-xxxl, 40px);
 }
 
 SOverlay {
@@ -77,6 +77,6 @@ SOverlay {
   }
 
   SOverlayContentWrapper {
-    padding: var(--intergalactic-spacing-content-padding-medium, 12px);
+    padding: var(--intergalactic-spacing-content-padding-m, 12px);
   }
 }
diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css
index 4694b72dac..99d253fb08 100644
--- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css
+++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css
@@ -1,15 +1,15 @@
 SBubble,
 SView {
   position: relative;
-  margin-bottom: var(--intergalactic-spacing-content-gap-xlarge, 12px);
-  padding: var(--intergalactic-spacing-content-padding-large, 16px);
-  padding-right: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+  margin-bottom: var(--intergalactic-spacing-content-gap-m, 12px);
+  padding: var(--intergalactic-spacing-content-padding-l, 16px);
+  padding-right: var(--intergalactic-spacing-content-padding-xxxl, 40px);
   width: 100%;
   border-radius: var(--intergalactic-popper-rounded, 6px);
   overflow: hidden;
   box-sizing: border-box;
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-  gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  gap: var(--intergalactic-spacing-content-gap-s, 8px);
 
   &[type='info'] {
     background: var(--intergalactic-notice-bubble-bg-info, oklch(0.23 0.01 140));
@@ -22,7 +22,7 @@ SView {
 
 SContent {
   flex-direction: column;
-  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+  gap: var(--intergalactic-spacing-content-gap-m, 12px);
   flex: 1;
 }
 
@@ -50,7 +50,7 @@ SDismiss[use] {
 SIcon {
   justify-content: center;
   align-items: flex-start;
-  margin-top: var(--intergalactic-spacing-content-padding-xxsmall, 2px);
+  margin-top: var(--intergalactic-spacing-content-padding-xxs, 2px);
 }
 
 SNoticeBubble {
diff --git a/semcore/notice/src/style/notice.shadow.css b/semcore/notice/src/style/notice.shadow.css
index f7b66143ff..d84e92a82d 100644
--- a/semcore/notice/src/style/notice.shadow.css
+++ b/semcore/notice/src/style/notice.shadow.css
@@ -1,6 +1,6 @@
 SNotice {
   display: flex;
-  padding: var(--intergalactic-spacing-content-padding-large, 16px);
+  padding: var(--intergalactic-spacing-content-padding-l, 16px);
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 1.4286);
   box-sizing: border-box;
@@ -8,7 +8,7 @@ SNotice {
   border-width: 1px;
   border-radius: var(--intergalactic-surface-rounded, 8px);
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-  gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  gap: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SNotice[theme='info'] {
@@ -85,29 +85,29 @@ SActions {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: var(--intergalactic-spacing-content-gap-large, 8px);
-  margin-top: var(--intergalactic-spacing-content-padding-medium, 12px);
+  gap: var(--intergalactic-spacing-content-gap-s, 8px);
+  margin-top: var(--intergalactic-spacing-content-padding-m, 12px);
 }
 
 SLabel {
   height: fit-content;
   display: inline-flex;
   align-items: center;
-  margin-top: var(--intergalactic-spacing-content-padding-small, 8px);
+  margin-top: var(--intergalactic-spacing-content-padding-s, 8px);
 }
 
 SIcon {
   height: fit-content;
   display: inline-flex;
   align-items: center;
-  margin-top: var(--intergalactic-spacing-content-padding-small, 8px);
+  margin-top: var(--intergalactic-spacing-content-padding-s, 8px);
 }
 
 SIllustration {
   height: fit-content;
   display: inline-flex;
   align-items: center;
-  margin-right: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+  margin-right: var(--intergalactic-spacing-content-padding-xl, 20px);
 }
 
 SLabel[theme='info'], SIcon[theme='info'] {
@@ -132,14 +132,14 @@ SLabel[theme='muted'], SIcon[theme='muted'] {
 
 SCloseIcon {
   flex-shrink: 0;
-  margin-left: var(--intergalactic-spacing-content-padding-large, 16px);
+  margin-left: var(--intergalactic-spacing-content-padding-l, 16px);
 }
 
 STitle {
-  margin-top: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  margin-top: var(--intergalactic-spacing-content-padding-xs, 4px);
 }
 
 SText {
-  margin-top: var(--intergalactic-spacing-content-padding-xsmall-extended, 6px);
-  margin-bottom: var(--intergalactic-spacing-content-padding-xsmall-extended, 6px);
+  margin-top: var(--intergalactic-spacing-content-padding-xs-extended, 6px);
+  margin-bottom: var(--intergalactic-spacing-content-padding-xs-extended, 6px);
 }
diff --git a/semcore/pagination/src/style/pagination.shadow.css b/semcore/pagination/src/style/pagination.shadow.css
index c487f39407..d1f644b0d7 100644
--- a/semcore/pagination/src/style/pagination.shadow.css
+++ b/semcore/pagination/src/style/pagination.shadow.css
@@ -4,20 +4,20 @@ SPagination {
 }
 
 SPagination[withGap] {
-  gap: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  gap: var(--intergalactic-spacing-content-gap-l, 16px);
 
   &[size='l'] {
-    gap: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+    gap: var(--intergalactic-spacing-content-gap-xl, 20px);
   }
 }
 
 SNextPage,
 SPrevPage {
   align-self: center;
-  margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-left: var(--intergalactic-spacing-content-gap-s, 8px);
 
   &[size='l'] {
-    margin-left: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+    margin-left: var(--intergalactic-spacing-content-gap-m, 12px);
   }
 }
 
@@ -26,10 +26,10 @@ SLabel {
 }
 
 SLabel:not(:first-child) {
-  margin-left: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  margin-left: var(--intergalactic-spacing-content-gap-l, 16px);
 
   &[size='300'] {
-    margin-left: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+    margin-left: var(--intergalactic-spacing-content-gap-xl, 20px);
   }
 }
 
@@ -38,8 +38,8 @@ STotalPages {
 }
 
 STotalPagesLabel {
-  margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
-  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-left: var(--intergalactic-spacing-content-gap-s, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs, 4px);
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 }
 
@@ -56,11 +56,11 @@ STotalLastPages {
 
 SPageInput {
   max-width: 68px;
-  margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-left: var(--intergalactic-spacing-content-gap-xs, 4px);
 }
 
 SPageInput[size='l'] {
-  margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-left: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SPageInput:focus-within SPageInputAddon {
diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css
index e2ae3e7e80..cd6965e022 100644
--- a/semcore/pills/src/style/pills.shadow.css
+++ b/semcore/pills/src/style/pills.shadow.css
@@ -1,7 +1,7 @@
 SPills {
   position: relative;
   display: inline-flex;
-  padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px);
+  padding: var(--intergalactic-spacing-content-padding-xxs, 2px);
   min-height: var(--intergalactic-form-control-m, 32px);
   border-radius: var(--intergalactic-pills-rounded, 6px);
   background: var(--intergalactic-control-pills-bg-normal, oklch(0.166 0.031 175.8 / 0.097));
@@ -50,8 +50,8 @@ SPill {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
-  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  gap: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
+  padding: 0 var(--intergalactic-spacing-content-padding-m, 12px);
   
   border-style: solid;
   border-color: transparent;
@@ -86,12 +86,12 @@ SPill {
   }
 
   &[size='m'] {
-    min-width: calc(var(--intergalactic-form-control-m, 32px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));
+    min-width: calc(var(--intergalactic-form-control-m, 32px) - var(--intergalactic-spacing-content-padding-xs, 4px));
     border-width: 2px 3px;
   }
 
   &[size='l'] {
-    min-width: calc(var(--intergalactic-form-control-l, 44px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));
+    min-width: calc(var(--intergalactic-form-control-l, 44px) - var(--intergalactic-spacing-content-padding-xs, 4px));
     border-width: 3px 3px;
   }
 }
@@ -116,11 +116,11 @@ SPillSeparator {
   align-self: center;
 
   width: 1px;
-  height: calc(100% - var(--intergalactic-spacing-content-padding-xsmall-extended, 6px) * 2);
+  height: calc(100% - var(--intergalactic-spacing-content-padding-xs-extended, 6px) * 2);
   background-color: var(--intergalactic-control-pills-border, oklch(0.137 0.026 175.7 / 0.161));
   
   &[size='l'] {
-    height: calc(100% - var(--intergalactic-spacing-content-padding-small, 8px) * 2);
+    height: calc(100% - var(--intergalactic-spacing-content-padding-s, 8px) * 2);
   }
 }
 
diff --git a/semcore/radio-cards/src/styles/radio-cards.shadow.css b/semcore/radio-cards/src/styles/radio-cards.shadow.css
index b0470a0322..fdf1c33041 100644
--- a/semcore/radio-cards/src/styles/radio-cards.shadow.css
+++ b/semcore/radio-cards/src/styles/radio-cards.shadow.css
@@ -1,13 +1,13 @@
 SRadioCards {
-  gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  gap: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SRadioItem {
   position: relative;
   flex-direction: column;
   flex: 1 0 0;
-  gap: var(--intergalactic-spacing-content-gap-small, 4px);
-  padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-xlarge, 20px);
+  gap: var(--intergalactic-spacing-content-gap-xs, 4px);
+  padding: var(--intergalactic-spacing-content-padding-m, 12px) var(--intergalactic-spacing-content-padding-xl, 20px);
   align-items: flex-start;
 
   border-radius: var(--intergalactic-pills-rounded, 6px);
@@ -43,7 +43,7 @@ SRadioItemControl {
 }
 
 SRadioItemHeader {
-  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
+  gap: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
 }
 
 SRadioItemDescription {
@@ -60,13 +60,13 @@ SRadioItemHeaderRightAddon {
 }
 
 SRadioItemHeaderText {
-  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
 }
 
 SRadioItemSkeleton {
   display: inline-block;
   vertical-align: middle;
-  padding-top: var(--intergalactic-spacing-content-padding-xxsmall, 2px);
+  padding-top: var(--intergalactic-spacing-content-padding-xxs, 2px);
 }
 
 SRadioItemHeaderInnerContainer {
diff --git a/semcore/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css
index d2fa5fe989..34015acb66 100644
--- a/semcore/radio/src/style/radio.shadow.css
+++ b/semcore/radio/src/style/radio.shadow.css
@@ -4,13 +4,13 @@ SRadio {
   cursor: pointer;
 
   SText {
-    margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
+    margin-left: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
   &[size='l'] {
     SText {
-      margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
+      margin-left: var(--intergalactic-spacing-content-gap-s, 8px);
     }
   }
 
diff --git a/semcore/select/src/style/input-search.shadow.css b/semcore/select/src/style/input-search.shadow.css
index b232edcb91..dd50c091d9 100644
--- a/semcore/select/src/style/input-search.shadow.css
+++ b/semcore/select/src/style/input-search.shadow.css
@@ -1,7 +1,7 @@
 SSearchClear {
   padding: 0 var(--intergalactic-spacing-05x, 2px);
   margin-left: var(--intergalactic-spacing-05x, 2px);
-  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
 }
 
 SSearchClear[hide] {
diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css
index 60ba9b7dfb..54b3091f0a 100644
--- a/semcore/select/src/style/select.shadow.css
+++ b/semcore/select/src/style/select.shadow.css
@@ -1,6 +1,6 @@
 SOptionCheckbox {
   margin-top: var(--intergalactic-spacing-05x, 2px);
-  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
+  margin-right: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   margin-bottom: auto;
   position: relative;
   flex-shrink: 0;
@@ -40,7 +40,7 @@ SOptionCheckbox[selected]::after {
 SOptionCheckbox[size='l'] {
   width: 20px;
   height: 20px;
-  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SOptionCheckbox[size='l'][selected]::after {
diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css
index 72365331d1..dbb8ddc880 100644
--- a/semcore/side-panel/src/style/side-panel.shadow.css
+++ b/semcore/side-panel/src/style/side-panel.shadow.css
@@ -69,10 +69,10 @@ SBack {
 }
 
 SHeader {
-  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
-  padding-bottom: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  padding-left: var(--intergalactic-spacing-content-padding-xxl, 24px);
+  padding-bottom: var(--intergalactic-spacing-content-padding-xs, 4px);
   padding-right: var(--intergalactic-spacing-14x, 56px);
-  padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  padding-top: var(--intergalactic-spacing-content-padding-xs, 4px);
   min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));
   border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   box-sizing: border-box;
@@ -83,18 +83,18 @@ SHeader {
 
 SFooter {
   min-height: 44px;
-  padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding: var(--intergalactic-spacing-content-padding-s, 8px) var(--intergalactic-spacing-content-padding-xxl, 24px);
   justify-content: center;
   align-items: center;
-  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+  gap: var(--intergalactic-spacing-content-gap-m, 12px);
   border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 SBody {
   height: 100%;
   overflow: auto;
-  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
-  padding-bottom:var(--intergalactic-spacing-content-padding-large, 16px);
-  padding-right: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
-  padding-top: var(--intergalactic-spacing-content-padding-large, 16px);
+  padding-left: var(--intergalactic-spacing-content-padding-xxl, 24px);
+  padding-bottom:var(--intergalactic-spacing-content-padding-l, 16px);
+  padding-right: var(--intergalactic-spacing-content-padding-xxl, 24px);
+  padding-top: var(--intergalactic-spacing-content-padding-l, 16px);
 }
diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css
index cc6913e642..e9c73536c5 100644
--- a/semcore/tab-line/src/style/tab-line.shadow.css
+++ b/semcore/tab-line/src/style/tab-line.shadow.css
@@ -5,10 +5,10 @@ STabLine {
   max-width: 100%;
 
   &[size='m'] {
-    gap: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+    gap: var(--intergalactic-spacing-content-gap-l, 16px);
   }
   &[size='l'] {
-    gap: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+    gap: var(--intergalactic-spacing-content-gap-xl, 20px);
   }
 }
 
@@ -38,7 +38,7 @@ STabLineItem {
   border: none;
   background: transparent;
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
+  gap: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   font-weight: var(--intergalactic-medium, 500);
 
   &::-moz-focus-inner {
diff --git a/semcore/tab-panel/src/style/tab-panel.shadow.css b/semcore/tab-panel/src/style/tab-panel.shadow.css
index 9b3af9b641..98ad0b1cdc 100644
--- a/semcore/tab-panel/src/style/tab-panel.shadow.css
+++ b/semcore/tab-panel/src/style/tab-panel.shadow.css
@@ -17,7 +17,7 @@ STabPanelItem {
   position: relative;
   bottom: -1px;
   display: inline-flex;
-  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
+  gap: var(--intergalactic-spacing-content-gap-xs-extended, 6px);
   min-width: 0;
   height: var(--intergalactic-form-control-m, 32px);
   color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
@@ -30,7 +30,7 @@ STabPanelItem {
   touch-action: manipulation;
   user-select: none;
   box-sizing: border-box;
-  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: 0 var(--intergalactic-spacing-content-padding-m, 12px);
   padding-bottom: 1px;
   margin: 0;
   box-shadow: none;
diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css
index e4e70b49eb..1a19f64279 100644
--- a/semcore/tag/src/style/tag.shadow.css
+++ b/semcore/tag/src/style/tag.shadow.css
@@ -49,8 +49,8 @@ STagContainerClose {
   box-sizing: border-box;
   background-color: var(--intergalactic-tag-primary-bg-normal, oklch(1 0 0));
   border-radius: var(--intergalactic-tag-rounded, 24px);
-  padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
-  padding-right: var(--intergalactic-spacing-content-gap-small, 4px);
+  padding-left: var(--intergalactic-spacing-content-gap-xs, 4px);
+  padding-right: var(--intergalactic-spacing-content-gap-xs, 4px);
   font-family: inherit;
   font-weight: var(--intergalactic-medium, 500);
   color: var(--tag-color);
@@ -135,7 +135,7 @@ STag[size="xl"],
 STagContainerClose[size="xl"] {
   height: 40px;
   min-width: 40px;
-  padding: 0 var(--intergalactic-spacing-content-gap-large, 8px);
+  padding: 0 var(--intergalactic-spacing-content-gap-s, 8px);
 
   & SText {
     font-size: var(--intergalactic-fs-300, 16px);
@@ -255,8 +255,8 @@ STagContainerClose[theme="additional-invert"] {
 
 SText {
   display: flex;
-  padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
-  padding-right: var(--intergalactic-spacing-content-gap-small, 4px);
+  padding-left: var(--intergalactic-spacing-content-gap-xs, 4px);
+  padding-right: var(--intergalactic-spacing-content-gap-xs, 4px);
   position: relative;
 }
 
@@ -367,7 +367,7 @@ STagContainer {
 
     svg {
       padding-left: 0;
-      padding-right: var(--intergalactic-spacing-content-gap-small, 4px);
+      padding-right: var(--intergalactic-spacing-content-gap-xs, 4px);
     }
 
     svg path {
@@ -381,8 +381,8 @@ STagContainer {
 
   STagContainerClose[size="xl"] {
     svg {
-      padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
-      padding-right: var(--intergalactic-spacing-content-gap-large, 8px);
+      padding-left: var(--intergalactic-spacing-content-gap-xs, 4px);
+      padding-right: var(--intergalactic-spacing-content-gap-s, 8px);
     }
   }
 }
diff --git a/semcore/textarea/src/style/textarea.shadow.css b/semcore/textarea/src/style/textarea.shadow.css
index 5c54212207..9252a243eb 100644
--- a/semcore/textarea/src/style/textarea.shadow.css
+++ b/semcore/textarea/src/style/textarea.shadow.css
@@ -24,14 +24,14 @@ STextarea {
 
 STextarea[size='m'] {
   min-height: var(--intergalactic-form-control-m, 32px);
-  padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-content-padding-m, 12px);
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 1.4286);
 }
 
 STextarea[size='l'] {
   min-height: var(--intergalactic-form-control-l, 44px);
-  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-content-padding-m, 12px);
   font-size: var(--intergalactic-fs-300, 16px);
   line-height: var(--intergalactic-lh-300, 1.5);
 }
diff --git a/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css b/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css
index ba9e755366..7a03e7d709 100644
--- a/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css
+++ b/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css
@@ -3,13 +3,13 @@ SPickerInputWrapper {
 
   SPickerInput[size='m'] {
     width: 19px;
-    margin: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin: 0 var(--intergalactic-spacing-content-padding-m, 12px);
     padding: 0;
   }
 
   SPickerInput[size='l'] {
     width: 21px;
-    margin: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+    margin: 0 var(--intergalactic-spacing-content-padding-m, 12px);
     padding: 0;
   }
 }
diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css
index d10aaf151d..c9fd5f4686 100644
--- a/semcore/tooltip/src/style/tooltip.shadow.css
+++ b/semcore/tooltip/src/style/tooltip.shadow.css
@@ -1,6 +1,6 @@
 STooltip {
   position: relative;
-  padding: var(--intergalactic-spacing-content-padding-medium, 12px);
+  padding: var(--intergalactic-spacing-content-padding-m, 12px);
   border-radius: var(--intergalactic-popper-rounded, 6px);
   box-sizing: border-box;
   color: var(--intergalactic-tooltip-text, oklch(0.1 0.03 137 / 0.899));
diff --git a/semcore/typography/src/style/blockquote.shadow.css b/semcore/typography/src/style/blockquote.shadow.css
index 05e54160d5..b3420904c1 100644
--- a/semcore/typography/src/style/blockquote.shadow.css
+++ b/semcore/typography/src/style/blockquote.shadow.css
@@ -9,7 +9,7 @@ SBlockquote {
 
 SDoubleQuotation {
   position: relative;
-  margin-right: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+  margin-right: var(--intergalactic-spacing-content-gap-xl, 20px);
   font-family: 'Times New Roman', serif;
   font-style: normal;
   /* disable-tokens-validator */
@@ -20,7 +20,7 @@ SDoubleQuotation {
 
 SAuthor {
   display: block;
-  margin-top: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  margin-top: var(--intergalactic-spacing-content-gap-l, 16px);
   color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
   font-style: normal;
   font-size: var(--intergalactic-fs-300, 16px);
diff --git a/semcore/typography/src/style/list.shadow.css b/semcore/typography/src/style/list.shadow.css
index b173904a20..dc54571bac 100644
--- a/semcore/typography/src/style/list.shadow.css
+++ b/semcore/typography/src/style/list.shadow.css
@@ -10,7 +10,7 @@ SContent {
 }
 
 SList SList {
-  margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-top: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SItem {
@@ -18,11 +18,11 @@ SItem {
 }
 
 SItem + SItem {
-  margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-top: var(--intergalactic-spacing-content-gap-s, 8px);
 }
 
 SMarker {
-  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-s, 8px);
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   line-height: normal;
 }
diff --git a/semcore/typography/src/style/text.shadow.css b/semcore/typography/src/style/text.shadow.css
index 66ae811bd8..42e480c8ae 100644
--- a/semcore/typography/src/style/text.shadow.css
+++ b/semcore/typography/src/style/text.shadow.css
@@ -74,7 +74,7 @@ SText {
 
     & ol:not(ol[start], ol[reversed], ol[type]),
     & ul:not(ul[start], ul[reversed], ul[type]) {
-      margin: var(--intergalactic-spacing-content-gap-large, 8px) 0;
+      margin: var(--intergalactic-spacing-content-gap-s, 8px) 0;
       padding: 0;
       list-style: none;
       position: relative;
@@ -88,7 +88,7 @@ SText {
       }
 
       & li:not(SText) + li:not(SText) {
-        margin: var(--intergalactic-spacing-content-gap-large, 8px) 0 0 0;
+        margin: var(--intergalactic-spacing-content-gap-s, 8px) 0 0 0;
       }
     }
 
@@ -108,14 +108,14 @@ SText {
 
     & ol:not(ol[start], ol[reversed], ol[type]):has(+ p),
     & ul:not(ul[start], ul[reversed], ul[type]):has(+ p) {
-      margin-bottom: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+      margin-bottom: var(--intergalactic-spacing-content-gap-l, 16px);
     }
 
     & h1 {
       font-size: var(--intergalactic-fs-800, 48px);
       line-height: var(--intergalactic-lh-800, 1.16667);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xl, 20px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -126,7 +126,7 @@ SText {
       font-size: var(--intergalactic-fs-700, 36px);
       line-height: var(--intergalactic-lh-700, 1.1112);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-l, 16px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -137,7 +137,7 @@ SText {
       font-size: var(--intergalactic-fs-600, 32px);
       line-height: var(--intergalactic-lh-600, 1.25);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-m, 12px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -148,7 +148,7 @@ SText {
       font-size: var(--intergalactic-fs-500, 24px);
       line-height: var(--intergalactic-lh-500, 1.1667);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-m, 12px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -159,7 +159,7 @@ SText {
       font-size: var(--intergalactic-fs-400, 20px);
       line-height: var(--intergalactic-lh-400, 1.2);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-content-gap-large, 8px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-s, 8px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -170,7 +170,7 @@ SText {
       font-size: var(--intergalactic-fs-300, 16px);
       line-height: var(--intergalactic-lh-300, 1.5);
       font-weight: var(--intergalactic-bold, 700);
-      margin: 0 0 var(--intergalactic-spacing-content-gap-small, 4px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xs, 4px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -197,7 +197,7 @@ SText {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-l, 16px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -205,15 +205,15 @@ SText {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-content-gap-xxlarge, 16px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-gap-l, 16px) + var(--intergalactic-spacing-content-gap-xxs, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-content-gap-xxxlarge, 24px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-gap-xxl, 24px) + var(--intergalactic-spacing-content-gap-xxs, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-medium, 12px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xxl, 24px) + var(--intergalactic-spacing-content-padding-m, 12px));
     }
 
     & ul li:before {
@@ -221,8 +221,8 @@ SText {
       height: 4px;
       border-radius: 50%;
       /* disable-tokens-validator */
-      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) - 1px);
-      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-s, 8px) - 1px);
+      margin-left: var(--intergalactic-spacing-content-gap-xxs, 2px);
     }
   }
 }
@@ -264,7 +264,7 @@ SText[size='100'] {
     }
 
     & p {
-      margin: 0 0 calc(var(--intergalactic-spacing-content-gap-xxlarge, 16px) + var(--intergalactic-spacing-content-gap-xsmall, 2px)) 0;
+      margin: 0 0 calc(var(--intergalactic-spacing-content-gap-l, 16px) + var(--intergalactic-spacing-content-gap-xxs, 2px)) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -272,23 +272,23 @@ SText[size='100'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-l, 16px) + var(--intergalactic-spacing-content-padding-xxs, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xxl, 24px) + var(--intergalactic-spacing-content-padding-xxs, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-small, 8px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xxl, 24px) + var(--intergalactic-spacing-content-padding-s, 8px));
     }
 
     & ul li:before {
       width: 3px;
       height: 3px;
       border-radius: 50%;
-      margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
-      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+      margin-top: var(--intergalactic-spacing-content-gap-s, 8px);
+      margin-left: var(--intergalactic-spacing-content-gap-xxs, 2px);
     }
   }
 }
@@ -305,7 +305,7 @@ SText[size='200'] {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-m, 12px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -313,15 +313,15 @@ SText[size='200'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-l, 16px) + var(--intergalactic-spacing-content-padding-xxs, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xxl, 24px) + var(--intergalactic-spacing-content-padding-xxs, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-medium, 12px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xxl, 24px) + var(--intergalactic-spacing-content-padding-m, 12px));
     }
 
     & ul li:before {
@@ -329,8 +329,8 @@ SText[size='200'] {
       height: 4px;
       border-radius: 50%;
       /* disable-tokens-validator */
-      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) - 1px);
-      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-s, 8px) - 1px);
+      margin-left: var(--intergalactic-spacing-content-gap-xxs, 2px);
     }
   }
 }
@@ -347,7 +347,7 @@ SText[size='300'] {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-l, 16px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -355,23 +355,23 @@ SText[size='300'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-l, 16px) + var(--intergalactic-spacing-content-padding-xxs, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xxl, 24px) + var(--intergalactic-spacing-content-padding-xxs, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-medium, 12px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xxl, 24px) + var(--intergalactic-spacing-content-padding-m, 12px));
     }
 
     & ul li:before {
       width: 5px;
       height: 5px;
       border-radius: 50%;
-      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
-      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-s, 8px) + var(--intergalactic-spacing-content-gap-xxs, 2px));
+      margin-left: var(--intergalactic-spacing-content-gap-xxs, 2px);
     }
   }
 }
diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css
index 54b2707512..5c81d02ffa 100644
--- a/semcore/wizard/src/style/wizard.shadow.css
+++ b/semcore/wizard/src/style/wizard.shadow.css
@@ -8,7 +8,7 @@ SWizard {
 SSidebar {
   background: var(--intergalactic-wizard-sidebar-bg, oklch(0.23 0.01 140));
   color: var(--intergalactic-wizard-sidebar-text-primary, oklch(0.999 0.001 180 / 0.949));
-  padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px) var(--intergalactic-spacing-content-padding-small, 8px);
+  padding: var(--intergalactic-spacing-content-padding-xxxl, 40px) var(--intergalactic-spacing-content-padding-s, 8px);
   max-width: 220px;
   flex-shrink: 0;
   box-sizing: border-box;
@@ -20,9 +20,9 @@ SSidebar {
   SStepper {
     box-sizing: border-box;
     min-height: 36px;
-    gap: var(--intergalactic-spacing-content-gap-small, 4px);
+    gap: var(--intergalactic-spacing-content-gap-xs, 4px);
     border-radius: var(--intergalactic-control-rounded, 6px);
-    padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
+    padding: var(--intergalactic-spacing-content-padding-s, 8px) var(--intergalactic-spacing-content-padding-m, 12px);
     cursor: pointer;
     position: relative;
     overflow: auto;
@@ -49,11 +49,11 @@ SSidebar {
     }
 
     @media (max-width: 1060px) {
-      padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xsmall, 4px);
+      padding: var(--intergalactic-spacing-content-padding-s, 8px) var(--intergalactic-spacing-content-padding-xs, 4px);
 
       &:hover {
         display: flex;
-        padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xsmall, 4px);
+        padding: var(--intergalactic-spacing-content-padding-s, 8px) var(--intergalactic-spacing-content-padding-m, 12px) var(--intergalactic-spacing-content-padding-s, 8px) var(--intergalactic-spacing-content-padding-xs, 4px);
         width: max-content;
         max-width: 220px;
       }
@@ -72,7 +72,7 @@ SSidebar {
 SSidebarHeader {
   font-size: var(--intergalactic-fs-300, 16px);
   margin: 0;
-  padding: 0 var(--intergalactic-spacing-content-padding-xlarge, 20px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-xlarge, 20px);
+  padding: 0 var(--intergalactic-spacing-content-padding-xl, 20px) var(--intergalactic-spacing-content-padding-l, 16px) var(--intergalactic-spacing-content-padding-xl, 20px);
   @media (max-width: 1060px) {
     display: none;
   }
@@ -91,7 +91,7 @@ SStepNumber {
 
 SStepDescription {
   flex-direction: column;
-  gap: var(--intergalactic-spacing-content-gap-small, 4px);
+  gap: var(--intergalactic-spacing-content-gap-xs, 4px);
 
   overflow-wrap: anywhere;
   @media (max-width: 1060px) {
@@ -100,7 +100,7 @@ SStepDescription {
 }
 
 SContent {
-  padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+  padding: var(--intergalactic-spacing-content-padding-xxxl, 40px);
   overflow: hidden;
   flex: 1;
   border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px) 0;
@@ -110,7 +110,7 @@ SContent {
     display: block;
     word-break: break-word;
     font-weight: var(--intergalactic-semi-bold, 600);
-    margin-bottom: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+    margin-bottom: var(--intergalactic-spacing-content-gap-xl, 20px);
   }
 }
 SContent[noSidebar] {
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index cfb3693926..30e0be15e1 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -644,10 +644,6 @@ export const theme: Theme = {
         value: gray.at(0.22),
         description: 'Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).',
       },
-      brand_tertiary: {
-        value: green.at(0.82),
-        description: 'Tertiary brand accent for logos and branded surfaces.',
-      },
       brand_twitter: {
         value: '#1d9bf0',
         description: 'Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
@@ -713,7 +709,7 @@ export const theme: Theme = {
         description: 'Grid and axis guide lines for charts.',
       },
       chart_grid_dot_outer_border: {
-        value: 'oklch(from {semanticTokens.colors.border.accent.DEFAULT} l c h / 0.1)',
+        value: '{semanticTokens.colors.border_accent_DEFAULT}',
         description: 'Outer border for the dots highlighting forecast, bad or good insights.',
       },
       chart_grid_period_bg: {
@@ -2345,81 +2341,77 @@ export const theme: Theme = {
     },
   },
   featureHighlight: {
-    'feature-highlight': {
-      badge_accent: {
-        value: '{semanticTokens.colors.brand_secondary}',
-        description: 'Accent background for Badge.',
-      },
-      bg_primary_DEFAULT: {
-        value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
-        description: 'Primary background for highlighted controls.',
-      },
-      bg_primary_hover_active: {
-        value: '{semanticTokens.colors.bg_primary_neutral_hover}',
-        description: 'Primary background for hover and active (selected) state of highlighted controls.',
-      },
-      bg_secondary: {
-        value: '{baseTokens.colors.violet.100}',
-        description: 'Secondary background for the highlighted message.',
-      },
-      border_primary_DEFAULT: {
-        value: '{semanticTokens.colors.border_primary}',
-        description: 'Primary border for highlighted controls.',
-      },
-      border_primary_active: {
-        value: '{semanticTokens.colors.brand_secondary}',
-        description: 'Primary border for the active state of highlighted controls.',
-      },
-      border_secondary: {
-        value: '{semanticTokens.colors.border_secondary}',
-        description: 'Secondary border for highlighted controls.',
-      },
-      control_primary_DEFAULT: {
-        value: '{semanticTokens.colors.control_primary_info_DEFAULT}',
-        description: 'Background of the highlighted primary control.',
-      },
-      control_primary_hover: {
-        value: '{semanticTokens.colors.control_primary_info_hover}',
-        description: 'Hover state of the highlighted primary control.',
-      },
-      control_primary_active: {
-        value: '{semanticTokens.colors.control_primary_info_active}',
-        description: 'Active (selected) state of the highlighted primary control.',
-      },
-      control_secondary_DEFAULT: {
-        value: '{semanticTokens.colors.control_secondary_neutral_DEFAULT}',
-        description: 'Background of the highlighted secondary control.',
-      },
-      control_secondary_hover: {
-        value: '{semanticTokens.colors.control_secondary_neutral_hover}',
-        description: 'Hover state of the highlighted secondary control.',
-      },
-      control_secondary_active: {
-        value: '{semanticTokens.colors.control_secondary_neutral_active}',
-        description: 'Active (selected) state of the highlighted secondary control.',
-      },
-      text_DEFAULT: {
-        value: '{semanticTokens.colors.text_primary_DEFAULT}',
-        description: 'Text for highlighted features.',
-      },
-      text_hover_active: {
-        value: '{semanticTokens.colors.text_primary_DEFAULT}',
-        description: 'Text for hover and active states of highlighted features.',
-      },
-      icon_primary_DEFAULT: {
-        value: '{semanticTokens.colors.brand_secondary}',
-      },
-      icon_primary_hover_active: {
-        value: '{semanticTokens.colors.brand_secondary}',
-      },
-      keyboard_focus_DEFAULT: {
-        value: `3px solid ${colors.green['200'].value}`,
-        description: 'Keyboard focus styles for highlighted controls.',
-      },
-      keyboard_focus_outline: {
-        value: `${colors.green['200'].value}`,
-        description: 'Color for keyboard focus outline styles for highlighted controls.',
-      },
+    'bg_primary_feature-highlight_DEFAULT': {
+      value: '{baseTokens.colors.gray.white}',
+      description: 'Primary background for highlighted controls.',
+    },
+    'bg_primary_feature-highlight_hover_active': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.50}, {baseTokens.colors.blue.75})',
+      description: 'Primary background for hover and active (selected) state of highlighted controls.',
+    },
+    'bg_secondary_feature-highlight': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.50}, {baseTokens.colors.blue.75})',
+      description: 'Secondary background for the highlighted message.',
+    },
+    'border_feature-highlight_DEFAULT': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.200}, {baseTokens.colors.blue.200})',
+      description: 'Primary border for highlighted controls.',
+    },
+    'border_feature-highlight_active': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.300}, {baseTokens.colors.blue.300})',
+      description: 'Primary border for the active state of highlighted controls.',
+    },
+    'border_feature-highlight_secondary': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.300}, {baseTokens.colors.blue.300})',
+      description: 'Secondary border for highlighted controls.',
+    },
+    'control_primary_feature-highlight_DEFAULT': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.400}, {baseTokens.colors.blue.300})',
+      description: 'Background of the highlighted primary control.',
+    },
+    'control_primary_feature-highlight_hover': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.400}, {baseTokens.colors.blue.300})',
+      description: 'Hover state of the highlighted primary control.',
+    },
+    'control_primary_feature-highlight_active': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.400}, {baseTokens.colors.blue.400})',
+      description: 'Active (selected) state of the highlighted primary control.',
+    },
+    'control_secondary_feature-highlight_DEFAULT': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.50}, {baseTokens.colors.blue.50})',
+      description: 'Background of the highlighted secondary control.',
+    },
+    'control_secondary_feature-highlight_hover': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.100}, {baseTokens.colors.blue.100})',
+      description: 'Hover state of the highlighted secondary control.',
+    },
+    'control_secondary_feature-highlight_active': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.100}, {baseTokens.colors.blue.100})',
+      description: 'Active (selected) state of the highlighted secondary control.',
+    },
+    'text_feature-highlight_DEFAULT': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.500}, {baseTokens.colors.blue.500})',
+      description: 'Text for highlighted features.',
+    },
+    'text_feature-highlight_hover_active': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.500}, {baseTokens.colors.blue.500})',
+      description: 'Text for hover and active states of highlighted features.',
+    },
+    'icon_primary_feature-highlight_DEFAULT': {
+      value: highlight.at(L_ICON_PRIMARY),
+      description: 'Primary highlighted icon.',
+    },
+    'icon_primary_feature-highlight_hover_active': {
+      value: highlight.at(L_ICON_PRIMARY_HOVER),
+      description: 'Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color.',
+    },
+    'keyboard_focus_feature-highlight_DEFAULT': {
+      value: '3px solid {featureHighlight.keyboard.focus.feature-highlight.outline}',
+      description: 'Keyboard focus styles for highlighted controls.',
+    },
+    'keyboard_focus_feature-highlight_outline': {
+      value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.300}, {baseTokens.colors.blue.400})',
+      description: 'Color for keyboard focus outline styles for highlighted controls.',
     },
   },
   deprecates: {
@@ -2438,64 +2430,11 @@ export const theme: Theme = {
       500: colors.blue['500'],
     },
     table: { td: { cell: { actions: { accordion: { value: '{semanticTokens.colors.table_td_cell_accordion}' } } } } },
-    keyboard: {
-      focus: {
-        'outline': { invert: { value: '{semanticTokens.colors.keyboard_focus_invert_outline}' } },
-        'feature-highlight': {
-          DEFAULT: { value: '{featureHighlight.feature-highlight.keyboard.focus.DEFAULT}' },
-          outline: { value: '{featureHighlight.feature-highlight.keyboard.focus.outline}' },
-        },
-      },
-    },
-    badge: {
-      'feature-highlight': {
-        accent: { value: '{featureHighlight.feature-highlight.badge.accent}' },
-      },
-    },
-    bg: {
-      primary: {
-        'feature-highlight': {
-          DEFAULT: { value: '{featureHighlight.feature-highlight.bg.primary.DEFAULT}' },
-          hover: { active: { value: '{featureHighlight.feature-highlight.bg.primary.hover.active}' } },
-        },
-      },
-      secondary: {
-        'feature-highlight': { value: '{featureHighlight.feature-highlight.bg.secondary}' },
-      },
-    },
+    keyboard: { focus: { outline: { invert: { value: '{semanticTokens.colors.keyboard_focus_invert_outline}' } } } },
     border: {
-      'tooltip': { invert: { value: '{semanticTokens.colors.tooltip_border_invert}' } },
-      'table': { accent: { value: '{semanticTokens.colors.table_border_accent}' } },
-      'date': { picker: { range: { comparison: { value: '{semanticTokens.colors.date_picker_border_range_comparison}' } } } },
-      'feature-highlight': {
-        DEFAULT: { value: '{featureHighlight.feature-highlight.border.primary.DEFAULT}' },
-        active: { value: '{featureHighlight.feature-highlight.border.primary.active}' },
-        secondary: { value: '{featureHighlight.feature-highlight.border.secondary}' },
-      },
-    },
-    control: {
-      primary: {
-        'feature-highlight': {
-          DEFAULT: { value: '{featureHighlight.feature-highlight.control.primary.DEFAULT}' },
-          hover: { value: '{featureHighlight.feature-highlight.control.primary.hover}' },
-          active: { value: '{featureHighlight.feature-highlight.control.primary.active}' },
-        },
-      },
-      secondary: {
-        'feature-highlight': {
-          DEFAULT: { value: '{featureHighlight.feature-highlight.control.secondary.DEFAULT}' },
-          hover: { value: '{featureHighlight.feature-highlight.control.secondary.hover}' },
-          active: { value: '{featureHighlight.feature-highlight.control.secondary.active}' },
-        },
-      },
-    },
-    icon: {
-      primary: {
-        'feature-highlight': {
-          DEFAULT: { value: '{featureHighlight.feature-highlight.icon.primary.DEFAULT}' },
-          hover: { active: { value: '{featureHighlight.feature-highlight.icon.primary.hover.active}' } },
-        },
-      },
+      tooltip: { invert: { value: '{semanticTokens.colors.tooltip_border_invert}' } },
+      table: { accent: { value: '{semanticTokens.colors.table_border_accent}' } },
+      date: { picker: { range: { comparison: { value: '{semanticTokens.colors.date_picker_border_range_comparison}' } } } },
     },
     tooltip: {
       default: { value: '{semanticTokens.colors.tooltip_bg_default}' },
@@ -2503,12 +2442,6 @@ export const theme: Theme = {
       warning: { value: '{semanticTokens.colors.tooltip_bg_warning}' },
     },
     feature: {
-      highlight: {
-        border: {
-          DEFAULT: { value: '{featureHighlight.feature-highlight.border.primary.DEFAULT}' },
-          active: { value: '{featureHighlight.feature-highlight.border.primary.active}' },
-        },
-      },
       popover: {
         bg: {
           DEFAULT: { value: '{semanticTokens.colors.feature_popover_bg_accent}' },
@@ -2544,7 +2477,7 @@ export const theme: Theme = {
       },
     },
     text: {
-      'link': {
+      link: {
         DEFAULT: { value: '{semanticTokens.colors.text_link_primary_DEFAULT}' },
         hover: { active: { value: '{semanticTokens.colors.text_link_primary_hover_active}' } },
         invert: {
@@ -2552,10 +2485,6 @@ export const theme: Theme = {
           hover: { value: '{semanticTokens.colors.text_link_primary_invert_hover_active}' },
         },
       },
-      'feature-highlight': {
-        DEFAULT: { value: '{featureHighlight.feature-highlight.text.DEFAULT}' },
-        hover: { active: { value: '{featureHighlight.feature-highlight.text.hover.active}' } },
-      },
     },
   },
 };
@@ -2670,9 +2599,7 @@ export type SemanticTokens = {
 export type Theme = {
   baseTokens: BaseTokens;
   semanticTokens: SemanticTokens;
-  featureHighlight: {
-    'feature-highlight': Record<FlattenPaths<FeatureHighlight>, Value>;
-  };
+  featureHighlight: Record<FlattenPaths<FeatureHighlight>, Value>;
   deprecates: Deprecates;
 };
 
@@ -3280,7 +3207,6 @@ type SemanticColors = {
   brand: {
     primary: Value;
     secondary: Value;
-    tertiary: Value;
     gradient: Value;
     pinterest: Value;
     instagram: Value;
@@ -3705,45 +3631,6 @@ type SemanticShadows = {
 };
 
 export type FeatureHighlight = {
-  badge: { accent: Value };
-  bg: {
-    primary: { DEFAULT: Value; hover: { active: Value } };
-    secondary: Value;
-  };
-  border: {
-    primary: { DEFAULT: Value; active: Value };
-    secondary: Value;
-  };
-  control: {
-    primary: { DEFAULT: Value; active: Value; hover: Value };
-    secondary: { DEFAULT: Value; active: Value; hover: Value };
-  };
-  text: { DEFAULT: Value; hover: { active: Value } };
-  icon: {
-    primary: { DEFAULT: Value; hover: { active: Value } };
-  };
-  keyboard: {
-    focus: {
-      DEFAULT: Value;
-      outline: Value;
-    };
-  };
-};
-
-type Deprecates = {
-  fs: { 50: Value };
-  violet: { 400: Value; 500: Value };
-  blue: { 400: Value; 500: Value };
-  table: { td: { cell: { actions: { accordion: Value } } } };
-  keyboard: {
-    focus: {
-      'outline': { invert: Value };
-      'feature-highlight': { DEFAULT: Value; outline: Value };
-    };
-  };
-  badge: {
-    'feature-highlight': { accent: Value };
-  };
   bg: {
     primary: {
       'feature-highlight': { DEFAULT: Value; hover: { active: Value } };
@@ -3753,9 +3640,6 @@ type Deprecates = {
     };
   };
   border: {
-    'tooltip': { invert: Value };
-    'table': { accent: Value };
-    'date': { picker: { range: { comparison: Value } } };
     'feature-highlight': { DEFAULT: Value; active: Value; secondary: Value };
   };
   control: {
@@ -3766,20 +3650,41 @@ type Deprecates = {
       'feature-highlight': { DEFAULT: Value; active: Value; hover: Value };
     };
   };
+  text: {
+    'feature-highlight': { DEFAULT: Value; hover: { active: Value } };
+  };
   icon: {
     primary: {
       'feature-highlight': { DEFAULT: Value; hover: { active: Value } };
     };
   };
+  keyboard: {
+    focus: {
+      'feature-highlight': {
+        DEFAULT: Value;
+        outline: Value;
+      };
+    };
+  };
+};
+
+type Deprecates = {
+  fs: { 50: Value };
+  violet: { 400: Value; 500: Value };
+  blue: { 400: Value; 500: Value };
+  table: { td: { cell: { actions: { accordion: Value } } } };
+  keyboard: { focus: { outline: { invert: Value } } };
+  border: {
+    tooltip: { invert: Value };
+    table: { accent: Value };
+    date: { picker: { range: { comparison: Value } } };
+  };
   tooltip: {
     default: Value;
     invert: Value;
     warning: Value;
   };
   feature: {
-    highlight: {
-      border: { DEFAULT: Value; active: Value };
-    };
     popover: {
       bg: { DEFAULT: Value };
       dot: {
@@ -3811,7 +3716,7 @@ type Deprecates = {
     };
   };
   text: {
-    'link': {
+    link: {
       DEFAULT: Value;
       hover: { active: Value };
       invert: {
@@ -3819,7 +3724,6 @@ type Deprecates = {
         hover: Value;
       };
     };
-    'feature-highlight': { DEFAULT: Value; hover: { active: Value } };
   };
 };