Signal Design System
Exotel's Signal Design System — a React component library and theming layer built on MUI, providing consistent, accessible UI primitives for all Exotel products.
npm: @exotel-npm-dev/signal-design-system
View Storybook → · MCP endpoint (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).
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 —
tonalButton, Chip, and Badge for Signal-specific styling - Storybook — full component catalog with interactive examples
Documentation
| Document | Description |
|---|---|
| UX Constitution | Product UX philosophy — read before components (AI agents: Storybook MCP first) |
| Storybook MCP | Connect Cursor to Signal Storybook MCP (hosted + local) |
| Installation | How to install the package, peer dependencies, and troubleshooting |
| How to Use | Theme setup, component usage examples, and key rules |
| Overview | Architecture and design principles |
| Migration Guide | Upgrading from previous versions |
| Changelog | Version history and release notes |
| Release Process | How to publish a new version |
| Chromatic | Storybook deployment via Chromatic |
Quick install
npm install @exotel-npm-dev/signal-design-systemSee Installation for detailed options and How to Use for setup instructions.
License
Proprietary — Exotel internal use.