Design System Extraction - slack.com

Your teams and AI agents work together

Slack stages work as a dialogue-based platform: channels, agents, automation, integrations and enterprise trust in a warm, aubergine collaboration system.

BSI C5 testedISO27001 certifiedGDPR compliantData storage in Germany possible
# project-launch
Nikki Kroll
Launch plan is ready. Slackbot, summarize risks and next steps.
Slackbot
3 decisions missing: budget, legal review, customer update. I can start a workflow.
Message to #project-launch+
Ask SlackbotPlan launchExecute projectsTalk with customersAutomate tasks
Enterprise Trust
Security badges directly in the hero.
Conversation UI
Chat, thread, composer as workspace.
Agentic Work
Slackbot, Claude, Copilot, Agentforce.
Warm SaaS
Aubergine plus light washes.
01 / Colors

Semantic Tokens

Accent
#611F69

Primary CTA and brand action

Aubergine
#4A154B

Dark sections and product sidebar

Bright Purple
#730394

Active UI, accent gradient

Lilac
#D17DFE

AI highlight and stat numbers

Wash
#F9EDFF

Light AI surfaces

Warm Canvas
#F4EDE4

Typical Slack beige resting surface

Ink
#1D1D1D

Primary text

Muted
#696969

Secondary text

Link Blue
#1264A3

Links

Success
#32AE88

Positive status

Error
#E01E5A

Logo red and error

Warning
#ECB22E

Logo yellow and warning

02 / Typography

Round enterprise headlines, clear UI copy

Display / 72-86 px

Salesforce-Avant-Garde, 700, tight tracking

Section Headline / 40-58 px

Large, friendly, centered or as two-column anchor

Body Large / 18-20 px - clear, warm product description with plenty of breathing room.

03 / Dark AI Theatre

Expand your possibilities with AI and agents

Dark aubergine surfaces dramatize AI without losing Slack's friendliness. White copy, purple glows, feature list and mobile agent mockup are the core formula.

Update deals by simply asking Slackbot
Summarize a missed conversation
Get quick answers with Claude
Enable AI note-taking in Huddles
Review code with GitHub Copilot
Slackbot
I've updated the opportunity and created 3 follow-ups.
Next step: send customer update in the Connect channel.
04 / Buttons

CTA System

05 / Cards and Surfaces

Flat, light, product-close

Standard Card

Border-only surface for resources and feature teasers.

Elevated Product Card

Subtle shadow for mockups and active modules.

Dark Feature Card

White copy on aubergine for AI storytelling.

06 / Brand-specific Product Patterns

Not generic: Slack is a dialogue-based workspace

#

Channel Window

Sidebar, channel list, header, messages and composer as the standard stage.

AI

Agent in Flow

Slackbot and Agentforce respond in the work context, not as an isolated chatbot.

Tab

Knowledge / People / Process / Platform

Segmented story structure for multiple benefit axes.

App

Integration Strip

Google Drive, ChatGPT, Vercel, Box, Asana, Workday as work graph.

97

Stat Proof

Large numbers like 97 min., 35%, 90%, 700M support the story.

Trust

Compliance Badges

Security credentials sit directly in the conversion path.

07 / Segment Tabs and Feature Accordions

Benefit dimensions as interactive pills

KnowledgePeopleProcessPlatform

Provide immediate context to all stakeholders

Files, decisions and conversations at your fingertips.

Connect your employees

Channels, Huddles and Connect instead of siloed email.

Get work done in one place

Automations, updates and approvals in Slack.

08 / Forms

Enterprise form states



09 / Statistics

Our business is the growth of companies

90%

of users feel more productive.

43

average app integrations.

87%

better collaboration across teams.

10 / Resource Cards

Your detailed insights into Slack

Webinar

The cost of business as usual in the age of AI.

Watch now
Blog

Enable agent productivity for all employees

Learn more
Guide

Agentforce 2.0 now in Slack

Read now
Guide

10 ways to replace ineffective meetings

Read more
11 / Spacing, Radius, Elevation

Measurable implementation

Spacing

4, 8, 12, 16, 24, 32, 96



Radius



Elevation

Border only

Card shadow

Product shadow
12 / Extracted Component Tokens

Concrete tokens for agents

ComponentTokenValue
Headerheight / bg / border72px / rgba(255,255,255,.94) / #EDEAED
Primary Buttonbg / color / radius / padding#611F69 / #FFFFFF / 4px / 12px 16px
Secondary Buttonbg / color / border#FFFFFF / #611F69 / 1px #611F69
Chip Activebg / radius / padding#4A154B / 9999px / 13px 18px
Product Windowradius / shadow / sidebar28px / 0 24px 70px rgba(74,21,75,.18) / #4A154B
Feature Cardbg / radius / border#FFFFFF / 16px / #EDEAED
Dark Sectionbg / text / highlight#4A154B / #FFFFFF / #D17DFE
Input Focusoutline / border3px rgba(97,31,105,.18) / #611F69

Discover the possibilities of Slack

Closing CTA repeats the conversion logic: Get started or request a demo.

Source: www.designmd-store.com