@cat-factory/app 0.302.1 → 0.303.0

package/app/components/binaryOutput/BinaryOutputReport.vue

@@ -55,13 +55,13 @@ const state = computed(() => {
     v-if="view"
     class="space-y-3"
     :class="
-      variant === 'card' ? 'scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4' : ''
+      variant === 'card' ? 'scroll-mt-4 rounded-xl border border-default bg-default/50 p-4' : ''
     "
     data-testid="binary-output-report"
   >
     <div
       v-if="variant === 'card'"
-      class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+      class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
     >
       <UIcon name="i-lucide-image" class="h-3.5 w-3.5" />
       <span>{{ t('binaryOutput.heading') }}</span>
@@ -72,7 +72,7 @@ const state = computed(() => {
          question the artifacts below cannot answer. An AUTOMATIC keep says so: nobody looked. -->
     <p
       v-if="candidates && candidates.state.candidates.length > 0"
-      class="text-[12px] leading-relaxed text-slate-300"
+      class="text-[12px] leading-relaxed text-toned"
       data-testid="binary-output-candidate-decision"
     >
       {{
@@ -107,28 +107,28 @@ const state = computed(() => {
          records a declaration against a step that never held one), and rendering a blank
          would read as a missing value rather than an absent comparison. -->
     <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[11px]">
-      <dt class="text-slate-500">{{ t('binaryOutput.target') }}</dt>
+      <dt class="text-dimmed">{{ t('binaryOutput.target') }}</dt>
       <dd
         v-if="view.target"
-        class="min-w-0 font-mono text-slate-300"
+        class="min-w-0 font-mono text-toned"
         data-testid="binary-output-target"
       >
         {{ view.target }}
       </dd>
-      <dd v-else class="min-w-0 text-slate-400" data-testid="binary-output-target">
+      <dd v-else class="min-w-0 text-muted" data-testid="binary-output-target">
         {{ t('binaryOutput.targetNone') }}
       </dd>
       <template v-if="view.contextServices.length">
-        <dt class="text-slate-500">{{ t('binaryOutput.contextServices') }}</dt>
-        <dd class="min-w-0 font-mono text-slate-400">{{ view.contextServices.join(', ') }}</dd>
+        <dt class="text-dimmed">{{ t('binaryOutput.contextServices') }}</dt>
+        <dd class="min-w-0 font-mono text-muted">{{ view.contextServices.join(', ') }}</dd>
       </template>
       <!-- The formats the step REQUIRED, beside where they were meant to go. Rendered whenever
            the step stated any, including on a run that delivered them: the requirement is what
            makes the content types below it readable, and a reader checking whether a mesh will
            load needs to see what was asked for even when nothing went wrong. -->
       <template v-if="view.mediaTypes.length">
-        <dt class="text-slate-500">{{ t('binaryOutput.mediaTypes') }}</dt>
-        <dd class="min-w-0 font-mono text-slate-400" data-testid="binary-output-media-types">
+        <dt class="text-dimmed">{{ t('binaryOutput.mediaTypes') }}</dt>
+        <dd class="min-w-0 font-mono text-muted" data-testid="binary-output-media-types">
           {{ view.mediaTypes.join(', ') }}
         </dd>
       </template>
@@ -147,7 +147,7 @@ const state = computed(() => {
       <li
         v-for="(row, i) in view.rows"
         :key="`${row.service}:${row.location}:${i}`"
-        class="relative rounded-md border border-slate-800 bg-slate-950/40 px-2.5 py-2"
+        class="relative rounded-md border border-default bg-app-950/40 px-2.5 py-2"
         data-testid="binary-output-artifact"
       >
         <CopyButton :text="row.location" class="absolute end-1 top-1" />
@@ -158,10 +158,10 @@ const state = computed(() => {
           :label="row.entity ?? row.description"
           class="mb-2 pe-8"
         />
-        <code class="block break-all pe-8 font-mono text-[11px] text-slate-200">{{
+        <code class="block break-all pe-8 font-mono text-[11px] text-default">{{
           row.location
         }}</code>
-        <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-slate-500">
+        <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-dimmed">
           <span class="font-mono">{{ row.service }}</span>
           <!-- The join the report cannot make on its own, and the question a human opens this
                for: did it go where the step pointed it? -->
@@ -225,7 +225,7 @@ const state = computed(() => {
             {{ t('binaryOutput.missizedBadge') }}
           </UBadge>
         </div>
-        <p v-if="row.description" class="mt-1 text-[11px] leading-relaxed text-slate-400">
+        <p v-if="row.description" class="mt-1 text-[11px] leading-relaxed text-muted">
           {{ row.description }}
         </p>
       </li>
@@ -234,7 +234,7 @@ const state = computed(() => {
     <!-- Every qualification the report counted, each naming its own number. Never folded into
          one "some entries were dropped": the fix for an unknown service id is not the fix for
          a malformed entry, and neither is the fix for a list that stops short of the tail. -->
-    <ul class="space-y-1 text-[11px] text-amber-400">
+    <ul class="space-y-1 text-[11px] text-app-warning-400">
       <!-- The step's OWN target went missing from the catalog, and an id the AGENT invented,
            are two different failures with two different fixes (re-register it, versus correct
            the declaration). `binaryOutputView` returns them as DISJOINT fields precisely so

package/app/components/binaryOutput/StoredAssetView.vue

@@ -89,7 +89,7 @@ const filename = computed(() => {
          frame. -->
     <p
       v-else-if="!isImage && url"
-      class="flex items-center gap-1.5 rounded bg-slate-800/60 px-2 py-1.5 text-[11px] text-slate-300"
+      class="flex items-center gap-1.5 rounded bg-elevated/60 px-2 py-1.5 text-[11px] text-toned"
       data-testid="stored-asset-file"
     >
       <UIcon name="i-lucide-file" class="h-3.5 w-3.5 shrink-0" />
@@ -97,7 +97,7 @@ const filename = computed(() => {
     </p>
     <p
       v-else-if="status === 'error'"
-      class="flex items-center gap-1.5 text-[11px] text-amber-300"
+      class="flex items-center gap-1.5 text-[11px] text-app-warning-300"
       data-testid="stored-asset-error"
     >
       <span>{{ t('binaryOutput.asset.loadFailed') }}</span>
@@ -105,7 +105,7 @@ const filename = computed(() => {
         {{ t('binaryOutput.asset.retry') }}
       </UButton>
     </p>
-    <p v-else class="text-[11px] text-slate-500" data-testid="stored-asset-loading">
+    <p v-else class="text-[11px] text-dimmed" data-testid="stored-asset-loading">
       {{ t('binaryOutput.asset.loading') }}
     </p>
 
@@ -116,7 +116,7 @@ const filename = computed(() => {
         :href="url"
         target="_blank"
         rel="noopener"
-        class="text-sky-300 hover:underline"
+        class="text-app-info-300 hover:underline"
         data-testid="stored-asset-open"
         @click.stop
         >{{ t('binaryOutput.asset.open') }}</a
@@ -124,7 +124,7 @@ const filename = computed(() => {
       <a
         :href="url"
         :download="filename"
-        class="text-sky-300 hover:underline"
+        class="text-app-info-300 hover:underline"
         data-testid="stored-asset-download"
         @click.stop
         >{{ t('binaryOutput.asset.download') }}</a

package/app/components/board/AddTaskModal.vue

@@ -916,10 +916,10 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
   <UModal v-model:open="modalOpen" :title="t('board.addTask.title')">
     <template #body>
       <div class="space-y-4" data-testid="add-task-modal">
-        <p v-if="container" class="text-xs text-slate-400">
+        <p v-if="container" class="text-xs text-muted">
           <i18n-t keypath="board.addTask.newTaskIn" tag="span" scope="global">
             <template #container>
-              <span class="font-medium text-slate-200">{{ container.title }}</span>
+              <span class="font-medium text-default">{{ container.title }}</span>
             </template>
           </i18n-t>
         </p>
@@ -940,7 +940,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
             >
               <p
                 v-if="row.caption"
-                class="mb-1 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+                class="mb-1 px-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
                 data-testid="task-type-category"
               >
                 {{ row.caption }}
@@ -981,10 +981,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
         </UFormField>
 
         <!-- Recurring tasks are configured as a schedule on the service frame. -->
-        <div
-          v-if="isRecurring"
-          class="rounded-lg border border-slate-800 p-3 text-[11px] text-slate-400"
-        >
+        <div v-if="isRecurring" class="rounded-lg border border-default p-3 text-[11px] text-muted">
           <template v-if="recurringFrameId">
             {{ t('board.addTask.recurringWithFrame') }}
           </template>
@@ -1023,10 +1020,10 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 autoresize
                 readonly
                 class="w-full"
-                :ui="{ base: 'cursor-default text-slate-300' }"
+                :ui="{ base: 'cursor-default text-toned' }"
               />
             </UFormField>
-            <p v-if="resolvingIssueBodies" class="text-[11px] text-slate-500">
+            <p v-if="resolvingIssueBodies" class="text-[11px] text-dimmed">
               {{ t('board.addTask.loadingIssue') }}
             </p>
 
@@ -1054,10 +1051,10 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
 
           <UCheckbox v-if="uiMode.isAdvanced" v-model="technical" name="technical">
             <template #label>
-              <span class="text-sm text-slate-200">{{ t('board.addTask.technical') }}</span>
+              <span class="text-sm text-default">{{ t('board.addTask.technical') }}</span>
             </template>
             <template #description>
-              <span class="text-[11px] text-slate-500">
+              <span class="text-[11px] text-dimmed">
                 {{ t('board.addTask.technicalHint') }}
               </span>
             </template>
@@ -1109,22 +1106,22 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 <label
                   v-for="phase in BUG_FISHING_PHASES"
                   :key="phase.id"
-                  class="flex items-start gap-2 rounded-md px-1.5 py-1 text-[12px] hover:bg-slate-800/40"
+                  class="flex items-start gap-2 rounded-md px-1.5 py-1 text-[12px] hover:bg-elevated/40"
                 >
                   <input
                     v-model="fishingPhaseIds"
                     type="checkbox"
                     :value="phase.id"
-                    class="mt-0.5 accent-sky-500"
+                    class="mt-0.5 accent-app-info-500"
                     :data-testid="`add-task-fishing-angle-${phase.id}`"
                   />
                   <span class="min-w-0">
-                    <span class="block text-slate-200">{{ phase.title }}</span>
-                    <span class="block text-[11px] text-slate-500">{{ phase.goal }}</span>
+                    <span class="block text-default">{{ phase.title }}</span>
+                    <span class="block text-[11px] text-dimmed">{{ phase.goal }}</span>
                   </span>
                 </label>
               </div>
-              <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-[11px] text-slate-500">
+              <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-[11px] text-dimmed">
                 {{ t('board.addTask.bugFishingFields.angles.allSelected') }}
               </p>
             </UFormField>
@@ -1388,11 +1385,11 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
           </div>
 
           <div v-if="configDescriptors.length" class="space-y-3">
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('board.addTask.agentConfiguration') }}
             </span>
             <div v-for="d in configDescriptors" :key="d.id" class="space-y-1">
-              <div class="text-[11px] text-slate-400">{{ d.label }}</div>
+              <div class="text-[11px] text-muted">{{ d.label }}</div>
               <div v-if="d.type === 'select'" class="flex flex-wrap gap-1">
                 <UButton
                   v-for="opt in d.options"
@@ -1414,7 +1411,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 :data-testid="`agent-config-${d.id}`"
                 @update:model-value="(v: string | number) => setConfig(d.id, String(v))"
               />
-              <p class="text-[11px] leading-snug text-slate-500">{{ d.description }}</p>
+              <p class="text-[11px] leading-snug text-dimmed">{{ d.description }}</p>
             </div>
           </div>
 
@@ -1443,7 +1440,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
             :issues-hint="t('board.addTask.noIssuesHint')"
           />
 
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('board.addTask.plannedHint') }}
           </p>
         </template>

package/app/components/board/AgentFailureCard.vue

@@ -133,7 +133,7 @@ async function retry() {
 
 <template>
   <div
-    class="nodrag rounded-lg border border-rose-900/60 bg-rose-950/40"
+    class="nodrag rounded-lg border border-app-error-900/60 bg-app-error-950/40"
     :class="compact ? 'px-3 py-2' : 'px-3 py-2.5'"
     data-testid="agent-failure-banner"
     :data-run-kind="run.kind"
@@ -141,15 +141,15 @@ async function retry() {
     <div class="flex items-center gap-1.5" :class="compact ? 'text-[11px]' : 'text-xs'">
       <UIcon
         name="i-lucide-alert-triangle"
-        class="shrink-0 text-rose-400"
+        class="shrink-0 text-app-error-400"
         :class="compact ? 'h-3.5 w-3.5' : 'h-4 w-4'"
       />
-      <span class="text-rose-300">{{ title }}</span>
+      <span class="text-app-error-300">{{ title }}</span>
     </div>
 
     <p
       v-if="failure?.message"
-      class="mt-1 leading-snug text-rose-300/90"
+      class="mt-1 leading-snug text-app-error-300/90"
       :class="compact ? 'line-clamp-2 text-[10px]' : 'text-[11px]'"
       :title="failure.message"
     >
@@ -158,7 +158,7 @@ async function retry() {
 
     <p
       v-if="failure?.hint"
-      class="mt-1 leading-snug text-rose-400/70"
+      class="mt-1 leading-snug text-app-error-400/70"
       :class="compact ? 'text-[10px]' : 'text-[11px]'"
     >
       {{ failure.hint }}
@@ -168,7 +168,7 @@ async function retry() {
          name the concrete .env fix rather than only pointing at the (unhelpful-here) tab. -->
     <p
       v-if="showEnvironmentLocalHint && !compact"
-      class="mt-1 text-[11px] leading-snug text-rose-400/70"
+      class="mt-1 text-[11px] leading-snug text-app-error-400/70"
       data-testid="agent-failure-environment-local-hint"
     >
       {{
@@ -192,14 +192,14 @@ async function retry() {
       v-if="!compact && failure"
       :detail="failure.detail"
       :message="failure.message"
-      summary-class="text-[10px] text-rose-400/60 hover:text-rose-300"
-      pre-class="bg-rose-950/60 text-[10px] text-rose-200/80"
+      summary-class="text-[10px] text-app-error-400/60 hover:text-app-error-300"
+      pre-class="bg-app-error-950/60 text-[10px] text-app-error-200/80"
     />
 
     <div class="mt-2 flex flex-wrap items-center gap-2">
       <button
         type="button"
-        class="nodrag flex items-center gap-1 rounded-md bg-rose-900/40 text-rose-200 hover:bg-rose-900/70 disabled:opacity-60"
+        class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/40 text-app-error-200 hover:bg-app-error-900/70 disabled:opacity-60"
         :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
         :disabled="retrying || !access.canExecuteRuns.value"
         :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
@@ -216,7 +216,7 @@ async function retry() {
       <button
         v-if="run.kind === 'bootstrap'"
         type="button"
-        class="nodrag flex items-center gap-1 rounded-md bg-rose-900/20 text-rose-300 hover:bg-rose-900/50"
+        class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
         :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
         data-testid="agent-failure-inspect"
         @click.stop="inspectRun"
@@ -233,7 +233,7 @@ async function retry() {
       <button
         v-if="isEnvironmentFailure"
         type="button"
-        class="nodrag flex items-center gap-1 rounded-md bg-rose-900/20 text-rose-300 hover:bg-rose-900/50"
+        class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
         :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
         data-testid="agent-failure-configure-environment"
         @click.stop="openFailureSetup"

package/app/components/board/AgentFailureHistory.vue

@@ -15,11 +15,11 @@ const { t } = useI18n()
 <template>
   <details
     v-if="failures.length"
-    class="nodrag rounded-lg border border-slate-700/60 bg-slate-900/40 px-3 py-2"
+    class="nodrag rounded-lg border border-muted/60 bg-default/40 px-3 py-2"
     data-testid="agent-failure-history"
   >
     <summary
-      class="flex cursor-pointer items-center gap-1.5 text-[11px] text-slate-400 hover:text-slate-200"
+      class="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted hover:text-default"
     >
       <UIcon name="i-lucide-history" class="h-3.5 w-3.5 shrink-0" />
       {{ t('board.failure.history.previousErrors', { count: failures.length }, failures.length) }}

package/app/components/board/BoardCanvas.vue

@@ -141,7 +141,8 @@ function onPaneClick() {
       @pane-click="onPaneClick"
       @contextmenu.prevent
     >
-      <Background pattern-color="#1e293b" :gap="22" :size="1.4" />
+      <!-- The dot grid rides the border token: `neutral-800` in dark (the shade it always was), `200` in light. -->
+      <Background pattern-color="var(--ui-border)" :gap="22" :size="1.4" />
       <!-- No minimap: it's a precise-pointer affordance (too small to hit on touch,
            eats scarce width on narrow windows) that earned its keep on neither
            desktop nor mobile. The toolbar's zoom-in/out + fit-view controls are the
@@ -163,10 +164,10 @@ function onPaneClick() {
       v-if="board.frames.length === 0"
       class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-4 text-center"
     >
-      <UIcon name="i-lucide-layout-dashboard" class="h-10 w-10 text-slate-600" />
+      <UIcon name="i-lucide-layout-dashboard" class="h-10 w-10 text-app-600" />
       <div>
-        <h2 class="text-base font-semibold text-slate-300">{{ t('board.canvas.emptyTitle') }}</h2>
-        <p class="mt-1 max-w-sm text-sm text-slate-500">
+        <h2 class="text-base font-semibold text-toned">{{ t('board.canvas.emptyTitle') }}</h2>
+        <p class="mt-1 max-w-sm text-sm text-dimmed">
           {{ t('board.canvas.emptyBody') }}
         </p>
       </div>
@@ -195,7 +196,7 @@ function onPaneClick() {
         </UButton>
       </div>
       <!-- A read-only viewer sees the empty state but no create affordances. -->
-      <p v-else class="max-w-sm text-xs text-slate-600">{{ t('access.noBoardWrite') }}</p>
+      <p v-else class="max-w-sm text-xs text-app-600">{{ t('access.noBoardWrite') }}</p>
     </div>
 
     <!-- task dependency arrows, overlaid in screen space -->

package/app/components/board/CreateInitiativeModal.vue

@@ -180,10 +180,10 @@ async function create() {
   <UModal v-model:open="open" :title="t('initiative.create.title')">
     <template #body>
       <div class="space-y-4" data-testid="create-initiative-modal">
-        <p v-if="frame" class="text-xs text-slate-400">
+        <p v-if="frame" class="text-xs text-muted">
           <i18n-t keypath="initiative.create.inFrame" tag="span" scope="global">
             <template #frame>
-              <span class="font-medium text-slate-200">{{ frame.title }}</span>
+              <span class="font-medium text-default">{{ frame.title }}</span>
             </template>
           </i18n-t>
         </p>
@@ -191,9 +191,7 @@ async function create() {
         <!-- Preset picker: only when a deployment registered presets beyond the built-in generic
              one, so a single-preset install keeps today's plain form. -->
         <div v-if="presets.length > 1" class="space-y-1.5">
-          <span class="text-xs font-medium text-slate-300">{{
-            t('initiative.create.preset')
-          }}</span>
+          <span class="text-xs font-medium text-toned">{{ t('initiative.create.preset') }}</span>
           <div class="grid gap-2" data-testid="initiative-preset-picker">
             <button
               v-for="p in presets"
@@ -204,8 +202,8 @@ async function create() {
               class="flex items-start gap-3 rounded-md border px-3 py-2 text-left transition"
               :class="
                 p.id === selectedPresetId
-                  ? 'border-primary-500 bg-primary-950/30'
-                  : 'border-slate-700 hover:border-slate-600'
+                  ? 'border-primary bg-primary/10'
+                  : 'border-muted hover:border-app-600'
               "
               @click="selectPreset(p.id)"
             >
@@ -215,10 +213,10 @@ async function create() {
                 :style="{ color: p.presentation.color }"
               />
               <span class="min-w-0">
-                <span class="block text-sm font-medium text-slate-200">
+                <span class="block text-sm font-medium text-default">
                   {{ p.presentation.label }}
                 </span>
-                <span class="block text-[11px] text-slate-400">
+                <span class="block text-[11px] text-muted">
                   {{ p.presentation.description }}
                 </span>
               </span>
@@ -266,7 +264,7 @@ async function create() {
           :issues-hint="t('initiative.create.contextIssuesHint')"
         />
 
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('initiative.create.hint') }}
         </p>
       </div>

package/app/components/board/DependencyConnectOverlay.vue

@@ -16,7 +16,7 @@ const { connecting } = useDependencyConnect()
       :y1="connecting.y1"
       :x2="connecting.x2"
       :y2="connecting.y2"
-      stroke="#f59e0b"
+      stroke="var(--ui-warning)"
       :stroke-width="2"
       stroke-dasharray="5 4"
       stroke-opacity="0.9"

package/app/components/board/FailureHistoryList.vue

@@ -20,27 +20,27 @@ const ordered = computed(() => [...props.failures].reverse())
     <li
       v-for="failure in ordered"
       :key="failure.occurredAt"
-      class="rounded-md border border-slate-800/80 bg-slate-950/50 px-2.5 py-2"
+      class="rounded-md border border-default/80 bg-app-950/50 px-2.5 py-2"
       data-testid="agent-failure-history-entry"
     >
-      <div class="flex items-center gap-1.5 text-[10px] text-slate-500">
-        <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-rose-400/70" />
+      <div class="flex items-center gap-1.5 text-[10px] text-dimmed">
+        <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-app-error-400/70" />
         <time>{{ d(new Date(failure.occurredAt), 'long') }}</time>
       </div>
 
-      <p class="mt-1 text-[11px] leading-snug text-slate-300" :title="failure.message">
+      <p class="mt-1 text-[11px] leading-snug text-toned" :title="failure.message">
         {{ failure.message }}
       </p>
 
-      <p v-if="failure.hint" class="mt-1 text-[10px] leading-snug text-slate-500">
+      <p v-if="failure.hint" class="mt-1 text-[10px] leading-snug text-dimmed">
         {{ failure.hint }}
       </p>
 
       <FailureDetail
         :detail="failure.detail"
         :message="failure.message"
-        summary-class="text-[10px] text-slate-500 hover:text-slate-300"
-        pre-class="bg-slate-950/80 text-[10px] text-slate-400"
+        summary-class="text-[10px] text-dimmed hover:text-toned"
+        pre-class="bg-app-950/80 text-[10px] text-muted"
       />
     </li>
   </ol>

package/app/components/board/RecurringPipelineModal.vue

@@ -410,10 +410,10 @@ async function add() {
   <UModal v-model:open="modalOpen" :title="t('board.recurring.title')">
     <template #body>
       <div class="space-y-4">
-        <p v-if="frame" class="text-xs text-slate-400">
+        <p v-if="frame" class="text-xs text-muted">
           <i18n-t keypath="board.recurring.on" tag="span" scope="global">
             <template #frame>
-              <span class="font-medium text-slate-200">{{ frame.title }}</span>
+              <span class="font-medium text-default">{{ frame.title }}</span>
             </template>
           </i18n-t>
         </p>
@@ -449,11 +449,11 @@ async function add() {
           />
         </UFormField>
 
-        <div class="flex items-start gap-2 rounded-lg border border-slate-800 p-3">
+        <div class="flex items-start gap-2 rounded-lg border border-default p-3">
           <USwitch v-model="onDemand" :disabled="onDemandLocked" size="sm" class="mt-0.5" />
           <div class="space-y-0.5">
-            <p class="text-xs font-medium text-slate-200">{{ t('board.recurring.onDemand') }}</p>
-            <p class="text-[11px] text-slate-500">
+            <p class="text-xs font-medium text-default">{{ t('board.recurring.onDemand') }}</p>
+            <p class="text-[11px] text-dimmed">
               {{
                 onDemandLocked
                   ? t('board.recurring.onDemandLockedHint')
@@ -465,11 +465,11 @@ async function add() {
 
         <RecurringRecurrenceEditor v-if="!onDemand" v-model="recurrence" />
 
-        <div v-if="filesTicket" class="space-y-3 rounded-lg border border-slate-800 p-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <div v-if="filesTicket" class="space-y-3 rounded-lg border border-default p-3">
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('board.recurring.issueTracker') }}
           </p>
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('board.recurring.issueTrackerHint') }}
           </p>
           <div class="flex gap-1">
@@ -538,25 +538,25 @@ async function add() {
             @update:model-value="setTrackerTrigger"
           />
           <div>
-            <p class="text-xs font-medium text-slate-200">
+            <p class="text-xs font-medium text-default">
               {{ t('board.recurring.trackerTrigger') }}
             </p>
-            <p class="text-[11px] text-slate-500">
+            <p class="text-[11px] text-dimmed">
               {{ t('board.recurring.trackerTriggerHint') }}
             </p>
           </div>
         </div>
 
-        <div v-if="showIntake" class="space-y-3 rounded-lg border border-slate-800 p-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <div v-if="showIntake" class="space-y-3 rounded-lg border border-default p-3">
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('board.recurring.intake') }}
           </p>
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('board.recurring.intakeHint') }}
           </p>
           <!-- Two different remedies: connect something, versus connect something ELSE. A source
                that is connected but cannot run a scheduled search is not an absent connection. -->
-          <p v-if="intakeSources.length === 0" class="text-[11px] text-amber-500">
+          <p v-if="intakeSources.length === 0" class="text-[11px] text-app-warning-500">
             {{
               tasks.anyOffered
                 ? t('board.recurring.intakeNoIntakeSources')
@@ -626,7 +626,7 @@ async function add() {
           </UFormField>
 
           <template v-if="intakeSource">
-            <p class="text-[11px] text-slate-500">
+            <p class="text-[11px] text-dimmed">
               {{
                 intakeDispatch === 'per-ticket'
                   ? t('board.recurring.intakeDispatchPerTicketHint')
@@ -659,7 +659,7 @@ async function add() {
                    still holding a value would read as a filter that is on. Stated here because a
                    schedule fires unattended — the only other evidence of the gap is a bugfix run
                    started on a docs chore. -->
-              <p v-else class="text-xs text-amber-400">
+              <p v-else class="text-xs text-app-warning-400">
                 {{
                   t('board.recurring.intakeIssueTypeUnsupported', {
                     tracker: intakeSourceLabel,
@@ -677,7 +677,7 @@ async function add() {
           </template>
         </div>
 
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('board.recurring.footerHint') }}
         </p>
       </div>

package/app/components/board/ReviewFrictionDialog.vue

@@ -81,24 +81,24 @@ function createAnyway() {
   >
     <template #body>
       <div v-if="ctx" class="space-y-5">
-        <p class="text-sm text-slate-300">{{ body }}</p>
+        <p class="text-sm text-toned">{{ body }}</p>
 
-        <div class="rounded-lg border border-slate-700 bg-slate-900/50 p-2">
-          <p class="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        <div class="rounded-lg border border-muted bg-default/50 p-2">
+          <p class="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('errors.reviewFriction.waitingHeading') }}
           </p>
           <ul class="space-y-1">
             <li v-for="item in ctx.debt" :key="item.blockId">
               <button
                 type="button"
-                class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-slate-800/60 disabled:opacity-50"
+                class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated/60 disabled:opacity-50"
                 :disabled="pending"
                 @click="goToBlock(item.blockId)"
               >
-                <span class="truncate text-slate-200">
+                <span class="truncate text-default">
                   {{ item.title || t('errors.reviewFriction.untitled') }}
                 </span>
-                <span class="shrink-0 text-[12px] text-slate-500">
+                <span class="shrink-0 text-[12px] text-dimmed">
                   {{ t('errors.reviewFriction.waiting', { minutes: item.waitingMinutes }) }}
                 </span>
               </button>