Task Board

Features

• Printed-timetable identity: paper canvas, ink masthead rule, Archivo grotesque headings, and JetBrains Mono for every date, count, and duration in tabular numerals
• Zero border-radius everywhere — cards, lanes, chips, buttons, and avatars are all square, in the swiss-print tradition
• Borderless structure: lanes are toned wells on a white sheet, task cards are flat white slabs — separation comes from whitespace and background-tone shifts, with only a masthead rule, lane rules, and one footer hairline drawn
• Sprint axis under the header: a day-ticked rail with an ink done-fill (scaleX-animated) and a red now-line tick computed from the sprint dates in js/data.js
• Every task renders as a scheduled block: mono date range on top, a colored span track showing where the block sits inside the sprint window, and a mono duration label
• Priority reads as a square-tick mono label plus the colored span-track fill — no pills, no filled badges, no card-edge bars
• Pointer drag-and-drop between four lanes with a hatched drop-slot placeholder that previews the drop position live — dragging a block reads as rescheduling it
• Lane highlight on dragover using a dragenter/dragleave counter so nested children never cause flicker
• Full keyboard drag-and-drop: Space/Enter picks a block up, arrow keys move it between positions and lanes, Space/Enter drops, Escape cancels and restores the original position
• Every pickup, move, drop, and cancel announced through a visually hidden aria-live="assertive" region
• Drop settle bounce animation and staggered lane entrance, both disabled under reduced motion
• Per-lane actions menu: sort by priority, highlight/unhighlight the lane, move all tasks to Done, lock/unlock the lane against moves
• Fixed-height lanes with independently scrolling task lists, so the board keeps its shape as blocks pile up
• Photo avatars (external images) with an automatic initials fallback on load error, overlapping in the board footer
• Live task counts per lane and a board footer with team avatars and total task count
• Tasks moved into Done automatically swap their priority tick for a filled check square
• Single delegated listener set on the board — no per-card listeners, no leaks across re-renders
• Responsive: 4 lanes on desktop, 2 on tablet, 1 below 600px

Accessibility

Keyboard drag-and-drop

Space/Enter grabs, arrows move, Space/Enter drops, Escape cancels

Live announcements

Visually hidden aria-live="assertive" region announces pickup, move, drop, cancel

Card instructions

Every block has aria-describedby pointing to hidden usage instructions

Column structure

Lanes are <section> with aria-labelledby headings and labeled task lists

Column counts

Count values carry aria-label with the spoken task count

Column menus

Menu buttons expose aria-haspopup/aria-expanded, items use role="menuitem"

Sprint axis

The axis rail is role="img" with a live-updated done-count label; decorative ticks are aria-hidden

Focus indicators

:focus-visible with a 2px --tl-accent outline on all interactive elements

Focus management

Focus restored to the moved block (or menu button) after every re-render

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Task Board in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the drag & drop is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.