Slack stages work as a dialogue-based platform: channels, agents, automation, integrations and enterprise trust in a warm, aubergine collaboration system.
#611F69Primary CTA and brand action
#4A154BDark sections and product sidebar
#730394Active UI, accent gradient
#D17DFEAI highlight and stat numbers
#F9EDFFLight AI surfaces
#F4EDE4Typical Slack beige resting surface
#1D1D1DPrimary text
#696969Secondary text
#1264A3Links
#32AE88Positive status
#E01E5ALogo red and error
#ECB22ELogo yellow and warning
Salesforce-Avant-Garde, 700, tight tracking
Large, friendly, centered or as two-column anchor
Body Large / 18-20 px - clear, warm product description with plenty of breathing room.
Dark aubergine surfaces dramatize AI without losing Slack's friendliness. White copy, purple glows, feature list and mobile agent mockup are the core formula.
Border-only surface for resources and feature teasers.
Subtle shadow for mockups and active modules.
White copy on aubergine for AI storytelling.
Sidebar, channel list, header, messages and composer as the standard stage.
Slackbot and Agentforce respond in the work context, not as an isolated chatbot.
Segmented story structure for multiple benefit axes.
Google Drive, ChatGPT, Vercel, Box, Asana, Workday as work graph.
Large numbers like 97 min., 35%, 90%, 700M support the story.
Security credentials sit directly in the conversion path.
Files, decisions and conversations at your fingertips.
Channels, Huddles and Connect instead of siloed email.
Automations, updates and approvals in Slack.
of users feel more productive.
average app integrations.
better collaboration across teams.
4, 8, 12, 16, 24, 32, 96
| Component | Token | Value |
|---|---|---|
| Header | height / bg / border | 72px / rgba(255,255,255,.94) / #EDEAED |
| Primary Button | bg / color / radius / padding | #611F69 / #FFFFFF / 4px / 12px 16px |
| Secondary Button | bg / color / border | #FFFFFF / #611F69 / 1px #611F69 |
| Chip Active | bg / radius / padding | #4A154B / 9999px / 13px 18px |
| Product Window | radius / shadow / sidebar | 28px / 0 24px 70px rgba(74,21,75,.18) / #4A154B |
| Feature Card | bg / radius / border | #FFFFFF / 16px / #EDEAED |
| Dark Section | bg / text / highlight | #4A154B / #FFFFFF / #D17DFE |
| Input Focus | outline / border | 3px rgba(97,31,105,.18) / #611F69 |
Closing CTA repeats the conversion logic: Get started or request a demo.