From f3c1b52a0bcd769f38003368ab935f14d18c253f Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 29 Sep 2026 10:51:30 -0300
Subject: [PATCH 1/5] feat(chip): add semantic variants, a solid fill and a
 status dot

The five status colours, the one filled variant, and ChipDot, a leading
dot in currentColor so it follows the variant with nothing to wire.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/web/components/base/Chip/Chip.scss   | 25 ++++++++++++++++
 frontend/web/components/base/Chip/Chip.tsx    | 30 +++++++++++++++++--
 frontend/web/components/base/Chip/ChipDot.tsx |  6 ++++
 frontend/web/components/base/Chip/index.ts    |  1 +
 4 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 frontend/web/components/base/Chip/ChipDot.tsx

diff --git a/frontend/web/components/base/Chip/Chip.scss b/frontend/web/components/base/Chip/Chip.scss
index 854427ce3f98..3407d57ff58d 100644
--- a/frontend/web/components/base/Chip/Chip.scss
+++ b/frontend/web/components/base/Chip/Chip.scss
@@ -13,13 +13,38 @@
     border-color: var(--color-border-action);
   }
 
+  // Status colours carry their meaning in the fill, so an outline only adds
+  // noise. Transparent rather than removed, so a status chip is the same
+  // height as a bordered one beside it.
+  &--success,
+  &--warning,
+  &--danger,
+  &--info,
+  &--muted,
+  &--solid {
+    border-color: transparent;
+  }
+
+  // Status dot. currentColor, so it follows the variant with nothing to wire.
+  &__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: currentColor;
+    flex-shrink: 0;
+  }
+
   // Sizes (default is the base above).
   &--sm {
     padding: 3px 8px;
     font-size: 0.75rem;
   }
 
+  // 24px is fixed in the tags frame, so it is stated rather than left to derive
+  // from the inherited line-height. The frame's 8px vertical padding is an
+  // artefact of a height override on the auto-layout and is not applied.
   &--xs {
+    height: 24px;
     padding: 1px 6px;
     font-size: 0.6875rem;
   }
diff --git a/frontend/web/components/base/Chip/Chip.tsx b/frontend/web/components/base/Chip/Chip.tsx
index 296219372dda..d36339af60ab 100644
--- a/frontend/web/components/base/Chip/Chip.tsx
+++ b/frontend/web/components/base/Chip/Chip.tsx
@@ -5,7 +5,15 @@ import { colorIconSecondary } from 'common/theme/tokens'
 import './Chip.scss'
 
 export type ChipSize = 'default' | 'sm' | 'xs'
-export type ChipVariant = 'neutral' | 'accent'
+export type ChipVariant =
+  | 'neutral'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'muted'
+  | 'solid'
 
 export type ChipProps = {
   children: ReactNode
@@ -30,7 +38,21 @@ export type ChipProps = {
 // bg + text come from token utilities; the variant border lives in Chip.scss.
 const VARIANT_UTILITIES: Record<ChipVariant, string> = {
   accent: 'bg-surface-action-subtle text-action',
+
+  danger: 'bg-surface-danger text-danger',
+
+  info: 'bg-surface-info text-info',
+
+  muted: 'bg-surface-muted text-secondary',
+
   neutral: 'bg-surface-subtle text-default',
+  // The one filled variant. `text-white` rather than a token because there is
+  // no inverse-text token yet; white on --color-surface-action is 5.93:1, so AA
+  // but not AAA. Note the app has a second, darker solid (`bg-primary900`, used
+  // by BetaFlag and PlanBasedAccess) that this deliberately does not cover.
+  solid: 'bg-surface-action text-white',
+  success: 'bg-surface-success text-success',
+  warning: 'bg-surface-warning text-warning',
 }
 
 // Token-based chip primitive. Uses `ds-chip` rather than the legacy `.chip`
@@ -58,10 +80,12 @@ const Chip = ({
     <span
       ref={ref}
       className={classNames(
-        'ds-chip d-inline-flex align-items-center align-middle gap-1 rounded-sm',
+        // rounded-md is 6px, fixed by the tags frame in Figma. Not a prop:
+        // every chip is the same shape.
+        'ds-chip d-inline-flex align-items-center align-middle gap-1 rounded-md',
         VARIANT_UTILITIES[variant],
+        `ds-chip--${variant}`,
         {
-          'ds-chip--accent': variant === 'accent',
           'ds-chip--clickable': interactive,
           [`ds-chip--${size}`]: size !== 'default',
           'ds-chip--truncate': truncate,
diff --git a/frontend/web/components/base/Chip/ChipDot.tsx b/frontend/web/components/base/Chip/ChipDot.tsx
new file mode 100644
index 000000000000..c00876159cce
--- /dev/null
+++ b/frontend/web/components/base/Chip/ChipDot.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react'
+
+// The leading dot on a status chip. Decorative: the label carries the meaning.
+const ChipDot: FC = () => <span className='ds-chip__dot' aria-hidden='true' />
+
+export default ChipDot
diff --git a/frontend/web/components/base/Chip/index.ts b/frontend/web/components/base/Chip/index.ts
index 7b7ac073a3c4..3667ea1425cc 100644
--- a/frontend/web/components/base/Chip/index.ts
+++ b/frontend/web/components/base/Chip/index.ts
@@ -1,2 +1,3 @@
 export { default } from './Chip'
+export { default as ChipDot } from './ChipDot'
 export type { ChipProps, ChipSize, ChipVariant } from './Chip'

From aeef61649b056bd2fa06edd65560ae14040a463b Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 29 Sep 2026 10:51:30 -0300
Subject: [PATCH 2/5] refactor(experiments): rebuild StatusBadge on the chip
 primitive

Drops 51 lines of hand-written colour pairs the semantic tokens already
cover. The badge goes from fully rounded to the 6px the design system
fixes for a chip.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../experiments/StatusBadge/StatusBadge.scss  | 51 -------------------
 .../experiments/StatusBadge/StatusBadge.tsx   | 23 +++++----
 2 files changed, 14 insertions(+), 60 deletions(-)
 delete mode 100644 frontend/web/components/experiments/StatusBadge/StatusBadge.scss

diff --git a/frontend/web/components/experiments/StatusBadge/StatusBadge.scss b/frontend/web/components/experiments/StatusBadge/StatusBadge.scss
deleted file mode 100644
index bc8234e2ec38..000000000000
--- a/frontend/web/components/experiments/StatusBadge/StatusBadge.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  border-radius: var(--radius-full);
-  font-size: var(--font-caption-xs-size);
-  font-weight: var(--font-weight-medium);
-
-  &__dot {
-    width: 6px;
-    height: 6px;
-    border-radius: var(--radius-full);
-  }
-
-  &--created {
-    background: var(--color-surface-info);
-    color: var(--color-text-info);
-
-    .status-badge__dot {
-      background: var(--color-text-info);
-    }
-  }
-
-  &--running {
-    background: var(--color-surface-success);
-    color: var(--color-text-success);
-
-    .status-badge__dot {
-      background: var(--color-text-success);
-    }
-  }
-
-  &--paused {
-    background: var(--color-surface-warning);
-    color: var(--color-text-warning);
-
-    .status-badge__dot {
-      background: var(--color-text-warning);
-    }
-  }
-
-  &--completed {
-    background: var(--color-surface-muted);
-    color: var(--color-text-secondary);
-
-    .status-badge__dot {
-      background: var(--color-text-secondary);
-    }
-  }
-}
diff --git a/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx b/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
index 10561dfde212..d598ba20448b 100644
--- a/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
+++ b/frontend/web/components/experiments/StatusBadge/StatusBadge.tsx
@@ -1,19 +1,24 @@
 import { FC } from 'react'
+import Chip, { ChipDot, ChipVariant } from 'components/base/Chip'
 import { ExperimentStatus } from 'common/types/responses'
 import { EXPERIMENT_STATUS_LABELS } from 'components/experiments/constants'
-import './StatusBadge.scss'
+
+const STATUS_VARIANTS: Record<ExperimentStatus, ChipVariant> = {
+  completed: 'muted',
+  created: 'info',
+  paused: 'warning',
+  running: 'success',
+}
 
 type StatusBadgeProps = {
   status: ExperimentStatus
 }
 
-const StatusBadge: FC<StatusBadgeProps> = ({ status }) => {
-  return (
-    <span className={`status-badge status-badge--${status}`}>
-      <span className='status-badge__dot' />
-      {EXPERIMENT_STATUS_LABELS[status]}
-    </span>
-  )
-}
+const StatusBadge: FC<StatusBadgeProps> = ({ status }) => (
+  <Chip variant={STATUS_VARIANTS[status]} size='sm'>
+    <ChipDot />
+    {EXPERIMENT_STATUS_LABELS[status]}
+  </Chip>
+)
 
 export default StatusBadge

From 0eab747ecf0a594ca9e71ba29a1922d5248df948 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 29 Sep 2026 10:51:30 -0300
Subject: [PATCH 3/5] docs(chip): story the status variants and the dot

Chromatic only snapshots what a story renders, so the statuses, the
solid fill and ChipDot had no visual coverage.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../documentation/components/Chip.stories.tsx | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/frontend/documentation/components/Chip.stories.tsx b/frontend/documentation/components/Chip.stories.tsx
index c88fe9860935..25cc5dd8cb86 100644
--- a/frontend/documentation/components/Chip.stories.tsx
+++ b/frontend/documentation/components/Chip.stories.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import type { Meta, StoryObj } from 'storybook'
 
-import Chip from 'components/base/Chip'
+import Chip, { ChipDot } from 'components/base/Chip'
+import type { ChipVariant } from 'components/base/Chip'
 
 const meta: Meta<typeof Chip> = {
   args: { children: 'Production' },
@@ -11,7 +12,7 @@ const meta: Meta<typeof Chip> = {
     docs: {
       description: {
         component:
-          'Canonical token-based chip primitive: a small labelled pill token. Layout via Bootstrap utilities, colour/radius via token utilities, padding/sizes/border/truncation in SCSS. Leading/trailing icons go in as children. Selection lives in ToggleChip and count badges are a separate Badge concern. The legacy `.chip` (old SCSS vars + manual dark-mode block, ~35×) migrates onto this under #6606.',
+          'Canonical token-based chip primitive: a small labelled pill token. Layout via Bootstrap utilities, colour/radius via token utilities, padding/sizes/border/truncation in SCSS. Leading/trailing icons go in as children, and `ChipDot` adds a leading dot in `currentColor`. `variant` covers neutral, accent, the five status colours and `solid`. Selection lives in ToggleChip and count badges are a separate Badge concern. The legacy `.chip` (old SCSS vars + manual dark-mode block, ~35×) migrates onto this under #6606.',
       },
     },
     layout: 'centered',
@@ -59,3 +60,42 @@ export const Group: Story = {
     </div>
   ),
 }
+
+const STATUSES: ChipVariant[] = [
+  'success',
+  'warning',
+  'danger',
+  'info',
+  'muted',
+]
+
+export const Statuses: Story = {
+  render: () => (
+    <div className='d-flex flex-wrap gap-2'>
+      {STATUSES.map((variant) => (
+        <Chip key={variant} variant={variant}>
+          {variant}
+        </Chip>
+      ))}
+    </div>
+  ),
+}
+
+// The dot takes currentColor, so it follows the variant with nothing to wire.
+export const WithDot: Story = {
+  render: () => (
+    <div className='d-flex flex-wrap gap-2'>
+      {STATUSES.map((variant) => (
+        <Chip key={variant} variant={variant}>
+          <ChipDot />
+          {variant}
+        </Chip>
+      ))}
+    </div>
+  ),
+}
+
+// The one filled variant.
+export const Solid: Story = {
+  args: { children: 'Live', variant: 'solid' },
+}

From 9dfe489b010f091eb9d585e75540df0187f5b265 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 29 Sep 2026 13:24:59 -0300
Subject: [PATCH 4/5] refactor(chip): trim the dot to utilities and the
 comments to what is not obvious

The dot's radius and shrink are Bootstrap's job; only its size and
colour are the chip's.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/web/components/base/Chip/Chip.scss   | 13 ++++---------
 frontend/web/components/base/Chip/Chip.tsx    | 12 ++----------
 frontend/web/components/base/Chip/ChipDot.tsx | 11 ++++++++---
 3 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/frontend/web/components/base/Chip/Chip.scss b/frontend/web/components/base/Chip/Chip.scss
index 3407d57ff58d..7fabaa12e37c 100644
--- a/frontend/web/components/base/Chip/Chip.scss
+++ b/frontend/web/components/base/Chip/Chip.scss
@@ -13,9 +13,8 @@
     border-color: var(--color-border-action);
   }
 
-  // Status colours carry their meaning in the fill, so an outline only adds
-  // noise. Transparent rather than removed, so a status chip is the same
-  // height as a bordered one beside it.
+  // Transparent rather than removed, so a status chip is the same height as a
+  // bordered one beside it.
   &--success,
   &--warning,
   &--danger,
@@ -25,13 +24,11 @@
     border-color: transparent;
   }
 
-  // Status dot. currentColor, so it follows the variant with nothing to wire.
+  // currentColor, so the dot follows the variant with nothing to wire.
   &__dot {
     width: 6px;
     height: 6px;
-    border-radius: var(--radius-full);
     background: currentColor;
-    flex-shrink: 0;
   }
 
   // Sizes (default is the base above).
@@ -40,9 +37,7 @@
     font-size: 0.75rem;
   }
 
-  // 24px is fixed in the tags frame, so it is stated rather than left to derive
-  // from the inherited line-height. The frame's 8px vertical padding is an
-  // artefact of a height override on the auto-layout and is not applied.
+  // Stated, not derived from the line-height: 24px is fixed in the tags frame.
   &--xs {
     height: 24px;
     padding: 1px 6px;
diff --git a/frontend/web/components/base/Chip/Chip.tsx b/frontend/web/components/base/Chip/Chip.tsx
index d36339af60ab..dc66e93aa415 100644
--- a/frontend/web/components/base/Chip/Chip.tsx
+++ b/frontend/web/components/base/Chip/Chip.tsx
@@ -38,18 +38,11 @@ export type ChipProps = {
 // bg + text come from token utilities; the variant border lives in Chip.scss.
 const VARIANT_UTILITIES: Record<ChipVariant, string> = {
   accent: 'bg-surface-action-subtle text-action',
-
   danger: 'bg-surface-danger text-danger',
-
   info: 'bg-surface-info text-info',
-
   muted: 'bg-surface-muted text-secondary',
-
   neutral: 'bg-surface-subtle text-default',
-  // The one filled variant. `text-white` rather than a token because there is
-  // no inverse-text token yet; white on --color-surface-action is 5.93:1, so AA
-  // but not AAA. Note the app has a second, darker solid (`bg-primary900`, used
-  // by BetaFlag and PlanBasedAccess) that this deliberately does not cover.
+  // text-white, not a token: there is no inverse-text token yet. 5.93:1, AA.
   solid: 'bg-surface-action text-white',
   success: 'bg-surface-success text-success',
   warning: 'bg-surface-warning text-warning',
@@ -80,8 +73,7 @@ const Chip = ({
     <span
       ref={ref}
       className={classNames(
-        // rounded-md is 6px, fixed by the tags frame in Figma. Not a prop:
-        // every chip is the same shape.
+        // 6px, fixed by the tags frame. Not a prop: every chip is one shape.
         'ds-chip d-inline-flex align-items-center align-middle gap-1 rounded-md',
         VARIANT_UTILITIES[variant],
         `ds-chip--${variant}`,
diff --git a/frontend/web/components/base/Chip/ChipDot.tsx b/frontend/web/components/base/Chip/ChipDot.tsx
index c00876159cce..62919ba14f8b 100644
--- a/frontend/web/components/base/Chip/ChipDot.tsx
+++ b/frontend/web/components/base/Chip/ChipDot.tsx
@@ -1,6 +1,11 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
-// The leading dot on a status chip. Decorative: the label carries the meaning.
-const ChipDot: FC = () => <span className='ds-chip__dot' aria-hidden='true' />
+// Decorative: the label carries the meaning.
+const ChipDot: FC = () => (
+  <span
+    className='ds-chip__dot rounded-circle flex-shrink-0'
+    aria-hidden='true'
+  />
+)
 
 export default ChipDot

From b3180232352cdc74e1b7f323346786dedcfe979f Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 29 Sep 2026 13:28:05 -0300
Subject: [PATCH 5/5] docs(chip): name solid as the design system's Primary
 chip

The chip frame has three styles, Primary, Secondary and Outline. Solid
is Primary; accent is close to Secondary and neutral to Outline, but
neither matches its values yet.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/documentation/components/Chip.stories.tsx | 2 +-
 frontend/web/components/base/Chip/Chip.tsx         | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/documentation/components/Chip.stories.tsx b/frontend/documentation/components/Chip.stories.tsx
index 25cc5dd8cb86..33abae0ec7f5 100644
--- a/frontend/documentation/components/Chip.stories.tsx
+++ b/frontend/documentation/components/Chip.stories.tsx
@@ -95,7 +95,7 @@ export const WithDot: Story = {
   ),
 }
 
-// The one filled variant.
+// The design system's Primary chip.
 export const Solid: Story = {
   args: { children: 'Live', variant: 'solid' },
 }
diff --git a/frontend/web/components/base/Chip/Chip.tsx b/frontend/web/components/base/Chip/Chip.tsx
index dc66e93aa415..eeb6948805b3 100644
--- a/frontend/web/components/base/Chip/Chip.tsx
+++ b/frontend/web/components/base/Chip/Chip.tsx
@@ -42,7 +42,8 @@ const VARIANT_UTILITIES: Record<ChipVariant, string> = {
   info: 'bg-surface-info text-info',
   muted: 'bg-surface-muted text-secondary',
   neutral: 'bg-surface-subtle text-default',
-  // text-white, not a token: there is no inverse-text token yet. 5.93:1, AA.
+  // The design system's Primary chip. text-white, not a token: there is no
+  // inverse-text token yet. 5.93:1, AA.
   solid: 'bg-surface-action text-white',
   success: 'bg-surface-success text-success',
   warning: 'bg-surface-warning text-warning',