From 7c3d13f3f8ca6d3a6e18ca615433c2eab90da970 Mon Sep 17 00:00:00 2001
From: Guy MANDINA <guyghost@gmail.com>
Date: Sat, 22 Aug 2026 00:49:05 +0200
Subject: [PATCH 1/3] refactor(ui): extract canonical eyebrow label component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Normalize 120+ hand-rolled eyebrow label variants (size × tracking ×
weight × tone combinations across 36 files) to a single canonical
.eyebrow class with modifiers (--caption, --strong, --subtle, --blue)
defined in @pulse/ui. Rare one-off tones remain call-site utilities,
which override the component color by layer precedence.

Also remove dead code found during extraction:
- ui/actions/ripple.ts (duplicate of @pulse/ui export) + its test
- ui/atoms/RadarIcon.svelte (0 refs, only untokenized hex colors)
- .card / .tag--* CSS and accent-* @theme aliases in design-tokens.css
- GRADE_COLORS in core/types/score.ts

Fix 3 untokenized text-[#0c0a09] in MissionCard → text-text-primary.
Document the eyebrow spec in packages/design/DESIGN.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 apps/extension/src/lib/core/types/score.ts    |  12 --
 apps/extension/src/ui/actions/ripple.ts       |  41 ------
 .../src/ui/atoms/ConnectionIndicator.svelte   |   2 +-
 apps/extension/src/ui/atoms/RadarIcon.svelte  | 135 ------------------
 apps/extension/src/ui/design-tokens.css       |  63 --------
 .../src/ui/molecules/AlertBuilderCard.svelte  |  16 +--
 .../ui/molecules/BackupRestoreModal.svelte    |  28 +---
 .../src/ui/molecules/ConnectorAlertBar.svelte |   4 +-
 .../src/ui/molecules/ExperienceCard.svelte    |   4 +-
 .../src/ui/molecules/FeedTourOverlay.svelte   |   2 +-
 .../ui/molecules/KeyboardShortcutsHelp.svelte |   9 +-
 .../src/ui/molecules/MissionCard.svelte       |  30 ++--
 .../ui/molecules/OperationalEmptyState.svelte |   6 +-
 .../ui/molecules/OperationalStoryCard.svelte  |   6 +-
 .../src/ui/molecules/PageHeader.svelte        |   2 +-
 .../ApplicationPipelineSummary.svelte         |   6 +-
 .../src/ui/organisms/CopilotPanel.svelte      |  20 +--
 .../src/ui/organisms/DangerZone.svelte        |   4 +-
 .../src/ui/organisms/ExperienceFeed.svelte    |   2 +-
 .../ui/organisms/FeedActionDashboard.svelte   |  12 +-
 .../src/ui/organisms/FormAssistPanel.svelte   |   4 +-
 .../src/ui/organisms/MetricsPanel.svelte      |  34 ++---
 .../ui/organisms/MissionArrivalStack.svelte   |   6 +-
 .../src/ui/organisms/MissionComparison.svelte |  16 +--
 .../MissionInvestigationDrawer.svelte         |   8 +-
 .../src/ui/organisms/OnboardingFlow.svelte    |  10 +-
 .../ui/organisms/PlatformAccountsPanel.svelte |   6 +-
 .../src/ui/organisms/ProfileSection.svelte    |  16 +--
 .../src/ui/organisms/ScanProgress.svelte      |   6 +-
 .../src/ui/organisms/ScanSettings.svelte      |  12 +-
 .../src/ui/organisms/ScanSummary.svelte       |   2 +-
 .../src/ui/organisms/SourceHealthPanel.svelte |   6 +-
 .../src/ui/organisms/TJMDashboard.svelte      |  36 ++---
 .../src/ui/pages/ApplicationsPage.svelte      |  16 +--
 apps/extension/src/ui/pages/FeedPage.svelte   |  10 +-
 .../extension/src/ui/pages/ProfilePage.svelte |   4 +-
 .../src/ui/pages/SettingsPage.svelte          |  28 ++--
 apps/extension/src/ui/pages/TJMPage.svelte    |   7 +-
 .../src/ui/templates/OnboardingLayout.svelte  |   6 +-
 apps/extension/tests/unit/ui/ripple.test.ts   |  44 ------
 packages/design/DESIGN.md                     |  12 +-
 packages/ui/src/app.css                       |  27 +++-
 42 files changed, 161 insertions(+), 559 deletions(-)
 delete mode 100644 apps/extension/src/ui/actions/ripple.ts
 delete mode 100644 apps/extension/src/ui/atoms/RadarIcon.svelte
 delete mode 100644 apps/extension/tests/unit/ui/ripple.test.ts

diff --git a/apps/extension/src/lib/core/types/score.ts b/apps/extension/src/lib/core/types/score.ts
index c0af210c..fb141235 100644
--- a/apps/extension/src/lib/core/types/score.ts
+++ b/apps/extension/src/lib/core/types/score.ts
@@ -75,15 +75,3 @@ export function scoreToGrade(score: number): Grade {
   }
   return 'F';
 }
-
-/**
- * Grade to color mapping for UI display.
- * Matches the existing design tokens.
- */
-export const GRADE_COLORS: Record<Grade, { text: string; bg: string }> = {
-  A: { text: 'text-accent-emerald', bg: 'bg-accent-emerald/15' },
-  B: { text: 'text-accent-blue', bg: 'bg-accent-blue/15' },
-  C: { text: 'text-accent-amber', bg: 'bg-accent-amber/15' },
-  D: { text: 'text-text-subtle', bg: 'bg-subtle-gray' },
-  F: { text: 'text-text-subtle', bg: 'bg-subtle-gray' },
-};
diff --git a/apps/extension/src/ui/actions/ripple.ts b/apps/extension/src/ui/actions/ripple.ts
deleted file mode 100644
index c4c810fd..00000000
--- a/apps/extension/src/ui/actions/ripple.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// Inject keyframes once
-if (typeof document !== 'undefined' && !document.getElementById('ripple-keyframes')) {
-  const style = document.createElement('style');
-  style.id = 'ripple-keyframes';
-  style.textContent = `@keyframes ripple-expand { to { transform: scale(1); opacity: 0; } }`;
-  document.head.appendChild(style);
-}
-
-export function ripple(node: HTMLElement) {
-  node.style.overflow = 'hidden';
-  if (!node.style.position || node.style.position === 'static') {
-    node.style.position = 'relative';
-  }
-
-  function handlePointerDown(e: PointerEvent) {
-    const rect = node.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    const size = Math.max(rect.width, rect.height) * 2;
-
-    const span = document.createElement('span');
-    span.style.cssText = `
-      position: absolute; border-radius: 50%; pointer-events: none;
-      width: ${size}px; height: ${size}px;
-      left: ${x - size / 2}px; top: ${y - size / 2}px;
-      background: rgba(255,255,255,0.2);
-      transform: scale(0); opacity: 1;
-      animation: ripple-expand 400ms ease-out forwards;
-    `;
-    node.appendChild(span);
-    setTimeout(() => span.remove(), 450);
-  }
-
-  node.addEventListener('pointerdown', handlePointerDown);
-
-  return {
-    destroy() {
-      node.removeEventListener('pointerdown', handlePointerDown);
-    },
-  };
-}
diff --git a/apps/extension/src/ui/atoms/ConnectionIndicator.svelte b/apps/extension/src/ui/atoms/ConnectionIndicator.svelte
index d5675a60..993de7cf 100644
--- a/apps/extension/src/ui/atoms/ConnectionIndicator.svelte
+++ b/apps/extension/src/ui/atoms/ConnectionIndicator.svelte
@@ -114,7 +114,7 @@
         <span class="relative inline-flex h-2 w-2 rounded-full {statusConfig.color}"></span>
       </span>
       <Icon name={statusConfig.icon} size={12} />
-      <span class="text-micro font-medium uppercase tracking-wider">{statusConfig.label}</span>
+      <span class="eyebrow">{statusConfig.label}</span>
     </button>
 
     {#if showDetails}
diff --git a/apps/extension/src/ui/atoms/RadarIcon.svelte b/apps/extension/src/ui/atoms/RadarIcon.svelte
deleted file mode 100644
index 0a5b9459..00000000
--- a/apps/extension/src/ui/atoms/RadarIcon.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script module lang="ts">
-  let nextRadarIconId = 0;
-</script>
-
-<script lang="ts">
-  type RadarState = 'idle' | 'scanning' | 'active';
-
-  const {
-    size = 48,
-    state = 'idle',
-    class: className = '',
-  }: {
-    size?: number;
-    state?: RadarState;
-    class?: string;
-  } = $props();
-
-  const isAnimating = $derived(state === 'scanning' || state === 'active');
-  const primaryColor = $derived(
-    state === 'active' ? '#22D3EE' : state === 'scanning' ? '#0E7490' : '#164E63'
-  );
-  const glowColor = $derived(
-    state === 'active'
-      ? 'rgba(34, 211, 238, 0.6)'
-      : state === 'scanning'
-        ? 'rgba(14, 116, 144, 0.4)'
-        : 'rgba(22, 78, 99, 0.2)'
-  );
-
-  const gradientIdBase = `radar-icon-${nextRadarIconId++}`;
-  const scanGradientId = `${gradientIdBase}-scan`;
-  const sweepGradientId = `${gradientIdBase}-sweep`;
-</script>
-
-<div
-  class="relative inline-flex items-center justify-center {className}"
-  style="width: {size}px; height: {size}px;"
-  data-testid="radar-icon"
-  data-state={state}
->
-  {#if isAnimating}
-    <div
-      class="absolute inset-0 rounded-full radar-ping"
-      style="background: radial-gradient(circle, {glowColor}, transparent 70%);"
-    ></div>
-  {/if}
-
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 48 48"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
-    <circle
-      cx="24"
-      cy="24"
-      r="20"
-      stroke={primaryColor}
-      stroke-opacity="0.2"
-      stroke-width="1"
-      fill="none"
-    />
-    <circle
-      cx="24"
-      cy="24"
-      r="14"
-      stroke={primaryColor}
-      stroke-opacity="0.3"
-      stroke-width="1"
-      fill="none"
-    />
-    <circle
-      cx="24"
-      cy="24"
-      r="8"
-      stroke={primaryColor}
-      stroke-opacity="0.4"
-      stroke-width="1.5"
-      fill="none"
-    />
-
-    <circle cx="24" cy="24" r="3" fill={primaryColor} class={isAnimating ? 'radar-pulse' : ''} />
-
-    {#if isAnimating}
-      <g class="radar-scan" style="transform-origin: 24px 24px;">
-        <line
-          x1="24"
-          y1="24"
-          x2="24"
-          y2="4"
-          stroke="url(#{scanGradientId})"
-          stroke-width="2"
-          stroke-linecap="round"
-        />
-        <path
-          d="M 24 24 L 38 10 A 20 20 0 0 0 24 4 Z"
-          fill="url(#{sweepGradientId})"
-          opacity="0.3"
-        />
-      </g>
-    {:else}
-      <line
-        x1="24"
-        y1="24"
-        x2="24"
-        y2="8"
-        stroke={primaryColor}
-        stroke-opacity="0.6"
-        stroke-width="2"
-        stroke-linecap="round"
-      />
-    {/if}
-
-    <defs>
-      <linearGradient
-        id={scanGradientId}
-        x1="24"
-        y1="24"
-        x2="24"
-        y2="4"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0%" stop-color={primaryColor} stop-opacity="0" />
-        <stop offset="50%" stop-color={primaryColor} stop-opacity="0.8" />
-        <stop offset="100%" stop-color="#22D3EE" stop-opacity="1" />
-      </linearGradient>
-      <radialGradient id={sweepGradientId} cx="24" cy="24" r="20" gradientUnits="userSpaceOnUse">
-        <stop offset="0%" stop-color={primaryColor} stop-opacity="0.4" />
-        <stop offset="100%" stop-color={primaryColor} stop-opacity="0" />
-      </radialGradient>
-    </defs>
-  </svg>
-</div>
diff --git a/apps/extension/src/ui/design-tokens.css b/apps/extension/src/ui/design-tokens.css
index facf090b..81604e4f 100644
--- a/apps/extension/src/ui/design-tokens.css
+++ b/apps/extension/src/ui/design-tokens.css
@@ -5,17 +5,6 @@
 
 @import '@pulse/ui/app.css';
 
-/* ================================================
- * Compatibility aliases for existing extension UI classes
- * These stay local to the extension until all references are migrated.
- * ================================================ */
-
-@theme {
-  --color-accent-blue: #0b64e9;
-  --color-accent-emerald: #0b64e9;
-  --color-accent-red: #f24149;
-}
-
 /* ================================================
  * Base Styles (extension-specific)
  * ================================================ */
@@ -66,58 +55,6 @@ textarea:focus-visible,
   overflow-x: hidden;
 }
 
-/* ================================================
- * Card Container
- * ================================================ */
-
-.card {
-  background: var(--color-surface-white);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
-  padding: var(--spacing-16);
-}
-
-/* ================================================
- * Status Tags
- * ================================================ */
-
-.tag {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  padding: var(--spacing-4) var(--spacing-8);
-  border-radius: var(--radius-md);
-  font-family: var(--font-system);
-  font-size: var(--text-meta);
-  font-weight: 400;
-  line-height: var(--text-meta--line-height);
-}
-
-.tag--red {
-  background: var(--color-status-red);
-  color: #ffffff;
-}
-.tag--orange {
-  background: var(--color-status-orange);
-  color: #ffffff;
-}
-.tag--yellow {
-  background: var(--color-status-yellow);
-  color: #ffffff;
-}
-.tag--violet {
-  background: var(--color-status-violet);
-  color: #ffffff;
-}
-.tag--blue {
-  background: var(--color-blueprint-blue);
-  color: #ffffff;
-}
-.tag--gray {
-  background: var(--color-subtle-gray);
-  color: var(--color-text-secondary);
-}
-
 /* ================================================
  * Extension shell utilities — Analytical Blueprint
  * ================================================ */
diff --git a/apps/extension/src/ui/molecules/AlertBuilderCard.svelte b/apps/extension/src/ui/molecules/AlertBuilderCard.svelte
index 264ebed5..7160cba0 100644
--- a/apps/extension/src/ui/molecules/AlertBuilderCard.svelte
+++ b/apps/extension/src/ui/molecules/AlertBuilderCard.svelte
@@ -218,9 +218,7 @@
 <section class="section-card rounded-xl p-5">
   <div class="flex items-start justify-between gap-4">
     <div class="min-w-0">
-      <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-        Alerte prioritaire
-      </p>
+      <p class="eyebrow eyebrow--strong">Alerte prioritaire</p>
       <h3 class="mt-1 text-body-lg font-semibold text-text-primary">
         Définir ce qui mérite une action
       </h3>
@@ -314,7 +312,7 @@
 
     <div class="grid grid-cols-2 gap-2">
       <label class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-        <span class="block text-micro uppercase tracking-[0.13em] text-text-muted">TJM min</span>
+        <span class="block eyebrow">TJM min</span>
         <input
           type="number"
           min="0"
@@ -324,9 +322,7 @@
         />
       </label>
       <label class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-        <span class="block text-micro uppercase tracking-[0.13em] text-text-muted">
-          Max résultats
-        </span>
+        <span class="block eyebrow"> Max résultats </span>
         <input
           type="number"
           min="1"
@@ -412,19 +408,19 @@
         <p class="font-mono text-body-lg font-semibold tabular-nums text-text-primary">
           {alertPreview.totalMissions}
         </p>
-        <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Locales</p>
+        <p class="mt-0.5 eyebrow">Locales</p>
       </div>
       <div class="rounded-md bg-surface-white px-2 py-2">
         <p class="font-mono text-body-lg font-semibold tabular-nums text-text-primary">
           {alertPreview.matchingCount}
         </p>
-        <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Éligibles</p>
+        <p class="mt-0.5 eyebrow">Éligibles</p>
       </div>
       <div class="rounded-md bg-surface-white px-2 py-2">
         <p class="font-mono text-body-lg font-semibold tabular-nums text-text-primary">
           {alertPreview.notifyCount}
         </p>
-        <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Notifiées</p>
+        <p class="mt-0.5 eyebrow">Notifiées</p>
       </div>
     </div>
     {#if alertPreview.seenCount > 0}
diff --git a/apps/extension/src/ui/molecules/BackupRestoreModal.svelte b/apps/extension/src/ui/molecules/BackupRestoreModal.svelte
index 69e6da36..70c8f0d2 100644
--- a/apps/extension/src/ui/molecules/BackupRestoreModal.svelte
+++ b/apps/extension/src/ui/molecules/BackupRestoreModal.svelte
@@ -144,9 +144,7 @@
     <!-- Content -->
     {#if error}
       <div class="mb-5 rounded-2xl border border-status-red/20 bg-status-red/8 p-4">
-        <p class="text-micro font-semibold uppercase tracking-[0.15em] text-status-red">
-          Restauration bloquée
-        </p>
+        <p class="eyebrow eyebrow--strong text-status-red">Restauration bloquée</p>
         <p class="mt-2 text-body-lg leading-5 text-text-primary">{getErrorMessage(error)}</p>
         <p class="mt-2 text-meta leading-5 text-text-subtle">
           Choisissez un autre fichier ou recréez une sauvegarde depuis cet appareil.
@@ -168,9 +166,7 @@
 
       <div class="mb-5 grid grid-cols-2 gap-2">
         <div class="rounded-xl border border-border-light bg-page-canvas px-3 py-2.5">
-          <span class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">
-            Profil
-          </span>
+          <span class="eyebrow"> Profil </span>
           <span class="mt-1 block truncate text-body-lg font-medium text-text-primary">
             {stats.profileName || 'Non renseigné'}
             {#if stats.jobTitle}
@@ -180,9 +176,7 @@
         </div>
 
         <div class="rounded-xl border border-border-light bg-page-canvas px-3 py-2.5">
-          <span class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">
-            Favoris
-          </span>
+          <span class="eyebrow"> Favoris </span>
           <span
             class="mt-1 block font-mono text-body-lg font-semibold tabular-nums text-blueprint-blue"
             >{stats.favoritesCount} mission(s)</span
@@ -190,9 +184,7 @@
         </div>
 
         <div class="rounded-xl border border-border-light bg-page-canvas px-3 py-2.5">
-          <span class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">
-            Masquées
-          </span>
+          <span class="eyebrow"> Masquées </span>
           <span
             class="mt-1 block font-mono text-body-lg font-semibold tabular-nums text-text-primary"
           >
@@ -201,9 +193,7 @@
         </div>
 
         <div class="rounded-xl border border-border-light bg-page-canvas px-3 py-2.5">
-          <span class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">
-            Version
-          </span>
+          <span class="eyebrow"> Version </span>
           <span class="mt-1 block font-mono text-body-lg font-semibold text-text-primary">
             v{stats.version}
           </span>
@@ -211,9 +201,7 @@
       </div>
 
       <div class="mb-4 rounded-2xl border border-status-orange/25 bg-status-orange/8 p-4">
-        <p
-          class="flex items-center gap-2 text-micro font-semibold uppercase tracking-[0.15em] text-status-orange"
-        >
+        <p class="flex items-center gap-2 eyebrow eyebrow--strong text-status-orange">
           <Icon name="alert-triangle" size={13} class="shrink-0" />
           Décision requise
         </p>
@@ -247,9 +235,7 @@
           role="alert"
           aria-live="assertive"
         >
-          <p
-            class="flex items-center gap-2 text-micro font-semibold uppercase tracking-[0.15em] text-status-red"
-          >
+          <p class="flex items-center gap-2 eyebrow eyebrow--strong text-status-red">
             <Icon name="alert-circle" size={13} class="shrink-0" />
             Restauration échouée
           </p>
diff --git a/apps/extension/src/ui/molecules/ConnectorAlertBar.svelte b/apps/extension/src/ui/molecules/ConnectorAlertBar.svelte
index 91f202f4..a2ca5200 100644
--- a/apps/extension/src/ui/molecules/ConnectorAlertBar.svelte
+++ b/apps/extension/src/ui/molecules/ConnectorAlertBar.svelte
@@ -37,9 +37,7 @@
         </p>
 
         <div class="mt-3 rounded-xl border border-status-red/15 bg-surface-white/70 px-3 py-2">
-          <p class="text-micro font-semibold uppercase tracking-[0.14em] text-status-red">
-            Impact opérationnel
-          </p>
+          <p class="eyebrow eyebrow--strong text-status-red">Impact opérationnel</p>
           <p class="mt-1 text-caption leading-4 text-text-secondary">
             Pulse peut sous-estimer les nouvelles missions tant que
             {brokenConnectors.length === 1
diff --git a/apps/extension/src/ui/molecules/ExperienceCard.svelte b/apps/extension/src/ui/molecules/ExperienceCard.svelte
index 294c7a83..1d802708 100644
--- a/apps/extension/src/ui/molecules/ExperienceCard.svelte
+++ b/apps/extension/src/ui/molecules/ExperienceCard.svelte
@@ -387,7 +387,7 @@
       {/if}
 
       <div class="mt-2 flex items-center justify-between">
-        <span class="text-micro uppercase tracking-wide text-text-muted">{sourceLabel}</span>
+        <span class="eyebrow">{sourceLabel}</span>
         {#if snapshot.context.input.isBusy}
           <span class="inline-flex items-center gap-1 text-micro text-text-muted">
             <Icon name="loader-2" size={11} class="animate-spin" />
@@ -407,7 +407,7 @@
         {/if}
       </div>
       <div class="mt-2 flex items-center justify-between">
-        <span class="text-micro uppercase tracking-wide text-text-muted">{sourceLabel}</span>
+        <span class="eyebrow">{sourceLabel}</span>
         {#if snapshot.context.input.isBusy}
           <span class="inline-flex items-center gap-1 text-micro text-text-muted">
             <Icon name="loader-2" size={11} class="animate-spin" />
diff --git a/apps/extension/src/ui/molecules/FeedTourOverlay.svelte b/apps/extension/src/ui/molecules/FeedTourOverlay.svelte
index a6525af8..46c76b92 100644
--- a/apps/extension/src/ui/molecules/FeedTourOverlay.svelte
+++ b/apps/extension/src/ui/molecules/FeedTourOverlay.svelte
@@ -36,7 +36,7 @@
           <Icon name="star" size={16} />
         </div>
         <div>
-          <p class="text-caption uppercase tracking-[0.18em] text-blueprint-blue/80">
+          <p class="eyebrow eyebrow--caption text-blueprint-blue/80">
             Tour du feed · {stepIndex + 1}/{totalSteps}
           </p>
           <h3 class="mt-1 text-body-lg font-semibold text-text-primary">{step.title}</h3>
diff --git a/apps/extension/src/ui/molecules/KeyboardShortcutsHelp.svelte b/apps/extension/src/ui/molecules/KeyboardShortcutsHelp.svelte
index d3b225bc..af319ca3 100644
--- a/apps/extension/src/ui/molecules/KeyboardShortcutsHelp.svelte
+++ b/apps/extension/src/ui/molecules/KeyboardShortcutsHelp.svelte
@@ -98,9 +98,7 @@
               <Icon name="keyboard" size={17} class="text-blueprint-blue" />
             </div>
             <div class="min-w-0">
-              <p class="text-micro font-semibold uppercase tracking-[0.15em] text-blueprint-blue">
-                Navigation rapide
-              </p>
+              <p class="eyebrow eyebrow--strong eyebrow--blue">Navigation rapide</p>
               <h2 id="shortcuts-title" class="mt-0.5 text-heading font-semibold text-text-primary">
                 Raccourcis clavier
               </h2>
@@ -126,10 +124,7 @@
         <div class="space-y-4">
           {#each shortcutsByCategory as [category, shortcuts] (category)}
             <section aria-labelledby={`shortcut-category-${category}`}>
-              <h3
-                id={`shortcut-category-${category}`}
-                class="mb-2 text-micro font-semibold uppercase tracking-[0.15em] text-text-muted"
-              >
+              <h3 id={`shortcut-category-${category}`} class="mb-2 eyebrow eyebrow--strong">
                 {category}
               </h3>
               <div
diff --git a/apps/extension/src/ui/molecules/MissionCard.svelte b/apps/extension/src/ui/molecules/MissionCard.svelte
index 8d0abcd8..16e42fee 100644
--- a/apps/extension/src/ui/molecules/MissionCard.svelte
+++ b/apps/extension/src/ui/molecules/MissionCard.svelte
@@ -275,13 +275,13 @@
         {/if}
         {#if !isSeen}
           <span
-            class="inline-flex items-center rounded-full bg-blueprint-blue/8 px-2 py-0.5 text-micro font-medium uppercase tracking-wider text-blueprint-blue"
+            class="inline-flex items-center rounded-full bg-blueprint-blue/8 px-2 py-0.5 eyebrow eyebrow--blue"
           >
             Nouveau
           </span>
         {:else if showSeenStatus}
           <span
-            class="inline-flex items-center rounded-full bg-subtle-gray px-2 py-0.5 text-micro font-medium uppercase tracking-wider text-text-subtle"
+            class="inline-flex items-center rounded-full bg-subtle-gray px-2 py-0.5 eyebrow eyebrow--subtle"
           >
             Vu
           </span>
@@ -397,9 +397,7 @@
     >
       <div class="flex items-start justify-between gap-3">
         <div>
-          <p class="text-micro font-semibold uppercase tracking-[0.15em] text-blueprint-blue">
-            Note expliquée
-          </p>
+          <p class="eyebrow eyebrow--strong eyebrow--blue">Note expliquée</p>
           <p class="mt-1 text-caption leading-4 text-text-secondary">
             {#if missionGrade !== null}
               Note finale {missionGrade}, calculée depuis le profil, l’annonce et les critères
@@ -434,11 +432,11 @@
             {@const grade = scoreToGrade(line.value)}
             {@const color =
               grade === 'A'
-                ? 'bg-accent-green text-[#0c0a09]'
+                ? 'bg-accent-green text-text-primary'
                 : grade === 'B'
-                  ? 'bg-accent-amber text-[#0c0a09]'
+                  ? 'bg-accent-amber text-text-primary'
                   : grade === 'C'
-                    ? 'bg-status-orange text-[#0c0a09]'
+                    ? 'bg-status-orange text-text-primary'
                     : 'bg-disabled-gray text-text-secondary'}
             <div class="flex items-center gap-2.5 py-0.5">
               <span class="text-caption text-text-subtle flex-1">{line.label}</span>
@@ -486,14 +484,14 @@
       transition:slide={{ duration: isVirtualized ? 0 : 200 }}
     >
       <div class="rounded-lg border px-3 py-2.5 {decisionInsight.tone}">
-        <p class="text-micro font-semibold uppercase tracking-[0.13em]">{decisionInsight.label}</p>
+        <p class="eyebrow eyebrow--strong">{decisionInsight.label}</p>
         <p class="mt-1 text-caption leading-4 text-text-secondary">{decisionInsight.text}</p>
       </div>
 
       <div class="mt-3 grid grid-cols-2 gap-2 text-meta">
         {#if mission.tjm !== null}
           <div class="rounded-lg bg-page-canvas px-3 py-2.5">
-            <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-subtle">TJM</p>
+            <p class="eyebrow eyebrow--subtle">TJM</p>
             <p class="mt-1 font-mono font-semibold tabular-nums text-text-primary">
               {formatTJMValue(mission.tjm)}<span class="text-text-muted">/j</span>
             </p>
@@ -501,32 +499,30 @@
         {/if}
         {#if mission.location}
           <div class="rounded-lg bg-page-canvas px-3 py-2.5">
-            <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-subtle">Zone</p>
+            <p class="eyebrow eyebrow--subtle">Zone</p>
             <p class="mt-1 truncate text-text-primary">{mission.location}</p>
           </div>
         {/if}
         {#if mission.duration}
           <div class="rounded-lg bg-page-canvas px-3 py-2.5">
-            <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-subtle">Durée</p>
+            <p class="eyebrow eyebrow--subtle">Durée</p>
             <p class="mt-1 truncate text-text-primary">{mission.duration}</p>
           </div>
         {/if}
         {#if mission.startDate}
           <div class="rounded-lg bg-page-canvas px-3 py-2.5">
-            <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-subtle">Début</p>
+            <p class="eyebrow eyebrow--subtle">Début</p>
             <p class="mt-1 truncate text-text-primary">{mission.startDate}</p>
           </div>
         {/if}
         {#if seniorityLabel}
           <div class="rounded-lg bg-page-canvas px-3 py-2.5">
-            <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-subtle">
-              Séniorité
-            </p>
+            <p class="eyebrow eyebrow--subtle">Séniorité</p>
             <p class="mt-1 truncate text-text-primary">{seniorityLabel}</p>
           </div>
         {/if}
         <div class="rounded-lg bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-subtle">Source</p>
+          <p class="eyebrow eyebrow--subtle">Source</p>
           <p class="mt-1 truncate text-text-primary">{mission.source}</p>
         </div>
       </div>
diff --git a/apps/extension/src/ui/molecules/OperationalEmptyState.svelte b/apps/extension/src/ui/molecules/OperationalEmptyState.svelte
index 16ae9881..ec00db90 100644
--- a/apps/extension/src/ui/molecules/OperationalEmptyState.svelte
+++ b/apps/extension/src/ui/molecules/OperationalEmptyState.svelte
@@ -66,9 +66,7 @@
     </div>
     <div class="min-w-0 flex-1">
       <div class="flex flex-wrap items-center gap-2">
-        <p class="text-caption font-semibold uppercase tracking-[0.15em] text-text-subtle">
-          Décision
-        </p>
+        <p class="eyebrow eyebrow--caption eyebrow--strong eyebrow--subtle">Décision</p>
         {#if statusLabel}
           <OperationalStatusBadge label={statusLabel} {severity} />
         {/if}
@@ -80,7 +78,7 @@
 
   {#if proofLabel && proofValue !== null}
     <div class="mt-4 rounded-lg border border-border-light bg-surface-white/70 px-3 py-2">
-      <p class="text-caption font-semibold uppercase tracking-[0.13em] text-text-subtle">
+      <p class="eyebrow eyebrow--caption eyebrow--strong eyebrow--subtle">
         {proofLabel}
       </p>
       <p class="mt-1 font-mono text-body-lg font-semibold tabular-nums text-text-primary">
diff --git a/apps/extension/src/ui/molecules/OperationalStoryCard.svelte b/apps/extension/src/ui/molecules/OperationalStoryCard.svelte
index 7c5508de..a6f5f3fd 100644
--- a/apps/extension/src/ui/molecules/OperationalStoryCard.svelte
+++ b/apps/extension/src/ui/molecules/OperationalStoryCard.svelte
@@ -141,7 +141,7 @@
       <div class="min-w-0 flex-1">
         <div class="flex flex-wrap items-center gap-2">
           {#if eyebrow}
-            <p class="text-caption font-semibold uppercase tracking-[0.15em] text-text-subtle">
+            <p class="eyebrow eyebrow--caption eyebrow--strong eyebrow--subtle">
               {eyebrow}
             </p>
           {/if}
@@ -160,9 +160,7 @@
       <div class="grid grid-cols-3 gap-2">
         {#each evidence as item, i (i)}
           <div class="rounded-lg border border-border-light bg-surface-white/70 px-3 py-2">
-            <p
-              class="flex items-center gap-1 text-caption uppercase tracking-[0.13em] text-text-subtle"
-            >
+            <p class="flex items-center gap-1 eyebrow eyebrow--caption eyebrow--subtle">
               {#if item.icon}
                 <Icon name={item.icon} size={10} />
               {/if}
diff --git a/apps/extension/src/ui/molecules/PageHeader.svelte b/apps/extension/src/ui/molecules/PageHeader.svelte
index d41a0365..7d2d68a7 100644
--- a/apps/extension/src/ui/molecules/PageHeader.svelte
+++ b/apps/extension/src/ui/molecules/PageHeader.svelte
@@ -33,7 +33,7 @@
       </div>
     {/if}
     <div class="min-w-0 flex-1">
-      <p class="eyebrow text-blueprint-blue">{eyebrow}</p>
+      <p class="eyebrow eyebrow--blue">{eyebrow}</p>
       <div class="mt-1 flex flex-wrap items-center gap-2">
         <h1 class="text-subheading font-semibold text-text-primary">{title}</h1>
         {#if badge}
diff --git a/apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte b/apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte
index 79244cfc..f5fcb02c 100644
--- a/apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte
+++ b/apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte
@@ -91,7 +91,7 @@
       >
         <div class="flex items-start justify-between gap-2">
           <div class="min-w-0">
-            <p class="text-caption font-medium uppercase tracking-[0.15em] text-text-subtle">
+            <p class="eyebrow eyebrow--caption eyebrow--subtle">
               {card.label}
             </p>
             <p class="mt-1 text-heading font-semibold tabular-nums text-text-primary">
@@ -120,9 +120,7 @@
 
   <div class="rounded-xl border border-border-light bg-surface-white p-3">
     <div class="mb-2 flex items-center justify-between gap-3">
-      <p class="text-caption font-semibold uppercase tracking-[0.15em] text-text-subtle">
-        Avancement
-      </p>
+      <p class="eyebrow eyebrow--caption eyebrow--strong eyebrow--subtle">Avancement</p>
       {#if summary.bottleneck}
         <p class="flex items-center gap-1 text-caption text-text-subtle">
           <Icon name="traffic-cone" size={11} />
diff --git a/apps/extension/src/ui/organisms/CopilotPanel.svelte b/apps/extension/src/ui/organisms/CopilotPanel.svelte
index 78265fdb..ead4612b 100644
--- a/apps/extension/src/ui/organisms/CopilotPanel.svelte
+++ b/apps/extension/src/ui/organisms/CopilotPanel.svelte
@@ -353,7 +353,7 @@
 
       {#if store.dossier.approvedArtifacts.length > 0}
         <div class="mt-3 space-y-2">
-          <p class="text-caption font-medium uppercase tracking-[0.14em] text-text-subtle">
+          <p class="eyebrow eyebrow--caption eyebrow--subtle">
             Brouillons approuvés ({store.dossier.approvedArtifacts.length})
           </p>
           {#each store.dossier.approvedArtifacts as artifact (artifact.artifactId)}
@@ -447,9 +447,7 @@
       </summary>
       <div class="border-t border-border-light p-3">
         <fieldset>
-          <legend class="text-caption font-medium uppercase tracking-[0.14em] text-text-subtle">
-            Mission
-          </legend>
+          <legend class="eyebrow eyebrow--caption eyebrow--subtle"> Mission </legend>
           <div class="mt-2 grid grid-cols-2 gap-2">
             {#each store.missionFieldOptions as field (field)}
               <label class="flex items-center gap-2 text-caption text-text-secondary">
@@ -466,9 +464,7 @@
         </fieldset>
 
         <fieldset class="mt-4">
-          <legend class="text-caption font-medium uppercase tracking-[0.14em] text-text-subtle">
-            Profil
-          </legend>
+          <legend class="eyebrow eyebrow--caption eyebrow--subtle"> Profil </legend>
           <div class="mt-2 grid grid-cols-2 gap-2">
             {#each store.profileFieldOptions as field (field)}
               <label class="flex items-center gap-2 text-caption text-text-secondary">
@@ -486,7 +482,7 @@
 
         {#if store.availableEvidence.length > 0}
           <fieldset class="mt-4">
-            <legend class="text-caption font-medium uppercase tracking-[0.14em] text-text-subtle">
+            <legend class="eyebrow eyebrow--caption eyebrow--subtle">
               Expériences comme sources
             </legend>
             <div class="mt-2 space-y-2">
@@ -573,9 +569,7 @@
 
         {#if store.job.tjmFacts}
           <div class="mt-3 rounded-lg border border-border-light bg-surface-white p-3">
-            <p class="text-caption font-medium uppercase tracking-[0.14em] text-text-subtle">
-              Repères locaux déterministes
-            </p>
+            <p class="eyebrow eyebrow--caption eyebrow--subtle">Repères locaux déterministes</p>
             <div class="mt-2 grid grid-cols-2 gap-2 text-caption text-text-secondary">
               <span>Mission : {formatEur(store.job.tjmFacts.missionDisplayedTjm)}</span>
               <span>Cible profil : {formatEur(store.job.tjmFacts.profileBounds.target)}</span>
@@ -593,9 +587,7 @@
 
         {#if store.job.result && store.job.status === 'review'}
           <div class="mt-3 rounded-lg border border-border-light bg-surface-white p-3">
-            <p class="text-caption font-medium uppercase tracking-[0.14em] text-blueprint-blue">
-              Proposition IA non vérifiée
-            </p>
+            <p class="eyebrow eyebrow--caption eyebrow--blue">Proposition IA non vérifiée</p>
             {#if groundedDraftText}
               <div class="mt-3 border-t border-border-light pt-3">
                 <p class="text-caption font-medium text-text-primary">Sources à vérifier</p>
diff --git a/apps/extension/src/ui/organisms/DangerZone.svelte b/apps/extension/src/ui/organisms/DangerZone.svelte
index 010d67d9..eeb6e79a 100644
--- a/apps/extension/src/ui/organisms/DangerZone.svelte
+++ b/apps/extension/src/ui/organisms/DangerZone.svelte
@@ -85,9 +85,7 @@
       </div>
     {:else if showResetConfirm}
       <div class="rounded-xl border border-status-red/20 bg-status-red/6 px-3 py-2.5">
-        <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-primary">
-          Suppression irréversible
-        </p>
+        <p class="eyebrow eyebrow--strong text-text-primary">Suppression irréversible</p>
         <p class="mt-1.5 text-meta leading-4 text-text-primary">
           Impact : profil, missions, favoris, masquées, vues et caches IA supprimés de cet appareil.
         </p>
diff --git a/apps/extension/src/ui/organisms/ExperienceFeed.svelte b/apps/extension/src/ui/organisms/ExperienceFeed.svelte
index 85d742f6..7fed9044 100644
--- a/apps/extension/src/ui/organisms/ExperienceFeed.svelte
+++ b/apps/extension/src/ui/organisms/ExperienceFeed.svelte
@@ -226,7 +226,7 @@
         <div
           class="sticky top-0 z-10 -mt-1 flex items-baseline gap-2 bg-page-canvas/95 py-1.5 backdrop-blur-sm"
         >
-          <h3 class="text-micro font-semibold tracking-[0.14em] uppercase text-text-subtle">
+          <h3 class="eyebrow eyebrow--strong eyebrow--subtle">
             {group.year === 0 ? 'Sans date' : group.year}
           </h3>
           <span class="text-micro text-text-muted">
diff --git a/apps/extension/src/ui/organisms/FeedActionDashboard.svelte b/apps/extension/src/ui/organisms/FeedActionDashboard.svelte
index 53e1f8c7..ceb8525e 100644
--- a/apps/extension/src/ui/organisms/FeedActionDashboard.svelte
+++ b/apps/extension/src/ui/organisms/FeedActionDashboard.svelte
@@ -129,7 +129,7 @@
       aria-pressed={showNewOnly}
       title="Filtrer les nouvelles missions"
     >
-      <span class="flex items-center gap-1 text-micro uppercase tracking-[0.14em] text-text-muted">
+      <span class="flex items-center gap-1 eyebrow">
         <Icon name="sparkles" size={11} />
         Nouvelles
       </span>
@@ -148,7 +148,7 @@
       aria-pressed={selectedScoreBucket === 'strong'}
       title="Filtrer les missions prioritaires"
     >
-      <span class="flex items-center gap-1 text-micro uppercase tracking-[0.14em] text-text-muted">
+      <span class="flex items-center gap-1 eyebrow">
         <Icon name="target" size={11} />
         Note A
       </span>
@@ -163,7 +163,7 @@
       onclick={onToggleFavorites}
       title="Filtrer les favoris"
     >
-      <span class="flex items-center gap-1 text-micro uppercase tracking-[0.14em] text-text-muted">
+      <span class="flex items-center gap-1 eyebrow">
         <Icon name="star" size={11} />
         Favoris
       </span>
@@ -173,7 +173,7 @@
     </button>
 
     <div class="min-w-0 rounded-lg px-2 py-2">
-      <span class="flex items-center gap-1 text-micro uppercase tracking-[0.14em] text-text-muted">
+      <span class="flex items-center gap-1 eyebrow">
         <Icon name={brokenConnectorCount > 0 ? 'circle-alert' : 'shield-check'} size={11} />
         Sources
       </span>
@@ -189,9 +189,7 @@
 
   <div class="mt-3" aria-label="Distribution des missions par note">
     <div class="mb-1.5 flex items-center justify-between gap-3">
-      <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-        Notes des missions
-      </p>
+      <p class="eyebrow eyebrow--strong">Notes des missions</p>
       <p class="text-micro text-text-muted">{summary.visibleCount} visibles</p>
     </div>
 
diff --git a/apps/extension/src/ui/organisms/FormAssistPanel.svelte b/apps/extension/src/ui/organisms/FormAssistPanel.svelte
index b1639ffa..2cbb5c28 100644
--- a/apps/extension/src/ui/organisms/FormAssistPanel.svelte
+++ b/apps/extension/src/ui/organisms/FormAssistPanel.svelte
@@ -141,9 +141,7 @@
 <section class="section-card rounded-xl p-5" aria-labelledby="form-assist-title">
   <div class="flex items-start justify-between gap-3">
     <div>
-      <p class="text-[10px] font-semibold uppercase tracking-[0.15em] text-blueprint-blue">
-        Premium · local-first
-      </p>
+      <p class="eyebrow eyebrow--strong eyebrow--blue">Premium · local-first</p>
       <h3 id="form-assist-title" class="mt-1 text-sm font-semibold text-text-primary">
         Assistance au formulaire actif
       </h3>
diff --git a/apps/extension/src/ui/organisms/MetricsPanel.svelte b/apps/extension/src/ui/organisms/MetricsPanel.svelte
index c2a43b3d..f533fc2d 100644
--- a/apps/extension/src/ui/organisms/MetricsPanel.svelte
+++ b/apps/extension/src/ui/organisms/MetricsPanel.svelte
@@ -423,7 +423,7 @@
       <section class="rounded-2xl border p-4 {toneClasses(operationalSummary.tone)}">
         <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
           <div class="min-w-0">
-            <p class="text-micro font-semibold uppercase tracking-[0.16em]">
+            <p class="eyebrow eyebrow--strong">
               {operationalSummary.statusLabel}
             </p>
             <h2 class="mt-2 text-heading-lg font-semibold leading-tight text-text-primary">
@@ -440,7 +440,7 @@
             {#each prioritySignals as signal, i (i)}
               <div class="rounded-xl border border-surface-white/70 bg-surface-white/70 px-3 py-2">
                 <div class="flex items-center justify-between gap-2">
-                  <span class="text-micro font-medium uppercase tracking-[0.14em] text-text-muted">
+                  <span class="eyebrow">
                     {signal.label}
                   </span>
                   <Icon name={signal.icon} size={12} class="shrink-0" />
@@ -476,9 +476,7 @@
       {#if activeTab === 'overview'}
         <div class="grid gap-3 md:grid-cols-2">
           <section class="rounded-xl border border-border-light bg-surface-white p-4">
-            <p class="text-micro font-semibold uppercase tracking-[0.16em] text-text-muted">
-              Signaux prioritaires
-            </p>
+            <p class="eyebrow eyebrow--strong">Signaux prioritaires</p>
             <div class="mt-3 space-y-2">
               {#each prioritySignals as signal, i (i)}
                 <article class="rounded-xl border border-border-light bg-page-canvas px-3 py-2.5">
@@ -498,9 +496,7 @@
           </section>
 
           <section class="rounded-xl border border-border-light bg-surface-white p-4">
-            <p class="text-micro font-semibold uppercase tracking-[0.16em] text-text-muted">
-              Couverture par source
-            </p>
+            <p class="eyebrow eyebrow--strong">Couverture par source</p>
             {#if missionsByConnector.size === 0}
               <div class="mt-3 rounded-xl border border-status-orange/20 bg-status-orange/8 p-3">
                 <p class="text-body-lg font-medium text-text-primary">
@@ -539,9 +535,7 @@
         </div>
       {:else if activeTab === 'scan'}
         <section class="rounded-xl border border-border-light bg-surface-white p-4">
-          <p class="text-micro font-semibold uppercase tracking-[0.16em] text-text-muted">
-            Timeline des scans
-          </p>
+          <p class="eyebrow eyebrow--strong">Timeline des scans</p>
           <div class="mt-3 rounded-xl border border-border-light bg-page-canvas p-3">
             <p class="text-body-lg font-semibold text-text-primary">
               {scanStats.scanCount > 0
@@ -588,9 +582,7 @@
         </section>
 
         <section class="rounded-xl border border-border-light bg-surface-white p-4">
-          <p class="text-micro font-semibold uppercase tracking-[0.16em] text-text-muted">
-            Incidents récents
-          </p>
+          <p class="eyebrow eyebrow--strong">Incidents récents</p>
           <div class="mt-3 space-y-2">
             {#each recentErrors as error, i (i)}
               <article class="rounded-xl border border-status-red/20 bg-status-red/8 px-3 py-2.5">
@@ -622,9 +614,7 @@
         </section>
       {:else if activeTab === 'cache'}
         <section class="rounded-xl border border-border-light bg-surface-white p-4">
-          <p class="text-micro font-semibold uppercase tracking-[0.16em] text-text-muted">
-            Diagnostic cache
-          </p>
+          <p class="eyebrow eyebrow--strong">Diagnostic cache</p>
           <div
             class="mt-3 rounded-xl border p-3 {cacheStats.lastHitRate >= 70
               ? 'border-blueprint-blue/20 bg-blueprint-blue/6'
@@ -677,9 +667,7 @@
         </section>
       {:else if activeTab === 'timings'}
         <section class="rounded-xl border border-border-light bg-surface-white p-4">
-          <p class="text-micro font-semibold uppercase tracking-[0.16em] text-text-muted">
-            Latences à prioriser
-          </p>
+          <p class="eyebrow eyebrow--strong">Latences à prioriser</p>
           <div class="mt-3 space-y-2">
             {#each slowestTimings as [operation, stats] (operation)}
               <article class="rounded-xl border border-border-light bg-page-canvas px-3 py-2.5">
@@ -718,9 +706,7 @@
         </section>
       {:else if activeTab === 'webvitals'}
         <section class="rounded-xl border border-border-light bg-surface-white p-4">
-          <p class="text-micro font-semibold uppercase tracking-[0.16em] text-text-muted">
-            Expérience perçue
-          </p>
+          <p class="eyebrow eyebrow--strong">Expérience perçue</p>
           <div class="mt-3 grid grid-cols-2 gap-2 md:grid-cols-4">
             {#each [{ label: 'FCP', value: webVitals.fcp, limit: 1800, incident: 3000, help: 'Premier contenu visible' }, { label: 'LCP', value: webVitals.lcp, limit: 2500, incident: 4000, help: 'Contenu principal visible' }, { label: 'CLS', value: webVitals.cls, limit: 0.1, incident: 0.25, help: 'Stabilité visuelle' }, { label: 'FID', value: webVitals.fid ?? 0, limit: 100, incident: 300, help: 'Réactivité interaction' }] as vital (vital.label)}
               {@const measured = vital.value > 0}
@@ -732,7 +718,7 @@
                     ? 'attention'
                     : 'success'}
               <article class="rounded-xl border p-3 {toneClasses(tone)}">
-                <p class="text-micro font-semibold uppercase tracking-[0.14em]">{vital.label}</p>
+                <p class="eyebrow eyebrow--strong">{vital.label}</p>
                 <p class="mt-1 font-mono text-heading font-semibold tabular-nums text-text-primary">
                   {measured
                     ? vital.label === 'CLS'
diff --git a/apps/extension/src/ui/organisms/MissionArrivalStack.svelte b/apps/extension/src/ui/organisms/MissionArrivalStack.svelte
index 11850ae9..0896a325 100644
--- a/apps/extension/src/ui/organisms/MissionArrivalStack.svelte
+++ b/apps/extension/src/ui/organisms/MissionArrivalStack.svelte
@@ -101,11 +101,7 @@
       >
         <div class="flex items-start justify-between gap-4 border-b border-border-light px-4 py-3">
           <div class="min-w-0">
-            <p
-              class="mb-1 text-micro font-semibold uppercase tracking-[0.14em] text-blueprint-blue"
-            >
-              En attente
-            </p>
+            <p class="mb-1 eyebrow eyebrow--strong eyebrow--blue">En attente</p>
             <h2
               id="arrival-drawer-title"
               class="text-body-lg font-semibold text-text-primary outline-none"
diff --git a/apps/extension/src/ui/organisms/MissionComparison.svelte b/apps/extension/src/ui/organisms/MissionComparison.svelte
index f51beefb..4fae662f 100644
--- a/apps/extension/src/ui/organisms/MissionComparison.svelte
+++ b/apps/extension/src/ui/organisms/MissionComparison.svelte
@@ -171,9 +171,7 @@
                 <Icon name="target" size={16} />
               </span>
               <div class="min-w-0 flex-1">
-                <p class="text-micro font-semibold uppercase tracking-[0.15em] text-blueprint-blue">
-                  Décision recommandée
-                </p>
+                <p class="eyebrow eyebrow--strong eyebrow--blue">Décision recommandée</p>
                 <h3 class="mt-1 text-body-lg font-semibold text-text-primary">
                   {recommendationTitle}
                 </h3>
@@ -183,9 +181,7 @@
                       <span
                         class="inline-flex items-baseline gap-1 rounded-md bg-blueprint-blue/10 px-2 py-0.5 text-meta text-blueprint-blue"
                       >
-                        <span class="text-micro uppercase tracking-[0.12em] opacity-70"
-                          >{evidence.label}</span
-                        >
+                        <span class="eyebrow opacity-70">{evidence.label}</span>
                         <span class="font-semibold tabular-nums">{evidence.value}</span>
                       </span>
                     {/each}
@@ -205,7 +201,7 @@
         class="grid border-b border-border-light px-4 py-3"
         style="grid-template-columns: 90px repeat({missions.length}, 1fr)"
       >
-        <div class="text-caption uppercase tracking-[0.15em] text-text-muted self-end">Mission</div>
+        <div class="eyebrow eyebrow--caption self-end">Mission</div>
         {#each missions as mission (mission.id)}
           <div
             class="px-2 {mission.id === recommendedMission?.id
@@ -230,7 +226,7 @@
         class="grid border-b border-border-light px-4 py-3"
         style="grid-template-columns: 90px repeat({missions.length}, 1fr)"
       >
-        <div class="text-caption uppercase tracking-[0.15em] text-text-muted">Stack</div>
+        <div class="eyebrow eyebrow--caption">Stack</div>
         {#each missions as mission (mission.id)}
           <div
             class="flex flex-wrap gap-1 px-2 {mission.id === recommendedMission?.id
@@ -256,7 +252,7 @@
           class="grid px-4 py-2.5 {i % 2 === 0 ? 'bg-page-canvas' : ''}"
           style="grid-template-columns: 90px repeat({missions.length}, 1fr)"
         >
-          <div class="text-caption uppercase tracking-[0.15em] text-text-muted">{field.label}</div>
+          <div class="eyebrow eyebrow--caption">{field.label}</div>
           {#each missions as mission (mission.id)}
             <div
               class="px-2 text-meta text-text-primary {mission.id === recommendedMission?.id
@@ -296,7 +292,7 @@
               class="grid px-4 py-2.5 {i % 2 === 0 ? 'bg-page-canvas' : ''}"
               style="grid-template-columns: 90px repeat({missions.length}, 1fr)"
             >
-              <div class="text-caption uppercase tracking-[0.15em] text-text-muted">
+              <div class="eyebrow eyebrow--caption">
                 {field.label}
               </div>
               {#each missions as mission (mission.id)}
diff --git a/apps/extension/src/ui/organisms/MissionInvestigationDrawer.svelte b/apps/extension/src/ui/organisms/MissionInvestigationDrawer.svelte
index ebd125bc..5a55b476 100644
--- a/apps/extension/src/ui/organisms/MissionInvestigationDrawer.svelte
+++ b/apps/extension/src/ui/organisms/MissionInvestigationDrawer.svelte
@@ -293,9 +293,7 @@
     >
       <div class="mx-auto flex w-full max-w-6xl items-start justify-between gap-4">
         <div class="min-w-0 flex-1">
-          <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-            Investigation
-          </p>
+          <p class="eyebrow eyebrow--strong">Investigation</p>
           <h2 class="mt-1 max-w-4xl text-heading-lg font-semibold leading-tight text-text-primary">
             {mission.title}
           </h2>
@@ -460,9 +458,7 @@
             <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
               {#each missionFacts as fact, i (i)}
                 <div class="rounded-lg bg-page-canvas px-3 py-3">
-                  <p
-                    class="flex items-center gap-1.5 text-micro uppercase tracking-[0.13em] text-text-muted"
-                  >
+                  <p class="flex items-center gap-1.5 eyebrow">
                     <Icon name={fact.icon} size={11} />
                     {fact.label}
                   </p>
diff --git a/apps/extension/src/ui/organisms/OnboardingFlow.svelte b/apps/extension/src/ui/organisms/OnboardingFlow.svelte
index c8bef299..c81ad1db 100644
--- a/apps/extension/src/ui/organisms/OnboardingFlow.svelte
+++ b/apps/extension/src/ui/organisms/OnboardingFlow.svelte
@@ -144,7 +144,7 @@
 {:else if snapshot.phase === 'connecting'}
   <section class="flex h-full flex-col" transition:fade={{ duration: 120 }}>
     <div class="flex-1">
-      <p class="text-xs font-medium uppercase tracking-[0.18em] text-text-muted">
+      <p class="eyebrow eyebrow--caption">
         Étape {snapshot.progress.current}/{snapshot.progress.total}
       </p>
       <h2 class="mt-2 text-heading-lg font-semibold leading-tight text-text-primary">
@@ -222,7 +222,7 @@
     </div>
 
     <div class="flex-1 pt-5">
-      <p class="text-xs font-medium uppercase tracking-[0.18em] text-text-muted">
+      <p class="eyebrow eyebrow--caption">
         Étape {snapshot.progress.current}/{snapshot.progress.total} · {stepLabel}
       </p>
       <h2 class="mt-2 text-heading-lg font-semibold leading-tight text-text-primary">
@@ -317,9 +317,7 @@
             aria-label="Aperçu de correspondance"
             class="rounded-2xl border border-border-light bg-surface-white p-4"
           >
-            <p class="text-xs font-medium uppercase tracking-[0.12em] text-text-muted">
-              Aperçu en direct
-            </p>
+            <p class="eyebrow eyebrow--caption">Aperçu en direct</p>
             <div class="mt-2 flex items-center gap-3">
               <span
                 class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {previewGradeClass} text-heading font-semibold"
@@ -419,7 +417,7 @@
   <!-- Bottom-sheet style notify step: benefit-first, native Toggle. -->
   <section class="flex h-full flex-col" transition:fade={{ duration: 120 }}>
     <div class="flex-1">
-      <p class="text-xs font-medium uppercase tracking-[0.18em] text-text-muted">
+      <p class="eyebrow eyebrow--caption">
         Étape {snapshot.progress.current}/{snapshot.progress.total}
       </p>
       <h2 class="mt-2 text-heading-lg font-semibold leading-tight text-text-primary">
diff --git a/apps/extension/src/ui/organisms/PlatformAccountsPanel.svelte b/apps/extension/src/ui/organisms/PlatformAccountsPanel.svelte
index fb2a8f1e..ce767c28 100644
--- a/apps/extension/src/ui/organisms/PlatformAccountsPanel.svelte
+++ b/apps/extension/src/ui/organisms/PlatformAccountsPanel.svelte
@@ -90,9 +90,7 @@
 >
   <div class="flex items-start justify-between gap-3">
     <div>
-      <p class="text-[10px] font-semibold uppercase tracking-[0.15em] text-blueprint-blue">
-        Multi-compte
-      </p>
+      <p class="eyebrow eyebrow--strong eyebrow--blue">Multi-compte</p>
       <h3 id="platform-accounts-title" class="mt-1 text-sm font-semibold text-text-primary">
         Comptes plateforme
       </h3>
@@ -152,7 +150,7 @@
     <div class="mt-4 space-y-3">
       {#each groupedBindings as group (group.id)}
         <div>
-          <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-text-muted">
+          <p class="eyebrow eyebrow--strong">
             {group.label}
           </p>
           <div class="mt-1 space-y-1.5">
diff --git a/apps/extension/src/ui/organisms/ProfileSection.svelte b/apps/extension/src/ui/organisms/ProfileSection.svelte
index e061dddd..1f579a1b 100644
--- a/apps/extension/src/ui/organisms/ProfileSection.svelte
+++ b/apps/extension/src/ui/organisms/ProfileSection.svelte
@@ -131,9 +131,7 @@
       </datalist>
       <div class="grid grid-cols-2 gap-2">
         <label class="space-y-1">
-          <span class="text-micro font-medium uppercase tracking-[0.12em] text-text-muted">
-            Remote
-          </span>
+          <span class="eyebrow"> Remote </span>
           <select
             class="w-full rounded-lg border border-border-light bg-page-canvas px-3 py-2.5 text-body-lg text-text-primary outline-none transition-colors focus:border-blueprint-blue/30"
             bind:value={profileRemote}
@@ -147,9 +145,7 @@
           </span>
         </label>
         <label class="space-y-1">
-          <span class="text-micro font-medium uppercase tracking-[0.12em] text-text-muted">
-            Séniorité
-          </span>
+          <span class="eyebrow"> Séniorité </span>
           <select
             class="w-full rounded-lg border border-border-light bg-page-canvas px-3 py-2.5 text-body-lg text-text-primary outline-none transition-colors focus:border-blueprint-blue/30"
             bind:value={seniority}
@@ -187,7 +183,7 @@
       </div>
 
       <div class="space-y-2">
-        <p class="text-micro font-medium uppercase tracking-[0.12em] text-text-muted">Mots-clés</p>
+        <p class="eyebrow">Mots-clés</p>
         <div class="flex gap-2">
           <input
             type="text"
@@ -242,15 +238,13 @@
       <p class="text-text-subtle">{profileLocation || 'Localisation non renseignée'}</p>
       <div class="grid grid-cols-2 gap-2">
         <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">Remote</p>
+          <p class="eyebrow">Remote</p>
           <p class="mt-1 text-meta font-medium text-text-primary">
             {remoteOptions.find((option) => option.value === profileRemote)?.label ?? 'Indifférent'}
           </p>
         </div>
         <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">
-            Séniorité
-          </p>
+          <p class="eyebrow">Séniorité</p>
           <p class="mt-1 text-meta font-medium text-text-primary">
             {seniorityOptions.find((option) => option.value === seniority)?.label ?? 'Senior'}
           </p>
diff --git a/apps/extension/src/ui/organisms/ScanProgress.svelte b/apps/extension/src/ui/organisms/ScanProgress.svelte
index 1b6f241f..97f6bbd3 100644
--- a/apps/extension/src/ui/organisms/ScanProgress.svelte
+++ b/apps/extension/src/ui/organisms/ScanProgress.svelte
@@ -95,17 +95,17 @@
     {#if entries.length > 0}
       <div class="mt-2 grid grid-cols-3 gap-1.5">
         <div class="rounded-lg bg-page-canvas px-2 py-1.5">
-          <p class="text-micro uppercase tracking-[0.12em] text-text-muted">Actifs</p>
+          <p class="eyebrow">Actifs</p>
           <p class="mt-0.5 text-meta font-semibold tabular-nums text-blueprint-blue">
             {activeCount}
           </p>
         </div>
         <div class="rounded-lg bg-page-canvas px-2 py-1.5">
-          <p class="text-micro uppercase tracking-[0.12em] text-text-muted">Terminés</p>
+          <p class="eyebrow">Terminés</p>
           <p class="mt-0.5 text-meta font-semibold tabular-nums text-accent-green">{doneCount}</p>
         </div>
         <div class="rounded-lg bg-page-canvas px-2 py-1.5">
-          <p class="text-micro uppercase tracking-[0.12em] text-text-muted">Erreurs</p>
+          <p class="eyebrow">Erreurs</p>
           <p
             class="mt-0.5 text-meta font-semibold tabular-nums {errorCount > 0
               ? 'text-status-red'
diff --git a/apps/extension/src/ui/organisms/ScanSettings.svelte b/apps/extension/src/ui/organisms/ScanSettings.svelte
index 151c08c0..e4957268 100644
--- a/apps/extension/src/ui/organisms/ScanSettings.svelte
+++ b/apps/extension/src/ui/organisms/ScanSettings.svelte
@@ -84,9 +84,7 @@
   </p>
   <div class="grid gap-2 sm:grid-cols-3" aria-label="Historique et cadence des scans">
     <div class="rounded-lg border border-border-light bg-surface-white px-3 py-2">
-      <p class="text-micro font-semibold uppercase tracking-[0.12em] text-text-muted">
-        Dernier déclenchement
-      </p>
+      <p class="eyebrow eyebrow--strong">Dernier déclenchement</p>
       <p class="mt-1 text-caption leading-4 text-text-secondary">{lastScanLabel}</p>
     </div>
     <div
@@ -96,15 +94,11 @@
           ? 'border-blueprint-blue/20 bg-blueprint-blue/6'
           : 'border-border-light bg-surface-white'}"
     >
-      <p class="text-micro font-semibold uppercase tracking-[0.12em] text-text-muted">
-        Historique récent
-      </p>
+      <p class="eyebrow eyebrow--strong">Historique récent</p>
       <p class="mt-1 text-caption leading-4 text-text-secondary">{scanHistoryLabel}</p>
     </div>
     <div class="rounded-lg border border-border-light bg-surface-white px-3 py-2">
-      <p class="text-micro font-semibold uppercase tracking-[0.12em] text-text-muted">
-        Prochain déclenchement
-      </p>
+      <p class="eyebrow eyebrow--strong">Prochain déclenchement</p>
       <p class="mt-1 text-caption leading-4 text-text-secondary">{nextScanLabel}</p>
     </div>
   </div>
diff --git a/apps/extension/src/ui/organisms/ScanSummary.svelte b/apps/extension/src/ui/organisms/ScanSummary.svelte
index 010c86f0..f0fd3b30 100644
--- a/apps/extension/src/ui/organisms/ScanSummary.svelte
+++ b/apps/extension/src/ui/organisms/ScanSummary.svelte
@@ -63,7 +63,7 @@
     <dl class="flex min-w-0 flex-wrap items-center justify-end gap-1.5">
       {#each summary.evidence as row (row.label)}
         <div class="rounded-lg bg-page-canvas px-2 py-1 text-center">
-          <dt class="text-micro uppercase tracking-[0.1em] text-text-muted">{row.label}</dt>
+          <dt class="eyebrow">{row.label}</dt>
           <dd class="mt-0.5 text-meta font-semibold tabular-nums font-mono {valueClass(row.tone)}">
             {row.value}
           </dd>
diff --git a/apps/extension/src/ui/organisms/SourceHealthPanel.svelte b/apps/extension/src/ui/organisms/SourceHealthPanel.svelte
index af67d272..fed0f541 100644
--- a/apps/extension/src/ui/organisms/SourceHealthPanel.svelte
+++ b/apps/extension/src/ui/organisms/SourceHealthPanel.svelte
@@ -286,9 +286,7 @@
       <div class="px-4 pt-3 pb-2">
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-2">
-            <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-              Sources
-            </p>
+            <p class="eyebrow eyebrow--strong">Sources</p>
             {#if !isChecking}
               <span
                 class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-micro font-medium
@@ -532,7 +530,7 @@
 
       {#if unhealthySnapshots.length > 0}
         <div class="border-t border-border-light px-4 py-3">
-          <p class="text-micro uppercase tracking-[0.15em] text-text-muted mb-2">Santé détaillée</p>
+          <p class="eyebrow mb-2">Santé détaillée</p>
           <div class="space-y-2">
             {#each unhealthySnapshots as item (item.connectorId)}
               <ConnectorHealthCard snapshot={item.snapshot} connectorName={item.name} />
diff --git a/apps/extension/src/ui/organisms/TJMDashboard.svelte b/apps/extension/src/ui/organisms/TJMDashboard.svelte
index 047de410..1bed22a5 100644
--- a/apps/extension/src/ui/organisms/TJMDashboard.svelte
+++ b/apps/extension/src/ui/organisms/TJMDashboard.svelte
@@ -291,9 +291,7 @@
       <section class="section-card rounded-xl p-5" aria-label="Indicateurs clés du marché">
         <div class="grid grid-cols-3 gap-3">
           <div>
-            <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-              Médiane
-            </p>
+            <p class="eyebrow eyebrow--strong">Médiane</p>
             <p class="mt-1.5 font-mono text-heading-lg tabular-nums leading-none text-text-primary">
               {selectedMarketRange ? formatTJMValue(selectedMarketRange.median) : '—'}
             </p>
@@ -302,9 +300,7 @@
             </p>
           </div>
           <div>
-            <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-              Votre cible
-            </p>
+            <p class="eyebrow eyebrow--strong">Votre cible</p>
             <p
               class="mt-1.5 font-mono text-heading-lg tabular-nums leading-none {isTargetInverted
                 ? 'text-status-red'
@@ -321,9 +317,7 @@
             </p>
           </div>
           <div>
-            <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-              Tendance
-            </p>
+            <p class="eyebrow eyebrow--strong">Tendance</p>
             <div class="mt-2"><TrendBadge trend={analysis.trend} /></div>
             <p class="mt-1.5 text-micro text-text-subtle">
               {analysis.topStacks.length} stacks · {analysis.dataPoints} points
@@ -377,9 +371,7 @@
         {/if}
         <div class="mt-4">
           <div class="mb-1.5 flex items-center justify-between gap-3">
-            <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-              Confiance
-            </p>
+            <p class="eyebrow eyebrow--strong">Confiance</p>
             <p class="text-micro font-mono tabular-nums text-text-primary">{confidencePct}%</p>
           </div>
           <div class="h-1.5 overflow-hidden rounded-full bg-subtle-gray">
@@ -396,9 +388,7 @@
         <div class="section-card rounded-xl p-5">
           <div class="flex items-start justify-between gap-4">
             <div class="min-w-0">
-              <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-                Votre positionnement
-              </p>
+              <p class="eyebrow eyebrow--strong">Votre positionnement</p>
               <p class="mt-1 text-meta leading-relaxed text-text-subtle">
                 Cible {userTjmMin}–{userTjmMax}€ ·
                 {userSeniority
@@ -456,9 +446,7 @@
     </div>
 
     <section class="mt-6" aria-label="Détails du marché">
-      <p class="px-1 text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-        Détails du marché
-      </p>
+      <p class="px-1 eyebrow eyebrow--strong">Détails du marché</p>
       <div class="mt-3 space-y-4">
         <!-- Level cards -->
         <div class="space-y-3">
@@ -484,7 +472,7 @@
                       <p class="text-meta font-medium text-text-primary">{level.label}</p>
                       {#if isSelected}
                         <span
-                          class="rounded-full bg-blueprint-blue/12 px-1.5 py-0.5 text-micro font-semibold uppercase tracking-[0.08em] text-blueprint-blue"
+                          class="rounded-full bg-blueprint-blue/12 px-1.5 py-0.5 eyebrow eyebrow--strong eyebrow--blue"
                         >
                           Vous
                         </span>
@@ -509,9 +497,7 @@
         <!-- Top stacks -->
         {#if analysis.topStacks.length > 0}
           <div class="section-card rounded-xl p-5">
-            <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted mb-4">
-              Stacks suivies
-            </p>
+            <p class="eyebrow eyebrow--strong mb-4">Stacks suivies</p>
             <div class="space-y-3">
               {#each analysis.topStacks as stack, i (i)}
                 {@const maxAverage = Math.max(...analysis.topStacks.map((item) => item.average), 1)}
@@ -548,9 +534,7 @@
         <!-- Region insights -->
         {#if analysis.regionInsights && analysis.regionInsights.length > 0}
           <section class="section-card rounded-xl p-5" aria-label="TJM par région">
-            <h3 class="mb-4 text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-              TJM par région
-            </h3>
+            <h3 class="mb-4 eyebrow eyebrow--strong">TJM par région</h3>
             <ul class="space-y-3" aria-label="Régions analysées">
               {#each analysis.regionInsights.slice(0, 8) as region, i (i)}
                 {@const barWidth = Math.max(
@@ -609,7 +593,7 @@
       >
         <div class="flex items-start justify-between gap-3">
           <div class="min-w-0">
-            <p class="eyebrow text-blueprint-blue">3 étapes</p>
+            <p class="eyebrow eyebrow--blue">3 étapes</p>
             <h3 class="mt-1 text-body-lg font-semibold text-text-primary">
               Alimenter le radar TJM
             </h3>
diff --git a/apps/extension/src/ui/pages/ApplicationsPage.svelte b/apps/extension/src/ui/pages/ApplicationsPage.svelte
index 3cff2b16..ea81e7ce 100644
--- a/apps/extension/src/ui/pages/ApplicationsPage.svelte
+++ b/apps/extension/src/ui/pages/ApplicationsPage.svelte
@@ -650,9 +650,7 @@
     <section class="rounded-xl bg-blueprint-blue/5 p-4" aria-label="Dossier recommandé">
       <div class="flex items-start justify-between gap-3">
         <div class="min-w-0">
-          <p class="text-caption font-semibold uppercase tracking-[0.15em] text-blueprint-blue">
-            Dossier recommandé
-          </p>
+          <p class="eyebrow eyebrow--caption eyebrow--strong eyebrow--blue">Dossier recommandé</p>
           {#if recommendedTrackedMission}
             <h2 class="mt-1 truncate text-body-lg font-semibold text-text-primary">
               {recommendedTrackedMission.mission.title}
@@ -703,7 +701,7 @@
         <Icon name="activity" size={14} class="text-blueprint-blue" />
       </div>
       <div class="min-w-0">
-        <p class="eyebrow text-text-muted">Journal</p>
+        <p class="eyebrow">Journal</p>
         <h2
           id="application-activity-title"
           class="mt-1 text-body-lg font-semibold text-text-primary"
@@ -820,7 +818,7 @@
     <div class="section-card rounded-xl p-5" aria-busy="true" role="status" aria-live="polite">
       <div class="flex items-start justify-between gap-3">
         <div>
-          <p class="text-caption font-semibold uppercase tracking-[0.15em] text-text-subtle">
+          <p class="eyebrow eyebrow--caption eyebrow--strong eyebrow--subtle">
             Chargement des candidatures
           </p>
           <h3 class="mt-1 text-body-lg font-semibold text-text-primary">
@@ -1025,7 +1023,7 @@
           <div class="section-card rounded-xl p-5">
             <div class="flex items-start justify-between gap-4">
               <div class="min-w-0">
-                <p class="text-caption font-medium uppercase tracking-[0.15em] text-blueprint-blue">
+                <p class="eyebrow eyebrow--caption eyebrow--blue">
                   {STATUS_LABELS[selectedStatus]}
                 </p>
                 <h3 class="mt-1 text-subheading font-semibold text-text-primary">
@@ -1074,7 +1072,7 @@
               {:else}
                 <label
                   for="application-next-action"
-                  class="text-caption font-medium uppercase tracking-[0.15em] text-text-subtle"
+                  class="eyebrow eyebrow--caption eyebrow--subtle"
                 >
                   Prochaine action
                 </label>
@@ -1112,9 +1110,7 @@
                 aria-label="Historique des décisions"
               >
                 <div class="flex items-center justify-between gap-3">
-                  <p class="text-caption font-medium uppercase tracking-[0.15em] text-text-subtle">
-                    Historique des décisions
-                  </p>
+                  <p class="eyebrow eyebrow--caption eyebrow--subtle">Historique des décisions</p>
                   <span class="text-caption text-text-subtle">
                     {selectedTracking?.history.length ?? 0} événement{(selectedTracking?.history
                       .length ?? 0) > 1
diff --git a/apps/extension/src/ui/pages/FeedPage.svelte b/apps/extension/src/ui/pages/FeedPage.svelte
index 34d469c9..1cbf17f5 100644
--- a/apps/extension/src/ui/pages/FeedPage.svelte
+++ b/apps/extension/src/ui/pages/FeedPage.svelte
@@ -1126,7 +1126,7 @@
               <!-- Full: hero with description, progress, stats -->
               <div class="relative pr-14">
                 <div class="max-w-[32rem]">
-                  <p class="eyebrow text-blueprint-blue">MissionPulse</p>
+                  <p class="eyebrow eyebrow--blue">MissionPulse</p>
                   <h2
                     class="mt-3 font-display text-[clamp(2.75rem,10vw,4rem)] font-normal leading-[0.94] tracking-[-0.03em] text-text-primary"
                   >
@@ -1312,9 +1312,7 @@
             {#if showAdvancedControls}
               <div class="mt-2" aria-label="Presets métier du feed">
                 <div class="mb-1 flex items-center justify-between gap-2">
-                  <p class="text-micro font-medium uppercase tracking-[0.14em] text-text-muted">
-                    Presets métier
-                  </p>
+                  <p class="eyebrow">Presets métier</p>
                   {#if page.decisionPreset}
                     <button
                       type="button"
@@ -1410,9 +1408,7 @@
         class="mb-3 flex items-end justify-between gap-3 border-t border-border-light pt-4"
       >
         <div class="min-w-0">
-          <p class="text-micro font-semibold uppercase tracking-[0.16em] text-text-muted">
-            Missions
-          </p>
+          <p class="eyebrow eyebrow--strong">Missions</p>
           <h2 id="mission-feed-title" class="mt-1 text-body-lg font-semibold text-text-primary">
             Missions à examiner
           </h2>
diff --git a/apps/extension/src/ui/pages/ProfilePage.svelte b/apps/extension/src/ui/pages/ProfilePage.svelte
index e79912a8..0f4f0553 100644
--- a/apps/extension/src/ui/pages/ProfilePage.svelte
+++ b/apps/extension/src/ui/pages/ProfilePage.svelte
@@ -263,7 +263,7 @@
     <section class="section-card rounded-xl p-5" aria-label="Priorités d’impact profil">
       <div class="flex items-start justify-between gap-3">
         <div class="min-w-0">
-          <p class="eyebrow text-text-muted">Priorités d’impact</p>
+          <p class="eyebrow">Priorités d’impact</p>
           <h3 class="mt-1 text-body-lg font-semibold leading-5 text-text-primary">
             {profileImpactSimulation.title}
           </h3>
@@ -274,7 +274,7 @@
         <div
           class="shrink-0 rounded-lg border border-blueprint-blue/15 bg-blueprint-blue/6 px-2.5 py-1.5 text-right"
         >
-          <p class="text-micro uppercase tracking-[0.13em] text-text-muted">Gain</p>
+          <p class="eyebrow">Gain</p>
           <p class="font-mono text-body-lg font-semibold text-blueprint-blue">
             {profileImpactSimulation.delta > 0 ? `+${profileImpactSimulation.delta}` : '0'}
           </p>
diff --git a/apps/extension/src/ui/pages/SettingsPage.svelte b/apps/extension/src/ui/pages/SettingsPage.svelte
index c0349b6c..43088752 100644
--- a/apps/extension/src/ui/pages/SettingsPage.svelte
+++ b/apps/extension/src/ui/pages/SettingsPage.svelte
@@ -661,25 +661,25 @@
 
       <div class="grid gap-2 sm:grid-cols-2">
         <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">Compte</p>
+          <p class="eyebrow">Compte</p>
           <p class="mt-1 text-meta font-medium text-text-primary">
             {settings.connectedAccountEmail ?? 'Non connecté'}
           </p>
         </div>
         <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">Plan</p>
+          <p class="eyebrow">Plan</p>
           <p class="mt-1 text-meta font-medium text-text-primary">
             {settings.premiumEnabled ? 'Premium — 10 € TTC/an' : 'Gratuit'}
           </p>
         </div>
         <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">Appareil</p>
+          <p class="eyebrow">Appareil</p>
           <p class="mt-1 text-meta font-medium text-text-primary">
             {settings.connectedDeviceLabel}
           </p>
         </div>
         <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">File</p>
+          <p class="eyebrow">File</p>
           <p class="mt-1 text-meta font-medium text-text-primary">
             {settings.connectedPendingUploads} envoi · {settings.connectedPendingDownloads}
             réception
@@ -762,7 +762,7 @@
       />
       <div class="grid grid-cols-2 gap-2">
         <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">Statut</p>
+          <p class="eyebrow">Statut</p>
           <p class="mt-1 text-meta font-medium text-text-primary">
             {settings.aiAvailability === 'available'
               ? 'Disponible'
@@ -772,9 +772,7 @@
           </p>
         </div>
         <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-          <p class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted">
-            Missions / scan
-          </p>
+          <p class="eyebrow">Missions / scan</p>
           <p class="mt-1 text-meta font-medium text-text-primary">
             {settings.maxSemanticPerScan}
           </p>
@@ -796,7 +794,7 @@
             <div class="rounded-md bg-surface-white px-2.5 py-2">
               <div class="flex items-center gap-1.5">
                 <Icon name={item.icon} size={12} class="text-blueprint-blue" />
-                <p class="text-micro font-semibold uppercase tracking-[0.12em] text-text-muted">
+                <p class="eyebrow eyebrow--strong">
                   {item.label}
                 </p>
               </div>
@@ -894,22 +892,20 @@
             <p class="font-mono text-body-lg font-semibold tabular-nums text-text-primary">
               {favoriteExportCount}
             </p>
-            <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Favoris</p>
+            <p class="mt-0.5 eyebrow">Favoris</p>
           </div>
           <div class="rounded-md bg-surface-white px-2 py-2">
             <p class="text-body-lg font-semibold text-text-primary">MD</p>
-            <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Rapport</p>
+            <p class="mt-0.5 eyebrow">Rapport</p>
           </div>
           <div class="rounded-md bg-surface-white px-2 py-2">
             <p class="text-body-lg font-semibold text-text-primary">Local</p>
-            <p class="mt-0.5 text-micro uppercase tracking-[0.12em] text-text-muted">Sessions</p>
+            <p class="mt-0.5 eyebrow">Sessions</p>
           </div>
         </div>
       </div>
       <div class="rounded-lg border border-border-light bg-page-canvas px-3 py-3">
-        <p class="text-micro font-semibold uppercase tracking-[0.15em] text-text-muted">
-          Formats secondaires
-        </p>
+        <p class="eyebrow eyebrow--strong">Formats secondaires</p>
         <div class="mt-2 flex flex-wrap gap-2">
           <button
             class="inline-flex items-center gap-2 rounded-lg border border-border-light bg-surface-white px-3 py-2 text-meta font-medium text-text-primary transition-colors hover:bg-subtle-gray disabled:opacity-50"
@@ -1070,7 +1066,7 @@
               <Icon name={section.icon} size={14} />
             </span>
             <span class="min-w-0 flex-1">
-              <span class="eyebrow block text-text-muted">{section.label}</span>
+              <span class="eyebrow block">{section.label}</span>
               <span class="mt-0.5 block text-body-lg font-semibold leading-5 text-text-primary">
                 {section.title}
               </span>
diff --git a/apps/extension/src/ui/pages/TJMPage.svelte b/apps/extension/src/ui/pages/TJMPage.svelte
index ac2a1584..b0fdf568 100644
--- a/apps/extension/src/ui/pages/TJMPage.svelte
+++ b/apps/extension/src/ui/pages/TJMPage.svelte
@@ -298,12 +298,7 @@
         {/each}
       </div>
       <div class="flex items-center gap-2">
-        <label
-          for="tjm-region-filter"
-          class="text-micro font-medium uppercase tracking-[0.15em] text-text-muted"
-        >
-          Région
-        </label>
+        <label for="tjm-region-filter" class="eyebrow"> Région </label>
         <select
           id="tjm-region-filter"
           class="rounded-lg border border-border-light bg-surface-white px-2 py-1 text-meta text-text-primary outline-none transition-colors focus:border-blueprint-blue/30"
diff --git a/apps/extension/src/ui/templates/OnboardingLayout.svelte b/apps/extension/src/ui/templates/OnboardingLayout.svelte
index c31c34e6..d07d83e0 100644
--- a/apps/extension/src/ui/templates/OnboardingLayout.svelte
+++ b/apps/extension/src/ui/templates/OnboardingLayout.svelte
@@ -33,15 +33,15 @@
 
         <div class="mb-6 grid grid-cols-3 gap-2">
           <div class="rounded-lg border border-border-light bg-surface-white px-3 py-3">
-            <p class="text-caption uppercase tracking-[0.18em] text-text-muted">Scan</p>
+            <p class="eyebrow eyebrow--caption">Scan</p>
             <p class="mt-2 text-body-lg font-semibold text-text-primary">Multi-source</p>
           </div>
           <div class="rounded-lg border border-border-light bg-surface-white px-3 py-3">
-            <p class="text-caption uppercase tracking-[0.18em] text-text-muted">Notation</p>
+            <p class="eyebrow eyebrow--caption">Notation</p>
             <p class="mt-2 text-body-lg font-semibold text-text-primary">Pertinence</p>
           </div>
           <div class="rounded-lg border border-border-light bg-surface-white px-3 py-3">
-            <p class="text-caption uppercase tracking-[0.18em] text-text-muted">TJM</p>
+            <p class="eyebrow eyebrow--caption">TJM</p>
             <p class="mt-2 text-body-lg font-semibold text-text-primary">Ajusté</p>
           </div>
         </div>
diff --git a/apps/extension/tests/unit/ui/ripple.test.ts b/apps/extension/tests/unit/ui/ripple.test.ts
deleted file mode 100644
index eb354499..00000000
--- a/apps/extension/tests/unit/ui/ripple.test.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { ripple } from '../../../src/ui/actions/ripple';
-
-function makeEl(): HTMLElement {
-  const el = document.createElement('button');
-  el.style.position = 'relative';
-  el.getBoundingClientRect = () => ({
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 40,
-    right: 110,
-    bottom: 50,
-    x: 10,
-    y: 10,
-    toJSON() {},
-  });
-  document.body.appendChild(el);
-  return el;
-}
-
-describe('ripple', () => {
-  it('adds a span on pointerdown and removes it after animation', () => {
-    vi.useFakeTimers();
-    const el = makeEl();
-    const action = ripple(el);
-
-    el.dispatchEvent(new PointerEvent('pointerdown', { clientX: 50, clientY: 30 }));
-    expect(el.querySelector('span')).not.toBeNull();
-
-    vi.advanceTimersByTime(500);
-    expect(el.querySelector('span')).toBeNull();
-
-    action.destroy();
-    vi.useRealTimers();
-  });
-
-  it('sets overflow hidden on the element', () => {
-    const el = makeEl();
-    const action = ripple(el);
-    expect(el.style.overflow).toBe('hidden');
-    action.destroy();
-  });
-});
diff --git a/packages/design/DESIGN.md b/packages/design/DESIGN.md
index f05490f9..342dff6a 100644
--- a/packages/design/DESIGN.md
+++ b/packages/design/DESIGN.md
@@ -164,17 +164,17 @@ Typically Geist font, weight 400, size 14px, #6b6561 text transforming to #00000
 
 FH Total Display Regular, 183px, lineHeight 0.8, color #1c1917, typically followed by a muted equivalent at 106px in #d4d2d1, creating a layered, emphasized headline effect for hero sections.
 
-### Card Container
+### Eyebrow Label
 
-**Role:** Content grouping
+**Role:** Section/field categorization label
 
-Surface White background (#ffffff) with a subtle shadow (rgba(0, 0, 0, 0.06) 0px 2px 4px 0px or rgba(0, 0, 0, 0.1) 0px 1px 2px 0px). Default border radius is 6px. Padding for content is not explicitly defined but visually appears to be around 16px.
+The canonical micro-label above or beside content. System font, micro size (10px), weight 500, uppercase, 0.15em letter-spacing, Text Muted (#a6a09b). Defined once in `@pulse/ui` as `.eyebrow` (components layer).
 
-### Status Tag
+Modifiers: `.eyebrow--caption` (12px caption size, for lower-density contexts), `.eyebrow--strong` (weight 600), `.eyebrow--subtle` (Text Subtle #57534d), `.eyebrow--blue` (Blueprint Blue #0b64e9, for section markers under page headers).
 
-**Role:** Categorization/Label
+Rare one-off tones (status colors, translucent blues) are applied as call-site color utilities layered over the base — they override the component color because utilities outrank the components layer.
 
-Small text (system-ui, 12px, weight 400), with varied background colors like Status Red (#f24149), Orange (#f97006), Yellow (#f9b703), or Violet (#6b4aff). Likely has small padding and a 6px border radius, similar to buttons.
+**Never** hand-roll the combo with utilities (`text-micro uppercase tracking-[0.15em] …`) — use the class so tracking, weight, and size stay governed in one place.
 
 ## Do's and Don'ts
 
diff --git a/packages/ui/src/app.css b/packages/ui/src/app.css
index b5963422..c1c695c1 100644
--- a/packages/ui/src/app.css
+++ b/packages/ui/src/app.css
@@ -91,12 +91,35 @@
     box-shadow: var(--shadow-subtle-2);
   }
 
+  /* Canonical uppercase label. Base = dominant shipped form:
+   * micro, weight 500, 0.15em tracking, muted tone, system font.
+   * Rare tones (status-red/orange, blueprint-blue/NN, text-primary) stay as
+   * color utilities at the call site — utilities override this layer. */
   .eyebrow {
     font-family: var(--font-system);
+    font-size: var(--text-micro);
+    line-height: var(--text-micro--line-height);
+    font-weight: 500;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--color-text-muted);
+  }
+
+  .eyebrow--caption {
     font-size: var(--text-caption);
     line-height: var(--text-caption--line-height);
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
+  }
+
+  .eyebrow--strong {
+    font-weight: 600;
+  }
+
+  .eyebrow--subtle {
+    color: var(--color-text-subtle);
+  }
+
+  .eyebrow--blue {
+    color: var(--color-blueprint-blue);
   }
 }
 

From a9643f1c341cecce20a843e7ccff16d4641a85f0 Mon Sep 17 00:00:00 2001
From: Guy MANDINA <guyghost@gmail.com>
Date: Sat, 22 Aug 2026 01:02:35 +0200
Subject: [PATCH 2/3] style(ui): trim whitespace in eyebrow label text nodes

Prettier single-line collapse after the eyebrow extraction kept the
original multiline whitespace as literal spaces inside the tags.
Trim all six flagged label texts.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 apps/extension/src/ui/molecules/AlertBuilderCard.svelte | 2 +-
 apps/extension/src/ui/organisms/CopilotPanel.svelte     | 4 ++--
 apps/extension/src/ui/organisms/ProfileSection.svelte   | 4 ++--
 apps/extension/src/ui/pages/TJMPage.svelte              | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/extension/src/ui/molecules/AlertBuilderCard.svelte b/apps/extension/src/ui/molecules/AlertBuilderCard.svelte
index 7160cba0..b6fbe149 100644
--- a/apps/extension/src/ui/molecules/AlertBuilderCard.svelte
+++ b/apps/extension/src/ui/molecules/AlertBuilderCard.svelte
@@ -322,7 +322,7 @@
         />
       </label>
       <label class="rounded-lg border border-border-light bg-page-canvas px-3 py-2.5">
-        <span class="block eyebrow"> Max résultats </span>
+        <span class="block eyebrow">Max résultats</span>
         <input
           type="number"
           min="1"
diff --git a/apps/extension/src/ui/organisms/CopilotPanel.svelte b/apps/extension/src/ui/organisms/CopilotPanel.svelte
index ead4612b..ca04c8f1 100644
--- a/apps/extension/src/ui/organisms/CopilotPanel.svelte
+++ b/apps/extension/src/ui/organisms/CopilotPanel.svelte
@@ -447,7 +447,7 @@
       </summary>
       <div class="border-t border-border-light p-3">
         <fieldset>
-          <legend class="eyebrow eyebrow--caption eyebrow--subtle"> Mission </legend>
+          <legend class="eyebrow eyebrow--caption eyebrow--subtle">Mission</legend>
           <div class="mt-2 grid grid-cols-2 gap-2">
             {#each store.missionFieldOptions as field (field)}
               <label class="flex items-center gap-2 text-caption text-text-secondary">
@@ -464,7 +464,7 @@
         </fieldset>
 
         <fieldset class="mt-4">
-          <legend class="eyebrow eyebrow--caption eyebrow--subtle"> Profil </legend>
+          <legend class="eyebrow eyebrow--caption eyebrow--subtle">Profil</legend>
           <div class="mt-2 grid grid-cols-2 gap-2">
             {#each store.profileFieldOptions as field (field)}
               <label class="flex items-center gap-2 text-caption text-text-secondary">
diff --git a/apps/extension/src/ui/organisms/ProfileSection.svelte b/apps/extension/src/ui/organisms/ProfileSection.svelte
index 1f579a1b..9a239ac7 100644
--- a/apps/extension/src/ui/organisms/ProfileSection.svelte
+++ b/apps/extension/src/ui/organisms/ProfileSection.svelte
@@ -131,7 +131,7 @@
       </datalist>
       <div class="grid grid-cols-2 gap-2">
         <label class="space-y-1">
-          <span class="eyebrow"> Remote </span>
+          <span class="eyebrow">Remote</span>
           <select
             class="w-full rounded-lg border border-border-light bg-page-canvas px-3 py-2.5 text-body-lg text-text-primary outline-none transition-colors focus:border-blueprint-blue/30"
             bind:value={profileRemote}
@@ -145,7 +145,7 @@
           </span>
         </label>
         <label class="space-y-1">
-          <span class="eyebrow"> Séniorité </span>
+          <span class="eyebrow">Séniorité</span>
           <select
             class="w-full rounded-lg border border-border-light bg-page-canvas px-3 py-2.5 text-body-lg text-text-primary outline-none transition-colors focus:border-blueprint-blue/30"
             bind:value={seniority}
diff --git a/apps/extension/src/ui/pages/TJMPage.svelte b/apps/extension/src/ui/pages/TJMPage.svelte
index b0fdf568..4bd0c6ad 100644
--- a/apps/extension/src/ui/pages/TJMPage.svelte
+++ b/apps/extension/src/ui/pages/TJMPage.svelte
@@ -298,7 +298,7 @@
         {/each}
       </div>
       <div class="flex items-center gap-2">
-        <label for="tjm-region-filter" class="eyebrow"> Région </label>
+        <label for="tjm-region-filter" class="eyebrow">Région</label>
         <select
           id="tjm-region-filter"
           class="rounded-lg border border-border-light bg-surface-white px-2 py-1 text-meta text-text-primary outline-none transition-colors focus:border-blueprint-blue/30"

From 15cdb181acceadc2bb60ac43da881bac8021856e Mon Sep 17 00:00:00 2001
From: Guy MANDINA <guyghost@gmail.com>
Date: Sat, 22 Aug 2026 01:09:08 +0200
Subject: [PATCH 3/3] fix(ui): restore inherited eyebrow tones and dark-safe
 badge text

The eyebrow base class stamps Text Muted, which silenced tones that four
labels previously inherited from tinted ancestors (MetricsPanel status,
MissionComparison evidence pills, MissionCard decision insight,
ConnectionIndicator per-status label). Add an eyebrow--inherit modifier
(color: inherit) and apply it at those sites.

Swap grade-badge text back to a non-flipping dark foreground via a new
--color-text-on-bright token: --color-text-primary turns near-white in
dark theme while the saturated badge fills keep their light values,
dropping contrast to 2.62-3.43:1.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 apps/extension/src/ui/atoms/ConnectionIndicator.svelte   | 2 +-
 apps/extension/src/ui/molecules/MissionCard.svelte       | 8 ++++----
 apps/extension/src/ui/organisms/MetricsPanel.svelte      | 2 +-
 apps/extension/src/ui/organisms/MissionComparison.svelte | 2 +-
 packages/design/DESIGN.md                                | 5 ++++-
 packages/design/theme.css                                | 4 ++++
 packages/ui/src/app.css                                  | 6 ++++++
 7 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/apps/extension/src/ui/atoms/ConnectionIndicator.svelte b/apps/extension/src/ui/atoms/ConnectionIndicator.svelte
index 993de7cf..23791ca7 100644
--- a/apps/extension/src/ui/atoms/ConnectionIndicator.svelte
+++ b/apps/extension/src/ui/atoms/ConnectionIndicator.svelte
@@ -114,7 +114,7 @@
         <span class="relative inline-flex h-2 w-2 rounded-full {statusConfig.color}"></span>
       </span>
       <Icon name={statusConfig.icon} size={12} />
-      <span class="eyebrow">{statusConfig.label}</span>
+      <span class="eyebrow eyebrow--inherit">{statusConfig.label}</span>
     </button>
 
     {#if showDetails}
diff --git a/apps/extension/src/ui/molecules/MissionCard.svelte b/apps/extension/src/ui/molecules/MissionCard.svelte
index 16e42fee..8d4b20c9 100644
--- a/apps/extension/src/ui/molecules/MissionCard.svelte
+++ b/apps/extension/src/ui/molecules/MissionCard.svelte
@@ -432,11 +432,11 @@
             {@const grade = scoreToGrade(line.value)}
             {@const color =
               grade === 'A'
-                ? 'bg-accent-green text-text-primary'
+                ? 'bg-accent-green text-text-on-bright'
                 : grade === 'B'
-                  ? 'bg-accent-amber text-text-primary'
+                  ? 'bg-accent-amber text-text-on-bright'
                   : grade === 'C'
-                    ? 'bg-status-orange text-text-primary'
+                    ? 'bg-status-orange text-text-on-bright'
                     : 'bg-disabled-gray text-text-secondary'}
             <div class="flex items-center gap-2.5 py-0.5">
               <span class="text-caption text-text-subtle flex-1">{line.label}</span>
@@ -484,7 +484,7 @@
       transition:slide={{ duration: isVirtualized ? 0 : 200 }}
     >
       <div class="rounded-lg border px-3 py-2.5 {decisionInsight.tone}">
-        <p class="eyebrow eyebrow--strong">{decisionInsight.label}</p>
+        <p class="eyebrow eyebrow--strong eyebrow--inherit">{decisionInsight.label}</p>
         <p class="mt-1 text-caption leading-4 text-text-secondary">{decisionInsight.text}</p>
       </div>
 
diff --git a/apps/extension/src/ui/organisms/MetricsPanel.svelte b/apps/extension/src/ui/organisms/MetricsPanel.svelte
index f533fc2d..8bc331da 100644
--- a/apps/extension/src/ui/organisms/MetricsPanel.svelte
+++ b/apps/extension/src/ui/organisms/MetricsPanel.svelte
@@ -423,7 +423,7 @@
       <section class="rounded-2xl border p-4 {toneClasses(operationalSummary.tone)}">
         <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
           <div class="min-w-0">
-            <p class="eyebrow eyebrow--strong">
+            <p class="eyebrow eyebrow--strong eyebrow--inherit">
               {operationalSummary.statusLabel}
             </p>
             <h2 class="mt-2 text-heading-lg font-semibold leading-tight text-text-primary">
diff --git a/apps/extension/src/ui/organisms/MissionComparison.svelte b/apps/extension/src/ui/organisms/MissionComparison.svelte
index 4fae662f..12e5a3a3 100644
--- a/apps/extension/src/ui/organisms/MissionComparison.svelte
+++ b/apps/extension/src/ui/organisms/MissionComparison.svelte
@@ -181,7 +181,7 @@
                       <span
                         class="inline-flex items-baseline gap-1 rounded-md bg-blueprint-blue/10 px-2 py-0.5 text-meta text-blueprint-blue"
                       >
-                        <span class="eyebrow opacity-70">{evidence.label}</span>
+                        <span class="eyebrow eyebrow--inherit opacity-70">{evidence.label}</span>
                         <span class="font-semibold tabular-nums">{evidence.value}</span>
                       </span>
                     {/each}
diff --git a/packages/design/DESIGN.md b/packages/design/DESIGN.md
index 342dff6a..559fd406 100644
--- a/packages/design/DESIGN.md
+++ b/packages/design/DESIGN.md
@@ -17,6 +17,7 @@ Mission Pulse exudes a focused, data-driven clarity, presenting complex financia
 | Text Secondary | `#1c1917` | `--color-text-secondary` | Subheadings, supporting text, and less emphasized information, a subtle step lighter than primary text but still high contrast.                     |
 | Text Muted     | `#6b6561` | `--color-text-muted`     | Placeholder text, minor labels, and supplementary details, providing a softer visual presence.                                                      |
 | Text Subtle    | `#57534d` | `--color-text-subtle`    | Less prominent text like captions or descriptions, visually receding while remaining legible.                                                       |
+| Text On Bright | `#0c0a09` | `--color-text-on-bright` | Text on saturated status/accent fills (grade badges, tags). Never flips in dark theme since its fills keep their light-mode values.                 |
 | Subtle Gray    | `#ececea` | `--color-subtle-gray`    | Backgrounds for subtle containers like badges or minor card elements, offering a hint of differentiation.                                           |
 | Border Light   | `#f0efef` | `--color-border-light`   | Distinguishes UI elements with a subtle border, especially for form fields and interactive elements.                                                |
 | Disabled Gray  | `#d4d2d1` | `--color-disabled-gray`  | Used for disabled states of interactive components, indicating non-interactability.                                                                 |
@@ -170,7 +171,7 @@ FH Total Display Regular, 183px, lineHeight 0.8, color #1c1917, typically follow
 
 The canonical micro-label above or beside content. System font, micro size (10px), weight 500, uppercase, 0.15em letter-spacing, Text Muted (#a6a09b). Defined once in `@pulse/ui` as `.eyebrow` (components layer).
 
-Modifiers: `.eyebrow--caption` (12px caption size, for lower-density contexts), `.eyebrow--strong` (weight 600), `.eyebrow--subtle` (Text Subtle #57534d), `.eyebrow--blue` (Blueprint Blue #0b64e9, for section markers under page headers).
+Modifiers: `.eyebrow--caption` (12px caption size, for lower-density contexts), `.eyebrow--strong` (weight 600), `.eyebrow--subtle` (Text Subtle #57534d), `.eyebrow--blue` (Blueprint Blue #0b64e9, for section markers under page headers), `.eyebrow--inherit` (`color: inherit`, for labels inside tinted containers whose tone must follow the ancestor instead of the muted default).
 
 Rare one-off tones (status colors, translucent blues) are applied as call-site color utilities layered over the base — they override the component color because utilities outrank the components layer.
 
@@ -247,6 +248,7 @@ The page primarily uses a max-width contained layout, likely centered, though sp
   --color-text-secondary: #1c1917;
   --color-text-muted: #6b6561;
   --color-text-subtle: #57534d;
+  --color-text-on-bright: #0c0a09;
   --color-subtle-gray: #ececea;
   --color-border-light: #f0efef;
   --color-disabled-gray: #d4d2d1;
@@ -360,6 +362,7 @@ The page primarily uses a max-width contained layout, likely centered, though sp
   --color-text-secondary: #1c1917;
   --color-text-muted: #6b6561;
   --color-text-subtle: #57534d;
+  --color-text-on-bright: #0c0a09;
   --color-subtle-gray: #ececea;
   --color-border-light: #f0efef;
   --color-disabled-gray: #d4d2d1;
diff --git a/packages/design/theme.css b/packages/design/theme.css
index bf816bfe..b9e68abc 100644
--- a/packages/design/theme.css
+++ b/packages/design/theme.css
@@ -8,6 +8,10 @@
   --color-text-secondary: #1c1917;
   --color-text-muted: #6b6561;
   --color-text-subtle: #57534d;
+  /* Foreground for small text on saturated status/accent fills (grade badges, tags).
+     Deliberately NOT overridden in .dark: the fills it pairs with keep their
+     light-mode values in dark theme, so the on-fill text must stay dark. */
+  --color-text-on-bright: #0c0a09;
   --color-subtle-gray: #ececea;
   --color-border-light: #f0efef;
   --color-disabled-gray: #d4d2d1;
diff --git a/packages/ui/src/app.css b/packages/ui/src/app.css
index c1c695c1..0bf40a79 100644
--- a/packages/ui/src/app.css
+++ b/packages/ui/src/app.css
@@ -121,6 +121,12 @@
   .eyebrow--blue {
     color: var(--color-blueprint-blue);
   }
+
+  /* Tone comes from an ancestor (e.g. a tinted pill or status container);
+   * use when the label must follow that context instead of the muted default. */
+  .eyebrow--inherit {
+    color: inherit;
+  }
 }
 
 /* ================================================