# Communication — Design System

## Tokens

Defined in `frontend/modules/communication/design-system/tokens.ts` and CSS variables in `frontend/styles/globals.css`:

| Token | Light | Purpose |
| --- | --- | --- |
| `--communication-accent` | `#6366f1` | Primary indigo |
| `--communication-accent-soft` | rgba indigo 12% | Backgrounds |
| `--communication-success` | `#059669` | Delivered / healthy |
| `--communication-warning` | `#d97706` | Queued / deferred |
| `--communication-danger` | `#dc2626` | Failed / circuit open |

Dark mode variants in `.dark` block.

## Principles

- **RTL first** — `dir="rtl"` on portal shell
- **Mobile first** — collapsible sidebar, responsive grids
- **Dark mode ready** — ColorModeProvider toggle in header
- **Accessible** — aria labels on nav, semantic tables
- **Omnichannel ready** — channel badges from `/capabilities`

## Reuse policy

Use `frontend/shared/` and `@/src/shared/ui` — do not fork Button/Input/Dialog. Module-specific styling via `--communication-*` tokens only.

## Status vocabulary

`messageStatusLabels` / `messageStatusTone` in tokens.ts map backend statuses (queued, sent, delivered, failed, …) to Badge tones.

## Locked module UI

Feature lock pages use gradient hero, capability checklist, integration badges, and placeholder preview panel — consistent premium finish without functional actions.