diff --git a/apps/frontend/src/shared/ui/Alert.vue b/apps/frontend/src/shared/ui/Alert.vue
new file mode 100644
index 0000000..fa2aa7d
--- /dev/null
+++ b/apps/frontend/src/shared/ui/Alert.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import IconCheckCircle from '@/shared/ui/icons/IconCheckCircle.vue'
+import IconError from '@/shared/ui/icons/IconError.vue'
+import IconWarning from '@/shared/ui/icons/IconWarning.vue'
+
+/**
+ * What the shop has to say about something that just happened.
+ *
+ * Four surfaces wrote their own before this existed, under three class names,
+ * and two had already drifted — one had lost the weight of the others, and each
+ * carried its own margin. That is the trajectory frontend ADR 0003 § 3 predicts
+ * from the second copy on.
+ *
+ * Unlike a pill, the icon **is** derived here: a tone names the kind of news,
+ * and the news of one kind always looks the same. Three tones, three icons.
+ *
+ * `role="alert"` is carried by the component, so the next screen cannot forget
+ * it — which is what the four hand-written ones each had to remember.
+ */
+const props = withDefaults(
+  defineProps<{ tone?: 'danger' | 'warning' | 'success' }>(),
+  { tone: 'danger' },
+)
+
+const icon = computed(
+  () => ({ danger: IconError, warning: IconWarning, success: IconCheckCircle })[props.tone],
+)
+</script>
+
+<template>
+  <p
+    class="alert"
+    :class="tone"
+    role="alert"
+  >
+    <component
+      :is="icon"
+      class="icon"
+    />
+    <span class="body"><slot /></span>
+  </p>
+</template>
+
+<style scoped>
+.alert {
+  display: flex;
+  gap: var(--space-2);
+  align-items: flex-start;
+  margin: 0;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid currentColor;
+  /* Thicker on the side the eye starts from, so a wall of text still shows
+     where the message begins. */
+  border-left-width: 3px;
+  border-radius: var(--radius-1);
+  font: var(--style-caption-strong);
+}
+
+.danger {
+  color: var(--colour-danger);
+}
+
+.warning {
+  color: var(--colour-warning);
+}
+
+.success {
+  color: var(--colour-success);
+}
+
+.icon {
+  flex: none;
+  /* Aligned with the first line of text rather than with the box. */
+  margin-top: 0.1rem;
+}
+
+.body {
+  min-width: 0;
+}
+</style>
diff --git a/apps/frontend/src/shared/ui/Pill.spec.ts b/apps/frontend/src/shared/ui/Pill.spec.ts
new file mode 100644
index 0000000..dd37093
--- /dev/null
+++ b/apps/frontend/src/shared/ui/Pill.spec.ts
@@ -0,0 +1,83 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { defineComponent, h } from 'vue'
+
+import Alert from '@/shared/ui/Alert.vue'
+import Pill from '@/shared/ui/Pill.vue'
+
+const Glyph = defineComponent({ name: 'Glyph', render: () => h('svg') })
+
+describe('Pill', () => {
+  it('says what it is asked to say', () => {
+    const pill = mount(Pill, { slots: { default: 'Publié' } })
+
+    expect(pill.text()).toBe('Publié')
+  })
+
+  it('is neutral unless told otherwise', () => {
+    // The safe default: a tone claims something about a state, and a component
+    // that claims by default claims wrongly on the screen that forgot to say.
+    expect(mount(Pill).classes()).toContain('neutral')
+  })
+
+  it('takes the icon it is given rather than deriving one', () => {
+    // Draft and retired share the neutral tone and mean opposite things. If the
+    // icon came from the tone they would be indistinguishable — which is the
+    // fault an icon is here to prevent.
+    const pill = mount(Pill, { props: { icon: Glyph }, slots: { default: 'Brouillon' } })
+
+    expect(pill.findComponent(Glyph).exists()).toBe(true)
+  })
+
+  it('renders without an icon when none is given', () => {
+    expect(mount(Pill, { slots: { default: 'Sans' } }).find('svg').exists()).toBe(false)
+  })
+
+  it('carries each tone it declares', () => {
+    for (const tone of ['neutral', 'accent', 'warning', 'danger'] as const) {
+      expect(mount(Pill, { props: { tone } }).classes()).toContain(tone)
+    }
+  })
+
+  it('never animates', () => {
+    // A state is read, not watched. Asserted on the rendered markup so a
+    // spinner cannot come back through a class somebody adds later.
+    const pill = mount(Pill, { props: { icon: Glyph }, slots: { default: 'En préparation' } })
+
+    expect(pill.html()).not.toMatch(/animation|animate|spin/i)
+  })
+})
+
+describe('Alert', () => {
+  it('announces itself, so it reaches someone not looking at it', () => {
+    const alert = mount(Alert, { slots: { default: 'La boutique n’a pas répondu.' } })
+
+    // The role is the component's, never the caller's to remember — which is
+    // what the four hand-written alerts each had to.
+    expect(alert.attributes('role')).toBe('alert')
+    expect(alert.text()).toContain('La boutique n’a pas répondu.')
+  })
+
+  it('speaks of danger unless told otherwise', () => {
+    // Most of what a shop has to say unprompted is a refusal.
+    expect(mount(Alert).classes()).toContain('danger')
+  })
+
+  it('derives its icon from its tone, and shows a different one per tone', () => {
+    // Unlike a pill: news of one kind always looks the same, so the caller has
+    // nothing to choose and nothing to get wrong.
+    const drawn = new Set(
+      (['danger', 'warning', 'success'] as const).map(
+        (tone) => mount(Alert, { props: { tone } }).find('svg path').attributes('d'),
+      ),
+    )
+
+    expect(drawn.size).toBe(3)
+  })
+
+  it('carries each tone it declares', () => {
+    for (const tone of ['danger', 'warning', 'success'] as const) {
+      expect(mount(Alert, { props: { tone } }).classes()).toContain(tone)
+    }
+  })
+})
diff --git a/apps/frontend/src/shared/ui/Pill.vue b/apps/frontend/src/shared/ui/Pill.vue
new file mode 100644
index 0000000..9ff708f
--- /dev/null
+++ b/apps/frontend/src/shared/ui/Pill.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+/**
+ * A state, read at a glance.
+ *
+ * A tone belongs here because a pill's identity **is** the state it names —
+ * the same colour on a button would be wrong, since a button's identity is the
+ * action it performs (frontend ADR 0003 § 4).
+ *
+ * **The icon is passed, never derived from the tone.** A product's `draft` and
+ * `retired` share the neutral tone and say opposite things — one is still being
+ * written, the other was taken out of sight. Deriving the icon would make them
+ * indistinguishable, which is the very fault an icon is here to prevent: colour
+ * never carries meaning alone (`docs/design/core.md` § 8, WCAG 1.4.1).
+ *
+ * Nothing animates. A state is read, not watched.
+ */
+withDefaults(
+  defineProps<{
+    /** What kind of state this is, never what it is used for. */
+    tone?: 'neutral' | 'accent' | 'warning' | 'danger'
+    /** From `shared/ui/icons`, so the whole set stays Material Symbols. */
+    icon?: Component
+  }>(),
+  { tone: 'neutral', icon: undefined },
+)
+</script>
+
+<template>
+  <span
+    class="pill"
+    :class="tone"
+  >
+    <component
+      :is="icon"
+      v-if="icon"
+      size="xs"
+    />
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0 var(--space-2);
+  border: 1px solid currentColor;
+  border-radius: var(--radius-pill);
+  font: var(--style-caption-strong);
+  white-space: nowrap;
+}
+
+.neutral {
+  color: var(--colour-text-muted);
+}
+
+.accent {
+  color: var(--colour-accent);
+}
+
+.warning {
+  color: var(--colour-warning);
+}
+
+.danger {
+  color: var(--colour-danger);
+}
+</style>
diff --git a/apps/frontend/src/shared/ui/TableCell.vue b/apps/frontend/src/shared/ui/TableCell.vue
index 486e943..3fcbe10 100644
--- a/apps/frontend/src/shared/ui/TableCell.vue
+++ b/apps/frontend/src/shared/ui/TableCell.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Button from '@/shared/ui/Button.vue'
+import Pill from '@/shared/ui/Pill.vue'
 import { ABSENT, type Cell } from '@/shared/ui/table'
 
 /**
@@ -42,11 +43,13 @@ function text(cell: Cell): string {
     </Button>
   </span>
 
-  <span
+  <Pill
     v-else-if="cell.kind === 'pill' && !isAbsent(cell)"
-    class="pill"
-    :class="cell.tone ?? 'neutral'"
-  >{{ text(cell) }}</span>
+    :tone="cell.tone"
+    :icon="cell.icon"
+  >
+    {{ text(cell) }}
+  </Pill>
 
   <!-- An absent pill falls through to here, and reads as plain text: an
        outlined pill around a dash announces a state called "—". -->
@@ -77,22 +80,8 @@ function text(cell: Cell): string {
   color: var(--colour-text-muted);
 }
 
-.pill {
-  display: inline-block;
-  padding: 0 var(--space-2);
-  border: 1px solid currentColor;
-  border-radius: var(--radius-pill);
-  font: var(--style-caption-strong);
-  white-space: nowrap;
-}
 
-.pill.accent {
-  color: var(--colour-accent);
-}
 
-.pill.neutral {
-  color: var(--colour-text-muted);
-}
 
 .actions {
   display: inline-flex;
diff --git a/apps/frontend/src/shared/ui/icons/IconCheckCircle.vue b/apps/frontend/src/shared/ui/icons/IconCheckCircle.vue
new file mode 100644
index 0000000..88b51d8
--- /dev/null
+++ b/apps/frontend/src/shared/ui/icons/IconCheckCircle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * `check_circle` from Google Material Symbols (Apache-2.0).
+ * https://fonts.google.com/icons?selected=Material+Symbols+Outlined:check_circle
+ */
+import { ICON_SIZE_PX, type IconSize } from './sizing'
+
+withDefaults(defineProps<{ size?: IconSize }>(), { size: 'sm' })
+</script>
+
+<template>
+  <svg
+    :width="ICON_SIZE_PX[size]"
+    :height="ICON_SIZE_PX[size]"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/shared/ui/icons/IconEdit.vue b/apps/frontend/src/shared/ui/icons/IconEdit.vue
new file mode 100644
index 0000000..5064487
--- /dev/null
+++ b/apps/frontend/src/shared/ui/icons/IconEdit.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * `edit` from Google Material Symbols (Apache-2.0).
+ * https://fonts.google.com/icons?selected=Material+Symbols+Outlined:edit
+ */
+import { ICON_SIZE_PX, type IconSize } from './sizing'
+
+withDefaults(defineProps<{ size?: IconSize }>(), { size: 'sm' })
+</script>
+
+<template>
+  <svg
+    :width="ICON_SIZE_PX[size]"
+    :height="ICON_SIZE_PX[size]"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/shared/ui/icons/IconError.vue b/apps/frontend/src/shared/ui/icons/IconError.vue
new file mode 100644
index 0000000..dd594eb
--- /dev/null
+++ b/apps/frontend/src/shared/ui/icons/IconError.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * `error` from Google Material Symbols (Apache-2.0).
+ * https://fonts.google.com/icons?selected=Material+Symbols+Outlined:error
+ */
+import { ICON_SIZE_PX, type IconSize } from './sizing'
+
+withDefaults(defineProps<{ size?: IconSize }>(), { size: 'sm' })
+</script>
+
+<template>
+  <svg
+    :width="ICON_SIZE_PX[size]"
+    :height="ICON_SIZE_PX[size]"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/shared/ui/icons/IconHourglass.vue b/apps/frontend/src/shared/ui/icons/IconHourglass.vue
new file mode 100644
index 0000000..383fce9
--- /dev/null
+++ b/apps/frontend/src/shared/ui/icons/IconHourglass.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * `hourglass` from Google Material Symbols (Apache-2.0).
+ * https://fonts.google.com/icons?selected=Material+Symbols+Outlined:hourglass
+ */
+import { ICON_SIZE_PX, type IconSize } from './sizing'
+
+withDefaults(defineProps<{ size?: IconSize }>(), { size: 'sm' })
+</script>
+
+<template>
+  <svg
+    :width="ICON_SIZE_PX[size]"
+    :height="ICON_SIZE_PX[size]"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M320-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm0-480v-120h320v120q0 66-47 113t-113 47q-66 0-113-47t-47-113ZM200-80v-80h40v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-40v-80h560v80h-40v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h40v80H200Z" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/shared/ui/icons/IconVisibilityOff.vue b/apps/frontend/src/shared/ui/icons/IconVisibilityOff.vue
new file mode 100644
index 0000000..cbcea4a
--- /dev/null
+++ b/apps/frontend/src/shared/ui/icons/IconVisibilityOff.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * `visibility_off` from Google Material Symbols (Apache-2.0).
+ * https://fonts.google.com/icons?selected=Material+Symbols+Outlined:visibility_off
+ */
+import { ICON_SIZE_PX, type IconSize } from './sizing'
+
+withDefaults(defineProps<{ size?: IconSize }>(), { size: 'sm' })
+</script>
+
+<template>
+  <svg
+    :width="ICON_SIZE_PX[size]"
+    :height="ICON_SIZE_PX[size]"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-11 38-16.5t34-5.5q75 0 127.5 52.5T660-506q0 13-5.5 34T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/shared/ui/icons/IconWarning.vue b/apps/frontend/src/shared/ui/icons/IconWarning.vue
new file mode 100644
index 0000000..2f13c7b
--- /dev/null
+++ b/apps/frontend/src/shared/ui/icons/IconWarning.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * `warning` from Google Material Symbols (Apache-2.0).
+ * https://fonts.google.com/icons?selected=Material+Symbols+Outlined:warning
+ */
+import { ICON_SIZE_PX, type IconSize } from './sizing'
+
+withDefaults(defineProps<{ size?: IconSize }>(), { size: 'sm' })
+</script>
+
+<template>
+  <svg
+    :width="ICON_SIZE_PX[size]"
+    :height="ICON_SIZE_PX[size]"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/shared/ui/table.ts b/apps/frontend/src/shared/ui/table.ts
index c5969f4..c5d744e 100644
--- a/apps/frontend/src/shared/ui/table.ts
+++ b/apps/frontend/src/shared/ui/table.ts
@@ -16,7 +16,7 @@ import type { Component } from 'vue'
  */
 
 /** A cell's tone, when it has one. Never an action's: see ADR 0003 § 4. */
-export type CellTone = 'neutral' | 'accent'
+export type CellTone = 'neutral' | 'accent' | 'warning' | 'danger'
 
 /** One button inside an `actions` cell. */
 export interface CellAction {
@@ -41,9 +41,10 @@ export type Cell =
   | { kind: 'number'; value?: string }
   /** A reference someone reads character by character. */
   | { kind: 'code'; value?: string }
-  /** A state. Carries a shape as well as a tone, since colour never carries
-      meaning alone (`docs/design/core.md` § 8). */
-  | { kind: 'pill'; value?: string; tone?: CellTone }
+  /** A state. Carries an icon as well as a tone, since colour never carries
+      meaning alone (`docs/design/core.md` § 8). The icon is the caller's:
+      two states may share a tone and mean opposite things. */
+  | { kind: 'pill'; value?: string; tone?: CellTone; icon?: Component }
   | { kind: 'actions'; actions: readonly CellAction[] }
 
 export interface Column {
diff --git a/apps/frontend/src/surfaces/admin/CatalogueView.vue b/apps/frontend/src/surfaces/admin/CatalogueView.vue
index 756ed20..0d15131 100644
--- a/apps/frontend/src/surfaces/admin/CatalogueView.vue
+++ b/apps/frontend/src/surfaces/admin/CatalogueView.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Alert from '@/shared/ui/Alert.vue'
 import Button from '@/shared/ui/Button.vue'
 import PageTitle from '@/shared/ui/PageTitle.vue'
 import ProductTable from '@/surfaces/admin/ProductTable.vue'
@@ -54,13 +55,9 @@ onMounted(load)
       </Button>
     </header>
 
-    <p
-      v-if="unreachable"
-      class="unreachable"
-      role="alert"
-    >
+    <Alert v-if="unreachable">
       {{ t('catalogue.unreachable') }}
-    </p>
+    </Alert>
 
     <!-- One screen: the table when there are products, a sentence where the
          table would be when there are none. No second design to maintain
@@ -93,68 +90,10 @@ header {
   justify-content: space-between;
 }
 
-.empty,
 .paging {
   margin: 0;
   color: var(--colour-text-muted);
   font: var(--style-caption);
 }
 
-.unreachable {
-  margin: 0;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--colour-danger);
-  border-left-width: 3px;
-  border-radius: var(--radius-1);
-  color: var(--colour-danger);
-  font: var(--style-caption-strong);
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-thead th {
-  padding: var(--space-1) var(--space-3);
-  border-bottom: 1px solid var(--colour-border);
-  color: var(--colour-text-muted);
-  text-align: left;
-}
-
-tbody td {
-  padding: var(--space-2) var(--space-3);
-  border-bottom: 1px solid var(--colour-border);
-  vertical-align: baseline;
-}
-
-/* The merchant wrote the title and recognises the row by it, so it wraps
-   rather than being cut. */
-td.name {
-  font: var(--style-body-strong);
-}
-
-
-.state {
-  display: inline-flex;
-  padding: 0 var(--space-2);
-  border: 1px solid currentColor;
-  border-radius: var(--radius-pill);
-  font: var(--style-caption-strong);
-}
-
-.state.published {
-  color: var(--colour-accent);
-}
-
-.state.draft,
-.state.retired {
-  color: var(--colour-text-muted);
-}
-
-
-
-
-
-
 </style>
diff --git a/apps/frontend/src/surfaces/admin/NewProductView.vue b/apps/frontend/src/surfaces/admin/NewProductView.vue
index 661c003..0ccc016 100644
--- a/apps/frontend/src/surfaces/admin/NewProductView.vue
+++ b/apps/frontend/src/surfaces/admin/NewProductView.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import Alert from '@/shared/ui/Alert.vue'
 import Button from '@/shared/ui/Button.vue'
 import CheckboxField from '@/shared/ui/CheckboxField.vue'
 import Form from '@/shared/ui/Form.vue'
@@ -108,13 +109,9 @@ async function submit(): Promise<void> {
   <section class="new-product">
     <PageTitle>{{ t('catalogue.new.title') }}</PageTitle>
 
-    <p
-      v-if="unreachable"
-      class="unreachable"
-      role="alert"
-    >
+    <Alert v-if="unreachable">
       {{ t('catalogue.unreachable') }}
-    </p>
+    </Alert>
 
     <!-- No summary line above the fields: a refused field shows its own
          problem, and a line repeating it says nothing new. -->
@@ -196,13 +193,4 @@ async function submit(): Promise<void> {
   font: var(--style-caption);
 }
 
-.unreachable {
-  margin: 0;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--colour-danger);
-  border-left-width: 3px;
-  border-radius: var(--radius-1);
-  color: var(--colour-danger);
-  font: var(--style-caption-strong);
-}
 </style>
diff --git a/apps/frontend/src/surfaces/admin/ProductTable.vue b/apps/frontend/src/surfaces/admin/ProductTable.vue
index 36c6a05..f3153ed 100644
--- a/apps/frontend/src/surfaces/admin/ProductTable.vue
+++ b/apps/frontend/src/surfaces/admin/ProductTable.vue
@@ -2,6 +2,9 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconCheckCircle from '@/shared/ui/icons/IconCheckCircle.vue'
+import IconEdit from '@/shared/ui/icons/IconEdit.vue'
+import IconVisibilityOff from '@/shared/ui/icons/IconVisibilityOff.vue'
 import Table from '@/shared/ui/Table.vue'
 import type { Column, Row } from '@/shared/ui/table'
 import type { ProductSummary } from '@/shared/api/catalogue'
@@ -63,6 +66,14 @@ function rowOf(product: ProductSummary): Row {
         // Published is the state a merchant is looking for; the others are
         // where a product is on its way to or back from.
         tone: product.state === 'published' ? 'accent' : 'neutral',
+        // Draft and retired share the neutral tone and mean opposite things —
+        // still being written, versus taken out of sight. The icon is what
+        // tells them apart, and it is the caller's to choose.
+        icon: {
+          draft: IconEdit,
+          published: IconCheckCircle,
+          retired: IconVisibilityOff,
+        }[product.state],
       },
     },
   }
diff --git a/apps/frontend/src/surfaces/admin/SignInView.vue b/apps/frontend/src/surfaces/admin/SignInView.vue
index 8270d28..98eab41 100644
--- a/apps/frontend/src/surfaces/admin/SignInView.vue
+++ b/apps/frontend/src/surfaces/admin/SignInView.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
+import Alert from '@/shared/ui/Alert.vue'
 import Button from '@/shared/ui/Button.vue'
 import Form from '@/shared/ui/Form.vue'
 import IconLock from '@/shared/ui/icons/IconLock.vue'
@@ -69,13 +70,12 @@ async function submit(): Promise<void> {
 
     <!-- Above the form, not on a field: the shop does not say which half is
          wrong, and marking one field would say it in its place. -->
-    <p
+    <Alert
       v-if="refused"
-      class="refused"
-      role="alert"
+      class="refusal"
     >
       {{ t('signIn.refused') }}
-    </p>
+    </Alert>
 
     <Form
       :submitting="submitting"
@@ -124,6 +124,14 @@ async function submit(): Promise<void> {
   padding: var(--space-8) var(--space-4);
 }
 
+/* This screen stacks in normal flow rather than with a gap, so the space below
+   the alert is its own to give — a margin inside `Alert` would impose one on
+   every caller (frontend ADR 0003 § 5). Without it the next field's notch,
+   which rises onto its border, lands on the alert. */
+.refusal {
+  margin-bottom: var(--space-4);
+}
+
 .bar {
   display: flex;
   align-items: center;
@@ -152,15 +160,6 @@ h1 {
   font: var(--style-heading);
 }
 
-.refused {
-  margin: 0 0 var(--space-4);
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--colour-danger);
-  border-left-width: 3px;
-  border-radius: var(--radius-1);
-  color: var(--colour-danger);
-  font: var(--style-caption-strong);
-}
 
 .back {
   display: inline-block;
diff --git a/apps/frontend/src/surfaces/admin/VatRates.spec.ts b/apps/frontend/src/surfaces/admin/VatRates.spec.ts
index 761fed2..ae1d471 100644
--- a/apps/frontend/src/surfaces/admin/VatRates.spec.ts
+++ b/apps/frontend/src/surfaces/admin/VatRates.spec.ts
@@ -110,12 +110,14 @@ describe('VatRates', () => {
     const english = await rates('en')
     await english.findAll('button').filter((b) => b.attributes('aria-label'))[0].trigger('click')
     await flushPromises()
-    expect(english.find('.in-use').text()).toContain('One product carries this rate')
+    // The sentence a merchant reads, wherever the markup puts it — and it is
+    // announced, which is what makes a refusal reach someone not looking at it.
+    expect(english.find('[role="alert"]').text()).toContain('One product carries this rate')
 
     const french = await rates('fr')
     await french.findAll('button').filter((b) => b.attributes('aria-label'))[0].trigger('click')
     await flushPromises()
-    expect(french.find('.in-use').text()).toContain('Un produit utilise ce taux')
+    expect(french.find('[role="alert"]').text()).toContain('Un produit utilise ce taux')
   })
 
   it('counts in the plural when several carry it', async () => {
@@ -126,6 +128,6 @@ describe('VatRates', () => {
     await wrapper.findAll('button').filter((b) => b.attributes('aria-label'))[0].trigger('click')
     await flushPromises()
 
-    expect(wrapper.find('.in-use').text()).toContain('3 products carry this rate')
+    expect(wrapper.find('[role="alert"]').text()).toContain('3 products carry this rate')
   })
 })
diff --git a/apps/frontend/src/surfaces/admin/VatRates.vue b/apps/frontend/src/surfaces/admin/VatRates.vue
index 4f27c18..7a9d0bf 100644
--- a/apps/frontend/src/surfaces/admin/VatRates.vue
+++ b/apps/frontend/src/surfaces/admin/VatRates.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Alert from '@/shared/ui/Alert.vue'
 import Button from '@/shared/ui/Button.vue'
 import VatRateTable from '@/surfaces/admin/VatRateTable.vue'
 import TextField from '@/shared/ui/TextField.vue'
@@ -90,13 +91,9 @@ onMounted(async () => apply(await listRates()))
 
     <!-- The shop sends the count; the sentence is written here, where the
          reader's language is known and one product is not "1 products". -->
-    <p
-      v-if="inUse !== undefined"
-      class="in-use"
-      role="alert"
-    >
+    <Alert v-if="inUse !== undefined">
       {{ t('settings.rates.inUse', { count: inUse }, inUse) }}
-    </p>
+    </Alert>
 
     <div class="add">
       <TextField
@@ -141,39 +138,12 @@ td {
   vertical-align: middle;
 }
 
-td.name {
-  font: var(--style-body-strong);
-}
 
-td.percent {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  white-space: nowrap;
-}
 
-td.act {
-  width: 3.5rem;
-  text-align: right;
-}
 
 
-.empty,
-.in-use {
-  margin: 0;
-  font: var(--style-caption);
-}
 
-.empty {
-  color: var(--colour-text-muted);
-}
 
-.in-use {
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--colour-danger);
-  border-left-width: 3px;
-  border-radius: var(--radius-1);
-  color: var(--colour-danger);
-}
 
 /* The row that adds one, at the foot of the list rather than on a screen of
    its own to leave and come back from. */
diff --git a/apps/frontend/src/surfaces/dev/DesignSystemView.vue b/apps/frontend/src/surfaces/dev/DesignSystemView.vue
index cef4ed6..0cb56c6 100644
--- a/apps/frontend/src/surfaces/dev/DesignSystemView.vue
+++ b/apps/frontend/src/surfaces/dev/DesignSystemView.vue
@@ -18,7 +18,14 @@ import Page from '@/shared/ui/Page.vue'
 import PageTitle from '@/shared/ui/PageTitle.vue'
 import PasswordField from '@/shared/ui/PasswordField.vue'
 import SelectField from '@/shared/ui/SelectField.vue'
+import Alert from '@/shared/ui/Alert.vue'
+import IconCheckCircle from '@/shared/ui/icons/IconCheckCircle.vue'
+import IconEdit from '@/shared/ui/icons/IconEdit.vue'
+import IconError from '@/shared/ui/icons/IconError.vue'
+import IconHourglass from '@/shared/ui/icons/IconHourglass.vue'
 import IconTrash from '@/shared/ui/icons/IconTrash.vue'
+import IconVisibilityOff from '@/shared/ui/icons/IconVisibilityOff.vue'
+import Pill from '@/shared/ui/Pill.vue'
 import Stack from '@/shared/ui/Stack.vue'
 import Table from '@/shared/ui/Table.vue'
 import TextField from '@/shared/ui/TextField.vue'
@@ -76,7 +83,12 @@ const productRows = [
       reference: { kind: 'code' as const, value: 'SAV-MIEL-100' },
       price: { kind: 'number' as const, value: '6,90 €' },
       vat: { kind: 'number' as const, value: '20 %' },
-      state: { kind: 'pill' as const, value: 'Publié', tone: 'accent' as const },
+      state: {
+        kind: 'pill' as const,
+        value: 'Publié',
+        tone: 'accent' as const,
+        icon: IconCheckCircle,
+      },
     },
   },
   {
@@ -89,7 +101,7 @@ const productRows = [
       reference: { kind: 'code' as const },
       price: { kind: 'number' as const, value: '8,20 €' },
       vat: { kind: 'number' as const, value: '20 %' },
-      state: { kind: 'pill' as const, value: 'Brouillon' },
+      state: { kind: 'pill' as const, value: 'Brouillon', icon: IconEdit },
     },
   },
   {
@@ -99,7 +111,7 @@ const productRows = [
       reference: { kind: 'code' as const, value: 'COF-DEC-003' },
       price: { kind: 'number' as const, value: '24,00 €' },
       vat: { kind: 'number' as const },
-      state: { kind: 'pill' as const, value: 'Retiré' },
+      state: { kind: 'pill' as const, value: 'Retiré', icon: IconVisibilityOff },
     },
   },
 ]
@@ -121,7 +133,12 @@ const rateRows = [
     cells: {
       name: { kind: 'strong' as const, value: 'Standard' },
       rate: { kind: 'number' as const, value: '20 %' },
-      mark: { kind: 'pill' as const, value: 'Par défaut', tone: 'accent' as const },
+      mark: {
+        kind: 'pill' as const,
+        value: 'Par défaut',
+        tone: 'accent' as const,
+        icon: IconCheckCircle,
+      },
       act: {
         kind: 'actions' as const,
         actions: [{ label: 'Supprimer Standard', icon: IconTrash, onPress: noop }],
@@ -348,6 +365,55 @@ const rateRows = [
         </GalleryCanvas>
       </GallerySection>
 
+      <!-- ── États ──────────────────────────────────────────── -->
+
+      <GallerySection
+        name="Pill"
+        contract="Un état, jamais une action. Le ton dit de quelle sorte d’état il s’agit ; l’icône, passée par l’appelant, dit lequel — deux états peuvent partager un ton et vouloir dire le contraire."
+      >
+        <GalleryCanvas>
+          <Pill :icon="IconEdit">
+            Brouillon
+          </Pill>
+          <Pill :icon="IconVisibilityOff">
+            Retiré
+          </Pill>
+          <Pill
+            tone="accent"
+            :icon="IconCheckCircle"
+          >
+            Publié
+          </Pill>
+          <Pill
+            tone="warning"
+            :icon="IconHourglass"
+          >
+            En préparation
+          </Pill>
+          <Pill
+            tone="danger"
+            :icon="IconError"
+          >
+            Échec
+          </Pill>
+        </GalleryCanvas>
+      </GallerySection>
+
+      <GallerySection
+        name="Alert"
+        contract="Ce que la boutique a à dire de ce qui vient d’arriver. Le ton nomme la sorte de nouvelle et l’icône en découle — contrairement à une pastille, une nouvelle d’une sorte donnée se présente toujours pareil."
+      >
+        <GalleryCanvas stacked>
+          <Alert>La boutique n’a pas répondu. Réessayez.</Alert>
+          <Alert tone="warning">
+            Deux photographies attendent encore leur texte alternatif.
+          </Alert>
+          <Alert tone="success">
+            Le taux par défaut est passé à Réduit.
+          </Alert>
+        </GalleryCanvas>
+      </GallerySection>
+
       <!-- ── Actions ────────────────────────────────────────── -->
 
       <GallerySection
diff --git a/apps/frontend/src/surfaces/dev/gallery-registry.ts b/apps/frontend/src/surfaces/dev/gallery-registry.ts
index 8d67d03..5df2c80 100644
--- a/apps/frontend/src/surfaces/dev/gallery-registry.ts
+++ b/apps/frontend/src/surfaces/dev/gallery-registry.ts
@@ -28,6 +28,7 @@ export const FAMILIES = [
   { label: 'Fondations', components: ['Typographie'] },
   { label: 'Disposition', components: ['Stack', 'Grid', 'Page', 'PageTitle'] },
   { label: 'Données', components: ['Table'] },
+  { label: 'États', components: ['Pill', 'Alert'] },
   { label: 'Actions', components: ['Button', 'NavLink'] },
   {
     label: 'Champs',