TorbatYar/frontend/docs/communication-design-system.md
Mortezakoohjani 10c3c43a75 feat(communication): add SMS MVP frontend with governance artifacts.
Ship the full Communication portal (real SMS API, feature-locked future channels), BFF proxy, docs, snapshot, and phase handover.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-27 11:11:25 +03:30

1.4 KiB

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 firstdir="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.