Slack Brand Design System Deep Dive

1. Brand Overview

Slack’s design system is a corporate-friendly productivity aesthetic with a hint of personality. The tone is professional but not sterile—it’s aimed at teams, enterprises, and tech-savvy users who expect polish. The brand has evolved since the Salesforce acquisition, and you can see that in the typography stack (Salesforce-Avant-Garde and Salesforce-Sans) and in the color relationships (deep purples alongside trustworthy blues).

The vibe? Friendly enterprise. Everything feels approachable, but it’s clearly engineered for scale. The design makes no attempt to be hyper-minimal; instead, it uses bold brand colors and clear typographic hierarchy to guide the eye. This works because Slack has to communicate a lot—features, integrations, pricing—without overwhelming the user.

Slack’s design philosophy here leans into clarity first, character second. Buttons are chunky, with generous padding (19px 40px), and hover states are animated with scale transforms (scale(1.05)). Shadows are used sparingly, mostly for elevation in modals and call-to-action components, not as a decorative element. There’s a strict adherence to an 8px spacing scale, which keeps layouts consistent across viewports.

Who’s this for? Designers building enterprise SaaS dashboards, marketers producing landing pages for software products, and developers who need pixel-perfect component specs. Slack’s system is built for legibility, accessibility, and brand recognition. It’s not trying to win design awards—it’s making sure every button, headline, and link works exactly as intended across devices.

2. Color System

2.1 Primary Colors

The primary brand color is a deep purple: #611f69 (rgb(97, 31, 105)). It’s distinctive, memorable, and not overused in the tech space—most competitors lean on blue. This purple signals creativity and approachability, while the secondary accent (#1264a3) is a strong blue used for CTAs and link hovers. The combination works: the purple anchors the brand, the blue handles the functional roles.

They’ve also got a lot of neutral black/gray values—#000000, #1d1d1d, #696969, #555555—for text and structural elements. White (#ffffff) is used for text on dark backgrounds and as the base background in sections.

Odd choice: primary semantic color in the data is rgb(255,255,255). That’s probably the global background default, which is rare for a “primary” token. It means they’ve defined “primary” semantically as the canvas.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally solid: dark text (#1d1d1d, #000000) on white backgrounds passes WCAG AAA for normal text. White text on deep purple (#611f69) is borderline—needs large font sizes for AAA, but fine for UI buttons.

Dark mode? Not explicitly present here, but the palette supports it—deep purple and blues can invert nicely. The neutrals range from #ffffff to #000000, so there’s flexibility.

2.4 Usage Guide

Works well:

• Purple (#611f69) for brand anchoring with white text—clear, recognizable.
• Blue (#1264a3) for interaction—links, hover CTAs.
• Gray (#696969, #555555) for secondary and tertiary text.

Avoid:

• Using purple and blue together for body text—too much saturation.
• Putting blue text on purple backgrounds—contrast suffers.
• Mixing more than two accent colors in a single view—brand starts to feel messy.

3. Typography

3.1 Font Families

Headings use Salesforce-Avant-Garde with a full system fallback stack: system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji.

Body, buttons, and links use Salesforce-Sans with the same fallback stack. No Google Fonts, no Adobe Fonts—these are custom corporate fonts.

3.2 Type Scale

(Full scale continues with smaller sizes and caption weights; all extracted values are in the data.)

3.3 Hierarchy

The 50px H1 is huge—dominates the viewport. Slack uses tight letter-spacing for headings to keep them compact. Body text tends to be 16px–18px, which is comfortable for reading.

Hierarchy is clear:

• H1 (50px) for page titles.
• H2/H3 (32px, 24px) for section headings.
• Links and buttons use the same 14–18px scale, keeping interactions legible.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

4.2 Layout

Breakpoints range from mobile (327px) to ultra-wide (5119px). They’ve defined dozens of breakpoints—too many for a simple fluid layout. This is common in enterprise sites with complex responsive behavior.

5. Visual Elements

Border Radius System

Most UI uses 4px or 8px radii—classic corporate safe rounding. Cards get 16px for a softer feel.

Shadows

Light use of shadows:

• rgba(0,0,0,0.1) 0px 0px 32px for elevation
• rgba(0,0,0,0.2) 0px 1px 10px for small depth

They avoid heavy drop shadows—keeps UI clean.

Borders

Borders are functional—used for separation, not decoration. The most common is 1px solid #592466 for buttons.

6. Components

6.1 Buttons

Primary Button:

• Default: background: #611f69, color: #ffffff, padding: 19px 40px 20px, border-radius: 4px
• Hover: White background, blue text (#2285f7), border 2px solid #1264a3, scale 1.05
• Active: Background #f5f4f5, text #1264a3
• Focus: Background #1eaedb, white text, outline 1px solid black

Secondary Button:

• Default: White background, purple text, 1px inset border in purple
• Same hover/focus as primary

6.2 Links

Variants:

• White text links (#ffffff) on dark backgrounds
• Blue (#1264a3) for in-body links
• All hover to #3860be

No underlines—relies on color for link recognition.

6.3 Forms

Inputs are sparse in the data—likely styled minimally with 1px borders (#d1d1d1) and 4px radius.

6.4 Cards

Cards use 16px radius, white background, light shadows (rgba(0,0,0,0.1)).

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-black: #000000;
  --color-dim-gray: #696969;
  --color-slack-blue: #1264a3;
  --color-dark-gray: #1d1d1d;
  --color-white: #ffffff;
  --color-medium-gray: #555555;
  --color-slack-purple: #611f69;
  --color-sidebar-purple: #400d40;
  --color-ios-blue: #007aff;
  --color-attachment-black: #000000;
  --color-border-purple: #592466;
  --color-hover-blue: #3860be;
  --color-focus-blue: #1eaedb;
  --color-cta-blue: #2285f7;
  --color-tint-gray: #f5f4f5;

  /* Typography */
  --font-heading: "Salesforce-Avant-Garde", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-body: "Salesforce-Sans", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-80: 80px;

  /* Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-50: 50px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 0px 32px;
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 1px 10px;
}

8. AI Coding Assistant Prompt

# Slack Design System Specification

You are a Slack design expert. Build UIs matching their visual language exactly.

## Brand Context
Slack’s design language is professional with personality. It uses deep purple for brand anchoring, strong blue for functional actions, and a strict 8px spacing grid. Typography is corporate and custom—Salesforce fonts give it consistency across products.

## Color Palette
- Black: #000000 — Text, nav backgrounds
- Dim Gray: #696969 — Secondary text
- Slack Blue: #1264a3 — Links, CTAs, accents
- Dark Gray: #1d1d1d — Section headings
- White: #ffffff — Backgrounds, text on dark
- Medium Gray: #555555 — Icons, tertiary text
- Slack Purple: #611f69 — Primary brand color, buttons
- Sidebar Purple: #400d40 — Sidebar background
- iOS Blue: #007aff — Swiper theme
- Border Purple: #592466 — Button borders
- Hover Blue: #3860be — Link hover
- Focus Blue: #1eaedb — Button focus background
- CTA Blue: #2285f7 — Hover text on buttons
- Tint Gray: #f5f4f5 — Active button background

## Typography
Fonts:
- Headings: "Salesforce-Avant-Garde", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
- Body/UI: "Salesforce-Sans", same fallback stack

Type scale:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 50.4px | 700 | 1.11 | Page titles |
| H2 | 32px | 700 | 1.25 | Section headings |
| Body | 16px | 400 | 1.55 | Body text |
| Button | 14px | 700 | — | Primary/secondary actions |

## Spacing & Grid
Base: 8px. Scale: 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 80px.

## Border Radius
- sm: 4px — Buttons, inputs
- md: 8px — Cards
- lg: 16px — Large cards
- xl: 50px — Search fields

## Shadows & Depth
- Large: rgba(0,0,0,0.1) 0px 0px 32px
- Medium: rgba(0,0,0,0.2) 0px 1px 10px

## Components

### Primary Button
Default:
```css
background: #611f69;
color: #ffffff;
padding: 19px 40px 20px;
border-radius: 4px;
border: none;
font-weight: 700;
font-size: 14px;
```
Hover:
```css
background: #ffffff;
color: #2285f7;
border: 2px solid #1264a3;
transform: scale(1.05);
```
Focus:
```css
background: #1eaedb;
color: #ffffff;
outline: 1px solid #000000;
```

### Secondary Button
Similar to primary but inverted colors.

### Navigation Links
Default:
```css
color: #1264a3;
text-decoration: none;
```
Hover:
```css
color: #3860be;
```

## Layout & Responsive Rules
- Max content width: use breakpoints from 327px to 1366px for layout shifts.
- Page padding: 16px mobile / 32px desktop.
- Grid gap: multiples of 8px.

## Interaction Rules
- Transitions: 150ms ease for hover/focus
- Focus: visible outline or background change
- Hover: color change + slight scale on buttons

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Salesforce fonts for all text
- Keep button padding generous
- Respect hover/focus states exactly

## DON'T List
- Don’t add drop shadows outside defined set
- Don’t mix sharp and rounded corners
- Don’t underline links unless required
- Don’t change font sizes outside scale

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #611f69;
  color: #fff;
  padding: 19px 40px 20px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #fff;
  color: #2285f7;
  border: 2px solid #1264a3;
  transform: scale(1.05);
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: rgba(0,0,0,0.1) 0px 0px 32px;
  padding: 24px;
}
```

Input:
```css
.input {
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  padding: 12px;
  font-size: 16px;
}
.input:focus {
  border-color: #1264a3;
  outline: none;
}
```

9. Summary

TL;DR — Slack’s system is friendly enterprise: deep purple branding, blue functional accents, strict 8px spacing, Salesforce corporate fonts. Buttons are bold, hover states animated, shadows minimal.

Brand Keywords:

• friendly-enterprise
• purple-anchor
• blue-functional
• grid-consistent
• corporate-readable