# Experience Design System

Independent module: `frontend/modules/experience/design-system/`.

## Tokens (`globals.css` + `tokens.ts`)

| Token | Light | Dark |
| --- | --- | --- |
| `--experience-accent` | `#0891b2` | `#22d3ee` |
| `--experience-accent-soft` | rgba cyan 12% | rgba cyan 16% |
| `--experience-success` | `#059669` | `#34d399` |
| `--experience-warning` | `#d97706` | `#fbbf24` |
| `--experience-danger` | `#dc2626` | `#f87171` |

Use `var(--experience-accent)` — never hardcode hex in feature screens.

## Capabilities

| Capability | Component / mechanism |
| --- | --- |
| Light / Dark | Platform `ColorModeProvider` in PortalShell |
| Tenant / brand themes | `ExperienceThemeProvider` overrides accent tokens on subtree |
| Brand tokens | `experienceTokens` + CSS variables |
| RTL / LTR | `ExperienceThemeProvider` `direction` + `data-experience-dir` |
| Responsive | Tailwind breakpoints across shell, tables, kanban |
| WCAG | Chart `role=img`, Map `role=region`, Timeline `<time>`, Kanban list roles; a11y smoke test |
| Charts | `ExperienceChart` (recharts bar/line) |
| Maps | `ExperienceMap` lightweight marker shell (no third-party map SDK) |
| Tables | `ExperienceTablePage` |
| Timeline | `ExperienceTimeline` |
| Kanban | `ExperienceKanban` |
| Empty states | `ExperienceEmptyState` |
| Skeletons | `ExperienceSkeleton` |
| Animations | `ExperienceFadeUp` / `ExperienceFadeIn` / `ExperienceStagger` (framer-motion) |
| Playground | `/experience/design-system` |

## Playground

Toggle direction (RTL/LTR) and brand accent color. Demo data is local for DS preview only; product screens consume Experience APIs / seed DB.