From c951fb2f020ce34df7b705a27fa8bd40b73cf307 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:30:10 +0100
Subject: [PATCH 1/8] polish: standardize board card visual states with design
 tokens

Replace hardcoded shadows, borders, and colors in CardItem with
token-based CSS custom properties. Add clear visual distinction for
hover, focus, selected, disabled, and dragging states. Normalize
badge, label, and metadata typography hierarchy using the font scale.
---
 .../src/components/board/CardItem.vue         | 173 ++++++++++++++++--
 1 file changed, 155 insertions(+), 18 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/CardItem.vue b/frontend/taskdeck-web/src/components/board/CardItem.vue
index 737194192..6c5084c8c 100644
--- a/frontend/taskdeck-web/src/components/board/CardItem.vue
+++ b/frontend/taskdeck-web/src/components/board/CardItem.vue
@@ -58,14 +58,19 @@ function isOverdue(dateString: string | null): boolean {
     draggable="false"
     :data-card-id="card.id"
     :class="[
-      'group rounded-lg p-3 shadow-[0_2px_8px_rgba(0,0,0,0.3)] hover:shadow-[0_4px_12px_rgba(0,0,0,0.4)] transition-all cursor-pointer border-[0.5px] relative',
-      isSelected ? 'border-primary-container ring-4 ring-primary-container/30 shadow-xl bg-primary-container/10 scale-105' : 'bg-surface-container-low border-outline-variant/15',
-      isDragging ? 'opacity-50 scale-95' : ''
+      'td-board-card group relative cursor-pointer',
+      isSelected ? 'td-board-card--selected' : '',
+      isDragging ? 'td-board-card--dragging' : ''
     ]"
+    tabindex="0"
+    :aria-selected="isSelected"
     @click.stop="emit('click', card)"
     @dragstart="handleDragStart"
     @dragend="handleDragEnd"
   >
+    <!-- Ember leading-edge indicator -->
+    <span class="td-board-card__indicator" aria-hidden="true" />
+
     <button
       type="button"
       data-action="drag-card-handle"
@@ -78,12 +83,12 @@ function isOverdue(dateString: string | null): boolean {
       <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h.01M8 12h.01M8 18h.01M16 6h.01M16 12h.01M16 18h.01" />
       </svg>
-      <span class="text-[11px] font-semibold uppercase tracking-[0.2em] font-label">Drag card</span>
+      <span class="td-board-card__drag-label">Drag card</span>
     </button>
 
     <!-- Blocked Badge -->
-    <div v-if="card.isBlocked" class="mb-2">
-      <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-ember/10 text-ember text-xs rounded">
+    <div v-if="card.isBlocked" class="td-board-card__badge-row">
+      <span class="td-board-card__badge td-board-card__badge--blocked">
         <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
           <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
         </svg>
@@ -92,19 +97,19 @@ function isOverdue(dateString: string | null): boolean {
     </div>
 
     <!-- Card Title -->
-    <h4 class="text-sm font-bold font-body text-on-surface group-hover:text-primary min-w-0 break-words mb-2 transition-colors">{{ card.title }}</h4>
+    <h4 class="td-board-card__title">{{ card.title }}</h4>
 
     <!-- Card Description (if exists) -->
-    <p v-if="card.description" class="text-xs text-on-surface/60 mb-2 line-clamp-2">
+    <p v-if="card.description" class="td-board-card__description">
       {{ card.description }}
     </p>
 
     <!-- Labels -->
-    <div v-if="card.labels.length > 0" class="flex flex-wrap gap-1 mb-2">
+    <div v-if="card.labels.length > 0" class="td-board-card__labels">
       <span
         v-for="label in card.labels"
         :key="label.id"
-        class="px-2 py-0.5 text-[9px] uppercase font-label tracking-[0.2em] rounded text-white font-medium"
+        class="td-board-card__label"
         :style="{ backgroundColor: label.colorHex }"
       >
         {{ label.name }}
@@ -112,7 +117,7 @@ function isOverdue(dateString: string | null): boolean {
     </div>
 
     <!-- Due Date -->
-    <div v-if="card.dueDate" class="flex items-center gap-1 text-xs" :class="isOverdue(card.dueDate) ? 'text-ember' : 'text-on-surface/60'">
+    <div v-if="card.dueDate" :class="['td-board-card__due', isOverdue(card.dueDate) ? 'td-board-card__due--overdue' : '']">
       <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
       </svg>
@@ -123,21 +128,153 @@ function isOverdue(dateString: string | null): boolean {
 </template>
 
 <style scoped>
-/* 2px left ember indicator on hover */
-div[data-card-id]::before {
-  content: '';
+/* ── Board Card — token-based visual states ── */
+.td-board-card {
+  position: relative;
+  border-radius: var(--td-radius-lg);
+  padding: var(--td-space-4);
+  background: var(--td-surface-container-low);
+  border: 0.5px solid var(--td-border-ghost);
+  box-shadow: var(--td-shadow-sm);
+  transition:
+    background-color var(--td-transition-fast),
+    border-color var(--td-transition-fast),
+    box-shadow var(--td-transition-fast),
+    transform var(--td-transition-fast),
+    opacity var(--td-transition-fast);
+}
+
+.td-board-card:hover {
+  background: var(--td-surface-container);
+  border-color: var(--td-border-default);
+  box-shadow: var(--td-shadow-md);
+}
+
+.td-board-card:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+/* Selected state */
+.td-board-card--selected {
+  border-color: var(--td-border-ember);
+  box-shadow: var(--td-shadow-md), 0 0 0 2px rgba(255, 83, 82, 0.2);
+  background: var(--td-color-ember-dim);
+}
+
+.td-board-card--selected:hover {
+  box-shadow: var(--td-shadow-lg), 0 0 0 2px rgba(255, 83, 82, 0.25);
+}
+
+/* Dragging state */
+.td-board-card--dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+}
+
+/* ── Ember leading-edge indicator ── */
+.td-board-card__indicator {
   position: absolute;
   left: 0;
-  top: 8px;
-  bottom: 8px;
+  top: var(--td-space-4);
+  bottom: var(--td-space-4);
   width: 2px;
   border-radius: 1px;
   background-color: var(--td-color-ember-glow);
   opacity: 0;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--td-transition-fast);
 }
 
-div[data-card-id]:hover::before {
+.td-board-card:hover .td-board-card__indicator {
   opacity: 1;
 }
+
+/* ── Drag handle label ── */
+.td-board-card__drag-label {
+  font-size: var(--td-font-xs);
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+}
+
+/* ── Badge row ── */
+.td-board-card__badge-row {
+  margin-bottom: var(--td-space-3);
+}
+
+.td-board-card__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--td-space-1);
+  padding: 1px var(--td-space-2);
+  font-size: var(--td-font-xs);
+  font-weight: 600;
+  border-radius: 9999px;
+}
+
+.td-board-card__badge--blocked {
+  background: var(--td-color-error-light);
+  color: var(--td-color-error);
+}
+
+/* ── Title — highest in hierarchy ── */
+.td-board-card__title {
+  font-size: var(--td-font-base);
+  font-weight: 700;
+  font-family: 'Manrope', system-ui, sans-serif;
+  color: var(--td-text-primary);
+  min-width: 0;
+  overflow-wrap: break-word;
+  margin-bottom: var(--td-space-3);
+  transition: color var(--td-transition-fast);
+}
+
+.td-board-card:hover .td-board-card__title {
+  color: var(--td-color-primary);
+}
+
+/* ── Description — secondary text ── */
+.td-board-card__description {
+  font-size: var(--td-font-sm);
+  color: var(--td-text-muted);
+  margin-bottom: var(--td-space-3);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.5;
+}
+
+/* ── Labels ── */
+.td-board-card__labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--td-space-1);
+  margin-bottom: var(--td-space-3);
+}
+
+.td-board-card__label {
+  padding: 1px var(--td-space-2);
+  font-size: var(--td-font-xs);
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  border-radius: var(--td-radius-sm);
+  color: white;
+}
+
+/* ── Due date — tertiary metadata ── */
+.td-board-card__due {
+  display: flex;
+  align-items: center;
+  gap: var(--td-space-1);
+  font-size: var(--td-font-sm);
+  color: var(--td-text-tertiary);
+}
+
+.td-board-card__due--overdue {
+  color: var(--td-color-error);
+}
 </style>

From e5555a5677cdf72f5a4f7740163a6934f34a9c3d Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:30:16 +0100
Subject: [PATCH 2/8] polish: apply token-based styling to column lanes

Replace inline Tailwind classes in ColumnLane with scoped CSS using
design tokens for spacing, borders, typography, and interactive states.
Adds consistent focus-visible rings and token-based card count badges.
---
 .../src/components/board/ColumnLane.vue       | 259 ++++++++++++++++--
 1 file changed, 239 insertions(+), 20 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/ColumnLane.vue b/frontend/taskdeck-web/src/components/board/ColumnLane.vue
index ca4d0165e..5df262a5f 100644
--- a/frontend/taskdeck-web/src/components/board/ColumnLane.vue
+++ b/frontend/taskdeck-web/src/components/board/ColumnLane.vue
@@ -160,23 +160,23 @@ function handleCardDragOver(event: DragEvent) {
   <div
     :data-column-id="column.id"
     :class="[
-      'flex-shrink-0 w-80 rounded-lg p-4 transition-all',
-      isDragOver ? 'bg-primary-container/10 ring-2 ring-primary-container' : 'bg-surface-container-low'
+      'td-column-lane',
+      isDragOver ? 'td-column-lane--drag-over' : ''
     ]"
     @dragover="handleDragOver"
     @dragleave="handleDragLeave"
     @drop="handleDrop"
   >
     <!-- Column Header -->
-    <div class="mb-4">
-      <div class="flex items-center justify-between mb-2">
-        <h3 class="flex items-center gap-2 font-semibold text-on-surface flex-1 font-label text-[11px] uppercase tracking-[0.2em]"><span class="w-1 h-4 rounded-full bg-primary-container"></span>{{ column.name }}</h3>
-        <div class="flex items-center gap-2">
+    <div class="td-column-lane__header">
+      <div class="td-column-lane__header-row">
+        <h3 class="td-column-lane__title"><span class="td-column-lane__title-dot"></span>{{ column.name }}</h3>
+        <div class="td-column-lane__actions">
           <button
             type="button"
             data-action="drag-column-handle"
             draggable="true"
-            class="p-1 text-on-surface/60 hover:text-on-surface/70 hover:bg-surface-bright rounded transition-colors cursor-grab active:cursor-grabbing"
+            class="td-column-lane__icon-btn cursor-grab active:cursor-grabbing"
             title="Drag Column"
             aria-label="Drag Column"
             @click.stop
@@ -186,14 +186,14 @@ function handleCardDragOver(event: DragEvent) {
             </svg>
           </button>
           <span
-            class="text-sm px-2 py-1 rounded"
-            :class="isWipLimitExceeded() ? 'bg-ember/10 text-ember' : 'bg-surface-bright text-on-surface/70'"
+            class="td-column-lane__count"
+            :class="isWipLimitExceeded() ? 'td-column-lane__count--exceeded' : ''"
           >
             {{ cards.length }}{{ column.wipLimit ? `/${column.wipLimit}` : '' }}
           </span>
           <button
             @click="showColumnEdit = true"
-            class="p-1 text-on-surface/60 hover:text-on-surface/70 hover:bg-surface-bright rounded transition-colors"
+            class="td-column-lane__icon-btn"
             title="Edit Column"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -204,14 +204,14 @@ function handleCardDragOver(event: DragEvent) {
         </div>
       </div>
 
-      <div v-if="isWipLimitExceeded()" class="text-xs text-ember mb-2">
-        ⚠️ WIP limit exceeded
+      <div v-if="isWipLimitExceeded()" class="td-column-lane__wip-warning">
+        WIP limit exceeded
       </div>
 
       <button
         data-action="toggle-add-card"
         @click="openCardForm"
-        class="w-full px-3 py-2 text-sm text-on-surface/60 border border-dashed border-outline-variant/15 hover:border-primary-container hover:text-primary rounded transition-colors flex items-center justify-center gap-1"
+        class="td-column-lane__add-card-btn"
       >
         <span>+</span>
         <span>Add Card</span>
@@ -221,21 +221,21 @@ function handleCardDragOver(event: DragEvent) {
       <div
         v-if="showCardForm"
         data-action="add-card-form"
-        class="mt-3 bg-surface-container rounded-lg p-3 shadow-[0_2px_8px_rgba(0,0,0,0.3)]"
+        class="td-column-lane__card-form"
       >
         <form @submit.prevent="createCard">
           <textarea
             data-action="add-card-input"
             v-model="newCardTitle"
             placeholder="Enter card title..."
-            class="w-full px-3 py-2 bg-surface-container-low border border-outline-variant/15 text-on-surface rounded resize-none focus:outline-none focus:ring-2 focus:ring-primary-container placeholder:text-on-surface/40"
+            class="td-column-lane__card-input"
             rows="3"
             autofocus
           ></textarea>
-          <div class="flex gap-2 mt-2">
+          <div class="td-column-lane__card-form-actions">
             <button
               type="submit"
-              class="px-3 py-1.5 bg-primary-container text-on-primary-container text-sm rounded hover:brightness-110 transition-colors"
+              class="td-column-lane__form-btn td-column-lane__form-btn--primary"
             >
               Add
             </button>
@@ -243,7 +243,7 @@ function handleCardDragOver(event: DragEvent) {
               type="button"
               data-action="cancel-add-card"
               @click="showCardForm = false"
-              class="px-3 py-1.5 bg-surface-bright text-on-surface/70 text-sm rounded hover:bg-surface-bright/80 transition-colors"
+              class="td-column-lane__form-btn td-column-lane__form-btn--secondary"
             >
               Cancel
             </button>
@@ -253,7 +253,7 @@ function handleCardDragOver(event: DragEvent) {
     </div>
 
     <!-- Cards List -->
-    <div class="space-y-2 overflow-y-auto max-h-[calc(100vh-280px)] min-h-[100px]">
+    <div class="td-column-lane__cards">
       <div
         v-for="card in cards"
         :key="card.id"
@@ -270,7 +270,7 @@ function handleCardDragOver(event: DragEvent) {
       </div>
 
       <!-- Empty State -->
-      <div v-if="cards.length === 0 && !showCardForm" class="text-center py-8 text-on-surface/40 text-sm">
+      <div v-if="cards.length === 0 && !showCardForm" class="td-column-lane__empty">
         No cards yet
       </div>
     </div>
@@ -295,3 +295,222 @@ function handleCardDragOver(event: DragEvent) {
     />
   </div>
 </template>
+
+<style scoped>
+/* ── Column Lane — token-based layout ── */
+.td-column-lane {
+  flex-shrink: 0;
+  width: 20rem;
+  border-radius: var(--td-radius-lg);
+  padding: var(--td-space-5);
+  background: var(--td-surface-container-low);
+  border: 0.5px solid var(--td-border-ghost);
+  transition:
+    background-color var(--td-transition-fast),
+    border-color var(--td-transition-fast),
+    box-shadow var(--td-transition-fast);
+}
+
+.td-column-lane--drag-over {
+  background: var(--td-color-ember-dim);
+  border-color: var(--td-border-ember);
+  box-shadow: var(--td-shadow-sm);
+}
+
+/* ── Column header ── */
+.td-column-lane__header {
+  margin-bottom: var(--td-space-5);
+}
+
+.td-column-lane__header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--td-space-3);
+}
+
+.td-column-lane__title {
+  display: flex;
+  align-items: center;
+  gap: var(--td-space-2);
+  flex: 1;
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-size: var(--td-font-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--td-text-primary);
+}
+
+.td-column-lane__title-dot {
+  width: 3px;
+  height: 1rem;
+  border-radius: 9999px;
+  background: var(--td-color-ember-glow);
+  flex-shrink: 0;
+}
+
+.td-column-lane__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--td-space-2);
+}
+
+.td-column-lane__icon-btn {
+  padding: var(--td-space-1);
+  color: var(--td-text-tertiary);
+  border-radius: var(--td-radius-md);
+  transition:
+    color var(--td-transition-fast),
+    background-color var(--td-transition-fast);
+}
+
+.td-column-lane__icon-btn:hover {
+  color: var(--td-text-secondary);
+  background: var(--td-surface-bright);
+}
+
+.td-column-lane__icon-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+/* ── Card count badge ── */
+.td-column-lane__count {
+  font-size: var(--td-font-sm);
+  padding: var(--td-space-1) var(--td-space-2);
+  border-radius: var(--td-radius-md);
+  background: var(--td-surface-bright);
+  color: var(--td-text-muted);
+}
+
+.td-column-lane__count--exceeded {
+  background: var(--td-color-error-light);
+  color: var(--td-color-error);
+}
+
+/* ── WIP warning ── */
+.td-column-lane__wip-warning {
+  font-size: var(--td-font-sm);
+  color: var(--td-color-error);
+  margin-bottom: var(--td-space-3);
+}
+
+/* ── Add card button ── */
+.td-column-lane__add-card-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--td-space-1);
+  padding: var(--td-space-2) var(--td-space-4);
+  font-size: var(--td-font-sm);
+  color: var(--td-text-tertiary);
+  border: 1px dashed var(--td-border-default);
+  border-radius: var(--td-radius-md);
+  transition:
+    color var(--td-transition-fast),
+    border-color var(--td-transition-fast);
+}
+
+.td-column-lane__add-card-btn:hover {
+  color: var(--td-color-primary);
+  border-color: var(--td-color-primary);
+}
+
+.td-column-lane__add-card-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+/* ── Card creation form ── */
+.td-column-lane__card-form {
+  margin-top: var(--td-space-4);
+  background: var(--td-surface-container);
+  border-radius: var(--td-radius-lg);
+  padding: var(--td-space-4);
+  box-shadow: var(--td-shadow-sm);
+}
+
+.td-column-lane__card-input {
+  width: 100%;
+  padding: var(--td-space-2) var(--td-space-4);
+  background: var(--td-surface-container-low);
+  border: 1px solid var(--td-border-default);
+  color: var(--td-text-primary);
+  border-radius: var(--td-radius-md);
+  resize: none;
+  font-size: var(--td-font-base);
+}
+
+.td-column-lane__card-input::placeholder {
+  color: var(--td-text-tertiary);
+}
+
+.td-column-lane__card-input:focus {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+.td-column-lane__card-form-actions {
+  display: flex;
+  gap: var(--td-space-2);
+  margin-top: var(--td-space-3);
+}
+
+.td-column-lane__form-btn {
+  padding: var(--td-space-1) var(--td-space-4);
+  font-size: var(--td-font-sm);
+  font-weight: 500;
+  border-radius: var(--td-radius-md);
+  transition:
+    background-color var(--td-transition-fast),
+    filter var(--td-transition-fast);
+}
+
+.td-column-lane__form-btn--primary {
+  background: var(--td-color-primary);
+  color: var(--td-text-inverse);
+}
+
+.td-column-lane__form-btn--primary:hover {
+  background: var(--td-color-primary-hover);
+}
+
+.td-column-lane__form-btn--primary:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+.td-column-lane__form-btn--secondary {
+  background: var(--td-surface-bright);
+  color: var(--td-text-muted);
+}
+
+.td-column-lane__form-btn--secondary:hover {
+  background: var(--td-surface-container-highest);
+}
+
+.td-column-lane__form-btn--secondary:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+/* ── Cards list ── */
+.td-column-lane__cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--td-space-3);
+  overflow-y: auto;
+  max-height: calc(100vh - 280px);
+  min-height: 100px;
+}
+
+/* ── Empty state ── */
+.td-column-lane__empty {
+  text-align: center;
+  padding: var(--td-space-8) 0;
+  font-size: var(--td-font-sm);
+  color: var(--td-text-tertiary);
+}
+</style>

From 1fe2f76d262fde1cd98fa9aafa776defd97b2270 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:30:20 +0100
Subject: [PATCH 3/8] polish: use token-based spacing for board canvas layout

Replace hardcoded gap/padding values in BoardCanvas with CSS custom
property references from the design token scale.
---
 .../src/components/board/BoardCanvas.vue      | 53 ++++++++++++++++---
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/BoardCanvas.vue b/frontend/taskdeck-web/src/components/board/BoardCanvas.vue
index b218a5a65..8550a3abf 100644
--- a/frontend/taskdeck-web/src/components/board/BoardCanvas.vue
+++ b/frontend/taskdeck-web/src/components/board/BoardCanvas.vue
@@ -26,8 +26,8 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="h-[calc(100vh-120px)] overflow-x-auto">
-    <div class="flex gap-4 p-6 min-h-full">
+  <div class="td-board-canvas">
+    <div class="td-board-canvas__lanes">
       <div
         v-for="column in sortedColumns"
         :key="column.id"
@@ -59,10 +59,10 @@ defineEmits<{
       <!-- Empty State -->
       <div
         v-if="!hasColumns"
-        class="flex-1 flex flex-col items-center justify-center text-on-surface/20"
+        class="td-board-canvas__empty"
       >
         <svg
-          class="w-16 h-16 mb-4"
+          class="td-board-canvas__empty-icon"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -74,9 +74,50 @@ defineEmits<{
             d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
           />
         </svg>
-        <p class="text-lg font-medium">No columns yet</p>
-        <p class="text-sm mt-1">Click "Add Column" to get started</p>
+        <p class="td-board-canvas__empty-title">No columns yet</p>
+        <p class="td-board-canvas__empty-hint">Click "Add Column" to get started</p>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.td-board-canvas {
+  height: calc(100vh - 120px);
+  overflow-x: auto;
+}
+
+.td-board-canvas__lanes {
+  display: flex;
+  gap: var(--td-space-5);
+  padding: var(--td-space-6);
+  min-height: 100%;
+}
+
+.td-board-canvas__empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--td-text-tertiary);
+}
+
+.td-board-canvas__empty-icon {
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: var(--td-space-5);
+}
+
+.td-board-canvas__empty-title {
+  font-size: var(--td-font-lg);
+  font-weight: 500;
+  color: var(--td-text-tertiary);
+}
+
+.td-board-canvas__empty-hint {
+  font-size: var(--td-font-sm);
+  color: var(--td-text-tertiary);
+  margin-top: var(--td-space-1);
+}
+</style>

From 0d1dd470be8dcd2107f7b4237463c05bed52d301 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:30:26 +0100
Subject: [PATCH 4/8] polish: align board toolbar buttons with design token
 system

Replace inline Tailwind utility classes in BoardToolbar with scoped
token-based CSS. Adds consistent focus-visible states and normalizes
button sizing, typography, and presence badge styling.
---
 .../src/components/board/BoardToolbar.vue     | 243 ++++++++++++++++--
 1 file changed, 223 insertions(+), 20 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/BoardToolbar.vue b/frontend/taskdeck-web/src/components/board/BoardToolbar.vue
index 9c4641588..65269e0ff 100644
--- a/frontend/taskdeck-web/src/components/board/BoardToolbar.vue
+++ b/frontend/taskdeck-web/src/components/board/BoardToolbar.vue
@@ -23,11 +23,12 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="flex items-center justify-between">
-    <div class="flex items-center gap-4">
+  <div class="td-board-toolbar">
+    <div class="td-board-toolbar__left">
       <button
         @click="$emit('back')"
-        class="text-on-surface/60 hover:text-on-surface transition-colors"
+        class="td-board-toolbar__back-btn"
+        aria-label="Back to boards"
       >
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
@@ -40,59 +41,59 @@ defineEmits<{
       </button>
       <div>
         <div class="flex flex-wrap items-center gap-2">
-          <h1 class="text-2xl font-bold text-on-surface">
+          <h1 class="td-board-toolbar__title">
             {{ boardName }}
           </h1>
           <span
             v-if="isDemoBoard"
-            class="inline-flex items-center rounded-full border border-primary-container/30 bg-primary-container/10 px-2 py-0.5 text-xs font-semibold text-primary"
+            class="td-board-toolbar__demo-badge"
           >
             Demo board
           </span>
         </div>
-        <p v-if="boardDescription" class="text-sm text-on-surface/60">
+        <p v-if="boardDescription" class="td-board-toolbar__description">
           {{ boardDescription }}
         </p>
-        <div class="mt-2 flex flex-wrap items-center gap-2">
-          <span class="text-xs font-semibold uppercase tracking-wide text-on-surface/60">Live</span>
+        <div class="td-board-toolbar__presence">
+          <span class="td-board-toolbar__presence-label">Live</span>
           <span
             v-if="presenceMembers.length === 0"
-            class="inline-flex items-center rounded-full bg-surface-container-highest px-2 py-0.5 text-xs text-on-surface/60"
+            class="td-board-toolbar__presence-empty"
           >
             No active collaborators
           </span>
           <span
             v-for="member in presenceMembers"
             :key="member.userId"
-            class="inline-flex items-center gap-1 rounded-full bg-primary-container/10 px-2 py-0.5 text-xs text-primary"
+            class="td-board-toolbar__presence-member"
             data-presence-user
           >
             <span>{{ member.displayName || member.userId.slice(0, 8) }}</span>
-            <span v-if="member.editingCardId" class="font-medium text-[var(--td-color-warning)]">(editing)</span>
+            <span v-if="member.editingCardId" class="td-board-toolbar__presence-editing">(editing)</span>
           </span>
         </div>
       </div>
     </div>
 
-    <div class="flex items-center gap-2">
+    <div class="td-board-toolbar__actions">
       <button
         @click="$emit('toggleFilter')"
         :class="[
-          'p-2 border border-outline-variant/15 rounded-lg transition-colors',
-          showFilterPanel ? 'bg-primary-container/20 text-primary border-primary-container' : 'text-on-surface/60 hover:bg-surface-bright'
+          'td-board-toolbar__icon-btn',
+          showFilterPanel ? 'td-board-toolbar__icon-btn--active' : ''
         ]"
         title="Filter Cards (Press f)"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
         </svg>
-        <span v-if="filteredCardCount < totalCardCount" class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary-container text-[10px] font-bold text-on-primary-container">
+        <span v-if="filteredCardCount < totalCardCount" class="td-board-toolbar__filter-count">
           {{ filteredCardCount }}
         </span>
       </button>
       <button
         @click="$emit('showKeyboardHelp')"
-        class="p-2 text-on-surface/60 hover:bg-surface-bright border border-outline-variant/15 rounded-lg transition-colors"
+        class="td-board-toolbar__icon-btn"
         title="Keyboard Shortcuts (Press ?)"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -101,7 +102,7 @@ defineEmits<{
       </button>
       <button
         @click="$emit('showLabelManager')"
-        class="px-4 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-bright border border-outline-variant/15 rounded-lg transition-colors"
+        class="td-board-toolbar__text-btn"
         title="Manage Labels"
       >
         <svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -111,7 +112,7 @@ defineEmits<{
       </button>
       <button
         @click="$emit('showStarterPackCatalog')"
-        class="px-4 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-bright border border-outline-variant/15 rounded-lg transition-colors"
+        class="td-board-toolbar__text-btn"
         title="Browse Starter Packs"
       >
         <svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -121,7 +122,7 @@ defineEmits<{
       </button>
       <button
         @click="$emit('showBoardSettings')"
-        class="px-4 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-bright border border-outline-variant/15 rounded-lg transition-colors"
+        class="td-board-toolbar__icon-btn"
         title="Board Settings"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -131,10 +132,212 @@ defineEmits<{
       </button>
       <button
         @click="$emit('toggleColumnForm')"
-        class="px-4 py-2 bg-primary-container text-on-primary-container rounded-lg hover:brightness-110 transition-colors"
+        class="td-board-toolbar__primary-btn"
       >
         + Add Column
       </button>
     </div>
   </div>
 </template>
+
+<style scoped>
+/* ── Board Toolbar — token-based layout ── */
+.td-board-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--td-space-4);
+}
+
+.td-board-toolbar__left {
+  display: flex;
+  align-items: center;
+  gap: var(--td-space-5);
+}
+
+/* ── Back button ── */
+.td-board-toolbar__back-btn {
+  color: var(--td-text-tertiary);
+  transition: color var(--td-transition-fast);
+}
+
+.td-board-toolbar__back-btn:hover {
+  color: var(--td-text-primary);
+}
+
+.td-board-toolbar__back-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+  border-radius: var(--td-radius-md);
+}
+
+/* ── Board title ── */
+.td-board-toolbar__title {
+  font-family: 'Manrope', system-ui, sans-serif;
+  font-size: var(--td-font-2xl);
+  font-weight: 800;
+  color: var(--td-text-primary);
+  letter-spacing: -0.02em;
+}
+
+/* ── Demo badge ── */
+.td-board-toolbar__demo-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  border: 1px solid var(--td-color-primary-light);
+  background: var(--td-color-ember-dim);
+  padding: 1px var(--td-space-2);
+  font-size: var(--td-font-xs);
+  font-weight: 600;
+  color: var(--td-color-primary);
+}
+
+/* ── Description ── */
+.td-board-toolbar__description {
+  font-size: var(--td-font-sm);
+  color: var(--td-text-muted);
+  margin-top: var(--td-space-1);
+}
+
+/* ── Presence ── */
+.td-board-toolbar__presence {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--td-space-2);
+  margin-top: var(--td-space-3);
+}
+
+.td-board-toolbar__presence-label {
+  font-size: var(--td-font-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--td-text-tertiary);
+}
+
+.td-board-toolbar__presence-empty {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  background: var(--td-surface-container-highest);
+  padding: 1px var(--td-space-2);
+  font-size: var(--td-font-xs);
+  color: var(--td-text-tertiary);
+}
+
+.td-board-toolbar__presence-member {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--td-space-1);
+  border-radius: 9999px;
+  background: var(--td-color-ember-dim);
+  padding: 1px var(--td-space-2);
+  font-size: var(--td-font-xs);
+  color: var(--td-color-primary);
+}
+
+.td-board-toolbar__presence-editing {
+  font-weight: 500;
+  color: var(--td-color-warning);
+}
+
+/* ── Actions row ── */
+.td-board-toolbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--td-space-2);
+}
+
+/* ── Icon button (filter, help, settings) ── */
+.td-board-toolbar__icon-btn {
+  position: relative;
+  padding: var(--td-space-2);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-lg);
+  color: var(--td-text-tertiary);
+  transition:
+    background-color var(--td-transition-fast),
+    color var(--td-transition-fast),
+    border-color var(--td-transition-fast);
+}
+
+.td-board-toolbar__icon-btn:hover {
+  background: var(--td-surface-bright);
+  color: var(--td-text-secondary);
+}
+
+.td-board-toolbar__icon-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+.td-board-toolbar__icon-btn--active {
+  background: var(--td-color-ember-dim);
+  color: var(--td-color-primary);
+  border-color: var(--td-color-primary);
+}
+
+/* ── Filter count indicator ── */
+.td-board-toolbar__filter-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--td-color-primary);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--td-text-inverse);
+}
+
+/* ── Text button (Labels, Starter Packs) ── */
+.td-board-toolbar__text-btn {
+  padding: var(--td-space-2) var(--td-space-5);
+  font-size: var(--td-font-sm);
+  font-weight: 500;
+  color: var(--td-text-muted);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-lg);
+  transition:
+    background-color var(--td-transition-fast),
+    color var(--td-transition-fast);
+}
+
+.td-board-toolbar__text-btn:hover {
+  background: var(--td-surface-bright);
+  color: var(--td-text-primary);
+}
+
+.td-board-toolbar__text-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+/* ── Primary action button ── */
+.td-board-toolbar__primary-btn {
+  padding: var(--td-space-2) var(--td-space-5);
+  font-size: var(--td-font-sm);
+  font-weight: 600;
+  background: var(--td-color-primary);
+  color: var(--td-text-inverse);
+  border-radius: var(--td-radius-lg);
+  transition:
+    background-color var(--td-transition-fast),
+    filter var(--td-transition-fast);
+}
+
+.td-board-toolbar__primary-btn:hover {
+  background: var(--td-color-primary-hover);
+}
+
+.td-board-toolbar__primary-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+</style>

From 3a91a68624c45b71159ffffd6cdc672ebea9b0f1 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:30:30 +0100
Subject: [PATCH 5/8] polish: token-based styling for board action rail

Replace inline Tailwind classes in BoardActionRail with scoped CSS
using design tokens for spacing, borders, and typography.
---
 .../src/components/board/BoardActionRail.vue  | 92 ++++++++++++++-----
 1 file changed, 69 insertions(+), 23 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/BoardActionRail.vue b/frontend/taskdeck-web/src/components/board/BoardActionRail.vue
index 5af89d05e..66a227d0d 100644
--- a/frontend/taskdeck-web/src/components/board/BoardActionRail.vue
+++ b/frontend/taskdeck-web/src/components/board/BoardActionRail.vue
@@ -10,42 +10,88 @@ defineEmits<{
 
 <template>
   <div
-    class="mt-4 flex flex-wrap items-center gap-2 rounded-xl border border-outline-variant/15 bg-surface-container-low px-4 py-3"
+    class="td-action-rail"
     data-board-action-rail
   >
-    <span class="text-xs font-semibold uppercase tracking-wide text-on-surface/60">Board Actions</span>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
-      @click="$emit('capture')"
-    >
+    <span class="td-action-rail__label">Board Actions</span>
+    <button class="td-action-rail__btn" @click="$emit('capture')">
       Capture here
     </button>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
-      @click="$emit('chat')"
-    >
+    <button class="td-action-rail__btn" @click="$emit('chat')">
       Ask assistant
     </button>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
-      @click="$emit('review')"
-    >
+    <button class="td-action-rail__btn" @click="$emit('review')">
       Review proposals
     </button>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
-      @click="$emit('inbox')"
-    >
+    <button class="td-action-rail__btn" @click="$emit('inbox')">
       Open Inbox
     </button>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-primary-container bg-primary-container hover:brightness-110 rounded-lg transition-colors"
-      @click="$emit('addCard')"
-    >
+    <button class="td-action-rail__btn td-action-rail__btn--primary" @click="$emit('addCard')">
       Add card
     </button>
-    <p class="text-sm text-on-surface/60">
+    <p class="td-action-rail__hint">
       New input starts in Capture or Inbox. Only approved changes land on this board.
     </p>
   </div>
 </template>
+
+<style scoped>
+.td-action-rail {
+  margin-top: var(--td-space-5);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--td-space-2);
+  border-radius: var(--td-radius-xl);
+  border: 0.5px solid var(--td-border-ghost);
+  background: var(--td-surface-container-low);
+  padding: var(--td-space-4) var(--td-space-5);
+}
+
+.td-action-rail__label {
+  font-size: var(--td-font-xs);
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--td-text-tertiary);
+}
+
+.td-action-rail__btn {
+  padding: var(--td-space-2) var(--td-space-4);
+  font-size: var(--td-font-sm);
+  font-weight: 500;
+  color: var(--td-text-muted);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-lg);
+  transition:
+    background-color var(--td-transition-fast),
+    color var(--td-transition-fast);
+}
+
+.td-action-rail__btn:hover {
+  background: var(--td-surface-container);
+  color: var(--td-text-primary);
+}
+
+.td-action-rail__btn:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+.td-action-rail__btn--primary {
+  background: var(--td-color-primary);
+  color: var(--td-text-inverse);
+  border-color: transparent;
+}
+
+.td-action-rail__btn--primary:hover {
+  background: var(--td-color-primary-hover);
+  color: var(--td-text-inverse);
+}
+
+.td-action-rail__hint {
+  font-size: var(--td-font-sm);
+  color: var(--td-text-tertiary);
+}
+</style>

From 6891eb3c1f22d97878ce3a9413140d27372b74e6 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:30:35 +0100
Subject: [PATCH 6/8] polish: token-based styling for create column form in
 BoardView

Replace inline Tailwind classes in the column creation form with
scoped CSS using design tokens for consistent input and button styles.
---
 frontend/taskdeck-web/src/views/BoardView.vue | 82 +++++++++++++++++--
 1 file changed, 77 insertions(+), 5 deletions(-)

diff --git a/frontend/taskdeck-web/src/views/BoardView.vue b/frontend/taskdeck-web/src/views/BoardView.vue
index 8ca59a4df..5e827e87b 100644
--- a/frontend/taskdeck-web/src/views/BoardView.vue
+++ b/frontend/taskdeck-web/src/views/BoardView.vue
@@ -309,25 +309,25 @@ useKeyboardShortcuts([
         </WorkspaceHelpCallout>
 
         <!-- Create Column Form -->
-        <div v-if="showColumnForm" class="mt-4 bg-surface rounded-lg p-4">
-          <form @submit.prevent="createColumn" class="flex gap-3">
+        <div v-if="showColumnForm" class="td-column-form">
+          <form @submit.prevent="createColumn" class="td-column-form__row">
             <input
               v-model="newColumnName"
               type="text"
               placeholder="Column name"
-              class="flex-1 px-4 py-2 border border-outline-variant/15 rounded-lg bg-surface-container-lowest text-on-surface focus:outline-none ring-1 ring-primary-container"
+              class="td-column-form__input"
               autofocus
             />
             <button
               type="submit"
-              class="px-6 py-2 bg-primary-container text-on-primary-container rounded-lg hover:brightness-110 transition-colors"
+              class="td-column-form__btn td-column-form__btn--primary"
             >
               Create
             </button>
             <button
               type="button"
               @click="showColumnForm = false"
-              class="px-6 py-2 bg-surface-bright text-on-surface/70 rounded-lg hover:bg-surface-container-highest transition-colors"
+              class="td-column-form__btn td-column-form__btn--secondary"
             >
               Cancel
             </button>
@@ -396,3 +396,75 @@ useKeyboardShortcuts([
     />
   </div>
 </template>
+
+<style scoped>
+/* ── Create Column Form — token-based ── */
+.td-column-form {
+  margin-top: var(--td-space-5);
+  background: var(--td-surface-container);
+  border-radius: var(--td-radius-lg);
+  padding: var(--td-space-5);
+}
+
+.td-column-form__row {
+  display: flex;
+  gap: var(--td-space-4);
+}
+
+.td-column-form__input {
+  flex: 1;
+  padding: var(--td-space-2) var(--td-space-5);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-lg);
+  background: var(--td-surface-container-lowest);
+  color: var(--td-text-primary);
+  font-size: var(--td-font-base);
+}
+
+.td-column-form__input:focus {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+.td-column-form__input::placeholder {
+  color: var(--td-text-tertiary);
+}
+
+.td-column-form__btn {
+  padding: var(--td-space-2) var(--td-space-6);
+  font-size: var(--td-font-sm);
+  font-weight: 500;
+  border-radius: var(--td-radius-lg);
+  transition:
+    background-color var(--td-transition-fast),
+    filter var(--td-transition-fast);
+}
+
+.td-column-form__btn--primary {
+  background: var(--td-color-primary);
+  color: var(--td-text-inverse);
+}
+
+.td-column-form__btn--primary:hover {
+  background: var(--td-color-primary-hover);
+}
+
+.td-column-form__btn--primary:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+.td-column-form__btn--secondary {
+  background: var(--td-surface-bright);
+  color: var(--td-text-muted);
+}
+
+.td-column-form__btn--secondary:hover {
+  background: var(--td-surface-container-highest);
+}
+
+.td-column-form__btn--secondary:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+</style>

From 3320cefbfbeda018a0abaebaf04ef77fd5d107d7 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:31:53 +0100
Subject: [PATCH 7/8] fix: replace hardcoded 10px font-size with token in
 filter count badge

Self-review finding: the filter count indicator used a hardcoded 10px
instead of var(--td-font-xs) from the design token scale.
---
 frontend/taskdeck-web/src/components/board/BoardToolbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/taskdeck-web/src/components/board/BoardToolbar.vue b/frontend/taskdeck-web/src/components/board/BoardToolbar.vue
index 65269e0ff..def65b1d6 100644
--- a/frontend/taskdeck-web/src/components/board/BoardToolbar.vue
+++ b/frontend/taskdeck-web/src/components/board/BoardToolbar.vue
@@ -291,7 +291,7 @@ defineEmits<{
   justify-content: center;
   border-radius: 9999px;
   background: var(--td-color-primary);
-  font-size: 10px;
+  font-size: var(--td-font-xs);
   font-weight: 700;
   color: var(--td-text-inverse);
 }

From c5be917591bac57a75ff979edc8e560740b7d289 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 04:37:51 +0100
Subject: [PATCH 8/8] fix: add combined selected+focus-visible state for
 keyboard nav

When a card is both selected and focused (the normal case during
keyboard navigation), the :focus-visible box-shadow was overriding
the selected state due to higher CSS specificity. Add an explicit
.td-board-card--selected:focus-visible rule that preserves both
the ember selection indicators and the focus ring.
---
 frontend/taskdeck-web/src/components/board/CardItem.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/taskdeck-web/src/components/board/CardItem.vue b/frontend/taskdeck-web/src/components/board/CardItem.vue
index 6c5084c8c..ffb25fe4e 100644
--- a/frontend/taskdeck-web/src/components/board/CardItem.vue
+++ b/frontend/taskdeck-web/src/components/board/CardItem.vue
@@ -166,6 +166,13 @@ function isOverdue(dateString: string | null): boolean {
   box-shadow: var(--td-shadow-lg), 0 0 0 2px rgba(255, 83, 82, 0.25);
 }
 
+.td-board-card--selected:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring), 0 0 0 4px rgba(255, 83, 82, 0.15);
+  border-color: var(--td-border-ember);
+  background: var(--td-color-ember-dim);
+}
+
 /* Dragging state */
 .td-board-card--dragging {
   opacity: 0.5;