learning_ai_common_plat/dashboards/ux-lab/lovable-notify-states-kit/DESIGN_SYSTEM_BRIEF.md

Design System Brief (Must Follow)

This repo is a notifications + UI states kit meant to be copied into real dashboards/apps.

Non-negotiable rules

• No console.log.
• No network calls.
• No hardcoded colors (no hex/rgb/hsl). Use CSS variables only.

Token usage

• Use UX_TOKEN_CONTRACT.md.
• Style with bg-[var(--ux-*)], text-[var(--ux-*)], border-[var(--ux-*)].

Component architecture

• Reusable components in src/components/**.
• Pages in src/app/** compose components.
• Components must NOT import from src/app/**.

Accessibility

• Toasts must use an ARIA live region.
• Esc closes dialogs/drawers.
• Focus returns to trigger when overlays close.