diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index 6510b3a4177d..aad13ba57607 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -623,7 +623,8 @@ export type APIKey = {
   name: string
 }
 
-export type TagType = 'STALE' | 'UNHEALTHY' | 'NONE'
+// Mirrors TagType in api/projects/tags/models.py.
+export type TagType = 'NONE' | 'STALE' | 'GITHUB' | 'UNHEALTHY' | 'GITLAB'
 
 export type Tag = {
   id: number
diff --git a/frontend/common/utils/utils.tsx b/frontend/common/utils/utils.tsx
index a7718160284e..e8eacce64f7f 100644
--- a/frontend/common/utils/utils.tsx
+++ b/frontend/common/utils/utils.tsx
@@ -762,6 +762,11 @@ const Utils = Object.assign({}, BaseUtils, {
     return tag?.type === 'STALE' && !hasStaleFlagsPermission
   },
 
+  // Unhealthy tags exist only where Feature Health does. Asked at the list
+  // rather than inside Tag: a chip has no business reading feature flags.
+  tagVisible: (tag: Tag | undefined) =>
+    tag?.type !== 'UNHEALTHY' || Utils.getFlagsmithHasFeature('feature_health'),
+
   toKebabCase: (string: string) =>
     string
       .replace(/([a-z])([A-Z])/g, '$1-$2')
diff --git a/frontend/documentation/CategoricalPalette.stories.tsx b/frontend/documentation/CategoricalPalette.stories.tsx
index 4965b6c6bd4f..78dc919e13a7 100644
--- a/frontend/documentation/CategoricalPalette.stories.tsx
+++ b/frontend/documentation/CategoricalPalette.stories.tsx
@@ -6,6 +6,7 @@ import Chip from 'components/base/Chip'
 import DocPage from './components/DocPage'
 import Swatch from './components/Swatch'
 import tokens from 'common/theme/tokens.json'
+import { contentColourNames, contentColours } from 'common/theme/tokens'
 import { AA_NORMAL_TEXT, contrastRatio } from 'common/theme/contrast'
 
 // ---------------------------------------------------------------------------
@@ -45,9 +46,9 @@ const PRIMITIVES = tokens.primitives as Record<string, string>
 // own surface, so it does not follow the page. One ink serves all of them.
 const TAG_INK_NAME = 'content-always-dark'
 const TAG_INK = PRIMITIVES[TAG_INK_NAME]
-const TAG_FILLS = Object.entries(PRIMITIVES)
-  .filter(([name]) => name.startsWith('content-') && name !== TAG_INK_NAME)
-  .map(([name, hex]) => [name.replace('content-', ''), hex] as const)
+const TAG_FILLS = contentColourNames.map(
+  (name) => [name, contentColours[name]] as const,
+)
 
 export const TagSwatches: StoryObj = {
   name: 'Tag swatches',
@@ -72,7 +73,7 @@ export const TagSwatches: StoryObj = {
             className='d-flex flex-column align-items-center gap-1'
             key={name}
           >
-            <Chip className={`border-0 tag-${name}`} size='xs'>
+            <Chip colour={name} size='xs'>
               {name}
             </Chip>
             <small className='text-secondary'>
@@ -83,15 +84,12 @@ export const TagSwatches: StoryObj = {
       </div>
       <p className='cat-note'>
         System tags (Issue, PR, Stale, Unhealthy) are not on this scale. They
-        stay on existing tokens &mdash; <code>bg-surface-default</code>,{' '}
-        <code>border-default</code>, <code>text-default</code> &mdash; plus a
-        coloured icon, so the state is carried by the icon rather than the fill.
+        take no fill at all: <code>border-default</code> and{' '}
+        <code>text-default</code> plus a coloured icon, so the state is carried
+        by the icon and the border rather than the fill.
       </p>
       <div className='d-flex mt-3'>
-        <Chip
-          className='bg-surface-default border-default text-default'
-          size='xs'
-        >
+        <Chip size='xs' variant='outline'>
           System tag
         </Chip>
       </div>
diff --git a/frontend/documentation/components/Chip.stories.tsx b/frontend/documentation/components/Chip.stories.tsx
index c88fe9860935..ebaa1163a850 100644
--- a/frontend/documentation/components/Chip.stories.tsx
+++ b/frontend/documentation/components/Chip.stories.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import type { Meta, StoryObj } from 'storybook'
 
 import Chip from 'components/base/Chip'
+import Icon, { IconName } from 'components/icons/Icon'
+import { contentColourNames } from 'common/theme/tokens'
 
 const meta: Meta<typeof Chip> = {
   args: { children: 'Production' },
@@ -11,7 +13,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.',
+          'A small labelled pill. Layout comes from Bootstrap utilities and colour from token utilities; padding, sizes, border and truncation are in SCSS. Icons go in as children. `none` leaves the colour to the caller, for a colour a user picked rather than a semantic role.',
       },
     },
     layout: 'centered',
@@ -28,10 +30,53 @@ export const Accent: Story = {
   args: { children: '"hello"', variant: 'accent' },
 }
 
+// How Tag composes Chip: a decorative colour a user picked is not a semantic
+// variant, so it arrives on `colour`. System tags take neither, and carry
+// their state in the icon instead.
+const SYSTEM_TAGS: { label: string; icon: IconName }[] = [
+  { icon: 'issue-closed', label: 'Issue closed' },
+  { icon: 'issue-linked', label: 'Issue open' },
+  { icon: 'pr-closed', label: 'PR closed' },
+  { icon: 'pr-dequeued', label: 'PR dequeued' },
+  { icon: 'pr-draft', label: 'PR draft' },
+  { icon: 'stale', label: 'Stale' },
+  { icon: 'pr-linked', label: 'PR open' },
+  { icon: 'pr-merged', label: 'PR merged' },
+]
+
+export const AsSystemTag: Story = {
+  name: 'As a system tag',
+  parameters: { chromatic: { disableSnapshot: false } },
+  render: () => (
+    <div className='d-flex flex-wrap gap-2'>
+      {SYSTEM_TAGS.map(({ icon, label }) => (
+        <Chip key={label} size='xs' variant='outline'>
+          {label}
+          <Icon name={icon} />
+        </Chip>
+      ))}
+    </div>
+  ),
+}
+
+export const AsCustomTag: Story = {
+  name: 'As a custom tag',
+  parameters: { chromatic: { disableSnapshot: false } },
+  render: () => (
+    <div className='d-flex flex-wrap gap-2'>
+      {contentColourNames.map((colour) => (
+        <Chip colour={colour} key={colour} size='xs'>
+          Custom
+        </Chip>
+      ))}
+    </div>
+  ),
+}
+
 export const Sizes: Story = {
   render: () => (
     <div className='d-flex align-items-center gap-2'>
-      <Chip size='default'>Default</Chip>
+      <Chip size='md'>Medium</Chip>
       <Chip size='sm'>Small</Chip>
       <Chip size='xs'>Extra small</Chip>
     </div>
diff --git a/frontend/documentation/components/Tag.stories.tsx b/frontend/documentation/components/Tag.stories.tsx
new file mode 100644
index 000000000000..ce29c46f662b
--- /dev/null
+++ b/frontend/documentation/components/Tag.stories.tsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import Tag from 'components/tags/Tag'
+import Constants from 'common/constants'
+import { contentColourNames, contentColours } from 'common/theme/tokens'
+import type { Tag as TTag } from 'common/types/responses'
+
+const meta: Meta<typeof Tag> = {
+  component: Tag,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+    docs: {
+      description: {
+        component:
+          'A project tag. Custom tags take a fill from the design system Content palette, keyed on the colour stored on the tag so nothing needs migrating. System tags (Stale, GitHub, GitLab, Unhealthy) take no fill and carry their state in a coloured icon and their border rather than the fill, so the state survives for anyone who cannot tell the fills apart.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Components/Tags/Tag',
+}
+export default meta
+
+type Story = StoryObj<typeof Tag>
+
+const tag = (over: Partial<TTag>): Partial<TTag> => ({
+  color: Constants.tagColors[0],
+  label: 'Checkout',
+  type: 'NONE',
+  ...over,
+})
+
+export const Custom: Story = { args: { tag: tag({}) } }
+
+export const EveryColour: Story = {
+  name: 'Every colour',
+  render: () => (
+    <div className='d-flex flex-wrap gap-1'>
+      {contentColourNames.map((name) => (
+        <Tag
+          key={name}
+          tag={tag({ color: contentColours[name], label: 'Checkout' })}
+        />
+      ))}
+    </div>
+  ),
+}
+
+// The VCS icon is keyed on the tag's label, which the integration sets, so the
+// examples use labels it actually produces rather than the type name.
+// No Unhealthy example: Tag returns null for it unless the feature_health flag
+// is on, and Storybook's Utils stub answers false to every flag.
+const SYSTEM_EXAMPLES: Partial<TTag>[] = [
+  { label: 'Stale', type: 'STALE' },
+  { label: 'PR Open', type: 'GITHUB' },
+  { label: 'PR Merged', type: 'GITHUB' },
+  { label: 'Issue Open', type: 'GITLAB' },
+  { label: 'Issue Closed', type: 'GITLAB' },
+]
+
+export const SystemTags: Story = {
+  name: 'System tags',
+  render: () => (
+    <div className='d-flex flex-wrap gap-1'>
+      {SYSTEM_EXAMPLES.map((over) => (
+        <Tag key={over.label} tag={tag(over)} />
+      ))}
+    </div>
+  ),
+}
+
+// A colour we never issued, which the API allows. It takes the neutral rather
+// than a guess: the label still reads, and the tag claims no category.
+export const UnknownColour: Story = {
+  args: { tag: tag({ color: '#123456', label: 'Set via API' }) },
+  name: 'Colour outside the scale',
+}
+
+/** Hooks cannot live in a story's render, so selection state gets a component. */
+const SelectableTags: React.FC = () => {
+  const [picked, setPicked] = useState<string>('Checkout')
+  return (
+    <div className='d-flex flex-wrap gap-1'>
+      {['Checkout', 'Billing', 'Search'].map((label, i) => (
+        <Tag
+          key={label}
+          onClick={() => setPicked(label)}
+          selected={picked === label}
+          tag={tag({ color: Constants.tagColors[i], label })}
+        />
+      ))}
+    </div>
+  )
+}
+
+export const Selectable: Story = {
+  render: () => <SelectableTags />,
+}
diff --git a/frontend/documentation/components/ToggleChip.stories.tsx b/frontend/documentation/components/ToggleChip.stories.tsx
deleted file mode 100644
index b9d153a091aa..000000000000
--- a/frontend/documentation/components/ToggleChip.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useState } from 'react'
-import type { Meta, StoryObj } from 'storybook'
-
-import ToggleChip from 'components/ToggleChip'
-import {
-  colorChart2,
-  colorChart3,
-  colorSurfaceAction,
-} from 'common/theme/tokens'
-
-const meta: Meta<typeof ToggleChip> = {
-  argTypes: {
-    color: { control: 'color' },
-  },
-  args: { active: false, children: 'Feature flag', color: colorSurfaceAction },
-  component: ToggleChip,
-  parameters: { layout: 'centered' },
-  title: 'Components/Data Display/ToggleChip',
-}
-export default meta
-
-type Story = StoryObj<typeof ToggleChip>
-
-const Interactive = (args: React.ComponentProps<typeof ToggleChip>) => {
-  const [active, setActive] = useState(args.active ?? false)
-  return (
-    <ToggleChip {...args} active={active} onClick={() => setActive(!active)} />
-  )
-}
-
-export const Default: Story = {
-  render: (args: React.ComponentProps<typeof ToggleChip>) => (
-    <Interactive {...args} />
-  ),
-}
-
-export const AllStates: Story = {
-  render: () => (
-    <div className='d-flex gap-2'>
-      <ToggleChip color={colorSurfaceAction} active>
-        Active
-      </ToggleChip>
-      <ToggleChip color={colorSurfaceAction}>Inactive</ToggleChip>
-      <ToggleChip color={colorChart2} active>
-        Danger
-      </ToggleChip>
-      <ToggleChip color={colorChart3}>Success</ToggleChip>
-    </div>
-  ),
-}
diff --git a/frontend/documentation/components/VCSProviderTag.stories.tsx b/frontend/documentation/components/VCSProviderTag.stories.tsx
index ad9b4fc08d67..42544992486f 100644
--- a/frontend/documentation/components/VCSProviderTag.stories.tsx
+++ b/frontend/documentation/components/VCSProviderTag.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta<typeof VCSProviderTag> = {
   },
   component: VCSProviderTag,
   parameters: { layout: 'centered' },
-  title: 'Components/Data Display/VCSProviderTag',
+  title: 'Components/Tags/VCSProviderTag',
 }
 export default meta
 
diff --git a/frontend/web/components/ColorSwatch.tsx b/frontend/web/components/ColorSwatch.tsx
index 3b2ffa5e4e10..0696182e897f 100644
--- a/frontend/web/components/ColorSwatch.tsx
+++ b/frontend/web/components/ColorSwatch.tsx
@@ -1,11 +1,11 @@
 import React, { FC } from 'react'
 import classNames from 'classnames'
 
-type ColorSwatchSize = 'sm' | 'md' | 'lg'
+type ColorSwatchSize = 'sm' | 'md' | 'lg' | 'xl'
 type ColorSwatchShape = 'square' | 'circle'
 
 type ColorSwatchProps = {
-  color: string
+  color?: string
   size?: ColorSwatchSize
   shape?: ColorSwatchShape
   className?: string
@@ -15,6 +15,7 @@ const SIZE_MAP: Record<ColorSwatchSize, number> = {
   lg: 16,
   md: 12,
   sm: 8,
+  xl: 32,
 }
 
 const SHAPE_CLASS: Record<ColorSwatchShape, string> = {
diff --git a/frontend/web/components/ToggleChip.tsx b/frontend/web/components/ToggleChip.tsx
deleted file mode 100644
index a56708d9e83d..000000000000
--- a/frontend/web/components/ToggleChip.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import cx from 'classnames'
-import Icon from './icons/Icon'
-import Utils from 'common/utils/utils'
-
-type ToggleChipProps = {
-  color?: string
-  active?: boolean
-  onClick?: () => void
-  className?: string
-  children?: ReactNode
-}
-
-const ToggleChip: FC<ToggleChipProps> = ({
-  active,
-  children,
-  className,
-  color,
-  onClick,
-}) => {
-  const colour = Utils.colour(color)
-  return (
-    <Row
-      style={
-        color
-          ? {
-              backgroundColor: children ? colour.fade(0.92) : colour.fade(0.76),
-              border: `1px solid ${colour.fade(0.76)}`,
-              color: colour.darken(0.1),
-            }
-          : undefined
-      }
-      onClick={onClick}
-      className={cx('chip no-wrap mr-1 mt-0 clickable', className)}
-    >
-      <span
-        style={{
-          backgroundColor: active ? 'white' : 'transparent',
-          border:
-            active || !children ? 'none' : `1px solid ${colour.fade(0.76)}`,
-        }}
-        className={cx('icon-check', children ? 'mr-2' : null)}
-      >
-        {active && <Icon name='checkmark-square' fill={color} />}
-      </span>
-      {children}
-    </Row>
-  )
-}
-
-export default ToggleChip
diff --git a/frontend/web/components/base/Chip/Chip.scss b/frontend/web/components/base/Chip/Chip.scss
index 854427ce3f98..f6501efc6a19 100644
--- a/frontend/web/components/base/Chip/Chip.scss
+++ b/frontend/web/components/base/Chip/Chip.scss
@@ -1,14 +1,9 @@
-// Canonical token-based chip. Layout and bg/text colour are utilities in the
-// markup; this holds padding, sizes, the variant border colour, truncation and
-// the remove-button reset. Distinct class (`ds-chip`) until the legacy `.chip`
-// (_chip.scss) migrates here under #6606.
 .ds-chip {
   padding: 4px 10px;
   font-size: 0.8125rem;
   white-space: nowrap;
-  border: 1px solid var(--color-border-default);
+  border: 1px solid var(--ds-chip-border, var(--color-border-default));
 
-  // Colour variant - bg/text are utilities; only the border colour is here.
   &--accent {
     border-color: var(--color-border-action);
   }
diff --git a/frontend/web/components/base/Chip/Chip.tsx b/frontend/web/components/base/Chip/Chip.tsx
index 296219372dda..0ba18290d818 100644
--- a/frontend/web/components/base/Chip/Chip.tsx
+++ b/frontend/web/components/base/Chip/Chip.tsx
@@ -2,14 +2,18 @@ import React, { KeyboardEvent, ReactNode, Ref } from 'react'
 import classNames from 'classnames'
 import Icon from 'components/icons/Icon'
 import { colorIconSecondary } from 'common/theme/tokens'
+import type { ContentColour } from 'common/theme/tokens'
+import { chipColourClass, chipVariantClass, ChipVariant } from './chipColour'
 import './Chip.scss'
 
-export type ChipSize = 'default' | 'sm' | 'xs'
-export type ChipVariant = 'neutral' | 'accent'
+export type ChipSize = 'md' | 'sm' | 'xs'
 
-export type ChipProps = {
+type ChipColour =
+  | { variant?: ChipVariant; colour?: never }
+  | { variant?: never; colour: ContentColour }
+
+export type ChipProps = ChipColour & {
   children: ReactNode
-  variant?: ChipVariant
   size?: ChipSize
   truncate?: boolean
   onRemove?: () => void
@@ -18,52 +22,46 @@ export type ChipProps = {
   // Opt into membership of a keyboard group (e.g. a radiogroup): supply the
   // role, roving tabIndex, checked state, key handler and ref. These override
   // the button semantics onClick applies by default, so the group owner can
-  // drive arrow-key navigation. See SdkPicker.
+  // drive arrow-key navigation.
   role?: 'button' | 'radio'
   tabIndex?: number
   'aria-checked'?: boolean
+  'aria-pressed'?: boolean
   'aria-expanded'?: boolean
+  'aria-label'?: string
   onKeyDown?: (e: KeyboardEvent) => void
   ref?: Ref<HTMLSpanElement>
 }
 
-// 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',
-  neutral: 'bg-surface-subtle text-default',
-}
-
-// Token-based chip primitive. Uses `ds-chip` rather than the legacy `.chip`
-// (old SCSS vars + a manual `.dark {}` block, ~35 usages) so the two coexist
-// until those migrate under #6606. Clickable on its own (role=button), or a
-// member of a caller-driven keyboard group via the role/tabIndex/onKeyDown/ref
-// props. Count badges are out of scope.
 const Chip = ({
   'aria-checked': ariaChecked,
   'aria-expanded': ariaExpanded,
+  'aria-label': ariaLabel,
+  'aria-pressed': ariaPressed,
   children,
   className,
+  colour,
   onClick,
   onKeyDown,
   onRemove,
   ref,
   role,
-  size = 'default',
+  size = 'md',
   tabIndex,
   truncate = false,
-  variant = 'neutral',
+  variant,
 }: ChipProps) => {
   const interactive = !!onClick || !!role
   return (
     <span
       ref={ref}
       className={classNames(
-        'ds-chip d-inline-flex align-items-center align-middle gap-1 rounded-sm',
-        VARIANT_UTILITIES[variant],
+        'ds-chip d-inline-flex align-items-center align-middle gap-1 rounded-md',
+        colour ? chipColourClass(colour) : chipVariantClass(variant),
         {
           'ds-chip--accent': variant === 'accent',
           'ds-chip--clickable': interactive,
-          [`ds-chip--${size}`]: size !== 'default',
+          [`ds-chip--${size}`]: size !== 'md',
           'ds-chip--truncate': truncate,
         },
         className,
@@ -73,6 +71,8 @@ const Chip = ({
       tabIndex={interactive ? tabIndex ?? 0 : undefined}
       aria-checked={ariaChecked}
       aria-expanded={ariaExpanded}
+      aria-pressed={ariaPressed}
+      aria-label={ariaLabel}
       onKeyDown={
         onKeyDown ??
         (onClick
diff --git a/frontend/web/components/base/Chip/chipColour.ts b/frontend/web/components/base/Chip/chipColour.ts
new file mode 100644
index 000000000000..63fcb16e953c
--- /dev/null
+++ b/frontend/web/components/base/Chip/chipColour.ts
@@ -0,0 +1,27 @@
+import type { ContentColour } from 'common/theme/tokens'
+
+export type ChipVariant = 'neutral' | 'accent' | 'outline'
+
+const VARIANT_UTILITIES: Record<ChipVariant, string> = {
+  accent: 'bg-surface-action-subtle text-action',
+
+  neutral: 'bg-surface-subtle text-default',
+  // No fill: the border carries the edge, so a system tag takes no hue.
+  outline: 'text-default',
+}
+
+export const chipVariantClass = (variant: ChipVariant = 'neutral') =>
+  VARIANT_UTILITIES[variant]
+
+export const chipColourClass = (colour: ContentColour) => `tag-${colour}`
+
+// The two channels as one value, so a caller that cannot pass props (markup
+// built for innerHTML) resolves them the same way the component does.
+export type ChipColourChoice =
+  | { variant: ChipVariant }
+  | { colour: ContentColour }
+
+export const chipColourUtilities = (choice: ChipColourChoice) =>
+  'colour' in choice
+    ? chipColourClass(choice.colour)
+    : chipVariantClass(choice.variant)
diff --git a/frontend/web/components/base/Chip/index.ts b/frontend/web/components/base/Chip/index.ts
index 7b7ac073a3c4..af79f67a430e 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 type { ChipProps, ChipSize, ChipVariant } from './Chip'
+export type { ChipProps, ChipSize } from './Chip'
+export type { ChipVariant } from './chipColour'
diff --git a/frontend/web/components/feature-summary/FeatureAction.tsx b/frontend/web/components/feature-summary/FeatureAction.tsx
index 63216aae803d..b214b14cf9f4 100644
--- a/frontend/web/components/feature-summary/FeatureAction.tsx
+++ b/frontend/web/components/feature-summary/FeatureAction.tsx
@@ -6,8 +6,7 @@ import Constants from 'common/constants'
 import Permission from 'common/providers/Permission'
 import Icon from 'components/icons/Icon'
 import { Tag } from 'common/types/responses'
-import color from 'color'
-import { getTagColor } from 'components/tags/Tag'
+import { tagChipHtml } from 'components/tags/utils'
 import ActionButton from 'components/ActionButton'
 import ActionItem from 'components/shared/ActionItem'
 import { calculateListPosition } from 'common/utils/calculateListPosition'
@@ -171,16 +170,9 @@ const FeatureAction: FC<FeatureActionProps> = ({
                       ? `<span>This feature has been tagged with the permanent tag${
                           protectedTags?.length > 1 ? 's' : ''
                         } ${protectedTags
-                          ?.map((tag) => {
-                            const tagColor = Utils.colour(getTagColor(tag))
-                            return `<strong class='chip chip--xs d-inline-block ms-1' style='background:${color(
-                              tagColor,
-                            ).fade(0.92)};border-color:${tagColor.darken(
-                              0.1,
-                            )};color:${tagColor.darken(0.1)};'>
-                        ${tag.label}
-                      </strong>`
-                          })
+                          ?.map((tag) =>
+                            tagChipHtml(tag, { className: 'ms-1' }),
+                          )
                           .join('')}. Please remove the tag${
                           protectedTags?.length > 1 ? 's' : ''
                         } before attempting to delete this flag.</span>`
diff --git a/frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx b/frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx
index 471e64266887..7ebb5d2747c9 100644
--- a/frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx
+++ b/frontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsx
@@ -521,7 +521,7 @@ const EnvironmentSettingsPage: React.FC = () => {
                           }
                         />
                         {typeof currentEnv?.banner_text === 'string' && (
-                          <Row className='mt-4 flex-nowrap'>
+                          <Row className='mt-4 flex-nowrap gap-2'>
                             <Input
                               placeholder='Banner text'
                               value={currentEnv?.banner_text}
@@ -536,14 +536,12 @@ const EnvironmentSettingsPage: React.FC = () => {
                               }}
                               className='full-width'
                             />
-                            <div className='ml-2'>
-                              <ColourSelect
-                                value={currentEnv?.banner_colour || ''}
-                                onChange={(banner_colour) =>
-                                  updateCurrentEnv({ banner_colour }, false)
-                                }
-                              />
-                            </div>
+                            <ColourSelect
+                              value={currentEnv?.banner_colour || ''}
+                              onChange={(banner_colour) =>
+                                updateCurrentEnv({ banner_colour }, false)
+                              }
+                            />
                             <Button onClick={() => saveEnv()} size='small'>
                               Save
                             </Button>
diff --git a/frontend/web/components/tables/TableTagFilter.tsx b/frontend/web/components/tables/TableTagFilter.tsx
index 8458ec01083f..8eef4fbbd691 100644
--- a/frontend/web/components/tables/TableTagFilter.tsx
+++ b/frontend/web/components/tables/TableTagFilter.tsx
@@ -1,9 +1,10 @@
-import React, { FC, useMemo, useState } from 'react'
+import React, { FC, useState } from 'react'
 import TableFilter from './TableFilter'
 import Input from 'components/base/forms/Input'
 import Utils from 'common/utils/utils'
 import { useGetTagsQuery } from 'common/services/useTag'
-import Tag from 'components/tags/Tag'
+import ColorSwatch from 'components/ColorSwatch'
+import { getTagColor } from 'components/tags/Tag'
 import TableFilterItem from './TableFilterItem'
 import Constants from 'common/constants'
 import { TagStrategy } from 'common/types/responses'
@@ -40,20 +41,15 @@ const TableTagFilter: FC<TableFilterType> = ({
     { skip: !projectId },
   )
 
-  const isFeatureHealthEnabled = Utils.getFlagsmithHasFeature('feature_health')
-  const flagGatedTags = useMemo(() => {
-    let tags = data
-    if (!isFeatureHealthEnabled)
-      tags = tags?.filter((tag) => tag.type !== 'UNHEALTHY')
-    if (excludeTag) tags = tags?.filter((tag) => !excludeTag(tag))
-    return tags
-  }, [data, isFeatureHealthEnabled, excludeTag])
+  // Not memoised: tagVisible reads a feature flag that arrives after the first
+  // render, and a dependency array cannot see that. The list is small.
+  const flagGatedTags = data?.filter(
+    (tag) => Utils.tagVisible(tag) && (!excludeTag || !excludeTag(tag)),
+  )
 
-  const filteredTags = useMemo(() => {
-    return filter
-      ? flagGatedTags?.filter((v) => v.label.toLowerCase().includes(filter))
-      : flagGatedTags?.filter((tag) => tag)
-  }, [flagGatedTags, filter])
+  const filteredTags = filter
+    ? flagGatedTags?.filter((v) => v.label.toLowerCase().includes(filter))
+    : flagGatedTags
   const length = (value?.length || 0) + (showArchived ? 1 : 0)
   return (
     <div className={isLoading ? 'disabled' : ''}>
@@ -128,11 +124,10 @@ const TableTagFilter: FC<TableFilterType> = ({
               isActive={showArchived}
               title={
                 <Row className='overflow-hidden'>
-                  <Tag
-                    isDot
-                    selected={showArchived}
-                    className='px-2 py-2 mr-1'
-                    tag={Constants.archivedTag}
+                  <ColorSwatch
+                    color={getTagColor(Constants.archivedTag)}
+                    shape='circle'
+                    size='lg'
                   />
                   <div className='ml-2 text-overflow'>archived</div>
                 </Row>
@@ -149,11 +144,10 @@ const TableTagFilter: FC<TableFilterType> = ({
               isActive={value?.includes('')}
               title={
                 <Row className='overflow-hidden'>
-                  <Tag
-                    isDot
-                    selected={value?.includes('')}
-                    className='px-2 py-2 mr-1'
-                    tag={Constants.untaggedTag}
+                  <ColorSwatch
+                    color={getTagColor(Constants.untaggedTag)}
+                    shape='circle'
+                    size='lg'
                   />
                   <div className='ml-2 text-overflow'>untagged</div>
                 </Row>
@@ -178,12 +172,11 @@ const TableTagFilter: FC<TableFilterType> = ({
                 isActive={value?.includes(tag.id)}
                 title={
                   <Row>
-                    <Tag
+                    <ColorSwatch
+                      color={getTagColor(tag)}
                       key={tag.id}
-                      isDot
-                      selected={value?.includes(tag.id)}
-                      className='px-2 py-2 mr-1'
-                      tag={tag}
+                      shape='circle'
+                      size='lg'
                     />
                     <div
                       style={{ width: 150 }}
diff --git a/frontend/web/components/tags/AddEditTags.tsx b/frontend/web/components/tags/AddEditTags.tsx
index 961161deca67..01163e7b02b7 100644
--- a/frontend/web/components/tags/AddEditTags.tsx
+++ b/frontend/web/components/tags/AddEditTags.tsx
@@ -150,7 +150,6 @@ const AddEditTags: FC<AddEditTagsType> = ({
     <div>
       <Row className='inline-tags mt-2'>
         <TagValues
-          hideNames={false}
           hideTags={unhealthyTagId ? [unhealthyTagId] : undefined}
           projectId={projectId}
           onAdd={readOnly ? undefined : toggle}
@@ -219,8 +218,10 @@ const AddEditTags: FC<AddEditTagsType> = ({
                     <Row>
                       <Flex>
                         <Tag
-                          onClick={selectTag}
-                          selected={value?.includes(tag.id)}
+                          disabled={Utils.tagDisabled(tag)}
+                          onClick={() => selectTag(tag)}
+                          size='md'
+                          selected={!!value?.includes(tag.id)}
                           tag={tag}
                         />
                       </Flex>
diff --git a/frontend/web/components/tags/ColourSelect.tsx b/frontend/web/components/tags/ColourSelect.tsx
index 1c95ef15a630..84cbfd61feab 100644
--- a/frontend/web/components/tags/ColourSelect.tsx
+++ b/frontend/web/components/tags/ColourSelect.tsx
@@ -1,20 +1,36 @@
 import React, { FC, useState } from 'react'
 import InlineModal from 'components/InlineModal'
 import Constants from 'common/constants'
-import Tag from './Tag'
+import BareButton from 'components/base/forms/BareButton'
+import ColorSwatch from 'components/ColorSwatch'
+import Icon from 'components/icons/Icon'
+import { contentColours, contentInk } from 'common/theme/tokens'
+import { contrastRatio } from 'common/theme/contrast'
 
 type ColourSelectType = {
   value: string
   onChange: (colour: string) => void
 }
 
+// The tick sits on the colour itself, which is a hex a user picked rather than
+// a token, so neither ink nor pale reads on all of them. Pick per colour.
+const tickFill = (colour: string) =>
+  contrastRatio(contentInk, colour) >
+  contrastRatio(contentColours['light-grey'], colour)
+    ? contentInk
+    : contentColours['light-grey']
+
+// The banner colour, not a tag: these are raw hexes rather than the tag
+// palette, so they render as themselves rather than through a swatch lookup.
 const ColourSelect: FC<ColourSelectType> = ({ onChange, value: _value }) => {
   const [isOpen, setIsOpen] = useState(false)
   const value = _value || Constants.tagColors[0]
 
   return (
     <>
-      <Tag selected onClick={() => setIsOpen(true)} tag={{ color: value }} />
+      <BareButton onClick={() => setIsOpen(true)}>
+        <ColorSwatch color={value} size='xl' />
+      </BareButton>
 
       <InlineModal
         title='Select a colour'
@@ -22,22 +38,29 @@ const ColourSelect: FC<ColourSelectType> = ({ onChange, value: _value }) => {
         onClose={() => setIsOpen(false)}
         className='inline-modal--sm'
       >
-        <div>
-          <Row className='mb-2 gap-4'>
-            {Constants.tagColors.map((color) => (
-              <div key={color} className='tag--select'>
-                <Tag
-                  onClick={(tag) => {
-                    onChange(tag.color)
-                    setIsOpen(false)
-                  }}
-                  selected={value === color}
-                  tag={{ color }}
+        <Row className='mb-2 gap-4'>
+          {Constants.tagColors.map((colour) => (
+            <BareButton
+              aria-pressed={value === colour}
+              className='position-relative d-inline-flex'
+              key={colour}
+              onClick={() => {
+                onChange(colour)
+                setIsOpen(false)
+              }}
+            >
+              <ColorSwatch color={colour} size='xl' />
+              {value === colour && (
+                <Icon
+                  className='position-absolute top-50 start-50 translate-middle'
+                  fill={tickFill(colour)}
+                  name='checkmark'
+                  width={14}
                 />
-              </div>
-            ))}
-          </Row>
-        </div>
+              )}
+            </BareButton>
+          ))}
+        </Row>
       </InlineModal>
     </>
   )
diff --git a/frontend/web/components/tags/CreateEditTag.tsx b/frontend/web/components/tags/CreateEditTag.tsx
index f350c7a6f5b7..a928d976a146 100644
--- a/frontend/web/components/tags/CreateEditTag.tsx
+++ b/frontend/web/components/tags/CreateEditTag.tsx
@@ -2,6 +2,7 @@ import React, { FC, KeyboardEvent, useEffect, useMemo, useState } from 'react'
 import FieldLabel from 'components/base/forms/FieldLabel'
 import { Tag as TTag } from 'common/types/responses'
 import Constants from 'common/constants'
+import { contentColourNames, contentColours } from 'common/theme/tokens'
 import Permission from 'common/providers/Permission'
 import Utils from 'common/utils/utils'
 import {
@@ -192,15 +193,18 @@ const CreateEditTag: FC<CreateEditTagType> = ({
         <div className='form-group select-colour'>
           <FieldLabel>Select a color</FieldLabel>
           <Row className={'gap-3'}>
-            {Constants.tagColors.map((color) => (
-              <div key={color} className='tag--select'>
-                <Tag
-                  onClick={(e: TTag) => update('color', e.color)}
-                  selected={tag?.color === color}
-                  tag={{ color }}
-                />
-              </div>
-            ))}
+            {contentColourNames.map((name) => {
+              const colour = contentColours[name]
+              return (
+                <div key={name} className='tag--select'>
+                  <Tag
+                    onClick={() => update('color', colour)}
+                    selected={tag?.color === colour}
+                    tag={{ color: colour }}
+                  />
+                </div>
+              )
+            })}
           </Row>
         </div>
         {existingTag && (
diff --git a/frontend/web/components/tags/Tag.tsx b/frontend/web/components/tags/Tag.tsx
deleted file mode 100644
index 5e8edefbf35b..000000000000
--- a/frontend/web/components/tags/Tag.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { FC } from 'react'
-import cx from 'classnames'
-
-import { Tag as TTag } from 'common/types/responses'
-import ToggleChip from 'components/ToggleChip'
-import Utils from 'common/utils/utils'
-import TagContent from './TagContent'
-import Constants from 'common/constants'
-import { getDarkMode } from 'project/darkMode'
-import Color from 'color'
-
-type TagType = {
-  className?: string
-  hideNames?: boolean
-  onClick?: (tag: TTag) => void
-  selected?: boolean
-  tag: Partial<TTag>
-  isDot?: boolean
-}
-
-export const getTagColor = (tag: Partial<TTag>, selected?: boolean) => {
-  if (getDarkMode() && tag.color === '#344562') {
-    return '#9DA4AE'
-  }
-  if (tag.type === 'UNHEALTHY') {
-    return Constants.featureHealth.unhealthyColor
-  }
-  if (selected) {
-    return tag.color
-  }
-  return tag.color
-}
-
-export const TagWrapper = ({
-  children,
-  className,
-  disabled,
-  onClick,
-  tag,
-  tagColor,
-}: any) => {
-  return (
-    <div
-      onClick={() => {
-        if (!disabled) {
-          onClick?.(tag as TTag)
-        }
-      }}
-      style={{
-        backgroundColor: `${tagColor.fade(0.92)}`,
-        border: `1px solid ${tagColor.fade(0.76)}`,
-        color: `${tagColor.darken(0.1)}`,
-      }}
-      className={cx('chip', className)}
-    >
-      {children}
-    </div>
-  )
-}
-
-const Tag: FC<TagType> = ({
-  className,
-  hideNames,
-  isDot,
-  onClick,
-  selected,
-  tag,
-}) => {
-  const shouldLighten = (color: Color) => getDarkMode() && color.isDark()
-  const tagColor = Utils.colour(getTagColor(tag, selected))
-  if (isDot) {
-    return (
-      <div
-        className={'tag--dot'}
-        style={{
-          backgroundColor: `${tagColor.darken(0.1)}`,
-        }}
-      />
-    )
-  }
-
-  const disabled = Utils.tagDisabled(tag)
-
-  if (!hideNames && !!onClick) {
-    return (
-      <ToggleChip
-        className={className}
-        color={shouldLighten(tagColor) ? tagColor.lighten(0.5) : tagColor}
-        active={selected}
-        onClick={() => {
-          if (!disabled) {
-            onClick?.(tag as TTag)
-          }
-        }}
-      >
-        {!!tag.label && <TagContent tag={tag} />}
-      </ToggleChip>
-    )
-  }
-
-  // Hide unhealthy tags if feature is disabled
-  if (
-    !Utils.getFlagsmithHasFeature('feature_health') &&
-    tag.type === 'UNHEALTHY'
-  ) {
-    return null
-  }
-
-  return (
-    <TagWrapper
-      tagColor={shouldLighten(tagColor) ? tagColor.lighten(0.5) : tagColor}
-      className={className}
-      disabled={disabled}
-      hideNames={hideNames}
-      isDot={isDot}
-      onClick={onClick}
-      selected={selected}
-      tag={tag}
-    >
-      <TagContent tag={tag} />
-    </TagWrapper>
-  )
-}
-
-export default Tag
diff --git a/frontend/web/components/tags/Tag/Tag.scss b/frontend/web/components/tags/Tag/Tag.scss
new file mode 100644
index 000000000000..a946fc025aae
--- /dev/null
+++ b/frontend/web/components/tags/Tag/Tag.scss
@@ -0,0 +1,22 @@
+.tag-check {
+  width: 20px;
+  height: 20px;
+  // color-mix, not the oklch(from …) below: that derives from a named token,
+  // and `from currentColor` failing would leave no border at all.
+  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
+
+  // A system tag sets no hue, so this falls through to the ink.
+  &--on {
+    border-color: transparent;
+    background-color: oklch(
+      from var(--ds-chip-border, currentColor) calc(l - 0.35) calc(c * 2.2) h
+    );
+  }
+}
+
+// The picker's cell size, not a property of every swatch.
+.tag--select .ds-chip.tag--swatch {
+  width: 100%;
+  height: 34px;
+  justify-content: center;
+}
diff --git a/frontend/web/components/tags/Tag/Tag.tsx b/frontend/web/components/tags/Tag/Tag.tsx
new file mode 100644
index 000000000000..e74743360915
--- /dev/null
+++ b/frontend/web/components/tags/Tag/Tag.tsx
@@ -0,0 +1,70 @@
+import React, { FC } from 'react'
+import cx from 'classnames'
+
+import { Tag as TTag } from 'common/types/responses'
+import Chip, { ChipSize } from 'components/base/Chip'
+import Icon from 'components/icons/Icon'
+import { colorSurfaceDefault } from 'common/theme/tokens'
+import Constants from 'common/constants'
+import TagContent from 'components/tags/TagContent'
+import './Tag.scss'
+import { swatchName, tagChipColour } from 'components/tags/utils'
+
+type TagType = {
+  className?: string
+  // A plan entitlement, not a UI state. See Utils.tagDisabled.
+  disabled?: boolean
+  onClick?: (tag: Partial<TTag>) => void
+  selected?: boolean
+  // Small where a tag labels something, md where it is the thing chosen.
+  size?: ChipSize
+  // Partial: the archived and untagged pseudo-tags have no id.
+  tag: Partial<TTag>
+}
+
+// Here rather than utils: Constants would drag the app tree into the swatch test.
+export const getTagColor = (tag: Partial<TTag>) =>
+  tag.type === 'UNHEALTHY' ? Constants.featureHealth.unhealthyColor : tag.color
+
+const Tag: FC<TagType> = ({
+  className,
+  disabled = false,
+  onClick,
+  selected,
+  size = 'sm',
+  tag,
+}) => {
+  const isInteractive = !disabled && !!onClick
+  const isToggle = isInteractive && selected !== undefined
+  return (
+    <Chip
+      // A swatch has no text, and only a button can carry the name.
+      aria-label={
+        isInteractive && !tag.label ? swatchName(getTagColor(tag)) : undefined
+      }
+      aria-pressed={isToggle ? selected : undefined}
+      {...tagChipColour(tag)}
+      className={cx('me-1', { 'tag--swatch': !tag.label }, className)}
+      onClick={isInteractive ? () => onClick?.(tag) : undefined}
+      size={size}
+    >
+      {/* A swatch takes a box only once chosen, or the grid fills with empty
+          outlines. */}
+      {selected !== undefined && (tag.label || selected) && (
+        <span
+          className={cx(
+            'tag-check d-inline-flex align-items-center justify-content-center flex-shrink-0 rounded-sm',
+            { 'opacity-50': disabled, 'tag-check--on': selected },
+          )}
+        >
+          {selected && (
+            <Icon name='checkmark' width={14} fill={colorSurfaceDefault} />
+          )}
+        </span>
+      )}
+      <TagContent disabled={disabled} tag={tag} />
+    </Chip>
+  )
+}
+
+export default Tag
diff --git a/frontend/web/components/tags/Tag/index.ts b/frontend/web/components/tags/Tag/index.ts
new file mode 100644
index 000000000000..0f5ab79ba91e
--- /dev/null
+++ b/frontend/web/components/tags/Tag/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Tag'
+export { getTagColor } from './Tag'
diff --git a/frontend/web/components/tags/TagContent.tsx b/frontend/web/components/tags/TagContent.tsx
index e7c5dc289845..41de66eec373 100644
--- a/frontend/web/components/tags/TagContent.tsx
+++ b/frontend/web/components/tags/TagContent.tsx
@@ -1,69 +1,51 @@
 import React, { FC } from 'react'
 import { Tag as TTag } from 'common/types/responses'
 import Format from 'common/utils/format'
-import { IonIcon } from '@ionic/react'
-import { alarmOutline, lockClosed, warning } from 'ionicons/icons'
 import Tooltip from 'components/Tooltip'
-import { getTagColor } from './Tag'
 import OrganisationStore from 'common/stores/organisation-store'
-import Utils from 'common/utils/utils'
 import classNames from 'classnames'
-import Icon from 'components/icons/Icon'
-import Color from 'color'
-type TagContent = {
+import Icon, { IconName } from 'components/icons/Icon'
+import { tagChipHtml } from './utils'
+
+type TagContentProps = {
+  disabled?: boolean
   tag: Partial<TTag>
 }
-function escapeHTML(unsafe: string) {
-  return unsafe.replace(
-    /[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g,
-    (c) => `&#${`000${c.charCodeAt(0)}`.slice(-4)};`,
-  )
+
+const VCS_ICON_BY_LABEL: Record<string, IconName> = {
+  'Issue Closed': 'issue-closed',
+  'Issue Open': 'issue-linked',
+  'PR Closed': 'pr-closed',
+  'PR Dequeued': 'pr-dequeued',
+  'PR Draft': 'pr-draft',
+  'PR Merged': 'pr-merged',
+  'PR Open': 'pr-linked',
 }
 
-const renderIcon = (
-  tagType: string,
-  tagColor: string,
-  tagLabel: string,
-  isPermanent: boolean,
-) => {
-  const darkened = tagColor.darken(0.1).string()
-  switch (tagType) {
+const renderIcon = (tag: Partial<TTag>) => {
+  switch (tag.type) {
     case 'STALE':
-      return <IonIcon className='ms-1' icon={alarmOutline} color={darkened} />
+      return <Icon name='stale' />
     case 'UNHEALTHY':
-      return <IonIcon className='ms-1' icon={warning} color={darkened} />
+      return <Icon name='warning' width={16} />
     case 'GITHUB':
-      switch (tagLabel) {
-        case 'PR Open':
-          return <Icon name='pr-linked' />
-        case 'PR Merged':
-          return <Icon name='pr-merged' />
-        case 'PR Closed':
-          return <Icon name='pr-closed' />
-        case 'PR Draft':
-          return <Icon name='pr-draft' />
-        case 'Issue Open':
-          return <Icon name='issue-linked' />
-        case 'Issue Closed':
-          return <Icon name='issue-closed' />
-        default:
-          return
-      }
+    case 'GITLAB': {
+      const icon = VCS_ICON_BY_LABEL[tag.label ?? '']
+      return icon ? <Icon name={icon} /> : null
+    }
     default:
-      return isPermanent ? (
-        <IonIcon className='ms-1' icon={lockClosed} color={darkened} />
-      ) : null
+      // Outline at 12px: a padlock heavier than its label reads as a sticker.
+      return tag.is_permanent ? <Icon name='lock-outline' width={12} /> : null
   }
 }
 
-const getTooltip = (tag: TTag | undefined) => {
+const getTooltip = (tag: Partial<TTag>, disabled: boolean) => {
   if (!tag) {
     return null
   }
   const stale_flags_limit_days = OrganisationStore.getProject(
     tag.project,
   )?.stale_flags_limit_days
-  const disabled = Utils.tagDisabled(tag)
   const truncated = Format.truncateText(tag.label, 12)
   const isTruncated = truncated !== tag.label ? tag.label : null
   let tooltip = null
@@ -83,49 +65,37 @@ const getTooltip = (tag: TTag | undefined) => {
     tooltip =
       'Features marked with this tag are not monitored for staleness and have deletion protection.'
   }
-  const tagColor = Utils.colour(getTagColor(tag, false))
-
   if (isTruncated) {
-    return `<div>
-        <span
-          style='background-color: ${tagColor.fade(0.92)};
-          border: 1px solid ${tagColor.fade(0.76)};
-          color: ${tagColor.darken(0.1)};'
-          class="chip d-inline-block chip--xs me-1${
-            disabled ? ' disabled' : ''
-          }"
-        >
-          ${`${escapeHTML(tag.label)}`}
-        </span>
-          ${tooltip ?? ''}
-      </div>`
+    return `<div>${tagChipHtml(tag, { className: 'me-1', disabled })}${
+      tooltip ?? ''
+    }</div>`
   }
   return tooltip
 }
 
-const TagContent: FC<TagContent> = ({ tag }) => {
+const TagContent: FC<TagContentProps> = ({ disabled = false, tag }) => {
   const tagLabel = Format.truncateText(tag.label, 12)
 
   if (!tagLabel) {
     return null
   }
 
-  const disabled = Utils.tagDisabled(tag)
-
   return (
     <Tooltip
       title={
+        // The only fade: TableTagFilter renders this without a Tag around it,
+        // and two of them compound to 25%.
         <span
-          className={classNames('mr-1 flex-row align-items-center', {
+          className={classNames('gap-1 flex-row', {
             'opacity-50': disabled,
           })}
         >
           {tagLabel}
-          {renderIcon(tag.type!, Utils.colour(tag.color), tag.label!)}
+          {renderIcon(tag)}
         </span>
       }
     >
-      {getTooltip(tag)}
+      {getTooltip(tag, disabled)}
     </Tooltip>
   )
 }
diff --git a/frontend/web/components/tags/TagFilter.tsx b/frontend/web/components/tags/TagFilter.tsx
index 6cd6670e9c49..eff2039a5a92 100644
--- a/frontend/web/components/tags/TagFilter.tsx
+++ b/frontend/web/components/tags/TagFilter.tsx
@@ -1,19 +1,26 @@
 import React, { FC, ReactNode } from 'react'
 import { filter } from 'lodash'
-import { Tag as TTag, TagStrategy } from 'common/types/responses'
+import { TagStrategy } from 'common/types/responses'
 import { useGetTagsQuery } from 'common/services/useTag'
+import Utils from 'common/utils/utils'
+import Constants from 'common/constants'
 import Tag from './Tag'
 import Button from 'components/base/forms/Button'
 
+type TagId = number | string
+
+// Not a tag: it stands for the absence of one, so it has no row behind it.
+const UNTAGGED_ID = ''
+
 type TagFilterType = {
-  value?: (number | string)[]
+  value?: TagId[]
   onClearAll?: () => void
   showClearAll?: boolean
   showUntagged?: boolean
   tagStrategy: TagStrategy
   onChangeStrategy?: (value: TagStrategy) => void
   projectId: string
-  onChange: (value: (number | string)[]) => void
+  onChange: (value: TagId[]) => void
   children?: ReactNode
 }
 
@@ -32,26 +39,24 @@ const TagFilter: FC<TagFilterType> = ({
     projectId,
   })
 
-  const isSelected = (tag: TTag) => _value?.includes(tag?.id)
-  const onSelect = (tag: TTag) => {
+  const visibleTags = projectTags?.filter(Utils.tagVisible)
+
+  // Both only ever read the id, and the untagged pseudo-tag has a string one.
+  const isSelected = (id: TagId) => !!_value?.includes(id)
+  const onSelect = (id: TagId) => {
     const value = _value || []
-    if (value.includes(tag.id)) {
-      onChange(filter(value, (v) => v !== tag.id))
+    if (value.includes(id)) {
+      onChange(filter(value, (v) => v !== id))
     } else {
-      onChange(value.concat([tag.id]))
+      onChange(value.concat([id]))
     }
   }
-  const unTagged = !!showUntagged && {
-    color: '#656D7B',
-    id: '',
-    label: 'Untagged',
-  }
   return (
-    <Row className='tag-filter mt-2'>
+    <Row className='mt-2'>
       <div className='ml-1'>
         <Row>
           <Flex>
-            <Row className='tag-filter-list'>
+            <Row className='gap-2'>
               {!!onChangeStrategy && (
                 <div style={{ width: 140 }}>
                   <Select
@@ -83,23 +88,22 @@ const TagFilter: FC<TagFilterType> = ({
                   />
                 </div>
               )}
-              {unTagged && (
+              {showUntagged && (
                 <Tag
-                  key={unTagged.id}
-                  selected={isSelected(unTagged as any)}
-                  onClick={onSelect}
-                  className='px-2 py-2'
-                  tag={unTagged as any}
+                  key={UNTAGGED_ID}
+                  selected={isSelected(UNTAGGED_ID)}
+                  onClick={() => onSelect(UNTAGGED_ID)}
+                  tag={Constants.untaggedTag}
                 />
               )}
               {children}
 
-              {projectTags?.map((tag) => (
+              {visibleTags?.map((tag) => (
                 <Tag
+                  disabled={Utils.tagDisabled(tag)}
                   key={tag.id}
-                  selected={isSelected(tag)}
-                  onClick={onSelect}
-                  className='px-2 py-2 mr-1'
+                  selected={isSelected(tag.id)}
+                  onClick={() => onSelect(tag.id)}
                   tag={tag}
                 />
               ))}
@@ -109,17 +113,15 @@ const TagFilter: FC<TagFilterType> = ({
           {showClearAll && (
             <Button
               onClick={() => {
-                if ((_value?.length || 0) >= (projectTags?.length || 0)) {
+                if ((_value?.length || 0) >= (visibleTags?.length || 0)) {
                   onChange([])
                 } else {
+                  const untagged: TagId[] = showUntagged ? [UNTAGGED_ID] : []
                   onChange(
-                    (showUntagged ? [''] : []).concat(
-                      // @ts-ignore mixed array type
-                      (projectTags || [])?.map((v) => v.id),
-                    ),
+                    untagged.concat((visibleTags ?? []).map((v) => v.id)),
                   )
                 }
-                onClearAll && onClearAll()
+                onClearAll?.()
               }}
               className='mr-2'
               theme='outline'
diff --git a/frontend/web/components/tags/TagValues.tsx b/frontend/web/components/tags/TagValues.tsx
index 66fa495e54f8..8a44816f23a9 100644
--- a/frontend/web/components/tags/TagValues.tsx
+++ b/frontend/web/components/tags/TagValues.tsx
@@ -16,13 +16,11 @@ type TagValuesType = {
   projectId: string
   children?: ReactNode
   inline?: boolean
-  hideNames?: boolean
   hideTags?: number[]
 }
 
 const TagValues: FC<TagValuesType> = ({
   children,
-  hideNames = true,
   hideTags = [],
   inline,
   onAdd,
@@ -33,7 +31,9 @@ const TagValues: FC<TagValuesType> = ({
   const { data } = useGetTagsQuery({ projectId })
   const Wrapper = inline ? Fragment : Row
 
-  const tags = data?.filter((tag) => !hideTags?.includes(tag.id))
+  const tags = data?.filter(
+    (tag) => !hideTags?.includes(tag.id) && Utils.tagVisible(tag),
+  )
 
   const { permission: createEditTagPermission } = useHasPermission({
     id: projectId,
@@ -42,16 +42,15 @@ const TagValues: FC<TagValuesType> = ({
   })
 
   return (
-    <Wrapper className='tag-values align-content-center'>
+    <Wrapper className='row-gap-2 align-content-center'>
       {children}
       {tags?.map(
         (tag) =>
           value?.includes(tag.id) && (
             <Tag
+              disabled={Utils.tagDisabled(tag)}
               key={tag.id}
-              className='chip--xs'
-              hideNames={hideNames}
-              onClick={onAdd ?? onClick}
+              onClick={() => (onAdd ?? onClick)?.(tag)}
               tag={tag}
             />
           ),
diff --git a/frontend/web/components/tags/utils/__tests__/tagSwatch.test.ts b/frontend/web/components/tags/utils/__tests__/tagSwatch.test.ts
new file mode 100644
index 000000000000..30ea421f7743
--- /dev/null
+++ b/frontend/web/components/tags/utils/__tests__/tagSwatch.test.ts
@@ -0,0 +1,50 @@
+import { contentColours } from 'common/theme/tokens'
+import { getTagSwatch } from './..'
+import { chipColourClass } from 'components/base/Chip/chipColour'
+
+describe('getTagSwatch', () => {
+  it.each(Object.entries(contentColours))('knows its own %s', (name, hex) => {
+    expect(getTagSwatch(hex)).toBe(name)
+  })
+
+  // The colours the picker used to offer, and the ones the app still assigns
+  // itself. These are what existing tags hold.
+  it.each([
+    ['#3d4db6', 'blue'],
+    ['#344562', 'light-grey'],
+    ['#5d6d7e', 'light-grey'],
+    ['#ea5a45', 'light-red'],
+    ['#641e16', 'light-brown'],
+    ['#ffa500', 'light-peach'],
+    ['#d35400', 'light-peach'],
+    ['#aac200', 'light-yellow'],
+    ['#3cb371', 'light-green'],
+    ['#dedede', 'light-grey'],
+    ['#8f8f8f', 'light-grey'],
+  ])('maps the legacy %s', (colour, expected) => {
+    expect(getTagSwatch(colour)).toBe(expected)
+  })
+
+  it('is case-insensitive', () => {
+    expect(getTagSwatch('#1492F4')).toBe('blue')
+  })
+
+  it.each([
+    undefined,
+    null,
+    '',
+    'rebeccapurple',
+    '#123456',
+    // Would find an inherited property if the map were an object literal.
+    'constructor',
+    '__proto__',
+  ])('has no swatch for %s', (colour) => {
+    expect(getTagSwatch(colour)).toBeNull()
+  })
+
+  it('maps a legacy colour to its swatch class', () => {
+    const swatch = getTagSwatch('#1492f4')
+    expect(swatch).toBe('blue')
+    expect(swatch && chipColourClass(swatch)).toBe('tag-blue')
+  })
+})
diff --git a/frontend/web/components/tags/utils/index.ts b/frontend/web/components/tags/utils/index.ts
new file mode 100644
index 000000000000..78eabb05b9be
--- /dev/null
+++ b/frontend/web/components/tags/utils/index.ts
@@ -0,0 +1,4 @@
+export { getTagSwatch, swatchName } from './tagSwatch'
+export { isSystemTag } from './systemTag'
+export { tagChipColour } from './tagChipColour'
+export { tagChipHtml } from './tagChipHtml'
diff --git a/frontend/web/components/tags/utils/systemTag.ts b/frontend/web/components/tags/utils/systemTag.ts
new file mode 100644
index 000000000000..e27b4649b401
--- /dev/null
+++ b/frontend/web/components/tags/utils/systemTag.ts
@@ -0,0 +1,4 @@
+import { Tag as TTag } from 'common/types/responses'
+
+export const isSystemTag = (tag: Partial<TTag>): boolean =>
+  !!tag.type && tag.type !== 'NONE'
diff --git a/frontend/web/components/tags/utils/tagChipColour.ts b/frontend/web/components/tags/utils/tagChipColour.ts
new file mode 100644
index 000000000000..3f527b7c4681
--- /dev/null
+++ b/frontend/web/components/tags/utils/tagChipColour.ts
@@ -0,0 +1,14 @@
+import { Tag as TTag } from 'common/types/responses'
+import type { ChipColourChoice } from 'components/base/Chip/chipColour'
+import { getTagSwatch } from './tagSwatch'
+import { isSystemTag } from './systemTag'
+
+// A system tag's state is in its icon, so it takes no hue. A colour we never
+// issued gets the neutral variant rather than a guess at the nearest swatch.
+export const tagChipColour = (tag: Partial<TTag>): ChipColourChoice => {
+  if (isSystemTag(tag)) {
+    return { variant: 'outline' }
+  }
+  const swatch = getTagSwatch(tag.color)
+  return swatch ? { colour: swatch } : { variant: 'neutral' }
+}
diff --git a/frontend/web/components/tags/utils/tagChipHtml.ts b/frontend/web/components/tags/utils/tagChipHtml.ts
new file mode 100644
index 000000000000..0780c323c6c0
--- /dev/null
+++ b/frontend/web/components/tags/utils/tagChipHtml.ts
@@ -0,0 +1,36 @@
+import { Tag as TTag } from 'common/types/responses'
+// The inner module, not the component: this must stay free of the stylesheet
+// import so the tag utils can be unit tested.
+import { chipColourUtilities } from 'components/base/Chip/chipColour'
+import { tagChipColour } from './tagChipColour'
+
+const escapeHTML = (unsafe: string) =>
+  unsafe.replace(
+    /[^0-9A-Za-z\u0100-\uFFFF]/g,
+    (c) => `&#${`000${c.charCodeAt(0)}`.slice(-4)};`,
+  )
+
+type TagChipOptions = {
+  className?: string
+  disabled?: boolean
+}
+
+/**
+ * A tag chip as markup, for tooltips that go through innerHTML and cannot take
+ * a component. Same classes, so the colour rules are not written twice.
+ */
+export const tagChipHtml = (
+  tag: Partial<TTag>,
+  { className = '', disabled = false }: TagChipOptions = {},
+): string => {
+  const utilities = chipColourUtilities(tagChipColour(tag))
+  const classes = [
+    'ds-chip ds-chip--xs d-inline-flex align-items-center rounded-md',
+    utilities,
+    disabled ? 'opacity-50' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+  return `<span class="${classes}">${escapeHTML(tag.label ?? '')}</span>`
+}
diff --git a/frontend/web/components/tags/utils/tagSwatch.ts b/frontend/web/components/tags/utils/tagSwatch.ts
new file mode 100644
index 000000000000..5bc893b25769
--- /dev/null
+++ b/frontend/web/components/tags/utils/tagSwatch.ts
@@ -0,0 +1,58 @@
+import { contentColourNames, contentColours } from 'common/theme/tokens'
+import type { ContentColour } from 'common/theme/tokens'
+
+type TagSwatch = ContentColour
+
+// Existing tags to the palette that replaced them (#8465): Constants.tagColors
+// plus the archived and untagged pseudo-tags.
+const LEGACY_COLOURS: Record<string, TagSwatch> = {
+  '#039587': 'light-mint',
+  '#1492f4': 'blue',
+  '#14c0f4': 'light-blue',
+  // Navy and slate carry a hue but never showed one: both were drawn as an 8%
+  // wash, so what a user has always seen is grey.
+  '#344562': 'light-grey',
+  '#3cb371': 'light-green',
+  '#3d4db6': 'blue',
+  '#5b2c6f': 'light-purple',
+  '#5d6d7e': 'light-grey',
+  '#60bd4e': 'light-green',
+  '#641e16': 'light-brown',
+  '#8f8f8f': 'light-grey',
+  '#aac200': 'light-yellow',
+  '#c277e0': 'light-purple',
+  '#c6b215': 'light-yellow',
+  '#d35400': 'light-peach',
+  '#d3d3d3': 'light-grey',
+  '#de3163': 'light-pink',
+  '#dedede': 'light-grey',
+  // Coral is a red, not a brown. light-brown is 3deg closer in hue but 72
+  // points less saturated, so it reads as neither.
+  '#ea5a45': 'light-red',
+  '#f08080': 'light-red',
+  '#fe5505': 'light-peach',
+  '#ffa500': 'light-peach',
+}
+
+// A Map, not an object: a colour named "constructor" would otherwise find an
+// inherited property and hand back something that is not a swatch.
+const SWATCH_BY_COLOR = new Map<string, TagSwatch>([
+  ...Object.entries(LEGACY_COLOURS),
+  ...contentColourNames.map((name): [string, TagSwatch] => [
+    contentColours[name],
+    name,
+  ]),
+])
+
+export const getTagSwatch = (color?: string | null): TagSwatch | null =>
+  (color && SWATCH_BY_COLOR.get(color.toLowerCase())) || null
+
+const swatchLabel = (swatch: TagSwatch): string => {
+  const words = swatch.replace(/-/g, ' ')
+  return words[0].toUpperCase() + words.slice(1)
+}
+
+export const swatchName = (colour?: string | null) => {
+  const swatch = getTagSwatch(colour)
+  return swatch ? swatchLabel(swatch) : 'Custom colour'
+}
diff --git a/frontend/web/project/project-components.js b/frontend/web/project/project-components.js
index acfa59465ec5..7538f9770fc6 100644
--- a/frontend/web/project/project-components.js
+++ b/frontend/web/project/project-components.js
@@ -2,7 +2,6 @@ import { PureComponent } from 'react'
 import Select, { components } from 'react-select'
 import Button from 'components/base/forms/Button'
 import Paging from 'components/Paging'
-import ToggleChip from 'components/ToggleChip'
 import Input from 'components/base/forms/Input'
 import InputGroup from 'components/base/forms/InputGroup'
 import PanelSearch from 'components/PanelSearch'
@@ -88,8 +87,6 @@ window.Loader = class extends PureComponent {
 
 window.Tooltip = Tooltip
 
-global.ToggleChip = ToggleChip
-
 // Custom Option component to show the tick mark next to selected option in the dropdown
 const Option = (props) => {
   const { formatOptionLabel } = props.selectProps