Feature #1545
closedFeature #1511: Replace ticket view with Kanban board for CTO and assigned developers
Design: Kanban board section in the design system
0%
docs/superpowers/specs/2026-08-03-kanban-board-design.md
Description
**Surface:** design — documentation only, no application code
**Depends on:** nothing
**Blocks:** both frontend children
Decision **D4** and the epic's own AC #10: no frontend code before the board's UI/UX is specified and approved. `docs/design/design-system.md` is this repo's UI source of truth, so this is a real reviewable deliverable, not a placeholder. Run the **designer agent**; append a new sectioned entry following the existing section-code convention (PO/UH/SC/UR/SO/IR/…).
Note the two things that are genuinely new and have no precedent to copy: a **priority visual scale** (priority does not exist anywhere in this product today) and the **non-draggable card treatment** — a client's read-only board must read as deliberately non-interactive rather than broken.
## Acceptance criteria
- [ ] A new sectioned entry exists in `docs/design/design-system.md` with a stable section code and anchor; **the diff of this child touches only files under `docs/`**.
- [ ] Subsection checklist — each present and complete:
- [ ] (a) Board layout and column chrome: columns in `STAGE_ORDER` (all 10 statuses incl. Backlog 16 and Design 15), headers with counts, horizontal scroll, responsive/mobile behaviour.
- [ ] (b) Card anatomy: title, assignee name, priority, parent reference — with the unassigned, no-priority and no-parent states.
- [ ] (c) A priority visual scale — values, colours, ordering — enumerating every priority the aggregator can emit **plus the null case**.
- [ ] (d) Every drag state: idle, grab affordance, dragging, valid target, invalid target (Backlog and Blocked, for every role), dropping, rejected/rolled-back.
- [ ] (e) The client's read-only board: how a non-draggable card reads as intentional rather than broken.
- [ ] (f) Column show/hide filter; per-column and whole-board empty states; loading skeleton; error state; the over-cap "+N more" affordance.
- [ ] (g) Manual refresh control, its loading state, and any last-updated/stale indicator.
- [ ] (h) Card-move animation between polls, including the `prefers-reduced-motion` fallback.
- [ ] (i) Accessibility: a keyboard-only alternative to moving a card, focus order, ARIA roles, contrast ratios.
- [ ] (j) The full list of i18n keys to add, with ICU plural branches spelled out, for both `en.ts` and `fr.ts`.
- [ ] Every state is expressed in existing design-system tokens; any genuinely new token is listed explicitly as an addition with its justification.
- [ ] No complexity or price information appears in the section.
- [ ] **PO approval is recorded as a comment on this subtask, referencing the section anchor.** Without it the D4 gate is not passed and neither frontend child starts.