Add centralized design system with semantic color tokens

[vybe]

Status update (2026-04-28): Token system + 9 reference migrations landed in PR #553. Token families (state/brand/accent) added in PR #561 (open). Full sweep of remaining ~70 files is tracked separately as #554. This issue stays open until the release cut moves #553/#561 to main.

Summary

Colors are currently applied ad-hoc via raw Tailwind utility classes (bg-green-500, text-red-600, etc.) scattered across 50+ Vue components. There is no centralized color palette, no CSS custom properties, and no shared constants. This makes it difficult to maintain visual consistency and adjust the overall look without touching every file.

Problem

• Changing a status color (e.g. softening green from 500 to 500/85) requires finding and updating every component individually
• No single source of truth for what colors mean semantically (success, warning, danger, info)
• Dark mode color pairings are repeated ad-hoc in every component
• Risk of visual inconsistency as new components are added

Proposed Approach

1. Define semantic color tokens in tailwind.config.js

theme: {
  extend: {
    colors: {
      'status-success': 'rgba(34, 197, 94, 0.85)',    // green-500/85
      'status-warning': 'rgba(234, 179, 8, 0.85)',    // yellow-500/85
      'status-danger': 'rgba(239, 68, 68, 0.85)',     // red-500/85
      'status-info': 'rgba(59, 130, 246, 0.85)',      // blue-500/85
      'status-urgent': 'rgba(249, 115, 22, 0.85)',    // orange-500/85
      'status-accent': 'rgba(168, 85, 247, 0.85)',    // purple-500/85
    }
  }
}

2. Migrate components to use semantic tokens

Replace raw colors like bg-green-500 with bg-status-success across:

• CapacityMeter.vue (utilization indicators)
• DashboardPanel.vue (progress bars, badges)
• ExecutionTimeline.vue (status colors) — deleted in PR decision: fold process engine agent_task through TaskExecutionService, or delete the engine #430 (process engine removal)
• Agents.vue (agent status badges)
• All other status-colored elements

3. Consider CSS custom properties for dark mode

For more complex dark mode handling, CSS custom properties in style.css could provide light/dark variants automatically:

:root {
  --color-status-success: rgba(34, 197, 94, 0.85);
  --color-status-warning: rgba(234, 179, 8, 0.85);
  /* ... */
}
.dark {
  --color-status-success: rgba(74, 222, 128, 0.85);
  --color-status-warning: rgba(250, 204, 21, 0.85);
  /* ... */
}

Acceptance Criteria

• Semantic color tokens defined in one place (tailwind config or CSS variables)
• All status-colored components migrated to use tokens
• Dark mode variants handled centrally
• Visual appearance unchanged (or improved) after migration
• Document the color system in a brief comment block in the config

Labels

Enhancement, Frontend, P2

[oleksandr-korin]

/claim

[github-actions]

Claimed by @oleksandr-korin. Label status-in-progress added.

Next steps:

1. Create branch: feature/67-<short-slug>
2. Implement the feature
3. Open a PR with Fixes #67