docs(04): UI design contract

.planning/phases/04-tasks-kanban/04-UI-SPEC.md

@@ -104,7 +104,7 @@ All components used in this phase and their source:
 |-----------|------|--------|-------|
 | `ui.Card` | existing | `backend/internal/web/ui/card.templ` | Task card display state; use `templ.Attributes` for `data-task-id`, drag class |
 | `ui.Button` (solid default md) | existing | `backend/internal/web/ui/button.templ` | "Add task" submit, "Save changes" on edit form |
-| `ui.Button` (soft neutral md) | existing | `backend/internal/web/ui/button.templ` | "Cancel" on add-task form, "Discard changes" on edit form |
+| `ui.Button` (soft neutral md) | existing | `backend/internal/web/ui/button.templ` | "Discard task" on add-task form, "Discard changes" on edit form |
 | `ui.Button` (solid danger md) | existing | `backend/internal/web/ui/button.templ` | "Yes, delete" in task delete confirmation |
 | `ui.Button` (soft danger md) | new variant needed | `backend/internal/web/ui/button.css` | Task delete trigger button — same `.ui-button-soft-danger-md` class pattern as Phase 3's `soft-neutral`; add CSS rule |
 | `ui.Badge` (info) | existing | `backend/internal/web/ui/badge.templ` | Task count per column header: `BadgeVariantInfo`, e.g. "3" |
@@ -156,6 +156,8 @@ Column wrapper: `flex-shrink-0 w-72` (288px). Column list area: `min-h-16 space-
 
 Column header: `flex items-center justify-between mb-2` with `<h3 class="text-sm font-semibold text-slate-700">` + `ui.Badge` (info, count as string). Column header area background: `bg-slate-100 rounded px-3 py-2 mb-2` to visually separate from card list.
 
+**Primary focal point:** The column header row — column label (14px/600 weight) paired with the task count badge — is the visual entry point for each column. Its `bg-slate-100` tinted band sits above the card list and draws the eye left-to-right across all four columns before the user reads down into the cards below.
+
 **States:**
 - Populated column: shows N task cards stacked vertically with `space-y-2`
 - Empty column: shows a `<p class="text-sm text-slate-400 italic text-center py-4">No tasks yet</p>` inside the sortable div, so the column still accepts drops (min-h-16 ensures drop zone height)
@@ -171,7 +173,7 @@ Column header: `flex items-center justify-between mb-2` with `<h3 class="text-sm
 **Form layout:**
 ```
 [Title input — full width, required, placeholder "Task title"]
-[Save (solid default md)] [Cancel (soft neutral md, restores trigger button without server round-trip via hx-get)]
+[Save (solid default md)] [Discard task (soft neutral md, restores trigger button without server round-trip via hx-get)]
 ```
 
 Title: `<input type="text" name="title" required maxlength="255" placeholder="Task title" class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"/>`
@@ -255,7 +257,7 @@ No dedicated UI. Satisfied by the reorder endpoint writing `position` to the DB
 | Primary CTA (save edit) | "Save changes" | codebase — tablos.templ existing pattern |
 | Primary CTA (confirm delete) | "Yes, delete" | codebase — tablos.templ existing pattern |
 | Cancel edit | "Discard changes" | codebase — tablos.templ existing pattern |
-| Cancel add | "Cancel" | default — consistent with form cancel patterns |
+| Cancel add | "Discard task" | mirrors "Discard changes" pattern; specific verb + noun |
 | Cancel delete | "Keep task" | mirroring codebase "Keep tablo" pattern |
 | Empty column state | "No tasks yet" | default — minimal, specific to context |
 | Task create form heading | (none — form is compact, column header already names context) | CONTEXT.md D-09 "title only for quick capture" |