نظام تصميم slack.com

---
version: alpha
name: "slack.com"
description: "Design system extracted from https://slack.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  surface: "#f9f0ff"
  foreground: "#000000"
  muted-foreground: "#181818"
  primary: "#730394"
  on-primary: "#ffffff"
  secondary: "#0b5cab"
  border: "#f3f3f3"
typography:
  headline-display:
    fontFamily: "Salesforce-Avant-Garde"
    fontSize: "64px"
    fontWeight: 700
    lineHeight: "1.06"
    letterSpacing: "-0.768px"
  headline-lg:
    fontFamily: "Salesforce-Avant-Garde"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.384px"
  headline-md:
    fontFamily: "Salesforce-Avant-Garde"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.096px"
  body-md:
    fontFamily: "Salesforce-Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.56"
    letterSpacing: "-0.0192px"
  label-md:
    fontFamily: "Salesforce-Sans"
    fontSize: "12px"
    fontWeight: 700
    lineHeight: "1.33"
  button:
    fontFamily: "Salesforce-Sans"
    fontSize: "16px"
    fontWeight: 700
    lineHeight: "1.38"
rounded:
  none: "0px"
  sm: "4px"
  xl: "16px"
  full: "9999px"
  2xl: "32px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "40px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "4px"
    height: "42px"
    padding: "12px 16px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#730394"
    typography: "{typography.button}"
    rounded: "4px"
    height: "57px"
    padding: "19px 40px"
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "4px"
    height: "32px"
    padding: "0px 40px"
  card:
    backgroundColor: "#ffffff"
    rounded: "16px"
    padding: "0px"
---

# slack.com

## Overview

Slack | AI Work Platform & Productivity Tools: Boost productivity and save time with Slack‌ — ‌the AI work platform for managing projects, automating workflows, and connecting teams securely. Start working smarter today.

Sharp, squared-off controls, layered shadows for depth, large display type at 64px / 700, a single violet accent on neutrals. The site ships in light mode by default. Measured from 2282 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#f9f0ff` | Cards, panels, raised or recessed surfaces |
| foreground | `#000000` | Primary text |
| muted-foreground | `#181818` | Secondary text, captions |
| primary | `#730394` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#0b5cab` | Secondary accent (blue) |
| border | `#f3f3f3` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#481a54`, `#f9f0ff`, `#808080`, `#730394`, `#2e0039`.

Gradients in use: `linear-gradient(rgb(249, 240, 255) 5%, rgb(255, 255, 255) 10%)`; `linear-gradient(rgba(29, 28, 29, 0) 22.75%, rgba(29, 28, 29, 0.06) 28.48%, rgba(29, 28, 29, 0.12) 34.34%, rgba(29, 28, 29, 0.25) 42.06%, rgba(29, 28, 29, 0.38) `; `linear-gradient(rgb(72, 26, 84) 0%, rgb(115, 3, 148) 35.2%, rgb(150, 2, 199) 80%, rgb(209, 125, 254) 100%)`.

The accent `#730394` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Salesforce-Avant-Garde** for h1, h2, h3: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **Salesforce-Sans** for body, label, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Salesforce-Avant-Garde | 64px | 700 | 1.06 | -0.768px |
| headline-lg | Salesforce-Avant-Garde | 32px | 700 | 1.25 | -0.384px |
| headline-md | Salesforce-Avant-Garde | 24px | 700 | 1.25 | -0.096px |
| body-md | Salesforce-Sans | 16px | 400 | 1.56 | -0.0192px |
| label-md | Salesforce-Sans | 12px | 700 | 1.33 | normal |
| button | Salesforce-Sans | 16px | 700 | 1.38 | normal |

Type scale in use: 12px, 14px, 15px, 16px, 18px, 24px, 32px, 50px, 64px. Base body size 16px.

The H1 renders at 64px / 700, center aligned, up to 923px wide, tracking -0.768px. Sample: "All your people and AI agents working together".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40 (px).
- Flex and grid gaps: 4, 8, 12, 16, 24, 28, 32, 72 px.
- Content max width: 1230px, centred.
- Breakpoints: 425px, 426px, 550px, 896px, 1280px.
- Header: 0px tall, static, background `rgba(0, 0, 0, 0)`; 12 nav links at 0px / 400 (ChannelsOrganize teams and work · Slack ConnectWork with external partners · MessagingChat with your team · HuddlesMeet with audio and video · ClipsRecord and share updates · Salesforce in SlackBring Salesforce into the flow of work · Slack CRM for Small BusinessManage customers in Slack with the help of Slackbot · TemplatesStart any task, fast).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset`
- shadow-2: `rgba(0, 0, 0, 0.1) 0px 0px 16px 0px`
- shadow-3: `rgb(115, 3, 148) 0px 0px 0px 1px inset`
- shadow-4: `rgba(24, 24, 24, 0.1) 0px 0px 32px 0px`

## Shapes

- Buttons: 4px
- Inputs: 4px
- Cards and panels: 16px
- Images and media: 0px
- Radius scale: none 0px, sm 4px, xl 16px, full 9999px, 2xl 32px

## Components

### Button, primary

Background `#730394`, text `#ffffff`, border none, radius 4px, height 42px, padding 12px 16px, 14px / 700, uppercase. Sample label: "Get started".

### Button, secondary

Background `#ffffff`, text `#730394`, border none, radius 4px, height 57px, padding 19px 40px, 14px / 700, uppercase, shadow `rgb(115, 3, 148) 0px 0px 0px 1px inset`. Sample label: "Find your plan".

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 4px, height 32px, padding 0px 40px, 14px / 400. Sample label: "Pause animationPlay anim".

### Card

Background `#ffffff`, border 1px solid #f3f3f3, radius 16px, padding 0px, no shadow. Typical size about 400×440px.

### Link

Colour `#1d1d1d`, no underline at rest, weight 700.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1230px | 259px | 16px | 64px, 2 lines, center | 0px, 5 links, 1 CTA | media below text | 2→1 col; 2→2 col; 2→1 col | content-width |
| laptop 1024px | 942px | 159px | 16px | 48px, 2 lines, center | 0px, hamburger (Menu), 1 CTA | media below text | 5→1 col; 2→1 col; 2→2 col | 3 full-width |
| tablet 768px | 707px | 119px | 16px | 32px, 2 lines, center | 0px, hamburger (Menu), 1 CTA | media below text | 5→5 col; 2→1 col; 3→3 col | 8 full-width |
| phone 390px | 359px | 60px | 16px | 32px, 3 lines, center | 0px, hamburger (Menu), 1 CTA | media below text | 5→5 col; 2→1 col; 3→1 col | 10 full-width |

- H1 goes 64px → 32px (50%), 2 → 3 lines.
- Nav collapses to a hamburger by 390px (first seen at 1024px); header 0px → 0px.
- Card grids: 1 columns → 1 column on phones (gap 24px → 24px).
- Body text stays 16px at every width.
- Phone side gutter 60px.
- 10 buttons stretch full-width on phones.
- Section top padding 190px → 190px.

## Interaction & Motion

109 elements carry transitions; typical 0.42s with cubic-bezier(0.165, 0.84, 0.44, 1), mostly on opacity, transform, box-shadow. 2 running keyframe animations (onetrust-fade-in 0.4s 1; delayBackgroundSwap 0.001s 1).

- Hover on button-primary ("Get started"): background #730394 → #481a54; cursor pointer; transition box-shadow, color, background | 0.42s, 0.42s, 0.42s | cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) | delay 0s, 0s, 0s.
- Hover on button-secondary ("Get started"): background #730394 → #481a54, border #ffffff → #481a54; cursor pointer; transition box-shadow, color, background | 0.42s, 0.42s, 0.42s | cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) | delay 0s, 0s, 0s.
- Hover on nav-link ("Enterprise"): no visible change; cursor pointer.
- Focus on button-primary: outline 2px dotted rgb(115, 3, 148), offset 5px.
- Tooltip triggers exist (18 × aria-describedby, 40 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 14 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 7 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#730394` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in Salesforce-Sans and headings in Salesforce-Avant-Garde.
- Do match corner radii per element class (buttons 4px, cards 16px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.