diff --git a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css
index a53b2a6d45..ee3585dc48 100644
--- a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css
+++ b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css
@@ -98,7 +98,7 @@ SDropZone[dropPreview] {
 
 
 SDropZone[dark][dropPreview] {
-  background-color: var(--intergalactic-bg-primary-invert-active, oklch(0.4 0.004 140));
+  background-color: var(--intergalactic-bg-primary-invert-active, oklch(0.36 0.005 140));
 }
 
 SDraggable[keyboardDragging] {
diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css
index 4df66ad267..ada19867ce 100644
--- a/semcore/feature-popover/src/style/feature-popover.shadow.css
+++ b/semcore/feature-popover/src/style/feature-popover.shadow.css
@@ -13,7 +13,7 @@ SFeaturePopover {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-feature-popover-text */
   }
   &[theme='neutral'] {
-    background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); /* TODO: --intergalactic-feature-popover-bg-neutral */
+    background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.21 0.01 140)); /* TODO: --intergalactic-feature-popover-bg-neutral */
     color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-feature-popover-text-invert */
   }
 }
diff --git a/semcore/input-tags/src/style/input-tag.shadow.css b/semcore/input-tags/src/style/input-tag.shadow.css
index 08af38ed01..2cff7a1b7c 100644
--- a/semcore/input-tags/src/style/input-tag.shadow.css
+++ b/semcore/input-tags/src/style/input-tag.shadow.css
@@ -43,13 +43,13 @@ SInputTags>div[data-ui-name='ScrollArea.Bar'][orientation='vertical'] {
 SInputTags[size='m'] {
   min-height: var(--intergalactic-form-control-m, 32px);
   height: auto;
-  padding: 0 calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) 0 var(--intergalactic-spacing-1x, 4px);
+  padding: 0 calc(var(--intergalactic-spacing-content-padding-small, 8px) + 2px) 0 var(--intergalactic-spacing-content-padding-small, 8px);
 }
 
 SInputTags[size='l'] {
   min-height: var(--intergalactic-form-control-l, 44px);
   height: auto;
-  padding: 0 calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px)) 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0 calc(var(--intergalactic-spacing-content-padding-small, 8px) + 2px) 0 var(--intergalactic-spacing-content-padding-small, 8px);
 }
 
 SInputTags STag:focus-visible, SInputTags STagContainerClose:focus-visible {
diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css
index 37f7a248b5..52de3e8f9c 100644
--- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css
+++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css
@@ -12,7 +12,7 @@ SView {
   gap: var(--intergalactic-spacing-2x, 8px);
 
   &[type='info'] {
-    background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-notice-bubble-bg-info */
+    background: var(--intergalactic-bg-primary-invert, oklch(0.21 0.01 140)); /* TODO: --intergalactic-notice-bubble-bg-info */
   }
 
   &[type='warning'] {
diff --git a/semcore/tag/src/Tag.tsx b/semcore/tag/src/Tag.tsx
index 6f36e64f70..b9e28fdf50 100644
--- a/semcore/tag/src/Tag.tsx
+++ b/semcore/tag/src/Tag.tsx
@@ -69,6 +69,16 @@ class RootTag extends Component<
     }
   };
 
+  resolvedTheme() {
+    const { theme, invert } = this.asProps;
+
+    if (invert === true) {
+      return `${theme}-invert`;
+    }
+
+    return theme;
+  }
+
   render() {
     const STag = Root;
     const {
@@ -82,6 +92,7 @@ class RootTag extends Component<
       resolveColor,
       id: outerId,
       uid,
+      theme,
     } = this.asProps;
     const id = outerId || `igc-${uid}-tag`;
     const isInteractiveView = !disabled && interactive;
@@ -93,7 +104,8 @@ class RootTag extends Component<
         id={id}
         use:interactive={isInteractive}
         use:interactiveView={isInteractiveView}
-        tag-color={resolveColor(color)}
+        use:theme={this.resolvedTheme()}
+        tag-color={theme === 'primary' ? resolveColor(color) : undefined}
         onKeyDown={this.handleKeyDown}
         use:tabIndex={isInteractive ? 0 : -1}
         role={isInteractive ? 'button' : undefined}
@@ -153,6 +165,7 @@ class RootTagContainer extends Component<
       addonLeft,
       addonRight,
       active,
+      invert,
     } = this.asProps;
     const id = outerId || `igc-${uid}-tag`;
 
@@ -168,6 +181,7 @@ class RootTagContainer extends Component<
       addonLeft,
       addonRight,
       active,
+      invert,
     };
   }
 
@@ -198,7 +212,7 @@ class RootTagContainer extends Component<
     return {
       disabled,
       size,
-      theme,
+      'theme': this.resolvedTheme(),
       color,
       'id': `${id}-clear`,
       'aria-labelledby': `${id}-clear ${id}-text`,
@@ -207,6 +221,16 @@ class RootTagContainer extends Component<
     };
   }
 
+  resolvedTheme() {
+    const { theme, invert } = this.asProps;
+
+    if (invert === true) {
+      return `${theme}-invert`;
+    }
+
+    return theme;
+  }
+
   render() {
     const STagContainer = Root;
     const { styles, Children, forcedAdvancedMode } = this.asProps;
diff --git a/semcore/tag/src/Tag.type.ts b/semcore/tag/src/Tag.type.ts
index 54932e862e..605fa8232b 100644
--- a/semcore/tag/src/Tag.type.ts
+++ b/semcore/tag/src/Tag.type.ts
@@ -27,8 +27,10 @@ declare namespace NSTag {
      * @default primary
      */
     theme?: NSTag.Theme;
-    /** Tag color text */
-    color?: string;
+    /**
+     * Flag for invert the tag to display in a dark theme or on a dark background.
+     */
+    invert?: boolean;
     /** Tag size
      * @default m
      */
@@ -39,7 +41,15 @@ declare namespace NSTag {
     addonRight?: React.ElementType;
     /** Specifies the locale for i18n support */
     locale?: string;
-  };
+  } & ({
+    theme?: 'primary';
+    /** Tag color text */
+    color?: string;
+  } | {
+    theme?: 'secondary' | 'additional';
+    /** Tag color text */
+    color?: never;
+  });
   type DefaultProps = {
     theme: 'primary';
     color: 'gray-500';
diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css
index e951c4c3cc..9fb1be203d 100644
--- a/semcore/tag/src/style/tag.shadow.css
+++ b/semcore/tag/src/style/tag.shadow.css
@@ -45,12 +45,12 @@ STagContainerClose {
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  border: 1px solid var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-tag-primary-border */
+  border: 1px solid var(--intergalactic-tag-primary-border, oklch(1 0 0));
   box-sizing: border-box;
-  background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-tag-primary-bg-normal */
+  background-color: var(--intergalactic-tag-primary-bg-normal, oklch(1 0 0));
   border-radius: var(--intergalactic-tag-rounded, 24px);
-  padding-left: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-1x, 4px);
+  padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  padding-right: var(--intergalactic-spacing-content-gap-small, 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-2x, 8px);
+  padding: 0 var(--intergalactic-spacing-content-gap-large, 8px);
 
   & SText {
     font-size: var(--intergalactic-fs-300, 16px);
@@ -167,62 +167,96 @@ STagContainer[theme="primary"] SAddon {
 }
 
 STag[theme="secondary"],
-STagContainerClose[theme="secondary"],
-STag[theme="additional"],
-STagContainerClose[theme="additional"] {
-  /* chenge to ...? secondary: change to --intergalactic-tag-secondary-border; additional: change to --intergalactic-tag-additional-bg-normal */
-  &::before {
-    opacity: 0.01;
+STagContainerClose[theme="secondary"] {
+  color: var(--intergalactic-tag-secondary-text, #6a6c6a);
+  background-color: var(--intergalactic-tag-secondary-bg-normal, #ffffff);
+  border-color: var(--intergalactic-tag-secondary-border, oklch(0.91 0.002 177.8));
+
+  &::before,
+  &::after {
+    display: none;
   }
 
   &[interactiveView]:hover,
   &[interactiveView]:active,
   &[active] {
-    &:before {
-      opacity: 0.1;
-    }
+    background-color: var(--intergalactic-tag-secondary-bg-hover-active, #f4f5f5);
   }
 }
 
-STag[theme="secondary"],
-STagContainerClose[theme="secondary"],
 STag[theme="additional"],
-STagContainerClose[theme="additional"],
-STag[theme="secondary-invert"],
-STagContainerClose[theme="secondary-invert"],
-STag[theme="additional-invert"],
-STagContainerClose[theme="additional-invert"] {
+STagContainerClose[theme="additional"] {
+  color: var(--intergalactic-tag-additional-text, #6a6c6a);
+  background-color: var(--intergalactic-tag-additional-bg-normal, oklch(1 0 0));
+  border-color: var(--intergalactic-tag-additional-border, oklch(0.91 0.002 177.8));
+  border-style: dashed;
+
+  &::before,
   &::after {
-    opacity: 0.5;
+    display: none;
+  }
+
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
+  &[active] {
+    background-color: var(--intergalactic-tag-additional-bg-hover-active, oklch(0.98 0.001 180));
   }
 }
 
 STag[theme="primary-invert"],
 STagContainerClose[theme="primary-invert"] {
-  background-color: var(
-    --intergalactic-tag-primary-white-normal,
-    oklch(1 0 0)
-  );
-  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-tag-primary-bg-invert-normal, oklch(0.965 0.065 140 / 0.1));
+  color: var(--intergalactic-tag-primary-text-invert, #ffffff);
+  border-color: transparent;
+
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
+  &[active] {
+    background-color: var(--intergalactic-tag-primary-bg-invert-hover-active, oklch(0.986 0.025 140 / 0.203));
+  }
 }
 
 STag[theme="secondary-invert"],
-STagContainerClose[theme="secondary-invert"],
+STagContainerClose[theme="secondary-invert"] {
+  background-color: var(--intergalactic-tag-secondary-bg-invert-normal, transparent);
+  color: var(--intergalactic-tag-secondary-text-invert, oklch(0.997 0.004 165.9 / 0.684));
+  border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.974 0.047 140 / 0.136));
+
+  &::before,
+  &::after {
+    display: none;
+  }
+
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
+  &[active] {
+    background-color: var(--intergalactic-tag-secondary-bg-invert-hover-active, oklch(0.98 0.036 140 / 0.164));
+  }
+}
+
 STag[theme="additional-invert"],
 STagContainerClose[theme="additional-invert"] {
-  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO:--intergalactic-tag-secondary-white-text */
-}
+  background-color: var(--intergalactic-tag-additional-bg-invert-normal, transparent);
+  color: var(--intergalactic-tag-additional-text-invert, oklch(0.997 0.004 165.9 / 0.684));
+  border-color: var(--intergalactic-tag-additional-border-invert, oklch(0.995 0.008 147.4 / 0.391));
+  border-style: dashed;
 
-STag[theme="additional"] {
+  &::before,
   &::after {
-    border-style: dashed;
+    display: none;
+  }
+
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
+  &[active] {
+    background-color: var(--intergalactic-tag-additional-bg-invert-hover-active, oklch(0.98 0.036 140 / 0.164));
   }
 }
 
 SText {
   display: flex;
-  padding-left: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-1x, 4px);
+  padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  padding-right: var(--intergalactic-spacing-content-gap-small, 4px);
   position: relative;
 }
 
@@ -258,6 +292,20 @@ STagContainer {
   align-items: center;
   justify-content: center;
 
+  STag[theme="secondary"]:not(:last-child),
+  STag[theme="additional"]:not(:last-child),
+  STag[theme="secondary-invert"]:not(:last-child),
+  STag[theme="additional-invert"]:not(:last-child) {
+    border-right: 0;
+  }
+
+  STagContainerClose[theme="secondary"],
+  STagContainerClose[theme="additional"],
+  STagContainerClose[theme="secondary-invert"],
+  STagContainerClose[theme="additional-invert"] {
+    border-left: 0;
+  }
+
   STag,
   SAddon {
     &:not(:last-child) {
@@ -319,7 +367,7 @@ STagContainer {
 
     svg {
       padding-left: 0;
-      padding-right: var(--intergalactic-spacing-1x, 4px);
+      padding-right: var(--intergalactic-spacing-content-gap-small, 4px);
     }
 
     svg path {
@@ -333,8 +381,8 @@ STagContainer {
 
   STagContainerClose[size="xl"] {
     svg {
-      padding-left: var(--intergalactic-spacing-1x, 4px);
-      padding-right: var(--intergalactic-spacing-2x, 8px);
+      padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
+      padding-right: var(--intergalactic-spacing-content-gap-large, 8px);
     }
   }
 }
diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css
index 6a2e50be7c..0ea8195334 100644
--- a/semcore/tooltip/src/style/tooltip.shadow.css
+++ b/semcore/tooltip/src/style/tooltip.shadow.css
@@ -21,8 +21,8 @@ STooltip {
 
 STooltip[theme='invert'] {
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-tooltip-text-invert */
-  background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
-  border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */
+  background-color: var(--intergalactic-tooltip-invert, oklch(0.21 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
+  border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.974 0.047 140 / 0.136)); /* TODO: --intergalactic-tooltip-border-invert */
 }
 
 STooltip[theme='warning'] {
@@ -52,10 +52,10 @@ SArrow {
 }
 
 SArrow[theme='invert'] {
-  border-color: var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */
+  border-color: var(--intergalactic-border-tooltip-invert, oklch(0.974 0.047 140 / 0.136)); /* TODO: --intergalactic-tooltip-border-invert */
 
   &::before {
-    border-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
+    border-color: var(--intergalactic-tooltip-invert, oklch(0.21 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
   }
 }
 
diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css
index fd0f1bfc37..d5deaf02b4 100644
--- a/semcore/wizard/src/style/wizard.shadow.css
+++ b/semcore/wizard/src/style/wizard.shadow.css
@@ -7,7 +7,7 @@ SWizard {
 }
 
 SSidebar {
-  background: var(--intergalactic-control-primary-advertising, oklch(0.23 0.01 140)); /* TODO: --intergalactic-wizard-sidebar-bg */
+  background: var(--intergalactic-control-primary-advertising, oklch(0.21 0.01 140)); /* TODO: --intergalactic-wizard-sidebar-bg */
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-wizard-sidebar-text-primary */
   font-weight: var(--intergalactic-bold, 700);
   font-size: var(--intergalactic-fs-300, 16px);
@@ -38,11 +38,11 @@ SSidebar {
     }
 
     &:hover {
-      background: var(--intergalactic-control-primary-advertising-hover, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-hover */
+      background: var(--intergalactic-control-primary-advertising-hover, oklch(0.32 0.007 140)); /* TODO: --intergalactic-wizard-sidebar-control-hover */
       z-index: 2;
     }
     &[active] {
-      background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
+      background: var(--intergalactic-control-primary-advertising-active, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
     }
     &:disabled,
     &[disabled] {
@@ -63,7 +63,7 @@ SSidebar {
         overflow: auto;
       }
       &[active]:hover SStepDescription {
-        background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
+        background: var(--intergalactic-control-primary-advertising-active, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
       }
     }
   }
diff --git a/stories/components/tag/advanced/examples/all-tags.tsx b/stories/components/tag/advanced/examples/all-tags.tsx
index a21bceacc2..01cf88e796 100644
--- a/stories/components/tag/advanced/examples/all-tags.tsx
+++ b/stories/components/tag/advanced/examples/all-tags.tsx
@@ -1,5 +1,5 @@
 import MathPlusM from '@semcore/icon/MathPlus/m';
-import { Flex } from '@semcore/ui/base-components';
+import { Box, Flex } from '@semcore/ui/base-components';
 import Tag, { TagContainer } from '@semcore/ui/tag';
 import React from 'react';
 
@@ -20,25 +20,80 @@ const SIZES = ['m', 'l', 'xl'] as const;
 export default function AllTags() {
   return (
     <Flex direction='column' gap={4}>
-      <Flex gap={2} flexWrap alignItems='center'>
-        <Tag>
-          <Tag.Text>Primary</Tag.Text>
-        </Tag>
-        <Tag theme='secondary'>
-          <Tag.Text>Secondary</Tag.Text>
-        </Tag>
-        <Tag theme='additional' addonLeft={MathPlusM}>
-          <Tag.Text>Additional</Tag.Text>
-        </Tag>
-        <Tag disabled>
-          <Tag.Text>Disabled</Tag.Text>
-        </Tag>
-      </Flex>
+      {SIZES.map((size) => (
+        <Flex key={`themes-${size}`} gap={2} flexWrap alignItems='center'>
+          <Tag size={size}>Primary</Tag>
+          <Tag theme='secondary' size={size}>Secondary</Tag>
+          <Tag disabled size={size}>Disabled</Tag>
+        </Flex>
+      ))}
+      {SIZES.map((size) => (
+        <Flex key={`themes-interactive-${size}`} gap={2} flexWrap alignItems='center'>
+          <TagContainer size={size} interactive onClick={console.log}>
+            <TagContainer.Tag>
+              <TagContainer.Tag.Text>Primary interactive</TagContainer.Tag.Text>
+            </TagContainer.Tag>
+            <TagContainer.Close />
+          </TagContainer>
+          <TagContainer theme='secondary' size={size} interactive onClick={console.log}>
+            <TagContainer.Tag>
+              <TagContainer.Tag.Text>Secondary interactive</TagContainer.Tag.Text>
+            </TagContainer.Tag>
+            <TagContainer.Close />
+          </TagContainer>
+          <TagContainer theme='additional' size={size} interactive onClick={console.log}>
+            <TagContainer.Tag addonLeft={MathPlusM}>
+              <TagContainer.Tag.Text>Secondary interactive</TagContainer.Tag.Text>
+            </TagContainer.Tag>
+          </TagContainer>
+        </Flex>
+      ))}
+      <Box
+        p={4}
+        style={{
+          background: 'var(--intergalactic-bg-primary-invert)',
+          borderRadius: 'var(--intergalactic-surface-rounded, 6px)',
+        }}
+      >
+        <Flex direction='column' gap={4}>
+          {SIZES.map((size) => (
+            <Flex key={`themes-invert-${size}`} gap={2} flexWrap alignItems='center'>
+              <Tag size={size} theme='primary' invert>
+                <Tag.Text>Primary invert</Tag.Text>
+              </Tag>
+              <Tag theme='secondary' invert size={size}>
+                <Tag.Text>Secondary invert</Tag.Text>
+              </Tag>
+            </Flex>
+          ))}
+          {SIZES.map((size) => (
+            <Flex key={`themes-invert-interactive-${size}`} gap={2} flexWrap alignItems='center'>
+              <TagContainer theme='primary' invert size={size} interactive onClick={console.log}>
+                <TagContainer.Tag>
+                  <TagContainer.Tag.Text>Primary invert interactive</TagContainer.Tag.Text>
+                </TagContainer.Tag>
+                <TagContainer.Close />
+              </TagContainer>
+              <TagContainer theme='secondary' invert size={size} interactive onClick={console.log}>
+                <TagContainer.Tag>
+                  <TagContainer.Tag.Text>Secondary invert interactive</TagContainer.Tag.Text>
+                </TagContainer.Tag>
+                <TagContainer.Close />
+              </TagContainer>
+              <TagContainer theme='additional' invert size={size} interactive onClick={console.log}>
+                <TagContainer.Tag addonLeft={MathPlusM}>
+                  <TagContainer.Tag.Text>Additional invert interactive</TagContainer.Tag.Text>
+                </TagContainer.Tag>
+              </TagContainer>
+            </Flex>
+          ))}
+        </Flex>
+      </Box>
       {SIZES.map((size) => (
         <Flex key={size} gap={2} flexWrap alignItems='center'>
           {COLORS.map((color) => (
             <Tag key={`${size}-${color}`} theme='primary' color={`${color}-500`} size={size}>
-              <Tag.Text>{color}</Tag.Text>
+              {color}
             </Tag>
           ))}
         </Flex>
diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts
index 591e8b3fe7..40194411df 100644
--- a/tools/theme/src/colors/index.ts
+++ b/tools/theme/src/colors/index.ts
@@ -229,6 +229,7 @@ export const L_ICON_SECONDARY_HOVER = 0.66; // Delete with minor
 
 /** Border primary    | ⚠️ APCA 15+ on secondary bg */
 export const L_BORDER_PRIMARY = 0.88; // inputs, buttons, table header, tab-line, divider
+export const L_BORDER_PRIMARY_DIMMED = 0.91; // tag, divider
 /** Border secondary */
 export const L_BORDER_SECONDARY = 0.95; // notice borders, divider, cell borders, card header
 /** Border active */
@@ -240,14 +241,14 @@ export const L_BORDER_FOCUS = 0.7;
 // Invert levels
 
 /** Primary bg */
-export const L_INV_BG_PRIMARY = 0.23;
-export const L_INV_BG_PRIMARY_HOVER = 0.36;
-export const L_INV_BG_PRIMARY_ACTIVE = 0.4;
+export const L_INV_BG_PRIMARY = 0.21;
+export const L_INV_BG_PRIMARY_HOVER = 0.32;
+export const L_INV_BG_PRIMARY_ACTIVE = 0.36;
 
 /** Secondary bg */
-export const L_INV_BG_SECONDARY = 0.3;
-export const L_INV_BG_SECONDARY_HOVER = 0.32;
-export const L_INV_BG_SECONDARY_ACTIVE = 0.34;
+export const L_INV_BG_SECONDARY = 0.23;
+export const L_INV_BG_SECONDARY_HOVER = 0.28;
+export const L_INV_BG_SECONDARY_ACTIVE = 0.32;
 
 /** Skeleton bg */
 export const L_INV_BG_SKELETON = 0.5;
@@ -274,4 +275,4 @@ export const L_INV_ICON_PRIMARY_HOVER = 0.8;
 /** Border primary    | ⚠️ APCA 15+ on secondary bg */
 export const L_INV_BORDER_PRIMARY = 0.5; // inputs, buttons, table header
 /** Border secondary */
-export const L_INV_BORDER_SECONDARY = 0.48;
+export const L_INV_BORDER_SECONDARY = 0.25;
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index 890e66cb6b..14cc2122a6 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -14,7 +14,7 @@ import {
   L_BG_SECONDARY_ACTIVE,
   L_BG_SECONDARY_HOVER, L_BG_SELECTED, L_BG_SELECTED_HOVER, L_BG_SKELETON,
   L_BG_STRONG, L_BORDER_ACTIVE,
-  L_BORDER_FOCUS, L_BORDER_PRIMARY, L_BORDER_SECONDARY, L_ICON_NON_INTERACTIVE, L_ICON_PRIMARY,
+  L_BORDER_FOCUS, L_BORDER_PRIMARY, L_BORDER_SECONDARY, L_BORDER_PRIMARY_DIMMED, L_ICON_NON_INTERACTIVE, L_ICON_PRIMARY,
   L_ICON_PRIMARY_HOVER, L_ICON_SECONDARY, L_ICON_SECONDARY_HOVER, L_INV_BG_BUTTON,
   L_INV_BG_BUTTON_ACTIVE, L_INV_BG_BUTTON_HOVER, L_INV_BG_LIGHT, L_INV_BG_MEDIUM,
   L_INV_BG_PRIMARY,
@@ -1566,12 +1566,32 @@ export const theme: Theme = {
         description: 'Background of the additional Tag in its normal state.',
       },
       tag_additional_border: {
-        value: '{semanticTokens.colors.border_primary_DEFAULT}',
+        value: neutral.at(L_BORDER_PRIMARY_DIMMED),
         description: 'Border color of the additional Tag.',
       },
-      tag_primary_bg_hover: {
+      tag_additional_text: {
+        value: '#6a6c6a',
+        description: 'Text color for the additional tag.',
+      },
+      tag_additional_bg_invert_normal: {
+        value: 'transparent',
+        description: 'Additional tag on bold or dark backgrounds—minimal fill in the normal state.',
+      },
+      tag_additional_bg_invert_hover_active: {
+        value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER),
+        description: 'Hover and active states of the additional tag on dark backgrounds.',
+      },
+      tag_additional_text_invert: {
+        value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY),
+        description: 'Text color for the additional tag on dark backgrounds.',
+      },
+      tag_additional_border_invert: {
+        value: '{semanticTokens.colors.border_primary_invert}',
+        description: 'Inverted border color of the additional Tag.',
+      },
+      tag_primary_bg_hover_active: {
         value: '{semanticTokens.colors.bg_primary_neutral_hover}',
-        description: 'Hover state of the primary Tag background.',
+        description: 'Hover and active states of the primary Tag background.',
       },
       tag_primary_bg_normal: {
         value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
@@ -1653,17 +1673,17 @@ export const theme: Theme = {
         value: '#8029ec',
         description: 'Violet text for the primary violet tag.',
       },
-      tag_primary_white_hover_active: {
-        value: '{semanticTokens.colors.bg_primary_neutral_hover}',
-        description: 'Hover and active (selected) state of the primary white tag.',
+      tag_primary_bg_invert_hover_active: {
+        value: neutral.opaqueInvAt(L_INV_BG_PRIMARY_HOVER),
+        description: 'Hover and active states of the primary tag on dark backgrounds.',
       },
-      tag_primary_white_normal: {
-        value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+      tag_primary_bg_invert_normal: {
+        value: neutral.opaqueInvAt(L_INV_BG_PRIMARY),
         description: 'Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.',
       },
-      tag_primary_white_text: {
+      tag_primary_text_invert: {
         value: '#ffffff',
-        description: 'White text for the primary white tag.',
+        description: 'Text color for the primary tag on dark backgrounds.',
       },
       tag_primary_yellow_hover_active: {
         value: '#fcd8b3',
@@ -1678,36 +1698,36 @@ export const theme: Theme = {
         description: 'Yellow text for the primary yellow tag.',
       },
       tag_secondary_border_DEFAULT: {
-        value: '{semanticTokens.colors.border_primary_DEFAULT}',
+        value: neutral.at(L_BORDER_PRIMARY_DIMMED),
         description: 'Border color of the secondary Tag.',
       },
       tag_secondary_border_invert: {
         value: '{semanticTokens.colors.border_secondary_invert}',
         description: 'Inverted border color of the secondary Tag.',
       },
-      tag_secondary_gray_text: {
+      tag_secondary_text: {
         value: '#6a6c6a',
-        description: 'Gray text for the default secondary tag.',
+        description: 'Text color for the default secondary tag.',
       },
-      tag_secondary_hover_active: {
+      tag_secondary_bg_hover_active: {
         value: '#f4f5f5',
         description: 'Hover and active (selected) states of the background color for the default secondary tag.',
       },
-      tag_secondary_normal: {
+      tag_secondary_bg_normal: {
         value: '#ffffff',
         description: 'Background color for the default secondary tag.',
       },
-      tag_secondary_white_hover_active: {
-        value: 'rgba(255, 255, 255, 0.1)',
-        description: 'Active state of the secondary white tag.',
+      tag_secondary_bg_invert_hover_active: {
+        value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER),
+        description: 'Hover and active states of the secondary tag on dark backgrounds.',
       },
-      tag_secondary_white_normal: {
-        value: 'rgba(255, 255, 255, 0)',
+      tag_secondary_bg_invert_normal: {
+        value: 'transparent',
         description: 'Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.',
       },
-      tag_secondary_white_text: {
-        value: '#ffffff',
-        description: 'White text for the secondary white tag.',
+      tag_secondary_text_invert: {
+        value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY),
+        description: 'Text color for the secondary tag on dark backgrounds.',
       },
       text_advertising: {
         value: advertising.at(L_TEXT_PRIMARY),
@@ -2972,9 +2992,18 @@ type SemanticColors = {
     primary: {
       bg: {
         normal: Value;
-        hover: Value;
+        hover: {
+          active: Value;
+        };
+        invert: {
+          normal: Value;
+          hover: {
+            active: Value;
+          };
+        };
       };
       border: Value;
+      text_invert: Value;
       gray: {
         normal: Value;
         hover: {
@@ -3024,32 +3053,25 @@ type SemanticColors = {
         };
         text: Value;
       };
-      white: {
-        normal: Value;
-        hover: {
-          active: Value;
-        };
-        text: Value;
-      };
     };
     secondary: {
       border: {
         DEFAULT: Value;
         invert: Value;
       };
-      normal: Value;
-      hover: {
-        active: Value;
-      };
-      white: {
+      text: Value;
+      text_invert: Value;
+      bg: {
         normal: Value;
         hover: {
           active: Value;
         };
-        text: Value;
-      };
-      gray: {
-        text: Value;
+        invert: {
+          normal: Value;
+          hover: {
+            active: Value;
+          };
+        };
       };
     };
     additional: {
@@ -3058,8 +3080,17 @@ type SemanticColors = {
         hover: {
           active: Value;
         };
+        invert: {
+          normal: Value;
+          hover: {
+            active: Value;
+          };
+        };
       };
       border: Value;
+      border_invert: Value;
+      text: Value;
+      text_invert: Value;
     };
   };
   chart: {
diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json
index b1bd50cc5a..317d848b9a 100644
--- a/website/docs/style/design-tokens/base-tokens.json
+++ b/website/docs/style/design-tokens/base-tokens.json
@@ -850,7 +850,7 @@
   },
   {
     "name": "--intergalactic-border-tooltip-invert",
-    "value": "oklch(0.995 0.008 145.9 / 0.369)"
+    "value": "oklch(0.974 0.047 140 / 0.136)"
   },
   {
     "name": "--intergalactic-border-table-accent",
@@ -866,7 +866,7 @@
   },
   {
     "name": "--intergalactic-tooltip-invert",
-    "value": "oklch(0.23 0.01 140)"
+    "value": "oklch(0.21 0.01 140)"
   },
   {
     "name": "--intergalactic-tooltip-warning",
@@ -898,7 +898,7 @@
   },
   {
     "name": "--intergalactic-feature-popover-neutral-bg",
-    "value": "oklch(0.23 0.01 140)"
+    "value": "oklch(0.21 0.01 140)"
   },
   {
     "name": "--intergalactic-feature-popover-neutral-dot-outer-border",
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index aa08c08a37..2952b25452 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -91,7 +91,7 @@
   },
   {
     "name": "--intergalactic-badge-bg-invert",
-    "value": "oklch(0.983 0.03 140 / 0.183)",
+    "value": "oklch(0.969 0.057 140 / 0.118)",
     "description": "Background color of the inverted Badge.",
     "components": []
   },
@@ -159,7 +159,7 @@
   },
   {
     "name": "--intergalactic-bg-primary-invert",
-    "value": "oklch(0.23 0.01 140)",
+    "value": "oklch(0.21 0.01 140)",
     "description": "Inverted version of the primary background of the interface that contains the main data and information.",
     "components": [
       "notice-bubble"
@@ -167,7 +167,7 @@
   },
   {
     "name": "--intergalactic-bg-primary-invert-active",
-    "value": "oklch(0.4 0.004 140)",
+    "value": "oklch(0.36 0.005 140)",
     "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.",
     "components": [
       "drag-and-drop"
@@ -175,7 +175,7 @@
   },
   {
     "name": "--intergalactic-bg-primary-invert-hover",
-    "value": "oklch(0.36 0.005 140)",
+    "value": "oklch(0.32 0.007 140)",
     "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information.",
     "components": []
   },
@@ -212,7 +212,6 @@
       "side-panel",
       "slider",
       "switch",
-      "tag",
       "textarea",
       "wizard"
     ]
@@ -512,7 +511,7 @@
   },
   {
     "name": "--intergalactic-border-secondary-invert",
-    "value": "oklch(0.995 0.008 145.9 / 0.369)",
+    "value": "oklch(0.974 0.047 140 / 0.136)",
     "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.",
     "components": []
   },
@@ -977,7 +976,7 @@
   },
   {
     "name": "--intergalactic-control-primary-advertising",
-    "value": "oklch(0.23 0.01 140)",
+    "value": "oklch(0.21 0.01 140)",
     "description": "Background of the advertising primary control.",
     "components": [
       "wizard"
@@ -985,7 +984,7 @@
   },
   {
     "name": "--intergalactic-control-primary-advertising-hover",
-    "value": "oklch(0.36 0.005 140)",
+    "value": "oklch(0.32 0.007 140)",
     "description": "Hover state of the advertising primary control.",
     "components": [
       "wizard"
@@ -993,7 +992,7 @@
   },
   {
     "name": "--intergalactic-control-primary-advertising-active",
-    "value": "oklch(0.4 0.004 140)",
+    "value": "oklch(0.36 0.005 140)",
     "description": "Active (selected) state of the advertising primary control.",
     "components": [
       "wizard"
@@ -1156,7 +1155,7 @@
   },
   {
     "name": "--intergalactic-control-secondary-invert",
-    "value": "oklch(0.983 0.03 140 / 0.183)",
+    "value": "oklch(0.969 0.057 140 / 0.118)",
     "description": "Background of the inverted version of the secondary control.",
     "components": [
       "button"
@@ -1164,7 +1163,7 @@
   },
   {
     "name": "--intergalactic-control-secondary-invert-active",
-    "value": "oklch(0.988 0.021 140 / 0.222)",
+    "value": "oklch(0.986 0.025 140 / 0.203)",
     "description": "Active (selected) state of the inverted version of the secondary control.",
     "components": [
       "button"
@@ -1172,7 +1171,7 @@
   },
   {
     "name": "--intergalactic-control-secondary-invert-hover",
-    "value": "oklch(0.986 0.025 140 / 0.203)",
+    "value": "oklch(0.98 0.036 140 / 0.164)",
     "description": "Hover state of the inverted version of the secondary control.",
     "components": [
       "button"
@@ -1329,7 +1328,7 @@
   },
   {
     "name": "--intergalactic-control-tertiary-invert-active",
-    "value": "oklch(0.988 0.021 140 / 0.222)",
+    "value": "oklch(0.986 0.025 140 / 0.203)",
     "description": "Active (selected) state of the inverted version of the tertiary control.",
     "components": [
       "button"
@@ -1337,7 +1336,7 @@
   },
   {
     "name": "--intergalactic-control-tertiary-invert-hover",
-    "value": "oklch(0.986 0.025 140 / 0.203)",
+    "value": "oklch(0.98 0.036 140 / 0.164)",
     "description": "Hover state of the inverted version of the tertiary control.",
     "components": [
       "button"
@@ -1552,7 +1551,7 @@
   },
   {
     "name": "--intergalactic-feature-popover-bg-neutral",
-    "value": "oklch(0.23 0.01 140)",
+    "value": "oklch(0.21 0.01 140)",
     "description": "Background of the FeaturePopover with neutral theme.",
     "components": [
       "feature-popover"
@@ -1921,7 +1920,7 @@
   },
   {
     "name": "--intergalactic-notice-bubble-bg-info",
-    "value": "oklch(0.23 0.01 140)",
+    "value": "oklch(0.21 0.01 140)",
     "description": "Background of the NoticeBubble.",
     "components": []
   },
@@ -2388,31 +2387,79 @@
     "name": "--intergalactic-tag-additional-bg-hover-active",
     "value": "oklch(0.98 0.001 180)",
     "description": "Hover and active states of the additional Tag background.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
     "name": "--intergalactic-tag-additional-bg-normal",
     "value": "oklch(1 0 0)",
     "description": "Background of the additional Tag in its normal state.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
     "name": "--intergalactic-tag-additional-border",
-    "value": "oklch(0.137 0.026 175.7 / 0.161)",
+    "value": "oklch(0.91 0.002 177.8)",
     "description": "Border color of the additional Tag.",
-    "components": []
+    "components": [
+      "tag"
+    ]
+  },
+  {
+    "name": "--intergalactic-tag-additional-text",
+    "value": "#6a6c6a",
+    "description": "Text color for the additional tag.",
+    "components": [
+      "tag"
+    ]
+  },
+  {
+    "name": "--intergalactic-tag-additional-bg-invert-normal",
+    "value": "transparent",
+    "description": "Additional tag on bold or dark backgrounds—minimal fill in the normal state.",
+    "components": [
+      "tag"
+    ]
+  },
+  {
+    "name": "--intergalactic-tag-additional-bg-invert-hover-active",
+    "value": "oklch(0.98 0.036 140 / 0.164)",
+    "description": "Hover and active states of the additional tag on dark backgrounds.",
+    "components": [
+      "tag"
+    ]
+  },
+  {
+    "name": "--intergalactic-tag-additional-text-invert",
+    "value": "oklch(0.997 0.004 165.9 / 0.684)",
+    "description": "Text color for the additional tag on dark backgrounds.",
+    "components": [
+      "tag"
+    ]
+  },
+  {
+    "name": "--intergalactic-tag-additional-border-invert",
+    "value": "oklch(0.995 0.008 147.4 / 0.391)",
+    "description": "Inverted border color of the additional Tag.",
+    "components": [
+      "tag"
+    ]
   },
   {
-    "name": "--intergalactic-tag-primary-bg-hover",
+    "name": "--intergalactic-tag-primary-bg-hover-active",
     "value": "oklch(0.98 0.001 180)",
-    "description": "Hover state of the primary Tag background.",
+    "description": "Hover and active states of the primary Tag background.",
     "components": []
   },
   {
     "name": "--intergalactic-tag-primary-bg-normal",
     "value": "oklch(1 0 0)",
     "description": "Background of the primary Tag in its normal state.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
     "name": "--intergalactic-tag-primary-blue-hover-active",
@@ -2436,7 +2483,9 @@
     "name": "--intergalactic-tag-primary-border",
     "value": "oklch(1 0 0)",
     "description": "Border color of the primary Tag.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
     "name": "--intergalactic-tag-primary-gray-hover-active",
@@ -2529,24 +2578,28 @@
     "components": []
   },
   {
-    "name": "--intergalactic-tag-primary-white-hover-active",
-    "value": "oklch(0.98 0.001 180)",
-    "description": "Hover and active (selected) state of the primary white tag.",
-    "components": []
+    "name": "--intergalactic-tag-primary-bg-invert-hover-active",
+    "value": "oklch(0.986 0.025 140 / 0.203)",
+    "description": "Hover and active states of the primary tag on dark backgrounds.",
+    "components": [
+      "tag"
+    ]
   },
   {
-    "name": "--intergalactic-tag-primary-white-normal",
-    "value": "oklch(1 0 0)",
+    "name": "--intergalactic-tag-primary-bg-invert-normal",
+    "value": "oklch(0.965 0.065 140 / 0.1)",
     "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.",
     "components": [
       "tag"
     ]
   },
   {
-    "name": "--intergalactic-tag-primary-white-text",
+    "name": "--intergalactic-tag-primary-text-invert",
     "value": "#ffffff",
-    "description": "White text for the primary white tag.",
-    "components": []
+    "description": "Text color for the primary tag on dark backgrounds.",
+    "components": [
+      "tag"
+    ]
   },
   {
     "name": "--intergalactic-tag-primary-yellow-hover-active",
@@ -2568,51 +2621,67 @@
   },
   {
     "name": "--intergalactic-tag-secondary-border",
-    "value": "oklch(0.137 0.026 175.7 / 0.161)",
+    "value": "oklch(0.91 0.002 177.8)",
     "description": "Border color of the secondary Tag.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
     "name": "--intergalactic-tag-secondary-border-invert",
-    "value": "oklch(0.995 0.008 145.9 / 0.369)",
+    "value": "oklch(0.974 0.047 140 / 0.136)",
     "description": "Inverted border color of the secondary Tag.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
-    "name": "--intergalactic-tag-secondary-gray-text",
+    "name": "--intergalactic-tag-secondary-text",
     "value": "#6a6c6a",
-    "description": "Gray text for the default secondary tag.",
-    "components": []
+    "description": "Text color for the default secondary tag.",
+    "components": [
+      "tag"
+    ]
   },
   {
-    "name": "--intergalactic-tag-secondary-hover-active",
+    "name": "--intergalactic-tag-secondary-bg-hover-active",
     "value": "#f4f5f5",
     "description": "Hover and active (selected) states of the background color for the default secondary tag.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
-    "name": "--intergalactic-tag-secondary-normal",
+    "name": "--intergalactic-tag-secondary-bg-normal",
     "value": "#ffffff",
     "description": "Background color for the default secondary tag.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
-    "name": "--intergalactic-tag-secondary-white-hover-active",
-    "value": "rgba(255, 255, 255, 0.1)",
-    "description": "Active state of the secondary white tag.",
-    "components": []
+    "name": "--intergalactic-tag-secondary-bg-invert-hover-active",
+    "value": "oklch(0.98 0.036 140 / 0.164)",
+    "description": "Hover and active states of the secondary tag on dark backgrounds.",
+    "components": [
+      "tag"
+    ]
   },
   {
-    "name": "--intergalactic-tag-secondary-white-normal",
-    "value": "rgba(255, 255, 255, 0)",
+    "name": "--intergalactic-tag-secondary-bg-invert-normal",
+    "value": "transparent",
     "description": "Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.",
-    "components": []
+    "components": [
+      "tag"
+    ]
   },
   {
-    "name": "--intergalactic-tag-secondary-white-text",
-    "value": "#ffffff",
-    "description": "White text for the secondary white tag.",
-    "components": []
+    "name": "--intergalactic-tag-secondary-text-invert",
+    "value": "oklch(0.997 0.004 165.9 / 0.684)",
+    "description": "Text color for the secondary tag on dark backgrounds.",
+    "components": [
+      "tag"
+    ]
   },
   {
     "name": "--intergalactic-text-advertising",
@@ -2843,7 +2912,6 @@
       "feature-highlight",
       "feature-popover",
       "notice-bubble",
-      "tag",
       "tooltip",
       "wizard"
     ]
@@ -2898,7 +2966,7 @@
   },
   {
     "name": "--intergalactic-tooltip-bg-invert",
-    "value": "oklch(0.23 0.01 140)",
+    "value": "oklch(0.21 0.01 140)",
     "description": "Inverted version of the default Tooltip background.",
     "components": []
   },
@@ -2910,7 +2978,7 @@
   },
   {
     "name": "--intergalactic-tooltip-border-invert",
-    "value": "oklch(0.995 0.008 145.9 / 0.369)",
+    "value": "oklch(0.974 0.047 140 / 0.136)",
     "description": "Border of the Tooltip with dark theme.",
     "components": []
   },
@@ -2934,25 +3002,25 @@
   },
   {
     "name": "--intergalactic-wizard-sidebar-bg",
-    "value": "oklch(0.23 0.01 140)",
+    "value": "oklch(0.21 0.01 140)",
     "description": "Background of the Wizard sidebar.",
     "components": []
   },
   {
     "name": "--intergalactic-wizard-sidebar-control",
-    "value": "oklch(0.23 0.01 140)",
+    "value": "oklch(0.21 0.01 140)",
     "description": "Background of the control in the Wizard sidebar in its normal state.",
     "components": []
   },
   {
     "name": "--intergalactic-wizard-sidebar-control-active",
-    "value": "oklch(0.4 0.004 140)",
+    "value": "oklch(0.36 0.005 140)",
     "description": "Active state of the control in the Wizard sidebar.",
     "components": []
   },
   {
     "name": "--intergalactic-wizard-sidebar-control-hover",
-    "value": "oklch(0.36 0.005 140)",
+    "value": "oklch(0.32 0.007 140)",
     "description": "Hover state of the control in the Wizard sidebar.",
     "components": []
   },
@@ -3132,7 +3200,9 @@
     "name": "--intergalactic-spacing-content-padding-small",
     "value": "8px",
     "description": "Small padding for content inside controls and surfaces.",
-    "components": []
+    "components": [
+      "input-tags"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-padding-medium",
@@ -3167,7 +3237,8 @@
     "value": "4px",
     "description": "Small gap between content elements inside controls.",
     "components": [
-      "inline-input"
+      "inline-input",
+      "tag"
     ]
   },
   {
@@ -3184,7 +3255,8 @@
     "value": "8px",
     "description": "Large gap between content elements inside controls.",
     "components": [
-      "button"
+      "button",
+      "tag"
     ]
   },
   {