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 42e1b824a8..de5ba889d3 100644
--- a/semcore/base-components/src/components/hint/style/hint.shadow.css
+++ b/semcore/base-components/src/components/hint/style/hint.shadow.css
@@ -9,7 +9,7 @@ SHintPopper {
   pointer-events: none;
 
   background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert or consider adding hint category */
-  border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert or consider adding hint category */
+  border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.974 0.047 140 / 0.136)); /* TODO: --intergalactic-tooltip-border-invert or consider adding hint category */
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
   padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px);
   border-radius: var(--intergalactic-rounded-small, 4px);
diff --git a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
index 514a43e360..55f2ac81e7 100644
--- a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
+++ b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
@@ -23,13 +23,13 @@ SInputField>ol {
     color: var(--intergalactic-text-placeholder, oklch(0.098 0.023 157.4 / 0.457));
     position: absolute;
     white-space: pre-wrap;
-    padding-left: var(--intergalactic-spacing-4x, 16px);
-    text-indent: calc(-1 * var(--intergalactic-spacing-4x, 16px));
+    padding-left: var(--intergalactic-spacing-content-padding-medium, 12px);
+    text-indent: calc(-1 * var(--intergalactic-spacing-content-padding-medium, 12px));
   }
 
   >li {
     counter-increment: list-counter;
-    margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
+    margin: 0 0 var(--intergalactic-spacing-content-padding-xsmall, 4px) 0;
     position: relative;
     word-break: break-all;
     white-space: pre-wrap;
@@ -48,7 +48,7 @@ SInputField>ol {
 
       text-align: right;
       color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-      margin-right: var(--intergalactic-spacing-1x, 4px);
+      margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
       font-variant-numeric: normal;
       font-weight: 300;
     }
@@ -113,7 +113,7 @@ SInputField[showErrors]>ol[aria-invalid]>li[aria-invalid]:after {
 }
 
 SInputField[size='m']>ol {
-  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);
+  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);
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 142%);
 
@@ -122,16 +122,16 @@ SInputField[size='m']>ol {
   max-height: calc((var(--maxRows) - 1) * (20px + var(--intergalactic-spacing-1x, 4px)) + 18px);
 
   &:empty {
-    padding-left: var(--intergalactic-spacing-8x, 32px);
+    padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + 6px);
 
     &::before {
-      left: calc(var(--intergalactic-spacing-4x, 16px) + 1px);
+      left: var(--intergalactic-spacing-content-padding-medium, 12px);
     }
   }
 }
 
 SInputField[size='l']>ol {
-  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);
+  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);
   font-size: var(--intergalactic-fs-300, 16px);
   line-height: var(--intergalactic-lh-300, 150%);
 
@@ -139,10 +139,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-8x, 32px) + var(--intergalactic-spacing-05x, 2px));
+    padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + var(--intergalactic-spacing-content-padding-small, 8px));
 
     &::before {
-      left: var(--intergalactic-spacing-4x, 16px);
+      left: var(--intergalactic-spacing-content-padding-medium, 12px);
     }
   }
 }
diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css
index 0f20452d60..00aaf3558a 100644
--- a/semcore/button/src/component/Button/button.shadow.css
+++ b/semcore/button/src/component/Button/button.shadow.css
@@ -21,6 +21,7 @@ SButton {
   -webkit-tap-highlight-color: transparent;
   font-weight: var(--intergalactic-medium, 500);
   color: var(--intergalactic-control-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  min-width: fit-content;
 
   &::-moz-focus-inner {
     padding: 0;
@@ -49,7 +50,6 @@ SButton[size='s'] {
 
 SButton[size='m'] {
   height: var(--intergalactic-form-control-m, 32px);
-  min-width: var(--intergalactic-form-control-m, 32px);
   border-radius: var(--intergalactic-control-rounded, 6px);
   font-size: var(--intergalactic-fs-200, 14px);
 }
@@ -61,7 +61,6 @@ SButton[size='m']:has(SAddon:only-child) {
 
 SButton[size='l'] {
   height: var(--intergalactic-form-control-l, 44px);
-  min-width: var(--intergalactic-form-control-l, 44px);
   border-radius: var(--intergalactic-control-rounded, 6px);
   font-size: var(--intergalactic-fs-300, 16px);
 }
@@ -187,18 +186,18 @@ SButton[theme='secondary-muted'] {
 
 SButton[theme='secondary-invert'] {
   color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-  background-color: var(--intergalactic-control-secondary-invert, oklch(0.983 0.03 140 / 0.183));
+  background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118));
 
   &:hover {
     color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-    background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.986 0.025 140 / 0.203));
+    background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.98 0.036 140 / 0.164));
   }
 
   &:active,
   &[active] {
     color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
     background-color: var(--intergalactic-control-secondary-invert-active,
-    oklch(0.988 0.021 140 / 0.222));
+    oklch(0.986 0.025 140 / 0.203));
   }
 }
 
@@ -241,13 +240,13 @@ SButton[theme='tertiary-invert'] {
 
   &:hover {
     color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-    background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.986 0.025 140 / 0.203));
+    background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.98 0.036 140 / 0.164));
   }
 
   &:active,
   &[active] {
     color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-    background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.988 0.021 140 / 0.222));
+    background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.986 0.025 140 / 0.203));
   }
 }
 
diff --git a/semcore/input-tags/src/style/input-tag.shadow.css b/semcore/input-tags/src/style/input-tag.shadow.css
index 08af38ed01..728f238588 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: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
 }
 
 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: calc(var(--intergalactic-spacing-content-padding-xsmall, 4px) + 2px) var(--intergalactic-spacing-content-padding-medium, 12px);
 }
 
 SInputTags STag:focus-visible, SInputTags STagContainerClose:focus-visible {
@@ -59,8 +59,12 @@ SInputTags STag:focus-visible, SInputTags STagContainerClose:focus-visible {
   }
 }
 
-STagContainer {
-  margin: var(--intergalactic-spacing-05x, 2px);
+STagContainer[size='m'] {
+  margin: 0 var(--intergalactic-spacing-05x, 2px) var(--intergalactic-spacing-1x, 4px) 0;
+}
+
+STagContainer[size='l'] {
+  margin: 0 var(--intergalactic-spacing-05x, 2px) var(--intergalactic-spacing-1x, 4px) 0;
 }
 
 STagContainer[editable] {
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 d928d2d486..32a2fdbd83 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..8230924a61 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.95 0.002 180));
+
+  &::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.95 0.002 180));
+  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.969 0.057 140 / 0.118));
+  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.99 0.017 140 / 0.242));
+  }
 }
 
 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/textarea/src/style/textarea.shadow.css b/semcore/textarea/src/style/textarea.shadow.css
index 309681631a..7d76a8e5ec 100644
--- a/semcore/textarea/src/style/textarea.shadow.css
+++ b/semcore/textarea/src/style/textarea.shadow.css
@@ -23,13 +23,15 @@ STextarea {
 }
 
 STextarea[size='m'] {
-  padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px);
+  min-height: var(--intergalactic-form-control-m, 32px);
+  padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 142%);
 }
 
 STextarea[size='l'] {
-  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
+  min-height: var(--intergalactic-form-control-l, 44px);
+  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
   font-size: var(--intergalactic-fs-300, 16px);
   line-height: var(--intergalactic-lh-300, 150%);
 }
diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css
index 6a2e50be7c..9eca898ada 100644
--- a/semcore/tooltip/src/style/tooltip.shadow.css
+++ b/semcore/tooltip/src/style/tooltip.shadow.css
@@ -22,7 +22,7 @@ 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 */
+  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,7 +52,7 @@ 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 */
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/stories/patterns/ux-patterns/form/tests/Form.stories.tsx b/stories/patterns/ux-patterns/form/tests/Form.stories.tsx
new file mode 100644
index 0000000000..ba02060ed7
--- /dev/null
+++ b/stories/patterns/ux-patterns/form/tests/Form.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import HorizontalFormExample from './examples/horizontal-form';
+import VerticalFormExample from './examples/vertical-form';
+
+const meta: Meta = {
+  title: 'Patterns/UX Patterns/Form/Tests',
+};
+
+export const HorizontalForm: StoryObj = {
+  render: HorizontalFormExample,
+};
+
+export const VerticalForm: StoryObj = {
+  render: VerticalFormExample,
+};
+
+export default meta;
diff --git a/stories/patterns/ux-patterns/form/tests/examples/horizontal-form.tsx b/stories/patterns/ux-patterns/form/tests/examples/horizontal-form.tsx
new file mode 100644
index 0000000000..d6668f6e87
--- /dev/null
+++ b/stories/patterns/ux-patterns/form/tests/examples/horizontal-form.tsx
@@ -0,0 +1,117 @@
+import { Flex } from '@semcore/ui/base-components';
+import BulkTextarea from '@semcore/ui/bulk-textarea';
+import Button from '@semcore/ui/button';
+import Flag, { iso2Name } from '@semcore/ui/flags';
+import Input from '@semcore/ui/input';
+import InputTags from '@semcore/ui/input-tags';
+import Textarea from '@semcore/ui/textarea';
+import React from 'react';
+
+type HorizontalFormRowProps = {
+  size: 'm' | 'l';
+};
+
+const HorizontalFormRow = ({ size }: HorizontalFormRowProps) => {
+  const [country, setCountry] = React.useState('');
+  const [tags, setTags] = React.useState(['Tag name', 'Tag name']);
+  const [valueTag, setValueTag] = React.useState('');
+  const [comment, setComment] = React.useState('');
+  const [bulkComment, setBulkComment] = React.useState('');
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    alert(JSON.stringify({ country, tags, comment, bulkComment }));
+  };
+
+  const handleAppendTags = (newTags: string[]) => {
+    setTags((currentTags) => [...currentTags, ...newTags]);
+    setValueTag('');
+  };
+
+  const handleRemoveTag = () => {
+    setTags((currentTags) => {
+      if (currentTags.length === 0) return currentTags;
+      setValueTag((currentValueTag) => `${currentTags.slice(-1)[0]} ${currentValueTag}`);
+      return currentTags.slice(0, -1);
+    });
+  };
+
+  const handleCloseTag = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const index = Number(event.currentTarget.dataset.index);
+    setTags((currentTags) => currentTags.filter((_, tagIndex) => tagIndex !== index));
+  };
+
+  return (
+    <Flex
+      tag='form'
+      onSubmit={handleSubmit}
+      alignItems='flex-start'
+      gap={2}
+      w='100%'
+    >
+      <Input size={size}>
+        <Input.Addon>
+          <Flag iso2='NO' role='img' aria-label={iso2Name['NO']} />
+        </Input.Addon>
+        <Input.Value
+          value={country}
+          onChange={setCountry}
+          placeholder='Placeholder'
+          aria-label='Country'
+        />
+      </Input>
+
+      <InputTags
+        size={size}
+        aria-label='Tags'
+        onAppend={handleAppendTags}
+        onRemove={handleRemoveTag}
+      >
+        {tags.map((tag, idx) => (
+          <InputTags.Tag key={idx}>
+            <InputTags.Tag.Text>{tag}</InputTags.Tag.Text>
+            <InputTags.Tag.Close data-index={idx} onClick={handleCloseTag} />
+          </InputTags.Tag>
+        ))}
+        <InputTags.Value
+          placeholder='Placeholder'
+          value={valueTag}
+          onChange={setValueTag}
+        />
+      </InputTags>
+
+      <Textarea
+        value={comment}
+        onChange={setComment}
+        size={size}
+        minRows={2}
+        placeholder='Placeholder'
+        aria-label='Comment'
+      />
+
+      <BulkTextarea
+        value={bulkComment}
+        onChange={setBulkComment}
+        size={size}
+        minRows={2}
+        w='100%'
+        placeholder='Placeholder'
+      >
+        <BulkTextarea.InputField aria-label='Bulk comment' commonErrorMessage='' />
+      </BulkTextarea>
+
+      <Button type='submit' use='primary' theme='info' size={size}>
+        Primary button
+      </Button>
+    </Flex>
+  );
+};
+
+const Demo = () => (
+  <Flex direction='column' gap={4} w='100%'>
+    <HorizontalFormRow size='m' />
+    <HorizontalFormRow size='l' />
+  </Flex>
+);
+
+export default Demo;
diff --git a/stories/patterns/ux-patterns/form/tests/examples/vertical-form.tsx b/stories/patterns/ux-patterns/form/tests/examples/vertical-form.tsx
new file mode 100644
index 0000000000..2c2d9170bf
--- /dev/null
+++ b/stories/patterns/ux-patterns/form/tests/examples/vertical-form.tsx
@@ -0,0 +1,145 @@
+import { Flex } from '@semcore/ui/base-components';
+import BulkTextarea from '@semcore/ui/bulk-textarea';
+import Button from '@semcore/ui/button';
+import Flag, { iso2Name } from '@semcore/ui/flags';
+import Input from '@semcore/ui/input';
+import InputTags from '@semcore/ui/input-tags';
+import Textarea from '@semcore/ui/textarea';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+type VerticalFormRowProps = {
+  size: 'm' | 'l';
+};
+
+const VerticalFormRow = ({ size }: VerticalFormRowProps) => {
+  const labelSize = size === 'm' ? 200 : 300;
+  const [country, setCountry] = React.useState('');
+  const [tags, setTags] = React.useState(['Tag name', 'Tag name']);
+  const [valueTag, setValueTag] = React.useState('');
+  const [comment, setComment] = React.useState('');
+  const [bulkComment, setBulkComment] = React.useState('');
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    alert(JSON.stringify({ country, tags, comment, bulkComment }));
+  };
+
+  const handleAppendTags = (newTags: string[]) => {
+    setTags((currentTags) => [...currentTags, ...newTags]);
+    setValueTag('');
+  };
+
+  const handleRemoveTag = () => {
+    setTags((currentTags) => {
+      if (currentTags.length === 0) return currentTags;
+      setValueTag((currentValueTag) => `${currentTags.slice(-1)[0]} ${currentValueTag}`);
+      return currentTags.slice(0, -1);
+    });
+  };
+
+  const handleCloseTag = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const index = Number(event.currentTarget.dataset.index);
+    setTags((currentTags) => currentTags.filter((_, tagIndex) => tagIndex !== index));
+  };
+
+  return (
+    <Flex
+      tag='form'
+      onSubmit={handleSubmit}
+      direction='column'
+      alignItems='flex-start'
+      gap={4}
+      w='100%'
+    >
+      <Flex direction='column' w='100%'>
+        <Text tag='label' size={labelSize} mb={2} htmlFor={`country-${size}`}>
+          Country
+        </Text>
+        <Input w='100%' size={size}>
+          <Input.Addon>
+            <Flag iso2='NO' role='img' aria-label={iso2Name['NO']} />
+          </Input.Addon>
+          <Input.Value
+            id={`country-${size}`}
+            value={country}
+            onChange={setCountry}
+            placeholder='Placeholder'
+          />
+        </Input>
+      </Flex>
+
+      <Flex direction='column' w='100%'>
+        <Text tag='label' size={labelSize} mb={2} htmlFor={`tags-${size}`}>
+          Tags
+        </Text>
+        <InputTags
+          size={size}
+          w='100%'
+          onAppend={handleAppendTags}
+          onRemove={handleRemoveTag}
+        >
+          {tags.map((tag, idx) => (
+            <InputTags.Tag key={idx}>
+              <InputTags.Tag.Text>{tag}</InputTags.Tag.Text>
+              <InputTags.Tag.Close data-index={idx} onClick={handleCloseTag} />
+            </InputTags.Tag>
+          ))}
+          <InputTags.Value
+            id={`tags-${size}`}
+            placeholder='Placeholder'
+            value={valueTag}
+            onChange={setValueTag}
+          />
+        </InputTags>
+      </Flex>
+
+      <Flex direction='column' w='100%'>
+        <Text tag='label' size={labelSize} mb={2} htmlFor={`comment-${size}`}>
+          Comment
+        </Text>
+        <Textarea
+          id={`comment-${size}`}
+          value={comment}
+          onChange={setComment}
+          size={size}
+          minRows={2}
+          w='100%'
+          placeholder='Placeholder'
+        />
+      </Flex>
+
+      <Flex direction='column' w='100%'>
+        <Text tag='label' size={labelSize} mb={2} id={`bulk-comment-label-${size}`}>
+          Bulk comment
+        </Text>
+        <BulkTextarea
+          value={bulkComment}
+          onChange={setBulkComment}
+          size={size}
+          minRows={2}
+          w='100%'
+          placeholder='Placeholder'
+        >
+          <BulkTextarea.InputField
+            aria-labelledby={`bulk-comment-label-${size}`}
+            commonErrorMessage=''
+          />
+        </BulkTextarea>
+      </Flex>
+
+      <Button type='submit' use='primary' theme='info' size={size} wMin={120}>
+        Primary button
+      </Button>
+    </Flex>
+  );
+};
+
+const Demo = () => (
+  <Flex direction='row' gap={8} w='100%'>
+    <VerticalFormRow size='m' />
+    <VerticalFormRow size='l' />
+  </Flex>
+);
+
+export default Demo;
diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts
index 7798323064..9d100a8d66 100644
--- a/tools/theme/src/colors/index.ts
+++ b/tools/theme/src/colors/index.ts
@@ -248,9 +248,9 @@ export const L_INV_BG_PRIMARY_HOVER = 0.36;
 export const L_INV_BG_PRIMARY_ACTIVE = 0.4;
 
 /** 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;
@@ -277,4 +277,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 7162068f17..b578fd83a1 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -3,31 +3,67 @@ import type {
   Lightness,
 } from './colors/index.ts';
 import {
-  colors, semanticColors, baseColors, L_BG_PRIMARY, L_BG_PRIMARY_HOVER,
+  colors,
+  semanticColors,
+  baseColors,
+  L_BG_PRIMARY,
+  L_BG_PRIMARY_HOVER,
   L_BG_BUTTON,
-  L_BG_BUTTON_ACTIVE, L_BG_BUTTON_HOVER, L_BG_BUTTON_STRONG, L_BG_BUTTON_STRONG_ACTIVE, L_BG_BUTTON_STRONG_HOVER, L_BG_BUTTON_BRAND, L_BG_BUTTON_BRAND_ACTIVE, L_BG_BUTTON_BRAND_HOVER,
-  L_BG_BUTTON_SECONDARY, L_BG_BUTTON_SECONDARY_ACTIVE, L_BG_BUTTON_SECONDARY_HOVER,
+  L_BG_BUTTON_ACTIVE,
+  L_BG_BUTTON_HOVER,
+  L_BG_BUTTON_STRONG,
+  L_BG_BUTTON_STRONG_ACTIVE,
+  L_BG_BUTTON_STRONG_HOVER,
+  L_BG_BUTTON_BRAND,
+  L_BG_BUTTON_BRAND_ACTIVE,
+  L_BG_BUTTON_BRAND_HOVER,
+  L_BG_BUTTON_SECONDARY,
+  L_BG_BUTTON_SECONDARY_ACTIVE,
+  L_BG_BUTTON_SECONDARY_HOVER,
   L_BG_LIGHT,
   L_BG_MEDIUM,
   L_BG_PRIMARY_ACTIVE,
   L_BG_SECONDARY,
   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_STRONG, L_BORDER_PRIMARY, L_BORDER_PRIMARY_DIMMED, L_BORDER_SECONDARY, 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_BG_SECONDARY_HOVER,
+  L_BG_SELECTED,
+  L_BG_SELECTED_HOVER,
+  L_BG_SKELETON,
+  L_BG_STRONG,
+  L_BORDER_ACTIVE,
+  L_BORDER_FOCUS,
+  L_BORDER_STRONG,
+  L_BORDER_PRIMARY,
+  L_BORDER_PRIMARY_DIMMED,
+  L_BORDER_SECONDARY,
+  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,
   L_INV_BG_PRIMARY_ACTIVE,
-  L_INV_BG_PRIMARY_HOVER, L_INV_BG_SECONDARY,
-  L_INV_BG_SECONDARY_ACTIVE, L_INV_BG_SECONDARY_HOVER,
-  L_INV_BG_SKELETON, L_INV_BORDER_PRIMARY, L_INV_BORDER_SECONDARY, L_INV_ICON_PRIMARY,
+  L_INV_BG_PRIMARY_HOVER,
+  L_INV_BG_SECONDARY,
+  L_INV_BG_SECONDARY_ACTIVE,
+  L_INV_BG_SECONDARY_HOVER,
+  L_INV_BG_SKELETON,
+  L_INV_BORDER_PRIMARY,
+  L_INV_BORDER_SECONDARY,
+  L_INV_ICON_PRIMARY,
   L_INV_ICON_PRIMARY_HOVER,
   L_INV_TEXT_PRIMARY,
-  L_INV_TEXT_SECONDARY, L_INV_TEXT_SECONDARY_HOVER,
+  L_INV_TEXT_SECONDARY,
+  L_INV_TEXT_SECONDARY_HOVER,
   L_TEXT_PLACEHOLDER,
   L_TEXT_PRIMARY,
-  L_TEXT_SECONDARY, L_TEXT_SECONDARY_HOVER,
+  L_TEXT_SECONDARY,
+  L_TEXT_SECONDARY_HOVER,
   L_TEXT_ACCENT,
 } from './colors/index.ts';
 
@@ -1593,12 +1629,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}',
@@ -1680,17 +1736,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',
@@ -1705,36 +1761,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),
@@ -2289,11 +2345,12 @@ export type BaseTokens = {
 };
 
 type FlattenPaths<T> = T extends object
-  ? { [K in keyof T]-?: K extends string | number
-      ? T[K] extends Value
-        ? K
-        : `${K}_${FlattenPaths<T[K]>}`
-      : never
+  ? {
+      [K in keyof T]-?: K extends string | number
+        ? T[K] extends Value
+          ? K
+          : `${K}_${FlattenPaths<T[K]>}`
+        : never
     }[keyof T]
   : '';
 
@@ -3010,9 +3067,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: {
@@ -3062,32 +3128,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: {
@@ -3096,8 +3155,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 642f2595e1..9aec11242d 100644
--- a/website/docs/style/design-tokens/base-tokens.json
+++ b/website/docs/style/design-tokens/base-tokens.json
@@ -867,7 +867,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",
@@ -965,4 +965,4 @@
     "name": "--intergalactic-text-link-invert-hover",
     "value": "oklch(0.999 0.001 180 / 0.949)"
   }
-]
\ No newline at end of file
+]
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index b68789c8b8..f1d5e0e67b 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": []
   },
@@ -209,7 +209,6 @@
       "select",
       "side-panel",
       "slider",
-      "tag",
       "textarea",
       "wizard"
     ]
@@ -505,7 +504,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": []
   },
@@ -1159,7 +1158,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"
@@ -1167,7 +1166,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"
@@ -1175,7 +1174,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"
@@ -1338,7 +1337,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"
@@ -1346,7 +1345,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"
@@ -2415,31 +2414,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.95 0.002 180)",
     "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-primary-bg-hover",
+    "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-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",
@@ -2463,7 +2510,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",
@@ -2556,24 +2605,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.99 0.017 140 / 0.242)",
+    "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.969 0.057 140 / 0.118)",
     "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",
@@ -2595,51 +2648,67 @@
   },
   {
     "name": "--intergalactic-tag-secondary-border",
-    "value": "oklch(0.137 0.026 175.7 / 0.161)",
+    "value": "oklch(0.95 0.002 180)",
     "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",
@@ -2870,7 +2939,6 @@
       "feature-highlight",
       "feature-popover",
       "notice-bubble",
-      "tag",
       "tooltip",
       "wizard"
     ]
@@ -2937,7 +3005,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": []
   },
@@ -3132,6 +3200,7 @@
       "notice",
       "pills",
       "tab-line",
+      "textarea",
       "time-picker"
     ]
   },
@@ -3147,6 +3216,7 @@
       "modal",
       "pills",
       "tab-line",
+      "textarea",
       "time-picker"
     ]
   },
@@ -3154,13 +3224,17 @@
     "name": "--intergalactic-spacing-content-padding-xsmall",
     "value": "4px",
     "description": "Extra small padding for content inside controls and surfaces.",
-    "components": []
+    "components": [
+      "bulk-textarea",
+      "input-tags"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-padding-small",
     "value": "8px",
     "description": "Small padding for content inside controls and surfaces.",
     "components": [
+      "bulk-textarea",
       "modal"
     ]
   },
@@ -3169,10 +3243,13 @@
     "value": "12px",
     "description": "Medium padding for content inside controls and surfaces.",
     "components": [
+      "bulk-textarea",
       "button",
       "card",
       "input",
+      "input-tags",
       "modal",
+      "textarea",
       "time-picker"
     ]
   },
@@ -3180,13 +3257,16 @@
     "name": "--intergalactic-spacing-content-padding-large",
     "value": "16px",
     "description": "Large padding for content inside controls and surfaces.",
-    "components": []
+    "components": [
+      "bulk-textarea"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-padding-xlarge",
     "value": "20px",
     "description": "Extra large padding for content inside controls and surfaces.",
     "components": [
+      "bulk-textarea",
       "card"
     ]
   },
@@ -3203,7 +3283,9 @@
     "value": "4px",
     "description": "Small gap between content elements inside controls.",
     "components": [
-      "inline-input"
+      "bulk-textarea",
+      "inline-input",
+      "tag"
     ]
   },
   {
@@ -3224,7 +3306,8 @@
     "components": [
       "button",
       "checkbox",
-      "radio"
+      "radio",
+      "tag"
     ]
   },
   {