# UX Lab — Design System Brief (Must Follow)

This brief applies to all micro-apps under `dashboards/ux-lab/*`.

## Purpose

These micro-apps are **not throwaway**. They must produce UI/UX patterns we can reliably cross-pollinate into:

- `dashboards/admin-web`
- `dashboards/tracker-web`
- product web apps in this workspace

## Non-negotiable rules

- No `console.log`.
- No hardcoded API URLs.
- No backend/network calls for UX Lab apps.
- **No hardcoded colors** (no hex, rgb/rgba, hsl). Use design tokens via CSS variables.

## Token usage (web)

- Prefer existing token patterns used in dashboards (CSS custom properties + Tailwind utilities).
- If you need new tokens for the micro-app, define them as CSS variables in the micro-app’s `src/app/globals.css` under a `--ux-*` namespace.
- Component styles must reference CSS variables (e.g. `bg-[var(--ux-surface)]`, `text-[var(--ux-text)]`).

## Component approach

- Keep components **generic** and reusable. Avoid domain-specific naming like `TelemetryClusterCard` when a `SummaryCard` would work.
- Prefer building blocks:
  - Table, FiltersPanel, Drawer, Modal, EmptyState, Skeleton, Toast, ConfirmDialog

## Accessibility + UX

- Keyboard accessible (Tab, Enter/Space, Esc).
- Focus management for drawers/modals (return focus to trigger).
- Responsive layout.

## Integration expectation

When we integrate into production dashboards, we will:

- Copy components into the relevant repo and map tokens to that repo’s token set.
- Reject PRs that introduce hardcoded colors, console logging, or unnecessary new dependencies.