diff --git a/packages/pxweb2-ui/src/index.ts b/packages/pxweb2-ui/src/index.ts
index 3c8afc3f1..67870127e 100644
--- a/packages/pxweb2-ui/src/index.ts
+++ b/packages/pxweb2-ui/src/index.ts
@@ -1,6 +1,7 @@
 export * from './../style-dictionary/dist/js/css-variables';
 export * from './../style-dictionary/dist/js/fixed-variables';
 export * from './lib/components/ActionItem/ActionItem';
+export * from './lib/components/Badge/Badge';
 export * from './lib/components/BottomSheet/BottomSheet';
 export * from './lib/components/Breadcrumbs/Breadcrumbs';
 export * from './lib/components/Button/Button';
@@ -22,6 +23,7 @@ export * from './lib/components/Link/Link';
 export * from './lib/components/LinkCard/LinkCard';
 export * from './lib/components/List';
 export * from './lib/components/LocalAlert/LocalAlert';
+export * from './lib/components/MarkdownRenderer/MarkdownRenderer';
 export * from './lib/components/Notes/MandatoryNotes';
 export * from './lib/components/Notes/MandatoryTableNotes';
 export * from './lib/components/Notes/MandatoryVariableNotes';
@@ -51,7 +53,6 @@ export * from './lib/components/Typography/Ingress/Ingress';
 export * from './lib/components/Typography/Label/Label';
 export * from './lib/components/VariableBox/VariableBox';
 export * from './lib/components/VariableList/VariableList';
-export * from './lib/components/MarkdownRenderer/MarkdownRenderer';
 export * from './lib/shared-types/codelist';
 export * from './lib/shared-types/contact';
 export * from './lib/shared-types/contentInfo';
diff --git a/packages/pxweb2-ui/src/lib/components/Badge/Badge.module.scss b/packages/pxweb2-ui/src/lib/components/Badge/Badge.module.scss
new file mode 100644
index 000000000..96abe0396
--- /dev/null
+++ b/packages/pxweb2-ui/src/lib/components/Badge/Badge.module.scss
@@ -0,0 +1,89 @@
+@use '../../text-styles.scss';
+
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--px-color-text-default);
+  width: fit-content;
+}
+
+/* Colors and variants */
+.color-neutral {
+  &.variant-default {
+    background-color: var(--px-color-surface-moderate);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-subtle);
+  }
+}
+
+.color-info {
+  &.variant-default {
+    color: var(--px-color-text-on-inverted);
+    background-color: var(--px-color-surface-info);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-info-moderate);
+  }
+}
+
+.color-success {
+  &.variant-default {
+    color: var(--px-color-text-on-inverted);
+    background-color: var(--px-color-surface-success);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-success-moderate);
+  }
+}
+
+.color-warning {
+  &.variant-default {
+    background-color: var(--px-color-surface-warning);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-warning-moderate);
+  }
+}
+
+.color-error {
+  &.variant-default {
+    color: var(--px-color-text-on-inverted);
+    background-color: var(--px-color-surface-error);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-error-moderate);
+  }
+}
+
+/* Sizes with or without label */
+.size-medium {
+  border-radius: var(--px-border-radius-small);
+  height: 24px;
+  min-width: 24px;
+  padding: 1px 8px 0 8px;
+
+  &.no-label {
+    border-radius: var(--px-border-radius-full);
+    width: 12px;
+    min-width: 0px;
+    height: 12px;
+    padding: 0;
+  }
+}
+
+.size-large {
+  border-radius: var(--px-border-radius-small);
+  height: 28px;
+  min-width: 28px;
+  padding: 1px 10px 0 10px;
+
+  &.no-label {
+    border-radius: var(--px-border-radius-full);
+    width: 14px;
+    min-width: 0px;
+    height: 14px;
+    padding: 0;
+  }
+}
diff --git a/packages/pxweb2-ui/src/lib/components/Badge/Badge.spec.tsx b/packages/pxweb2-ui/src/lib/components/Badge/Badge.spec.tsx
new file mode 100644
index 000000000..eb8386536
--- /dev/null
+++ b/packages/pxweb2-ui/src/lib/components/Badge/Badge.spec.tsx
@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+import { Badge } from './Badge';
+import classes from './Badge.module.scss';
+
+describe('Badge', () => {
+  it('renders default classes when no props are provided', () => {
+    const { container } = render(<Badge />);
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(badge).toHaveClass(classes.badge);
+    expect(badge).toHaveClass(classes['variant-default']);
+    expect(badge).toHaveClass(classes['color-neutral']);
+    expect(badge).toHaveClass(classes['size-medium']);
+    expect(badge).toHaveClass(classes['no-label']);
+  });
+
+  it('renders a label when label prop is provided', () => {
+    render(<Badge label="9" />);
+
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('9').parentElement).not.toHaveClass(
+      classes['no-label'],
+    );
+  });
+
+  it('renders in no-label mode when label is an empty string', () => {
+    const { container } = render(<Badge label="" />);
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(container.querySelector(`.${classes['label-medium']}`)).toBeNull();
+    expect(badge).toHaveClass(classes['no-label']);
+  });
+
+  it('renders in no-label mode when label is whitespace only', () => {
+    const { container } = render(<Badge label="   " />);
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(badge).toHaveClass(classes['no-label']);
+  });
+
+  it('applies classes for selected variant, color, and size', () => {
+    const { container } = render(
+      <Badge variant="subtle" color="error" size="large" label="11" />,
+    );
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(badge).toHaveClass(classes['variant-subtle']);
+    expect(badge).toHaveClass(classes['color-error']);
+    expect(badge).toHaveClass(classes['size-large']);
+    expect(badge).not.toHaveClass(classes['no-label']);
+  });
+
+  it.each(['neutral', 'info', 'success', 'warning', 'error'] as const)(
+    'applies color class for %s',
+    (color) => {
+      const { container } = render(<Badge color={color} label="4" />);
+      const badge = container.firstElementChild as HTMLElement;
+
+      expect(badge).toHaveClass(classes[`color-${color}`]);
+    },
+  );
+
+  it.each(['default', 'subtle'] as const)(
+    'applies variant class for %s',
+    (variant) => {
+      const { container } = render(<Badge variant={variant} label="4" />);
+      const badge = container.firstElementChild as HTMLElement;
+
+      expect(badge).toHaveClass(classes[`variant-${variant}`]);
+    },
+  );
+
+  it.each(['medium', 'large'] as const)('applies size class for %s', (size) => {
+    const { container } = render(<Badge size={size} label="4" />);
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(badge).toHaveClass(classes[`size-${size}`]);
+  });
+});
diff --git a/packages/pxweb2-ui/src/lib/components/Badge/Badge.stories.tsx b/packages/pxweb2-ui/src/lib/components/Badge/Badge.stories.tsx
new file mode 100644
index 000000000..e9727dce3
--- /dev/null
+++ b/packages/pxweb2-ui/src/lib/components/Badge/Badge.stories.tsx
@@ -0,0 +1,164 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Badge } from './Badge';
+
+const colors = ['neutral', 'info', 'success', 'warning', 'error'] as const;
+const sizes = ['medium', 'large'] as const;
+const variants = ['default', 'subtle'] as const;
+const meta = {
+  component: Badge,
+  title: 'Components/Badge',
+  tags: ['autodocs'],
+  args: {
+    variant: 'default',
+    color: 'neutral',
+    size: 'medium',
+    label: '9',
+  },
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['default', 'subtle'] },
+    color: {
+      control: 'inline-radio',
+      options: ['neutral', 'info', 'success', 'warning', 'error'],
+    },
+    size: { control: 'inline-radio', options: ['medium', 'large'] },
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof Badge>;
+const wrapperStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+} as const;
+const rowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+  flexWrap: 'wrap',
+} as const;
+const labelStyle = {
+  minWidth: '120px',
+  fontWeight: 600,
+} as const;
+
+type Story = StoryObj<typeof meta>;
+type BadgeProps = ComponentProps<typeof Badge>;
+type BadgeRow = { labelText: string; badge: BadgeProps };
+
+function renderBadgeRows(args: BadgeProps, rows: BadgeRow[]) {
+  return (
+    <div style={wrapperStyle}>
+      {rows.map(({ labelText, badge }) => (
+        <div key={labelText} style={rowStyle}>
+          <span style={labelStyle}>{labelText}</span>
+          <Badge {...args} {...badge} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function renderColorRow(
+  args: BadgeProps,
+  keyPrefix: string,
+  badge: BadgeProps,
+) {
+  return (
+    <div style={rowStyle}>
+      {colors.map((color) => (
+        <Badge
+          key={`${keyPrefix}-${color}`}
+          {...args}
+          {...badge}
+          color={color}
+        />
+      ))}
+    </div>
+  );
+}
+
+export const Playground: Story = {};
+
+export const SizeAndLabelStates: Story = {
+  render: (args) =>
+    renderBadgeRows(args, [
+      { labelText: 'Medium with label', badge: { size: 'medium', label: '9' } },
+      { labelText: 'Large with label', badge: { size: 'large', label: '99' } },
+      {
+        labelText: 'Medium without label',
+        badge: { size: 'medium', label: '' },
+      },
+      { labelText: 'Large without label', badge: { size: 'large', label: '' } },
+    ]),
+};
+
+export const ColorsByVariant: Story = {
+  args: { label: '9', size: 'medium' },
+  argTypes: {
+    variant: { control: false },
+    color: { control: false },
+  },
+  render: (args) => (
+    <div style={wrapperStyle}>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Default (with label)</span>
+        {renderColorRow(args, 'default-labeled', { variant: 'default' })}
+      </div>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Default (without label)</span>
+        {renderColorRow(args, 'default-unlabeled', {
+          variant: 'default',
+          label: '',
+        })}
+      </div>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Subtle (with label)</span>
+        {renderColorRow(args, 'subtle-labeled', { variant: 'subtle' })}
+      </div>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Subtle (without label)</span>
+        {renderColorRow(args, 'subtle-unlabeled', {
+          variant: 'subtle',
+          label: '',
+        })}
+      </div>
+    </div>
+  ),
+};
+
+export const AllCombinations: Story = {
+  args: { label: '9' },
+  argTypes: {
+    variant: { control: false },
+    color: { control: false },
+    size: { control: false },
+    label: { control: false },
+  },
+  render: (args) => (
+    <div style={wrapperStyle}>
+      {variants.map((variant) =>
+        sizes.map((size) => (
+          <div key={`${variant}-${size}`} style={rowStyle}>
+            <span style={labelStyle}>{`${variant} / ${size}`}</span>
+
+            {/* With label */}
+            {renderColorRow(args, `${variant}-${size}-labeled`, {
+              variant,
+              size,
+            })}
+
+            {/* Without label */}
+            {renderColorRow(args, `${variant}-${size}-unlabeled`, {
+              variant,
+              size,
+              label: '',
+            })}
+          </div>
+        )),
+      )}
+    </div>
+  ),
+};
+
+export default meta;
diff --git a/packages/pxweb2-ui/src/lib/components/Badge/Badge.tsx b/packages/pxweb2-ui/src/lib/components/Badge/Badge.tsx
new file mode 100644
index 000000000..739353c5c
--- /dev/null
+++ b/packages/pxweb2-ui/src/lib/components/Badge/Badge.tsx
@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+
+import classes from './Badge.module.scss';
+
+interface Badge {
+  readonly variant?: 'default' | 'subtle';
+  readonly color?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
+  readonly size?: 'medium' | 'large';
+  readonly label?: string;
+}
+
+export function Badge({
+  variant = 'default',
+  color = 'neutral',
+  size = 'medium',
+  label,
+}: Badge) {
+  const withoutLabel = !label || label.trim() === '';
+
+  return (
+    <span
+      className={clsx(
+        classes['badge'],
+        classes[`color-${color}`],
+        classes[`size-${size}`],
+        classes[`variant-${variant}`],
+        { [classes['no-label']]: withoutLabel },
+      )}
+    >
+      {label && <span className={classes['label-medium']}>{label}</span>}
+    </span>
+  );
+}
+
+export default Badge;
diff --git a/packages/pxweb2-ui/src/lib/components/TableCard/TableCard.tsx b/packages/pxweb2-ui/src/lib/components/TableCard/TableCard.tsx
index 834d8d52a..ff22298f0 100644
--- a/packages/pxweb2-ui/src/lib/components/TableCard/TableCard.tsx
+++ b/packages/pxweb2-ui/src/lib/components/TableCard/TableCard.tsx
@@ -97,7 +97,8 @@ export const TableCard = forwardRef<HTMLElement, TableCardProps>(
                 <div className={cl(styles.frequency)}>
                   <Tag
                     size="small"
-                    variant={status === 'closed' ? 'error-subtle' : 'subtle'}
+                    color={status === 'closed' ? 'error-subtle' : 'subtle'}
+                    variant={status === 'closed' ? 'border' : 'default'}
                   >
                     {frequency}
                   </Tag>
@@ -113,7 +114,7 @@ export const TableCard = forwardRef<HTMLElement, TableCardProps>(
               )}
             </div>
             {tableId && (
-              <Tag size="small" type="border" variant="subtle">
+              <Tag size="small" color="subtle" variant="border">
                 {tableId}
               </Tag>
             )}
diff --git a/packages/pxweb2-ui/src/lib/components/Tag/Tag.module.scss b/packages/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
index 7ca48d671..8b72c3c58 100644
--- a/packages/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
+++ b/packages/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
@@ -1,4 +1,3 @@
-@use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
 @use '../../text-styles.scss';
 
 .tag {
@@ -7,85 +6,105 @@
   align-items: center;
 }
 
-.medium {
+.size-medium {
   min-height: 32px;
   padding: 5px 8px 4px 8px;
   border-radius: var(--px-border-radius-small);
 }
 
-.small {
+.size-small {
   min-height: 24px;
   padding: 2px 4px 2px 4px;
   border-radius: var(--px-border-radius-xsmall);
-  &.border {
+
+  &.variant-border {
     padding: 1px 4px 2px 4px;
   }
 }
 
-.xsmall {
+.size-xsmall {
   min-height: 20px;
   padding: 2px 4px 0px;
   border-radius: var(--px-border-radius-xsmall);
+
+  &.variant-border {
+    padding: 1px 4px 0px;
+  }
 }
 
-.subtle {
-  background-color: var(--px-color-surface-subtle);
-  &.border {
+.color-subtle {
+  &.variant-default {
+    background-color: var(--px-color-surface-subtle);
+  }
+
+  &.variant-border {
     background-color: var(--px-color-surface-default);
     outline: 1px solid var(--px-color-border-subtle);
     outline-offset: -1px;
   }
 }
 
-.neutral {
-  background-color: var(--px-color-surface-moderate);
-  &.border {
+.color-neutral {
+  &.variant-default {
+    background-color: var(--px-color-surface-moderate);
+  }
+
+  &.variant-border {
     background-color: var(--px-color-surface-subtle);
     outline: 1px solid var(--px-color-border-moderate);
     outline-offset: -1px;
   }
 }
 
-.info {
-  background-color: var(--px-color-surface-info-moderate);
-  &.border {
+.color-info {
+  &.variant-default {
+    background-color: var(--px-color-surface-info-moderate);
+  }
+
+  &.variant-border {
     background-color: var(--px-color-surface-info-subtle);
     outline: 1px solid var(--px-color-border-info);
     outline-offset: -1px;
   }
 }
 
-.success {
-  background-color: var(--px-color-surface-success-moderate);
-  &.border {
+.color-success {
+  &.variant-default {
+    background-color: var(--px-color-surface-success-moderate);
+  }
+
+  &.variant-border {
     background-color: var(--px-color-surface-success-subtle);
     outline: 1px solid var(--px-color-border-success);
     outline-offset: -1px;
   }
 }
 
-.warning {
-  background-color: var(--px-color-surface-warning-moderate);
-  &.border {
+.color-warning {
+  &.variant-default {
+    background-color: var(--px-color-surface-warning-moderate);
+  }
+
+  &.variant-border {
     background-color: var(--px-color-surface-warning-subtle);
     outline: 1px solid var(--px-color-border-warning);
     outline-offset: -1px;
   }
 }
 
-.error {
-  background-color: var(--px-color-surface-error-moderate);
-  &.border {
+.color-error {
+  &.variant-default {
+    background-color: var(--px-color-surface-error-moderate);
+  }
+
+  &.variant-border {
     background-color: var(--px-color-surface-error-subtle);
     outline: 1px solid var(--px-color-border-error);
     outline-offset: -1px;
   }
 }
 
-.error-subtle {
+/* Subtle error variant without border. Looks the same in both default and border variants. */
+.color-error-subtle {
   background-color: var(--px-color-surface-error-subtle);
 }
-
-.default {
-  border: none;
-}
diff --git a/packages/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx b/packages/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx
index 6b9719cdb..a1a08cfa7 100644
--- a/packages/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx
+++ b/packages/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx
@@ -1,10 +1,96 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
 
-import Tag from './Tag';
+import { Tag } from './Tag';
+import classes from './Tag.module.scss';
 
 describe('Tag', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Tag />);
-    expect(baseElement).toBeTruthy();
+  it('renders default classes when no props are provided', () => {
+    const { container } = render(<Tag />);
+    const tag = container.firstElementChild as HTMLElement;
+
+    expect(tag).toHaveClass(classes.tag);
+    expect(tag).toHaveClass(classes['variant-default']);
+    expect(tag).toHaveClass(classes['color-neutral']);
+    expect(tag).toHaveClass(classes['size-medium']);
+    expect(tag).toHaveClass(classes['label-medium']);
+  });
+
+  it('renders children when provided', () => {
+    render(<Tag>Tag text</Tag>);
+
+    expect(screen.getByText('Tag text')).toBeInTheDocument();
+  });
+
+  it('applies selected variant, color, and size classes', () => {
+    const { container } = render(
+      <Tag variant="border" color="error" size="small">
+        Tag
+      </Tag>,
+    );
+    const tag = container.firstElementChild as HTMLElement;
+
+    expect(tag).toHaveClass(classes['variant-border']);
+    expect(tag).toHaveClass(classes['color-error']);
+    expect(tag).toHaveClass(classes['size-small']);
+    expect(tag).toHaveClass(classes['label-small']);
+  });
+
+  it('passes through HTML span attributes and merges className', () => {
+    render(
+      <Tag
+        title="tag-title"
+        aria-label="tag-aria"
+        data-testid="tag-element"
+        className="custom-tag"
+      >
+        Tag
+      </Tag>,
+    );
+
+    const tag = screen.getByTestId('tag-element');
+    expect(tag).toHaveAttribute('title', 'tag-title');
+    expect(tag).toHaveAttribute('aria-label', 'tag-aria');
+    expect(tag).toHaveClass('custom-tag');
+  });
+
+  it.each(['neutral', 'info', 'success', 'warning', 'error'] as const)(
+    'applies color class for %s',
+    (color) => {
+      const { container } = render(<Tag color={color}>Tag</Tag>);
+      const tag = container.firstElementChild as HTMLElement;
+
+      expect(tag).toHaveClass(classes[`color-${color}`]);
+    },
+  );
+
+  it.each(['default', 'border'] as const)(
+    'applies variant class for %s',
+    (variant) => {
+      const { container } = render(<Tag variant={variant}>Tag</Tag>);
+      const tag = container.firstElementChild as HTMLElement;
+
+      expect(tag).toHaveClass(classes[`variant-${variant}`]);
+    },
+  );
+
+  it.each(['medium', 'small', 'xsmall'] as const)(
+    'applies size class for %s',
+    (size) => {
+      const { container } = render(<Tag size={size}>Tag</Tag>);
+      const tag = container.firstElementChild as HTMLElement;
+
+      expect(tag).toHaveClass(classes[`size-${size}`]);
+    },
+  );
+
+  it('uses label-medium for medium and label-small for non-medium sizes', () => {
+    const { container: mediumContainer } = render(<Tag size="medium">Tag</Tag>);
+    const mediumTag = mediumContainer.firstElementChild as HTMLElement;
+    expect(mediumTag).toHaveClass(classes['label-medium']);
+
+    const { container: smallContainer } = render(<Tag size="small">Tag</Tag>);
+    const smallTag = smallContainer.firstElementChild as HTMLElement;
+    expect(smallTag).toHaveClass(classes['label-small']);
   });
 });
diff --git a/packages/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx b/packages/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx
index 7eed57355..6d1c1fd59 100644
--- a/packages/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx
+++ b/packages/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx
@@ -1,99 +1,142 @@
-import type { Meta, StoryFn } from '@storybook/react-vite';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
 import { Tag } from './Tag';
 
-const meta: Meta<typeof Tag> = {
+const colors = [
+  'subtle',
+  'neutral',
+  'info',
+  'success',
+  'warning',
+  'error',
+  'error-subtle',
+] as const;
+const sizes = ['medium', 'small', 'xsmall'] as const;
+const variants = ['default', 'border'] as const;
+
+const meta = {
   component: Tag,
   title: 'Components/Tag',
-};
-export default meta;
-
-const text = 'Tag';
-
-export const Default = {
+  tags: ['autodocs'],
   args: {
     size: 'medium',
-    variant: 'neutral',
-    type: 'default',
-    children: text,
+    variant: 'default',
+    color: 'neutral',
+    children: 'Tag',
   },
   argTypes: {
-    size: {
-      options: ['medium', 'small', 'xsmall'],
-      control: { type: 'radio' },
-    },
+    size: { control: 'inline-radio', options: ['medium', 'small', 'xsmall'] },
     variant: {
-      options: [
-        'neutral',
-        'subtle',
-        'info',
-        'success',
-        'warning',
-        'error',
-        'error-subtle',
-      ],
-      control: { type: 'radio' },
-    },
-    type: {
+      control: 'inline-radio',
       options: ['default', 'border'],
-      control: { type: 'radio' },
     },
+    color: {
+      control: 'inline-radio',
+      options: ['neutral', 'info', 'success', 'warning', 'error'],
+    },
+    children: { control: 'text' },
   },
-};
+} satisfies Meta<typeof Tag>;
 
-export const Size: StoryFn<typeof Tag> = () => {
-  return (
-    <>
-      <h1>Size</h1>
+const wrapperStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+} as const;
 
-      <h2>default:</h2>
-      <Tag>{text}</Tag>
+const rowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+  flexWrap: 'wrap',
+} as const;
 
-      <h2>medium:</h2>
-      <Tag size="medium">{text}</Tag>
+const labelStyle = {
+  minWidth: '150px',
+  fontWeight: 600,
+} as const;
 
-      <h2>small:</h2>
-      <Tag size="small">{text}</Tag>
+type Story = StoryObj<typeof meta>;
+type TagProps = ComponentProps<typeof Tag>;
+type TagRow = { labelText: string; tag: TagProps };
 
-      <h2>xsmall:</h2>
-      <Tag size="xsmall">{text}</Tag>
-    </>
+function renderTagRows(args: TagProps, rows: TagRow[]) {
+  return (
+    <div style={wrapperStyle}>
+      {rows.map(({ labelText, tag }) => (
+        <div key={labelText} style={rowStyle}>
+          <span style={labelStyle}>{labelText}</span>
+          <Tag {...args} {...tag} />
+        </div>
+      ))}
+    </div>
   );
-};
+}
 
-export const Variant: StoryFn<typeof Tag> = () => {
+function renderColorRow(args: TagProps, keyPrefix: string, tag: TagProps) {
   return (
-    <>
-      <h1>Variant</h1>
-      <h2>default:</h2>
-      <Tag>{text}</Tag>
-      <h2>subtle:</h2>
-      <Tag variant="subtle">{text}</Tag>
-      <h2>neutral:</h2>
-      <Tag variant="neutral">{text}</Tag>
-      <h2>info:</h2>
-      <Tag variant="info">{text}</Tag>
-      <h2>success:</h2>
-      <Tag variant="success">{text}</Tag>
-      <h2>warning:</h2>
-      <Tag variant="warning">{text}</Tag>
-      <h2>error:</h2>
-      <Tag variant="error">{text}</Tag>
-      <h2>error-subtle:</h2>
-      <Tag variant="error-subtle">{text}</Tag>
-    </>
+    <div style={rowStyle}>
+      {colors.map((color) => (
+        <Tag key={`${keyPrefix}-${color}`} {...args} {...tag} color={color}>
+          {color}
+        </Tag>
+      ))}
+    </div>
   );
-};
+}
 
-export const Type: StoryFn<typeof Tag> = () => {
-  return (
-    <>
-      <h1>Type</h1>
+export const Playground: Story = {};
 
-      <h2>default:</h2>
-      <Tag type="default">{text}</Tag>
+export const SizeStates: Story = {
+  render: (args) =>
+    renderTagRows(args, [
+      { labelText: 'Medium', tag: { size: 'medium' } },
+      { labelText: 'Small', tag: { size: 'small' } },
+      { labelText: 'Xsmall', tag: { size: 'xsmall' } },
+    ]),
+};
 
-      <h2>border:</h2>
-      <Tag type="border">{text}</Tag>
-    </>
-  );
+export const ColorsByVariant: Story = {
+  args: { children: 'Tag', size: 'medium' },
+  argTypes: {
+    variant: { control: false },
+    color: { control: false },
+  },
+  render: (args) => (
+    <div style={wrapperStyle}>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Default</span>
+        {renderColorRow(args, 'default', { variant: 'default' })}
+      </div>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Border</span>
+        {renderColorRow(args, 'border', { variant: 'border' })}
+      </div>
+    </div>
+  ),
 };
+
+export const AllCombinations: Story = {
+  args: { children: 'Tag' },
+  argTypes: {
+    variant: { control: false },
+    color: { control: false },
+    size: { control: false },
+    children: { control: false },
+  },
+  render: (args) => (
+    <div style={wrapperStyle}>
+      {variants.map((variant) =>
+        sizes.map((size) => (
+          <div key={`${variant}-${size}`} style={rowStyle}>
+            <span style={labelStyle}>{`${variant} / ${size}`}</span>
+            {renderColorRow(args, `${variant}-${size}`, { variant, size })}
+          </div>
+        )),
+      )}
+    </div>
+  ),
+};
+
+export default meta;
diff --git a/packages/pxweb2-ui/src/lib/components/Tag/Tag.tsx b/packages/pxweb2-ui/src/lib/components/Tag/Tag.tsx
index 0f1993570..26e0b3a53 100644
--- a/packages/pxweb2-ui/src/lib/components/Tag/Tag.tsx
+++ b/packages/pxweb2-ui/src/lib/components/Tag/Tag.tsx
@@ -1,40 +1,40 @@
-import cl from 'clsx';
+import clsx from 'clsx';
 
 import classes from './Tag.module.scss';
 
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: 'medium' | 'small' | 'xsmall';
-  variant?:
+  variant?: 'default' | 'border';
+  color?:
+    | 'subtle'
     | 'neutral'
     | 'info'
     | 'success'
     | 'warning'
     | 'error'
-    | 'subtle'
     | 'error-subtle';
-  type?: 'default' | 'border';
   children?: React.ReactNode;
 }
 
 export function Tag({
   size = 'medium',
-  variant = 'neutral',
-  type = 'default',
+  variant = 'default',
+  color = 'neutral',
   children,
+  className,
   ...rest
 }: TagProps) {
-  let textStyle = 'label-small';
-  if (size === 'medium') {
-    textStyle = 'label-medium';
-  }
+  const textStyle = size === 'medium' ? 'label-medium' : 'label-small';
+
   return (
     <span
-      className={cl(
+      className={clsx(
         classes.tag,
-        classes[size],
+        classes[`size-${size}`],
+        classes[`color-${color}`],
+        classes[`variant-${variant}`],
         classes[textStyle],
-        classes[variant],
-        classes[type],
+        className,
       )}
       {...rest}
     >
diff --git a/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxHeader/VariableBoxHeader.tsx b/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxHeader/VariableBoxHeader.tsx
index ce04cf8e9..d57c7d562 100644
--- a/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxHeader/VariableBoxHeader.tsx
+++ b/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxHeader/VariableBoxHeader.tsx
@@ -69,7 +69,7 @@ export function VariableBoxHeader({
             {label}
           </Heading>
           <div id={tagsId} className={cl(classes['header-tags'])}>
-            <Tag variant="neutral">
+            <Tag color="neutral" variant="default">
               {t(
                 'presentation_page.side_menu.selection.variablebox.header.tag_selected',
                 {
@@ -83,7 +83,7 @@ export function VariableBoxHeader({
               )}
             </Tag>
             {mandatory && (
-              <Tag variant="info">
+              <Tag color="info" variant="default">
                 {t(
                   'presentation_page.side_menu.selection.variablebox.header.tag_mandatory',
                 )}
diff --git a/packages/pxweb2-ui/style-dictionary/src/default_theme.json b/packages/pxweb2-ui/style-dictionary/src/default_theme.json
index 3e26c350e..b5eed5f09 100644
--- a/packages/pxweb2-ui/style-dictionary/src/default_theme.json
+++ b/packages/pxweb2-ui/style-dictionary/src/default_theme.json
@@ -33,7 +33,6 @@
       "transparent": {
         "value": "#FFFFFF00"
       }
-
     },
     "brand-alpha": {
       "800": {
@@ -60,7 +59,7 @@
         "value": "#F5533D"
       },
       "600": {
-        "value": "#E23822"
+        "value": "#DD2913"
       },
       "700": {
         "value": "#BF2B18"
@@ -92,7 +91,7 @@
         "value": "#EB9C07"
       },
       "600": {
-        "value": "#CB7603"
+        "value": "#D6850F"
       },
       "700": {
         "value": "#A25206"
@@ -312,24 +311,36 @@
       "neutral-moderate": {
         "value": "{color.neutral.200}"
       },
+      "info": {
+        "value": "{color.info.600}"
+      },
       "info-subtle": {
         "value": "{color.info.100}"
       },
       "info-moderate": {
         "value": "{color.info.200}"
       },
+      "success": {
+        "value": "{color.success.600}"
+      },
       "success-subtle": {
         "value": "{color.success.100}"
       },
       "success-moderate": {
         "value": "{color.success.200}"
       },
+      "warning": {
+        "value": "{color.warning.600}"
+      },
       "warning-subtle": {
         "value": "{color.warning.100}"
       },
       "warning-moderate": {
         "value": "{color.warning.200}"
       },
+      "error": {
+        "value": "{color.danger.600}"
+      },
       "error-subtle": {
         "value": "{color.danger.100}"
       },
diff --git a/packages/pxweb2/public/theme/variables.css b/packages/pxweb2/public/theme/variables.css
index 235d70d44..472accb58 100644
--- a/packages/pxweb2/public/theme/variables.css
+++ b/packages/pxweb2/public/theme/variables.css
@@ -20,7 +20,7 @@
   --px-color-danger-300: #FFBBB3;
   --px-color-danger-400: #FD7E6D;
   --px-color-danger-500: #F5533D;
-  --px-color-danger-600: #E23822;
+  --px-color-danger-600: #DD2913;
   --px-color-danger-700: #BF2B18;
   --px-color-danger-800: #8A2215;
   --px-color-danger-900: #5E1D13;
@@ -30,7 +30,7 @@
   --px-color-warning-300: #FED85D;
   --px-color-warning-400: #FCBF27;
   --px-color-warning-500: #EB9C07;
-  --px-color-warning-600: #CB7603;
+  --px-color-warning-600: #D6850F;
   --px-color-warning-700: #A25206;
   --px-color-warning-800: #783B0D;
   --px-color-warning-900: #47210B;
@@ -99,12 +99,16 @@
   --px-color-surface-action-subtle-active: var(--px-color-brand-200);
   --px-color-surface-neutral-subtle: var(--px-color-neutral-100);
   --px-color-surface-neutral-moderate: var(--px-color-neutral-200);
+  --px-color-surface-info: var(--px-color-info-600);
   --px-color-surface-info-subtle: var(--px-color-info-100);
   --px-color-surface-info-moderate: var(--px-color-info-200);
+  --px-color-surface-success: var(--px-color-success-600);
   --px-color-surface-success-subtle: var(--px-color-success-100);
   --px-color-surface-success-moderate: var(--px-color-success-200);
+  --px-color-surface-warning: var(--px-color-warning-600);
   --px-color-surface-warning-subtle: var(--px-color-warning-100);
   --px-color-surface-warning-moderate: var(--px-color-warning-200);
+  --px-color-surface-error: var(--px-color-danger-600);
   --px-color-surface-error-subtle: var(--px-color-danger-100);
   --px-color-surface-error-moderate: var(--px-color-danger-200);
   --px-color-border-default: var(--px-color-brand-900);