Slack Design System Reference

Foundation

Color Tokens

The full color palette extracted from Slack's design system, including brand purples, interactive accents, neutrals, and semantic status colors.

Primary Brand Purple

#611F69

Primary CTA · Brand identity · Headers

Deep Purple Secondary

#4A154B

Hover states · Navigation · Emphasis

Slate Purple

#481A54

Depth · Tertiary contexts · Layering

Bright Cyan

#1264A3

Links · Interactive · Primary accent

Warm Gold

#FFEEAA

Promotions · Featured content · Separation

Vivid Yellow

#FCC003

Warnings · Alerts · Attention

Jet Black

#000000

Primary text · Strongest hierarchy

Charcoal

#1D1D1D

Secondary text · Alternative color

Stone Gray

#696969

Tertiary text · Helper · Placeholder

White

#FFFFFF

Background · Inverse text · Surface

Light Blue Tint

#EAF5FE

Blue-themed sections · Content areas

Light Purple Tint

#F9F0FF

Purple-themed sections · UI areas

Cream Beige

#FBF3E0

Featured sections · Highlighting

Light Cyan

#D1F1FF

Cyan-accented sections · Subtle tint

Light Green Tint

#EBF7E6

Success states · Confirmations

Light Pink Tint

#FEF0F3

Error states · Sensitive content

Success Green

#45C65A

Confirmation · Completion · Positive

Warning Gold

#FCC003

Warning · Caution · Attention

Primary Blue

#1264A3

Information · Neutral alerts · Secondary

Typography

Type Scale

Salesforce Sans and Avant-Garde drive Slack's voice — bold hierarchy for headings, clean readability for body, designed for enterprise teams.

Primary (Headings) Salesforce Avant-Garde Display · H1–H4 · Strong visual hierarchy

Secondary (Body) Salesforce Sans Body · Buttons · Inputs · UI copy · Legibility

Display Large Build what matters 64px · 700 · 1.12

Display Medium The quick brown fox 58px · 600 · 1.25

H1 The quick brown fox 50px · 700 · 1.12

H2 The quick brown fox jumps 32px · 700 · 1.25

H3 The quick brown fox jumps 24px · 700 · 1.25

Body Large The quick brown fox jumps over the lazy dog 20px · 400 · 1.5

Body Regular The quick brown fox jumps over the lazy dog 18px · 400 · 1.55

Body Small The quick brown fox jumps over the lazy dog 16px · 400 · 1.5

Paragraph The quick brown fox jumps over the lazy dog 14px · 400 · 1.43

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 8px. Generous whitespace creates breathing room and establishes premium, accessible hierarchy.

Spacing Scale

4px Micro

8px xs

12px sm

16px md

24px lg

32px xl

40px 2xl

72px Hero

Border Radius

None 0px

SM 4px

MD 8px

LG 12px

XL 16px

2XL 20px

Full 9999px

Shadows

None (Flat) Text areas · Light UI

Raised (sm) Standard cards · Floating

Lifted (md) Card hover · Elevated

Floating (lg) Modals · Overlays

Border Widths

Thin 1px

Medium 2px

Thick 3px

Opacity

Full 100%

Hover 80%

Disabled 60%

Overlay 40%

Z-index / Layering

Base 1

Sticky 3

Dropdown 10

Overlay 99

Modal 100

Elevation

Depth & Surfaces

Subtle, expansive shadows create soft depth. Cards receive modest shadows to indicate interactivity; modals employ stronger shadows for clear layering.

White Surface

Primary background, default card background, inverse surface

L0 · #FFFFFF

Light Purple Tint

Secondary surface, purple-themed sections and UI areas

L1 · #F9F0FF

Light Blue Tint

Blue-themed sections and content areas

L2 · #EAF5FE

White #FFFFFF

Purple Tint #F9F0FF

Blue Tint #EAF5FE

Cream #FBF3E0

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Tertiary, Disabled

.btn

Primary: #611F69 bg · #FFFFFF text · 4px radius · 39px height · 19px/40px padding. Secondary: transparent bg · #1D1D1D border. Tertiary: link-style with cyan text. All support 1.02 scale on hover.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #D0D0D0 border · 4px radius · 40px height · 12px/16px padding. Focus: 2px #1264A3 border · 3px box-shadow rgba(18,100,163,.1).

Card

Content container — elevated surface with shadow

.card

Repository name

A brief description of this project. It's open source and has 12k stars.

#FFFFFF bg · #E8E0ED border · 12px radius · Raised shadow. Title: 18px/700/#000000. Body: 14px/#696969. CTA: primary purple button.

Badges

Status indicators — Success, Error, Info

.badge

Open Closed Draft

12px/600 · 6/12px padding · 16px radius. Success: #45C65A. Error: #CF222E. Info: #1264A3.

Guidelines

Do's & Don'ts

Principles for consistent application of the Slack design language across surfaces and contexts.

Do — Embrace

Use Salesforce-Avant-Garde for all heading levels to establish clear visual hierarchy
Maintain generous padding and margins (minimum 16px for cards, 24px for sections)
Apply consistent border radius (4px for buttons, 12px for cards) across all components
Use primary purple (#611F69) exclusively for primary CTAs and brand moments
Leverage cyan (#1264A3) for links and secondary interactive elements
Ensure all text contrast meets WCAG AA minimum 4.5:1 for body text
Apply subtle shadows (rgba(0,0,0,.1) 0px 0px 32px 0px) to cards for soft depth
Maintain 8px spacing grid discipline across all layouts

Don't — Avoid

Don't use light gray text (under #696969) for body copy; maintain strong contrast
Don't apply border radius greater than 12px to standard cards
Don't mix Salesforce-Sans and Salesforce-Avant-Garde within a single heading
Don't use secondary purple (#4A154B) for primary CTAs; reserve for hover states
Don't create buttons smaller than 39px tall; respect minimum touch targets
Don't apply multiple box-shadows to a single element; layer elements instead
Don't use opacity alone to disable interactive elements; pair with cursor:not-allowed
Don't break the 8px grid; all spacing values must be multiples of 8px

slack.com

Preview