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.
Card Title
Sample body text for the card component.
Inputs
Chips
Badge
open-connected
pending-warning
closed-neutral
error-hot
info-cold
outgoing
incoming
start
message
menu
queue
user
end
Elevation & Depth
Do's & Don'ts
Do
Don't
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
Use with MCP
Don't have the MCP? Install it here