A team collaboration chat interface in the style of Slack and Discord. Three-column layout: workspace switcher → channel sidebar → message thread. Fully interactive with channel switching, live message sending, emoji reactions, typing indicators, and a collapsible member panel. Built for developers building internal tools, communication platforms, customer support portals, or any product that needs a real-time messaging interface.
What Is This Style?
Team collaboration chat is a three-column power layout: workspace context on the far left, channel navigation in the sidebar, and the message thread taking up the rest. It's a familiar pattern — Slack and Discord have trained hundreds of millions of people to read it fluently — but building it well requires getting the details right.
The layout separates navigation from content. Dark sidebar + white message area creates an immediate visual distinction between "where am I" and "what am I reading." This contrast is functional, not decorative.
The Vibe
Every pixel working a 9-to-5.
No decoration. No gradients. No unnecessary motion. This interface is designed for endurance — it needs to feel comfortable at 8am and still legible at 11pm. The purple accent appears sparingly: active states, send button, links, focus rings.
Who Uses This Layout
Slack is the canonical reference — but Linear, Loom, Notion, and dozens of other B2B SaaS tools use variants of this three-column pattern for in-app communication features. Any product that surfaces notifications, comments, or team activity in a channel-style view is using this layout.
When to Use It
Use this for any product where teams communicate around shared work — project management tools, engineering dashboards, customer support platforms, community products, or dedicated chat apps. Avoid it for consumer 1-on-1 messaging (use bubble style) or AI chat (use single-thread no-sidebar).
Design Rules (Deep Dive)
The Three-Column Contract
The layout only works if all three columns maintain their roles without compromise. The workspace rail (68px) is wayfinding — never put content there. The sidebar (220px) is navigation — never put messages there. The message area (flex: 1) is content — never crowd it with persistent navigation. Violating this separation destroys the spatial logic that makes the pattern legible.
Dark Navigation, Light Content
The contrast between the dark sidebar (#19171D) and the white message area (#FFFFFF) is not aesthetic — it is functional. Dark navigation = "where I am." White content = "what I'm reading." This contrast works at every ambient light level and reduces eye strain over long sessions. Never invert this. A light sidebar or a dark message area breaks the reading/navigation distinction.
The Sidebar Hierarchy
Sidebar items follow a strict visual hierarchy: workspace name (bold, white) → section labels (10px caps, muted) → channel items (default, slate) → active channel (purple tint bg, white text) → unread channels (white text, weight 600) → DM items (with status dot). Each level has a distinct visual treatment. Collapsing this hierarchy — making everything the same weight or color — destroys wayfinding.
Message Grouping
Messages from the same sender within a 5-minute window group together: the first message shows the avatar and sender name; subsequent messages show only the timestamp on hover, not the avatar or name. This is the single convention that most distinguishes a real chat interface from a naive implementation. Without grouping, the message list becomes visually noisy and the avatar column loses meaning.
Reactions as Lightweight Interaction
Emoji reactions (👍 5, 🔥 2) appear below messages as pill-shaped badges with a border. The user's own reaction is highlighted with a purple border and tint. Clicking toggles the reaction and updates the count. This is the lowest-friction interaction in the interface — it should feel instant and satisfying. No animation beyond the border color transition.
The Input Box Focus State
When the message input is focused, the border changes from #C7C7C7 to #6C5CE7 with a 3px rgba(108,92,231,0.1) ring. This is the only place purple appears as a structural signal rather than just a brand accent. It tells the user "you are about to speak" — the most important state in a chat interface.
Typing Indicators
The three-dot bouncing indicator (● ● ●) with staggered animation (animation-delay: 0.2s) appears when another user is typing. It occupies a fixed 28px height below the message list — it doesn't push content up when it appears. The dots are #78748A (sidebar muted), never the purple accent. It should feel ambient, not urgent.
The Core Philosophy
Chat UI is endurance design. Unlike a landing page that gets visited once, or a dashboard checked occasionally, a team chat interface is used continuously for years. Every design decision must earn its place not just on first impression but on the ten-thousandth interaction.
This is why the design is spare. No animations in the message thread. Timestamps only on the first message of a group. Reactions in muted gray until activated. The purple accent used for exactly four things: active channels, the send button, focus rings, and link text. Restraint is not a stylistic choice — it is what makes the interface liveable at 8 hours a day.
The three-column layout has become the dominant paradigm for team communication because it solves a real cognitive problem: how do you let a person switch context (workspace → channel) without losing their place in the current conversation? The answer is spatial permanence — the sidebar is always visible, the message area is always reading, and the workspace rail is always orienting. The layout is the navigation system.