Skip to content
slack.com logo

Slack

slack.com

“Slack projects a professional yet approachable identity, blending corporate reliability with modern productivity energy. The brand feels organized and efficient, using a distinct purple palette to signal creativity within a structured, enterprise-ready framework.”

productive
collaborative
enterprise-ready
modern
efficient
structured
approachable

Color Palette

Colors

Light Mode

#611f69

primary

#ffffff

secondary

#ffffff

background

#000000

text

#1d1d1d

secondaryText

#1d1d1d

muted

#4a154b

accent

Dark Mode

#4a154b

surface

Typography

Fonts

Salesforce-Sans

body
400
700
self-hosted

system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

Salesforce-Avant-Garde

heading
600
700
self-hosted

system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

Salesforce-Sans

heading
700
self-hosted

system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

Components

Design System

Get started
primary
4px
#611f69#ffffff
Enterprise
outline
0px
#1d1d1d
Request a demo
secondary
4px
#ffffff#611f69
button
box-shadow

rgb(97, 31, 105) 0px 0px 0px 1px inset

button
box-shadow

rgba(0, 0, 0, 0.1) 0px 5px 20px 0px

gradient

radial-gradient(20vw at 10% 70%, rgba(255, 100, 150, 0.25), rgba(0, 0, 0, 0)), r...

Voice & Tone

Personality

Visual Energy

6/10

Design Era

contemporary-minimal

Emotional Tone

competent-approachable

Target Audience

Mid-to-large enterprise teams, project managers, and tech-forward organizations seeking secure, scalable collaboration tools.

Comparable Brands

Asana
Notion
Linear
Figma

Brand Rules

Dos & Don'ts

Do

  • Use Salesforce-Sans (400 weight) for all body copy and Salesforce-Avant-Garde (600 weight) for primary headings.
  • Format all headings in sentence-case; do not use title case or all-caps for main headers.
  • Apply the primary brand color #611f69 to primary CTA buttons with white (#ffffff) text.
  • Style primary buttons with 4px border-radius, 12px vertical padding, and 16px horizontal padding.
  • Use subtle depth effects: apply a 1px inset shadow (rgb(97, 31, 105) 0px 0px 0px 1px inset) to secondary buttons and a soft drop shadow (rgba(0, 0, 0, 0.1) 0px 5px 20px 0px) to elevated elements.
  • Utilize a clean white (#ffffff) background for light mode interfaces to maximize readability.
  • Incorporate subtle radial gradients (e.g., rgba(255, 100, 150, 0.25)) sparingly in hero sections to add visual interest without clutter.
  • Keep button border-radius consistent at 4px for primary actions and 0px for outline/tertiary navigation buttons.

Don't

  • Do not use emojis in marketing copy or UI labels; maintain a text-only professional tone.
  • Avoid exclamation points in headlines and body copy; keep the tone matter-of-fact.
  • Do not use serif fonts; the brand is strictly sans-serif (Salesforce-Sans/Avant-Garde).
  • Avoid title-case formatting for headings; this breaks the established sentence-case convention.
  • Do not use bright, saturated colors outside the #611f69/#4a154b purple spectrum for primary branding elements.
  • Avoid pill-shaped (fully rounded) buttons for primary actions; stick to the 4px radius.
  • Do not use heavy, hard shadows; keep all shadows soft and diffuse (e.g., 20px blur radius).
  • Avoid dense jargon in primary messaging; keep vocabulary moderate and accessible to non-technical stakeholders.

Design Assets

Visual Elements

Design asset
svg45×45
Close Navigation
svg54×54
Slack user interface with a floating agentforce mascot.
png261×184
A picture of two women clapping at a conference next to a Dreamforce logo.
png261×184
An image of a Slack workspace with a number of users chatting.
png261×184
Slack Technologies Company Logo
png400×146
Slack Agentforce mascot along with various others.
jpg261×184

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/slack.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free