# Signal Design System

Exotel's Signal Design System — a React component library and theming layer built on [MUI](https://mui.com/), providing consistent, accessible UI primitives for all Exotel products.

**npm:** `@exotel-npm-dev/signal-design-system`

[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://main--69ba4becb6eabba83cbd8bc1.chromatic.com)

> **[View Storybook →](https://main--69ba4becb6eabba83cbd8bc1.chromatic.com)** · **[MCP endpoint](https://main--69ba4becb6eabba83cbd8bc1.chromatic.com/mcp)** (stable — does not change per publish)
>
> Browse all components, variants, and usage examples. Share the `main--…` link only; ignore per-build URLs from the Chromatic CLI (see [Chromatic docs](./docs/README-CHROMATIC.md#stable-urls-do-not-reshare)).

## Overview

Signal wraps MUI without modifying it, adding Exotel-specific components, design tokens, and theming on top. The package re-exports all of `@mui/material`, `@mui/x-data-grid-pro`, and `@mui/x-date-pickers-pro` — so consumers get the full MUI API alongside Signal's opinionated wrappers.

### What's included

- **50+ components** — from foundational layout (`Box`, `Grid`, `Stack`) to complex patterns (`DataGrid`, `AppLauncher`, `AppliedFilters`)
- **Exotel theme** — design tokens, color scales, typography variants, spacing, and dark mode support
- **Custom variants** — `tonal` Button, Chip, and Badge for Signal-specific styling
- **Storybook** — full component catalog with interactive examples

## Documentation

| Document | Description |
| --- | --- |
| [UX Constitution](docs/UX-CONSTITUTION.md) | Product UX philosophy — read before components (AI agents: Storybook MCP first) |
| [Storybook MCP](docs/STORYBOOK-MCP.md) | Connect Claude Code or Cursor to Signal Storybook MCP (hosted + local) |
| [Agent Kit](docs/AGENT-KIT.md) | What ships to consumers via `npm install`, and how to wire it into Claude Code / Cursor / other agents |
| [Installation](docs/INSTALLATION.md) | How to install the package, peer dependencies, and troubleshooting |
| [How to Use](docs/HOW_TO_USE.md) | Theme setup, component usage examples, and key rules |
| [Overview](docs/OVERVIEW.md) | Architecture and design principles |
| [Migration Guide](docs/MIGRATIONS.md) | Upgrading from previous versions |
| [Changelog](docs/CHANGELOG.md) | Version history and release notes |
| [Release Process](docs/RELEASE.md) | How to publish a new version |
| [Chromatic](docs/README-CHROMATIC.md) | Storybook deployment via Chromatic |

## Quick install

```bash
npm install @exotel-npm-dev/signal-design-system
```

See [Installation](docs/INSTALLATION.md) for detailed options and [How to Use](docs/HOW_TO_USE.md) for setup instructions.

## License

Proprietary — Exotel internal use.