ai-ticket-platform/docs/frontend/design-system.md

Frontend Design System

Principles

• Build product screens from shared tokens and primitives.
• Keep operational pages dense, quiet, and optimized for repeated use.
• Use semantic status colors for ticket state, priority, audit, AI, and system feedback.

Tokens

Theme tokens live in frontend/src/styles/globals.css and are exposed through Tailwind in frontend/tailwind.config.ts.

Core tokens:

• background, foreground, surface, border
• muted, muted-foreground
• primary, success, warning, danger, info, ai

Components

Base UI primitives:

• Button
• Badge
• Card, CardHeader, CardContent

Product components:

• AppPageHeader
• AppStatusBadge
• AppPriorityBadge

Preview page:

• frontend/src/features/design-system/DesignSystemPreview.tsx