# 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`