An unofficial, original Slack-inspired product system built around conversation-led collaboration and agent workflows, responsive proof surfaces, and 17 research-selected elements.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A conversation-first system shaped by Slack's current AI work platform page: an aubergine signal, editorial display type, living product proof, and workflows that keep people and agents in one thread.
Reference style: Human conversation meets agent workflow: aubergine, lilac, warm neutrals, and frTypography
Salesforce Sans
Observed Slack body, navigation, controls, and utility copy
Salesforce-Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serifFallback: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
Salesforce Avant-Garde
Observed Slack display and section headlines
Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serifFallback: system-ui, -apple-system, Segoe UI, Arial, sans-serif
Palette
Canvas
#fbf8ffSoft lavender page field behind conversation stories
Ink
#241b2dPrimary headings and body copy
Aubergine signal
#611f69Observed Slack brand signal for navigation and primary actions
Action violet
#6546d7Original pack action color for tabs, buttons, and focus
Surface
#ffffffConversation cards and input surfaces
Lilac panel
#f1ecffSelected tabs, AI proof, and secondary panels
Conversation coral
#e85b76Unread, human, and secondary signal
Dark canvas
#17101fExplicit dark mode workspace field
Dark surface
#22162cDark conversation cards and composer
Positive
#2f9b76Automation complete and presence state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Utility | 14px | 700 | 18px | 0.05em |
| Body | 16px | 400 | 1.5 | 0 |
| Control | 15px | 400 | 1.4 | 0 |
| Card title | 28px | 600 | 1.05 | -0.04em |
| Section title | 58px | 600 | 1.08 | -0.02em |
| Hero display | 64px | 700 | 1.12 | -0.012em |
Spacing & shape
Iconography
Use symbols beside labels in menus and composers, keep reaction/status dots distinct from action icons, and never encode unread state by color alone.
System metrics
Radius
Spacing
Motion
Elevation
Conversation card
0 12px 40px rgba(36,27,45,.06)Separate proof cards from a lavender story band
Command menu
0 16px 38px rgba(36,27,45,.14)Keep an open menu above a busy thread
Surfaces & shape
Page
#fbf8ff / #17101fLight and dark canvas
Conversation
#ffffff / #22162cMessages, cards, and composer
AI tint
#f1ecff / #2d1d39Search answers, tabs, and automation proof
Guidelines
Imagery
Use original conversation windows, avatar initials, abstract message blocks, and subtle data shapes. Avoid Slack logos, customer logos, screenshots, and copied campaign assets.
Layout
Use a wide editorial hero, a proof rail, tabbed Knowledge/People/Process/Platform storytelling, then focused cards for search, huddles, workflows, and integrations. Collapse rails to one column below 900px.
Assigned collection
17 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
