37 lines
803 B
Markdown
37 lines
803 B
Markdown
# 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`
|