---
name: Kanban Board
description: Design recommendations for kanban board interfaces with drag-and-drop card management
---

# Kanban Board Design Guidance

When designing kanban boards, focus on clarity, minimalism, and smooth interactions. The board should enable users to quickly understand status, move work items efficiently, and access essential information without clutter.

## Board Structure

1. **Column Organization**: Organize work into status columns with clear, descriptive names (e.g., "To Do", "In Progress", "Done"). Display card counts in column headers to provide quick context.

2. **Column Width**: Balance information density with readability. Use consistent column widths (typically 250-400px) to ensure cards are readable without excessive horizontal scrolling.

3. **Horizontal Scrolling**: When boards have many columns, enable horizontal scrolling. Consider column collapse/expand functionality for very wide boards.

4. **Swim Lanes (Optional)**: Use horizontal swim lanes for grouping by team, priority, or category when needed. Keep lane headers compact to maximize card space.

## Card Design

1. **Minimal Content**: Keep cards focused on essentials. The card title should be the primary identifier and most prominent element. Avoid including descriptions, long text, or excessive metadata that clutters the card.

2. **Essential Metadata Only**: Include only what's needed at a glance:
   - **Title**: Required, most prominent
   - **Assignee**: Avatar or name (optional, small)
   - **Priority Indicator**: Visual indicator (color dot, icon, badge)
   - **Due Date**: Only if time-sensitive
   - **Labels/Tags**: 1-3 max, use color coding
   - **Status Indicators**: Blocked, urgent, etc. (small badges or icons)

3. **Visual Indicators**: Use visual cues for quick recognition:
   - Color coding for priority, type, or category
   - Small badges or icons for status (blocked, urgent, completed)
   - Small avatars for assignees (consistent size)
   - Progress indicators (checkmarks, progress bars) when relevant
   - Keep all indicators small and unobtrusive

4. **Card Sizing**: Maintain visual consistency:
   - Use consistent card height within a column
   - Allow cards to grow vertically if needed (with reasonable max height)
   - Ensure cards are wide enough to display content without awkward wrapping
   - Use consistent padding and margins

5. **Card Styling**: Ensure cards are visually distinct:
   - Use subtle shadows or borders to lift cards from background
   - Apply hover states to indicate interactivity
   - Show selected/active state clearly
   - Use consistent card background colors (typically white or light gray)

## Interactions

1. **Card Details**: Enable access to full information by clicking cards to open detail views (modal, side panel, or navigate to detail page). Support keyboard navigation (Enter to open details).

2. **Editing**: Support quick edits inline (click title to edit) or open modal/side panel for complex edits with multiple fields.

3. **Filtering**: Provide filter controls (by assignee, label, priority, etc.) that show/hide cards without hiding columns. Display active filters with ability to clear, and show filtered card counts in column headers.

4. **Quick Add**: Include "Add card" functionality in each column header for rapid card creation. Auto-focus input on click, save on Enter, cancel on Escape.

## Best Practices

1. **Information Density**: Resist the urge to add more information to cards. If users need more details, they should click through to a detail view. Cards should enable quick scanning and status updates.

2. **Visual Hierarchy**: Make the most important information (title, status) most prominent. Use size, color, and position to guide attention.

3. **Consistency**: Maintain consistent card styling, spacing, and information placement across all columns to create a cohesive board experience.