PlexusChatLegacy format
PlexusChat is a multi-company customer service SaaS platform for WhatsApp, Instagram, Facebook Messenger, Telegram, and RCS. The interface manages high-volume ticket queues, kanban boards, real-time messaging, campaigns, and analytics dashboards — all within a single multi-tenant workspace. The aesthetic is calm and professional: a distinctive Deep Teal palette conveys trust and focus without sterility. Information density is high but organized — operators handle dozens of simultaneous conversations, so visual hierarchy and quick scanning are critical. Light-mode only. No decorative gradients or illustrations.
Color Palette
Colors
Channel Colors
Lead Score Colors
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxPlexusChat is a multi-company customer service SaaS platform for WhatsApp, Instagram, Facebook Messenger, Telegram, and RCS. The interface manages high-volume ticket queues, kanban boards, real-time messaging, campaigns, and analytics dashboards — all within a single multi-tenant workspace. The aesthetic is calm and professional: a distinctive Deep Teal palette conveys trust and focus without sterility. Information density is high but organized — operators handle dozens of simultaneous conversations, so visual hierarchy and quick scanning are critical. Light-mode only. No decorative gradients or illustrations.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Chips
Elevation & Depth
Do's & Don'ts
Do
Accessibility
• Focus ring: 0 0 0 3px rgba(49,146,127,0.35) — teal, 3px, applied to all interactive elements
• Danger focus ring: 0 0 0 3px rgba(239,68,68,0.35) — red, for destructive actions
• Minimum touch target: 44×44px (WCAG 2.5.5) — applied to all icon buttons
• All badge color combinations have contrast ratio ≥ 4.5:1 (WCAG AA) — verified individually
• Decorative icons carry aria-hidden="true". Informational icons use role="img" + aria-label
• All modals use aria-labelledby and aria-describedby with unique per-instance IDs
• Skeleton loaders carry role="status" aria-busy="true" aria-live="polite"
• Animations respect prefers-reduced-motion: reduce
Component Token Reference
Key values from tokens.js for implementation reference:
```
// Shadows
tokens.shadows.drag → 0 12px 24px -4px rgba(49,146,127,0.22), 0 4px 8px -2px rgba(49,146,127,0.12)
// Sidebar
tokens.components.sidebar.widthExpanded → 256px
tokens.components.sidebar.widthCollapsed → 64px
tokens.components.sidebar.activeBarWidth → 3px
tokens.components.sidebar.activeBarColor → #31927F
tokens.components.sidebar.activeBg → rgba(49,146,127,0.08)
tokens.components.sidebar.hoverBg → rgba(49,146,127,0.05)
// Tabs
tokens.components.tabs.activeBarHeight → 2px
tokens.components.tabs.activeColor → #31927F
tokens.components.tabs.inactiveColor → #64748B
tokens.components.tabs.hoverBg → rgba(49,146,127,0.06)
// Kanban
tokens.components.kanban.cardStripeWidth → 4px
tokens.components.kanban.columnGap → 16px
tokens.components.kanban.dragShadow → (same as shadows.drag)
tokens.components.kanban.dragTranslateY → -2px
// Cards / Modal / Button / Tag
tokens.components.card.radius → 14px
tokens.components.card.padding → 20px
tokens.components.modal.radius → 16px
tokens.components.button.radius → 8px
tokens.components.tag.height → 26px
tokens.components.tag.minWidth → 100px
tokens.components.tag.maxWidth → 180px
```
Use with MCP
Don't have the MCP? Install it here