---
version: alpha
name: Slack
description: A bright white workspace canvas where deep aubergine does all the brand work — the unmistakable plum that fills every primary button and frames the multicolor hashtag logo — paired with a confident grotesque display and a quiet steel-blue link. Productivity software that reads as warm and human, not corporate.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f8f8f8"           # faint section bands behind product demos
  surface-dark: "#1d1c1d"      # near-black footer / inverted sections

  # Ink / text
  ink: "#1d1c1d"               # near-black headlines and body — Slack's signature "almost black"
  ink-secondary: "#454245"     # supporting copy
  ink-muted: "#696969"         # captions, nav labels, metadata
  ink-tertiary: "#757575"      # lowest-emphasis helper text
  on-dark: "#ffffff"           # text on aubergine and dark surfaces

  # Brand accent — the singular Slack aubergine
  primary: "#481a54"           # the plum that fills every primary button
  primary-hover: "#611f69"     # brighter plum on hover / focus ring
  primary-strong: "#350d36"    # pressed / deepest aubergine
  primary-container: "#f4ecf6" # tinted aubergine wash for pills
  on-primary: "#ffffff"

  # Secondary accent — steel link blue
  link: "#1264a3"              # text links, secondary actions
  link-hover: "#0b4c81"        # link hover

  # Borders
  border: "#e8e8e8"            # hairline dividers and card edges
  border-strong: "#dddddd"     # input and ghost-button outlines

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex
  shadow-plum: "#611f69"       # was rgb(97,31,105) inset ring — Google format requires hex

typography:
  display-hero:
    fontFamily: "Lato, Salesforce Avant Garde, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.77px
  display:
    fontFamily: "Lato, Salesforce Avant Garde, -apple-system, system-ui, sans-serif"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.6px
  heading:
    fontFamily: "Lato, Salesforce Avant Garde, -apple-system, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.26px
  heading-sub:
    fontFamily: "Lato, Salesforce Avant Garde, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: -0.1px
  body-large:
    fontFamily: "Lato, Salesforce Sans, -apple-system, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Lato, Salesforce Sans, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  body-small:
    fontFamily: "Lato, Salesforce Sans, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  label:
    fontFamily: "Lato, Salesforce Sans, -apple-system, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  button:
    fontFamily: "Lato, Salesforce Sans, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Lato, Salesforce Sans, -apple-system, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Lato, Salesforce Sans, -apple-system, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  5xl: 64px
  6xl: 96px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 14px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  link:
    textColor: "{colors.link}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.link-hover}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Slack Design System

## Overview

Slack's marketing site is a study in how one color can carry an entire brand. The canvas is plain white (`{colors.background}`), the type is a near-black grotesque (`{colors.ink}`, the famous "almost black" `#1d1c1d` rather than pure black), and into that calm field drops the one thing nobody mistakes for anyone else: deep aubergine (`{colors.primary}`). It fills every primary button — "Get started," "Try for free" — and it is the through-line back to the multicolor hashtag logo. The page is restrained almost to a fault, which is exactly why the plum reads so loudly when it appears.

The typographic personality is confident and human. Display headlines are set in a wide, slightly humanist grotesque at heavy weight (`{typography.display-hero}`, 700 with gentle negative tracking), giving lines like "All your people and AI agents working together" a friendly authority — big, but never shouting. Body copy runs in a clean neutral sans at a generously open line-height (`{typography.body}` at 1.67), which makes long paragraphs feel airy and conversational. The system rarely goes below 16px, and it leans on weight (700 for emphasis) rather than size to build hierarchy, so even dense feature pages stay readable.

The signature move beyond the aubergine is the way Slack stages its own product. Marketing copy sits on white, but the hero almost always cradles a live-looking product surface — a Workflow Builder canvas, a channel, a huddle — floating on a soft, diffuse ambient shadow (`{colors.shadow-soft}`) that is the most three-dimensional thing on the page. A quiet steel-blue (`{colors.link}`) handles links and secondary navigation so it never competes with the plum. The overall impression is warmth and trust: a tool that does serious work but wants to feel like a place people actually like being.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with whisper-gray demo bands (`{colors.surface}`) — light, open, zero clutter
- Deep aubergine (`{colors.primary}`) is the sole brand workhorse: every primary button, the logo frame, the focus ring
- Hover brightens the plum to `{colors.primary-hover}` rather than darkening it — the brand lifts toward light
- Near-black "almost black" ink (`{colors.ink}` = `#1d1c1d`), never pure `#000000`, for a softer page
- Wide humanist grotesque at weight 700 for display (`{typography.display-hero}`) — friendly, not severe
- Generous body line-height (`{typography.body}` at 1.67) keeps long copy conversational and airy
- Weight, not size, drives hierarchy — the system rarely drops below 16px
- Steel-blue links (`{colors.link}`) sit quietly so the aubergine keeps its stamp value
- The live product surface is the hero, floating on a soft ambient shadow (`{colors.shadow-soft}`)
- Compact 8px button radius (`{rounded.md}`), scaling to 16px on cards (`{rounded.xl}`)
- Hairline borders (`{colors.border}`) do most structural separation; elevation is reserved for the product

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas — nearly every section sits on pure white.
- **Whisper Gray** (`{colors.surface}`): Faint bands behind product demos and feature grids.
- **Near-Black Surface** (`{colors.surface-dark}`): Inverted footer and occasional dark sections.

### Ink / Text
- **Almost Black** (`{colors.ink}`): Headlines and body. Slack's signature `#1d1c1d` — warmer than pure black.
- **Charcoal** (`{colors.ink-secondary}`): Supporting paragraph copy.
- **Muted Gray** (`{colors.ink-muted}`): Nav labels, captions, metadata.
- **Faint Gray** (`{colors.ink-tertiary}`): Lowest-emphasis helper text.

### Brand Accent
- **Aubergine** (`{colors.primary}`): The singular brand color. Every primary button and the logo frame.
- **Bright Plum** (`{colors.primary-hover}`): Hover and focus state — the brand brightens, not darkens.
- **Deep Aubergine** (`{colors.primary-strong}`): Pressed state, the darkest plum.
- **Plum Wash** (`{colors.primary-container}`): Tinted aubergine fill for pills and secondary-button hover.

### Secondary Accent & Borders
- **Steel Blue** (`{colors.link}` / `{colors.link-hover}`): Text links and secondary navigation — deliberately quiet next to the plum.
- **Hairline** (`{colors.border}`) / **Strong Border** (`{colors.border-strong}`): Dividers, card edges, and input outlines.
- **Shadow Tints** (`{colors.shadow-soft}`, `{colors.shadow-plum}`): Opaque stand-ins for the soft ambient product shadow and the inset plum focus ring (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display & Body**: Slack ships custom faces (Salesforce Avant Garde for display, Salesforce Sans for body since the Salesforce era). The closest web-loadable substitute with the same warm-humanist grotesque feel is **Lato**, used here as the loadable primary with the brand faces named first in the stack.
- **OpenType / tracking**: large display sizes carry gentle negative tracking (around -0.77px at 64px); body runs at zero tracking with an open 1.67 line-height.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 64px / 700 / -0.77px — the marquee headline |
| `display` | 50px / 700 — large section titles |
| `heading` | 32px / 700 — feature headings |
| `heading-sub` | 24px / 700 — sub-section headings |
| `body-large` | 21px / 400 — lead paragraphs |
| `body` | 18px / 400 / line-height 1.67 — standard body |
| `body-small` | 16px / 400 — dense supporting copy |
| `label` | 15px / 700 — UI labels, eyebrow text |
| `button` | 18px / 700 — button text |
| `nav-link` | 15px / 700 — top navigation |
| `caption` | 13px / 400 — metadata, helper text |

### Principles
- **Weight does hierarchy**: 700 for headlines and emphasis; 400 for body. The system rarely uses light weights.
- **Open and conversational**: body line-height runs high (1.67) so long copy reads relaxed, not packed.
- **Friendly, not severe**: the humanist grotesque keeps even large display type approachable.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step for tight internals. Generous vertical rhythm (`{spacing.6xl}` = 96px) separates major marketing sections; component internals stay compact (`{spacing.md}`–`{spacing.2xl}`).

### Grid & Container
- Max content width: ~1280px, centered
- Common pattern: a left text column paired with a live product surface on the right
- Feature sections alternate single full-width product canvases with multi-column card rows

### Whitespace Philosophy
- **White is the stage**: the canvas stays clean so the aubergine and the product surface read clearly
- **Airy copy, dense product**: paragraphs breathe; the embedded product UI is tightly composed
- **The product is the hero**: the live workspace surface gets the most visual weight on any screen

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, most page content |
| Subtle (Level 1) | `0 2px 4px` at ~10% black | Resting cards, small chips |
| Card (Level 2) | `0 1px 10px` at ~20% black | Hovering cards, dropdowns |
| Elevated (Level 3) | `0 0 32px` ambient (`{colors.shadow-soft}`) | The embedded product surface — the signature elevation |
| Focus Ring | `inset 0 0 0 1px` plum (`{colors.shadow-plum}`) | Focused inputs and buttons |

**Shadow Philosophy**: Slack's elevation is soft and diffuse. The page itself is mostly flat, separated by hairline borders; the one place real shadow lives is under the staged product surface, where a wide, low-opacity ambient cast (`0 0 32px`) lifts the workspace off the page like a screen floating in light. Focus states use an inset aubergine ring rather than a hard outline, keeping the brand present even in interaction.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Small buttons, tags, tight controls |
| `md` | 8px | Buttons — the default interactive radius |
| `lg` | 12px | Inputs, mid containers, product chrome |
| `xl` | 16px | Cards, product surfaces, nav panels |
| `pill` | 9999px | Avatars, status dots, pills |

The system is friendly but contained: an 8px button, scaling to 16px on cards. Rounded enough to feel approachable, never so round it turns playful or toy-like.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Aubergine (`{colors.primary}`) fill, white text, 8px radius, bold label. The main CTA. Hover *brightens* to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, aubergine text and outline. Hover fills `{colors.primary-container}`.
- **`button-outline`** — White fill, near-black text, hairline outline. Neutral tertiary action; hover fills `{colors.surface}`.

### Cards
- **`card`** / **`card-elevated`** — White surface, hairline border, 16px radius. The elevated variant carries the soft ambient shadow and typically holds a product surface.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` outline, 8px radius. **`input-focus`** adds an inset aubergine ring (`{colors.shadow-plum}`).

### Navigation
- **`nav-bar`** — White, hairline bottom border, bold compact nav links. The aubergine "Get started" CTA persists at the right.

### Accent & Links
- **`link`** — Steel-blue text (`{colors.link}`), underline on hover, darkening to `{colors.link-hover}`.
- **`badge`** — Plum-wash fill, aubergine text, pill radius — for "New" and category tags.

## Do's and Don'ts

### Do
- Keep the canvas pure white (`{colors.background}`) and let aubergine (`{colors.primary}`) carry the brand
- Fill every primary button with aubergine — it is the single workhorse color
- Brighten, don't darken, on hover (`{colors.primary-hover}`) — Slack's plum lifts toward light
- Use the "almost black" ink (`{colors.ink}` = `#1d1c1d`), never pure `#000000`
- Set display in a wide humanist grotesque at weight 700 with gentle negative tracking
- Give body copy an open 1.67 line-height (`{typography.body}`) for a conversational feel
- Stage a live product surface as the hero, floating on a soft ambient shadow (`{colors.shadow-soft}`)
- Keep steel-blue links (`{colors.link}`) quiet so the aubergine keeps its stamp value
- Keep button radius at `{rounded.md}` (8px), cards at `{rounded.xl}` (16px)

### Don't
- Don't introduce a second loud brand color — aubergine is the whole story
- Don't make links or secondary actions compete with the plum; keep them steel-blue and quiet
- Don't use pure black for text — Slack's ink is the warmer `#1d1c1d`
- Don't pack body copy tight; the open line-height is part of the friendly tone
- Don't scatter shadows across the page — flatness plus hairlines is the default; elevation is reserved
- Don't reach for thin display weights — Slack's headlines are bold (700)
- Don't over-round to toy-like radii; the system tops out at 16px on cards

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero text scales 64px → ~36px; nav collapses to a hamburger; the product surface stacks below the copy, full-width |
| Tablet | 640–1023px | Two-column feature rows begin; product surface sits beside copy at reduced width |
| Desktop | 1024–1279px | Full layout; copy-left / product-right hero |
| Large | ≥1280px | Max ~1280px container, centered; generous section padding (`{spacing.6xl}`) |

### Touch Targets
- Buttons run ~44px tall with `12px 16px` padding and bold labels — comfortable for thumbs
- Nav links carry generous vertical padding in the mobile drawer

### Collapsing Strategy
- **Navigation**: full horizontal nav → hamburger drawer on mobile; the aubergine "Get started" CTA persists
- **Hero**: copy and product surface go side-by-side → stacked, surface full-width
- **Type**: display drops from 64px toward ~36px while keeping proportional negative tracking
- **Spacing**: section padding compresses from ~96px toward ~48px

### Image Behavior
- Product surfaces and screenshots reflow as flex/grid children; large illustration scenes scale down and may crop to the focal region

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Almost Black (`{colors.ink}` = `#1d1c1d`)
- Brand accent: Aubergine (`{colors.primary}`)
- Secondary text: Muted Gray (`{colors.ink-muted}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Aubergine (`{colors.primary}`), hover brightens to `{colors.primary-hover}`
- Links: Steel Blue (`{colors.link}`)

### Example Component Prompts

- "Create a hero on white (`{colors.background}`) with a 64px almost-black (`{colors.ink}`) headline in a wide humanist grotesque (Lato), weight 700, letter-spacing -0.77px, a 21px body paragraph (`{typography.body-large}`) in muted gray, and an aubergine primary button (`{colors.primary}` fill, white bold text, `{rounded.md}` radius)"
- "Build a primary button: aubergine (`{colors.primary}`) fill, white bold label (`{typography.button}`), `{rounded.md}` radius, `12px 16px` padding; on hover brighten the fill to `{colors.primary-hover}`"
- "Create a secondary button: white fill, aubergine (`{colors.primary}`) text and 1px outline, `{rounded.md}` radius; hover fills `{colors.primary-container}`"
- "Stage a product surface as the hero image: white card, `{rounded.xl}` radius, hairline (`{colors.border}`) edge, floating on a soft ambient shadow (`0 0 32px` via `{colors.shadow-soft}`)"
- "Design an input with label above: white fill, `{colors.border-strong}` outline, `{rounded.md}` radius; on focus add an inset 1px aubergine ring (`{colors.shadow-plum}`)"
- "Render a category badge: plum-wash (`{colors.primary-container}`) fill, aubergine (`{colors.primary}`) text, pill radius (`{rounded.pill}`), `4px 12px` padding"

### Iteration Guide

1. Start on pure white (`{colors.background}`). If you reached for a tinted or dark page background, stop — Slack's marketing canvas is white.
2. Aubergine (`{colors.primary}`) is the brand. Every primary button is plum; nothing else competes with it.
3. On hover, brighten the plum (`{colors.primary-hover}`) rather than darkening — Slack lifts toward light.
4. Use the warm `#1d1c1d` ink (`{colors.ink}`) for text, never pure black.
5. Set display in a humanist grotesque at weight 700; give body an open 1.67 line-height.
6. Keep links steel-blue (`{colors.link}`) and quiet so the aubergine keeps its charge.
7. Separate with hairline borders before reaching for shadow; reserve the soft ambient shadow (`{colors.shadow-soft}`) for the one staged product surface.
8. Keep radii contained: `{rounded.md}` (8px) on buttons, `{rounded.xl}` (16px) on cards — friendly, not toy-like.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Slack. Brand names and trademarks belong to their respective owners.