---
version: alpha
name: Slacc Inspired
website: "https://slack.com"
description: An inspired interpretation of Slacc's design language — a workplace messaging brand built on a deep aubergine primary, with cream-lavender hero gradients, blue inline links, and pill CTAs. The system pairs a proprietary humanist sans for display with a separate utility sans for body, and stages product UI mockups inside soft pastel-mesh hero composites that act as both decoration and feature explanation.

seo:
  title: "Slack Design System for React — Aubergine #4a154b, Avant Garde, 22 components"
  metaDescription: "Slack's design language as a DESIGN.md file. Aubergine #4a154b, Salesforce Avant Garde, 22 colors, 22 components. For React, Next.js, and AI tools."
  highlights:
    - "Chromatic monotheism — aubergine #4a154b carries CTAs, the featured pricing tier, the footer band, and the wordmark in a single voltage"
    - "Pill geometry at 90px radius with 28–30px horizontal padding — over-padded by SaaS-default standards, deliberately so"
    - "Two proprietary humanist sans families — Salesforce Avant Garde for display at 32–64px, Salesforce Sans for body at 1.55 leading"
    - "Pastel-mesh hero gradients — peach, lavender, and dusty green stops blurred behind floating product UI mockups, never inside chrome"
    - "Blue inline links #1264a3 — the only chromatic departure from the aubergine-and-cream world"
  tags:
    - "Communication & Messaging"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Slack's design language is built around one enduring decision: a single deep aubergine (#4a154b) carries the entire brand. The color appears on every filled CTA, the featured pricing tier, the closing marketing band, and the wordmark itself. Around that one voltage the system stages an unusually delicate ecosystem of cream and lavender canvases (#f4ede4, #f9f0ff), pastel-mesh atmospheric gradients, and floating product UI mockups composited above the wash. The shape vocabulary is dominated by 90px pill buttons with 28–30px horizontal padding — over-padded compared to typical SaaS defaults, which is what gives the brand its distinctly comfortable, almost generous feel.

    This page packages that system into a single DESIGN.md file in the Google Labs spec format. Inside: 22 color tokens grouped into brand, surface, text, and semantic families, 16 typography styles across two proprietary humanist sans faces (Salesforce Avant Garde for display, Salesforce Sans for UI), 7 corner radii anchored on the 90px pill, 7 spacing tokens stepping from 4px to 28px, and 22 documented components covering buttons, pricing cards, navigation, the aubergine footer band, and the pastel-mesh hero composites that define the brand's atmosphere.

    A working React or Next.js developer feeds this file to Claude, Cursor, or Copilot and the agent reproduces Slack's chromatic restraint rather than a generic shadcn theme — one aubergine CTA per viewport, blue links at #1264a3, pill buttons at 90px radius, display headlines pulled tight with -0.768px tracking at 64px. The Salesforce typefaces are proprietary, so substitute Inter from Google Fonts at matching weights. The system is worth studying because it proves chromatic monotheism still works at marketing-site scale when the supporting cast — cream canvases, pastel-mesh gradients, generous pill padding — is calibrated precisely.
  related:
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Slack's primary brand color?"
      answer: "Slack's primary color is aubergine — #4a154b, a deep warm purple with a ruby undertone. The spec calls it chromatic monotheism: the single token carries filled CTA buttons, the featured pricing tier card, the closing footer band, and the brand wordmark. There is no secondary brand accent; the only chromatic departure in body type is the inline link blue at #1264a3."
    - id: "typography"
      title: "What typography does Slack use, and what should I substitute?"
      answer: "Slack runs two proprietary humanist sans families licensed only to Salesforce: Salesforce Avant Garde for display at 32–64px / 700 weight with negative letter-spacing (-0.768px at 64px), and Salesforce Sans for body, captions, and button labels at 14–18px / 400–700. Both are proprietary. The closest open-source substitute is Inter from Google Fonts at matching weights — Inter at 700 with -0.768px tracking closely approximates the display behavior."
    - id: "pill-buttons"
      title: "Why are Slack's buttons so over-padded?"
      answer: "Every button in the system is a 90px pill with 14×28px or 10×30px horizontal padding — over-padded compared to typical SaaS defaults (8–12px vertical, 16–20px horizontal). The deliberate generosity is part of the brand feel: the pills hit ≥48×48px touch targets (WCAG AAA), and the extra horizontal padding gives the aubergine fill room to read as a confident statement rather than a tight utilitarian button."
    - id: "pastel-mesh"
      title: "What are the pastel-mesh gradients used for?"
      answer: "Slack's hero bands stage a pastel-mesh gradient backdrop composed of peach, lavender, and dusty green stops blurred together at large radii. Product UI mockups float above the wash with no border or shadow — the gradient does the lifting. The technique is the brand's flavor of depth-without-shadows: the eye perceives the screenshot as elevated because the luminous backdrop reads as atmosphere, not as a flat surface."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React product?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Slack's chromatic restraint (one aubergine CTA per viewport, pill geometry, cream-lavender canvases) rather than a generic shadcn theme. You can also reference the tokens directly: every color, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "The spec captures the public marketing surfaces (home, /features/channels, /pricing, /contact-sales) — it does not document the in-product chat interface (channels sidebar, message composer, threads), Workspace dark theme variants, the exact CSS implementation of the pastel-mesh gradients, full input error-state combinations, or loading-state skeletons. The Salesforce-branded sub-product surfaces (Sales Cloud, Service Cloud) are also out of scope."

colors:
  primary: "#4a154b"
  primary-deep: "#481a54"
  primary-press: "#611f69"
  primary-tint: "#592466"
  on-primary: "#ffffff"
  ink: "#1d1d1d"
  ink-mute: "#696969"
  link-blue: "#1264a3"
  link-hover: "#3860be"
  canvas: "#ffffff"
  canvas-cream: "#f4ede4"
  canvas-lavender: "#f9f0ff"
  surface-elev: "#ffffff"
  surface-aubergine: "#4a154b"
  hairline: "#e6e6e6"
  hairline-strong: "#000000"
  semantic-error: "#cc4117"
  semantic-success: "#007a5a"
  on-aubergine-mute: "#d9bdde"

typography:
  display-xxl:
    fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.768px
  display-xl:
    fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.464px
  display-lg:
    fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.6px
  display-md:
    fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.256px
  heading-lg:
    fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: -0.096px
  heading-md:
    fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  heading-sm:
    fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.56
    letterSpacing: -0.0216px
  body-lg:
    fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.0216px
  body-md:
    fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  body-strong:
    fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.16px
  button-lg:
    fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0
  button-md:
    fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.38
    letterSpacing: 0.2px
  button-cap:
    fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.144px
  caption:
    fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0.1px
  micro-cap:
    fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.96px

rounded:
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  xxl: 48px
  pill: 90px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  xxl: 24px
  huge: 28px

components:
  button-primary-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-pill-pressed:
    backgroundColor: "{colors.primary-press}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary-pill:
    backgroundColor: "{colors.canvas-lavender}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: 10px 30px
  button-outline-aubergine:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-outline-on-aubergine:
    backgroundColor: "{colors.surface-aubergine}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
  pill-cap-shade:
    backgroundColor: "{colors.canvas-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.micro-cap}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card-pricing:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-pricing-featured:
    backgroundColor: "{colors.surface-aubergine}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-feature-cream:
    backgroundColor: "{colors.canvas-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-aubergine-band:
    backgroundColor: "{colors.surface-aubergine}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.xl}"
    padding: 48px
  card-stat:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.xl}"
    padding: 32px
  nav-bar-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 16px 24px
  link-on-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.link-blue}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 0px
  link-on-aubergine:
    backgroundColor: "{colors.surface-aubergine}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 0px
  footer-aubergine:
    backgroundColor: "{colors.surface-aubergine}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 32px 24px
---

## Overview

Slack's design language centers on a deep aubergine primary (`{colors.primary}` — #4a154b) — the brand's most enduring visual asset — applied as the dominant button color, the footer band, the featured pricing tier, and the brand wordmark. Around that aubergine the system stages an unusually delicate ecosystem: cream-lavender hero canvases with soft pastel-mesh gradients (peachy oranges, lavenders, dusty greens) that pulse behind floating product UI mockups, with the actual interface chrome rendered in fine detail at 3:2 aspect.

Typography splits between two proprietary humanist sans families. The display tier runs at 700 weight at sizes 32–64px with negative letter-spacing for tight optical density on hero headlines. The UI tier uses the second family at 400–700 with slightly relaxed leading (1.55) — the brand's body copy reads quietly without competing with the aubergine moments.

Buttons are pill-shaped at 90px radius with an unusual amount of horizontal padding (28–30px), giving them a distinctly comfortable, almost over-padded feel. The primary aubergine pill is the only filled button in most contexts; secondary actions use a soft lavender pill (`{colors.canvas-lavender}` — #f9f0ff) which reads as a gentler echo of the primary surface. Inline links shift to a saturated blue (`{colors.link-blue}` — #1264a3) — the brand's only chromatic departure from the aubergine-and-cream world.

**Key Characteristics:**
- Single aubergine primary (`{colors.primary}` — #4a154b) reused across CTAs, the featured pricing tier, the footer band, and the wordmark — the brand's chromatic monotheism.
- Cream-lavender hero canvas (`{colors.canvas-cream}` — #f4ede4 / `{colors.canvas-lavender}` — #f9f0ff) with diffused pastel-mesh atmospheric gradients and floating UI mockups composited above.
- Pill buttons at `{rounded.pill}` (90px radius) with generous 28–30px horizontal padding — over-padded by SaaS-default standards, deliberately so.
- Tight negative letter-spacing on display sizes (-0.768px on 64px hero) for editorial-density headlines.
- Blue inline links (`{colors.link-blue}` — #1264a3) — the only non-aubergine chromatic accent in body type.
- Pastel-mesh gradient atmospherics: every hero band has a subtle peach-lavender-dusty-green wash behind it; product UI sits on top, never inside, the gradient.
- Statistics cards rendered in massive aubergine display type (90% / 43 / 87%) on white — quantitative emphasis through scale alone.

## Known Gaps

- **In-product chat surfaces:** the spec captures public marketing pages only (home, `/features/channels`, `/pricing`, `/contact-sales`). The in-app chat interface — channels sidebar, message composer, threads pane, huddle UI — is not documented here.
- **Workspace dark theme:** Slack's in-product workspace ships dark variants (Aubergine, Monument, Choco, Ochin), but the public marketing site is light-only and this DESIGN.md follows the public surface.
- **Pastel-mesh gradient implementation:** documented as a CSS radial-gradient stack composed of peach, lavender, and dusty green stops, but the precise color stops, blur radii, and stop positions vary by hero band and were not extracted exhaustively.
- **Form input error states:** the semantic error color (`{colors.semantic-error}` — #cc4117) is documented, but the full outline + helper-text combination on validation failure was not captured.
- **Loading skeletons:** not visible on the extracted surfaces.
- **Salesforce sub-product surfaces:** since Slack's parent ships Sales Cloud, Service Cloud, and other branded products with overlapping visual systems, only the Slack-marketing surfaces are captured here.