learning_ai_common_plat/dashboards/ux-lab/DESIGN_SYSTEM_BRIEF.md

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.