---
title: "Slack design system"
variant: extended
source: https://slack.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/slack-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Slack · Design System

> Bright, human collaboration framed by confident purple

**Theme:** light · **Industry:** productivity · **Source:** https://slack.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Slack pairs a clean white canvas and expressive typography with deep-purple product storytelling. Product UI, short feature narratives, and strong alternating section bands guide a long page from the hero to the final conversion and footer.

## North star

Let white space and clear product storytelling lead; reserve saturated purple for decisive actions and purposeful contrast.

## Overview

The page uses white as its dominant canvas, keeping the navigation, hero, feature explanations, resource cards, and footer bright and legible. Deep Aubergine (#481a54) creates deliberate contrast in the AI story, business metrics, and closing CTA; Signal Purple (#730394) marks primary actions and small feature labels. Headlines use Salesforce-Avant-Garde with compact, bold forms, while Salesforce-Sans carries navigation, body copy, and utility text. The hero centers its headline, actions, trust marks, and Slack product interface, then the page shifts into alternating split layouts, card rows, and centered proof points. Generous whitespace separates these long-form sections. Product screenshots are framed as interface demonstrations rather than decoration, with purple application chrome echoing the brand. Soft lavender gradient tones appear behind the hero media, while hairline borders and restrained shadows keep cards and controls from feeling heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, light sections, white CTA surfaces, and text on dark-purple bands. |
| Signal Purple | `#730394` | `--color-signal-purple` | brand | Primary CTA fill, small feature labels, badges, and selected purple links. |
| Aubergine | `#481a54` | `--color-aubergine` | brand | Dark section bands, inverse product chrome, and high-contrast brand surfaces. |
| Headline Black | `#000000` | `--color-headline-black` | neutral | Main headline and prominent text on the white canvas. |
| Link Blue | `#0b5cab` | `--color-link-blue` | accent | Informational links and selected navigation or footer links. |
| Soft Ink | `#181818` | `--color-soft-ink` | neutral | Secondary headings and dark supporting text. |
| Quiet Rule | `#f3f3f3` | `--color-quiet-rule` | neutral | Subtle link and component borders. |
| Muted Graphite | `#5c5c5c` | `--color-muted-graphite` | neutral | Secondary navigation and subdued footer or utility text. |
| Lavender Haze | `#efd5ff` | `--color-lavender-haze` | surface | Pale lower stop in the measured hero background gradient. |
| Lilac Glow | `#e5b9fe` | `--color-lilac-glow` | surface | Light-violet end of the hero background gradient. |
| Violet Mist | `#f9f0ff` | `--color-violet-mist` | surface | Pale feature cards and backgrounds behind new-item badges. |
| Legacy Link Blue | `#0000ee` | `--color-legacy-link-blue` | semantic | Crawler-measured card-link text; appears to be a technical link-color artifact, not a defining brand color. |
| Footer Ash | `#edeaed` | `--color-footer-ash` | neutral | Subtle footer and miscellaneous divider details. |
| Media Gray | `#7f7f7f` | `--color-media-gray` | surface | Measured card surface, likely associated with embedded or media content rather than core brand UI. |
| Vivid Orchid | `#9602c7` | `--color-vivid-orchid` | accent | Intermediate stop in the measured purple gradient, not a dominant page surface. |
| Footer Ink | `#1d1d1d` | `--color-footer-ink` | neutral | Dark footer and navigation text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#481a54` (Aubergine) · `--color-surface-2` → `#f9f0ff` (Violet Mist) · `--color-surface-3` → `#7f7f7f` (Media Gray) · `--color-text` → `#000000` (Headline Black) · `--color-text-muted` → `#181818` (Soft Ink) · `--color-text-subtle` → `#5c5c5c` (Muted Graphite) · `--color-border` → `#f3f3f3` (Quiet Rule) · `--color-accent` → `#730394` (Signal Purple) · `--color-accent-2` → `#481a54` (Aubergine) · `--color-accent-3` → `#0b5cab` (Link Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#481a54` | 1.55:1 | fail |
| `#000000` | `#f9f0ff` | 18.94:1 | AAA |
| `#000000` | `#7f7f7f` | 5.24:1 | AA |
| `#181818` | `#ffffff` | 17.76:1 | AAA |
| `#181818` | `#481a54` | 1.31:1 | fail |
| `#181818` | `#f9f0ff` | 16.01:1 | AAA |
| `#181818` | `#7f7f7f` | 4.43:1 | AA-large |
| `#5c5c5c` | `#ffffff` | 6.69:1 | AA |
| `#5c5c5c` | `#481a54` | 2.02:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 46.382%, rgb(239, 213, 255) 71.215%, rgb(229, 185, 254) 100%)`
- `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) 49.79%, rgba(29, 28, 29, 0.5) 57.51%, rgba(29, 28, 29, 0.55)`
- `linear-gradient(rgb(72, 26, 84) 0%, rgb(115, 3, 148) 35.2%, rgb(150, 2, 199) 80%, rgb(209, 125, 254) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Salesforce-Sans | `--font-body` | webfont | 400, 700, 300, 600 | Body copy, navigation, buttons, links, labels, and utility text | Inter |
| Salesforce-Avant-Garde | `--font-display` | webfont | 700, 600, 400 | Display headlines, section headings, and prominent CTA labels | League Spartan |

- **Salesforce-Sans:** Use readable sans-serif forms; measured weights span light through bold. Navigation and CTA labels are emphatic, while body copy stays regular.
- **Salesforce-Avant-Garde:** Bold geometric display style with slightly tight headline tracking; sentence case dominates, without decorative casing.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1.06 | -0.012em | — | Salesforce-Avant-Garde | Oversized hero and highest-emphasis campaign headline. |
| h1 | 50px | 600 | 1.12 | -0.012em | — | Salesforce-Avant-Garde | Primary hero title and major page headings. |
| h2 | 32px | 700 | 1.25 | -0.012em | — | Salesforce-Avant-Garde | Section titles introducing feature, proof, and CTA blocks. |
| h3 | 24px | 700 | 1.25 | -0.004em | — | Salesforce-Avant-Garde | Card titles and nested feature headings. |
| h4 | 18px | 400 | normal | 0 | — | Salesforce-Sans | Smaller supporting subsection headings. |
| body | 14px | 400 | 1.56 | -0.002em | — | Salesforce-Sans | Feature descriptions, explanatory copy, and card summaries. |
| caption | 12px | 700 | 1.33 | 0 | — | Salesforce-Sans | Badges, resource labels, and compact metadata. |
| button | 16px | 700 | 1.5 | 0 | — | Salesforce-Sans | Primary and secondary CTA labels. |
| nav | 16px | 700 | 1.5 | 0 | — | Salesforce-Sans | Header navigation and utility links. |
| link | 16px | 700 | 1.5 | 0 | — | Salesforce-Sans | Inline actions such as learn-more and resource links. |
| eyebrow | 14px | 700 | 1.56 | 0.057em | uppercase | Salesforce-Sans | Uppercase category or introductory labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 7, 8, 10, 12, 13, 14, 16, 20, 24, 32, 40, 48, 96 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1230px.

A spacious long-form page constrained to a measured 1230px maximum width, with a centered navigation and hero followed by broad section bands. The hero centers its headline and actions above a large product interface; later feature stories use two-column text-and-media layouts, while updates and resources use card grids. Centered titles and stats punctuate the split layouts. Sections have generous measured vertical rhythm, with broad white stretches interrupted by full-width Aubergine panels. The footer switches to dense multi-column link groups.

## Shape & elevation

- Radius: button `4px` · card `16px` · media `16px` · badge `9999px` · nav `9999px` · link `16px` · xs `4px` · sm `16px` · pill `9999px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset`
- Shadow `inset-2` (button): `rgba(255, 255, 255, 0.25) 0px 0px 0px 1.5px inset`
- Shadow `md` (link): `rgba(0, 0, 0, 0.1) 0px 0px 16px 0px`
- Shadow `inset-3` (nav, link): `rgb(72, 26, 84) 0px 0px 0px 1.5px inset`
- Shadow `lg` (media): `rgba(24, 24, 24, 0.1) 0px 0px 32px 0px`
- Shadow `inset-4` (link): `rgb(115, 3, 148) 0px 0px 0px 1.5px inset`
- Motion: standard transition `0.42s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The design is mostly flat, using whitespace and full-width color bands for hierarchy. Fine borders separate selected links or card elements; measured cards have rounded corners, while primary buttons use pill-like shapes. Shadows are restrained and appear around media or selected controls, not as a general card treatment.

## Imagery

The dominant visual is product UI: Slack windows, conversations, workflow tools, and integrations, usually shown within purple application chrome. The hero layers interface media beneath centered copy and trust logos; feature sections pair large screenshots with explanatory text. Customer-story cards introduce photographic and video imagery, while resource tiles use illustrated or editorial thumbnails. Keep media crisp and legible, with rounded framing rather than heavy filters.

## Components

### Header navigation

White top bar with brand mark, compact navigation and utility links, an outlined demo action, and a filled purple Get started CTA.

### Hero CTA pair

Centered hero buttons contrast a purple filled primary action with a white secondary action outlined in aubergine.

### Product UI showcase

Large Slack interface screenshots with rounded framing and saturated purple app chrome; used to demonstrate real workflows.

### New badge

Small bold purple label on a pale Violet Mist (#f9f0ff) pill, used to flag new features.

### Feature story split

Section title and summary above a two-column story, with explanatory text and links beside a product screenshot.

### Resource card

Thumbnail-led content card with a compact category, bold title, and concise action link.

### Metric band

Centered white heading and large proof metrics on an Aubergine (#481a54) full-width panel.

### Multi-column footer

White footer with regional and social controls, grouped link columns, and a compact legal row.

### Measured component styles

- **Primary button** (“Skip to main content”): background #730394 · text #ffffff · radius 999px · padding 14px 40px · 700 18px Salesforce-Avant-Garde · shadow rgba(255, 255, 255, 0.25) 0px 0px 0px 1.5px inset
- **Secondary button** (“Get started”): background #ffffff · text #730394 · radius 999px · padding 14px 40px · 700 18px Salesforce-Avant-Garde
- **Link** (“Link may open in new tab New Feature Sla”): transparent background · text #0000ee · border 1px solid #f3f3f3 · radius 16px · padding 0px · 400 16px Salesforce-Sans
- **Card**: background #f9f0ff · text #0000ee · radius 16px · padding 0px · 400 16px Salesforce-Sans
- **Badge** (“New”): background #f9f0ff · text #730394 · radius 999px · padding 4px 10px · 700 12px Salesforce-Sans
- **Navigation item** (“Watch Demo”): transparent background · text #5c5c5c · radius 0px · padding 0px · 400 14px Salesforce-Sans

## Do

- Keep the main canvas white and generous.
- Use Aubergine for deliberate full-width contrast.
- Reserve Signal Purple for primary actions and clear highlights.
- Center the hero and major proof-point headings.
- Pair product screenshots with concise explanatory copy.
- Use bold display typography for major headings.
- Keep borders and shadows subtle.

## Don't

- Do not make every section purple.
- Do not add decorative gradients across unrelated content.
- Do not replace real product UI with generic abstract art.
- Do not compress the long page into a dense dashboard.
- Do not use saturated blue as the primary brand accent.
- Do not apply heavy shadows to every card.
- Do not make all headings uppercase.

## Agent prompt

Build a new Slack-style page using a bright, spacious canvas and clear product storytelling. Use Gallery White (#ffffff) for most sections, Aubergine (#481a54) for a few full-width contrast bands, and Signal Purple (#730394) for primary actions and small emphasis. Set display headings in a bold geometric sans like League Spartan and body text in Inter; keep headlines crisp and supporting copy readable. Start with centered messaging and a strong product-interface showcase, then alternate split feature stories with card grids and centered proof points. Use authentic-looking collaboration UI as the main imagery, framed with rounded corners and purple app chrome. Keep section spacing generous, borders fine, and shadows restrained. Finish with a distinct CTA band and organized multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and actions above trust logos, product UI, and an animation control. | Primary and secondary CTA, Trust marks, Animation pause control | White canvas, Purple pill CTA, Large product screenshot, Soft lavender gradient |
| 2 | feature-split | Centered heading and copy, followed by a two-column feature list and product demo. | Selectable use cases, New-feature markers, Demo control | Aubergine band, Light text, Pale pill rows, Purple product chrome |
| 3 | content-feed | Left-aligned section title above a horizontal row of update cards. | See-all link, Carousel-style browsing, Feature summaries | White canvas, Thumbnail cards, New badges, Compact headings |
| 4 | feature-split | Centered section introduction followed by text on the left and product interface on the right. | Feature explanations, Inline learn-more link, Product proof | White background, Purple emphasis text, Large UI screenshot |
| 5 | feature-split | Centered intro and two-column product story with conversation UI alongside copy. | Channel-focused narrative, Inline link, Customer quote | White canvas, Purple interface frame, Editorial quote |
| 6 | feature-split | Centered title and summary above a split feature explanation and workflow-builder screenshot. | Automation use cases, Learn-more action, Efficiency proof point | White background, Purple highlights, Product workflow UI |
| 7 | integrations | Centered introduction above integration-focused copy and a large app marketplace screenshot. | Integration discovery, Customization story, Platform trust cue | White canvas, App grid screenshot, Purple application frame |
| 8 | testimonials | Centered heading, story link, media-card row, and paired CTA buttons. | Customer stories, Video playback, Browse stories | Photo/video cards, Rounded media, Centered actions |
| 9 | stats | Full-width dark band with centered heading and three evenly arranged metrics. | Business outcome proof, Scannable metrics | Aubergine background, White type, Three-column figures |
| 10 | stats | Centered heading above a three-column proof area with metrics and award marks. | Usage statistics, Third-party validation | White canvas, Large numerals, Badge grid |
| 11 | content-feed | Centered resource heading above a four-column set of image-led cards. | Resource browsing, Direct content actions, Category labels | Thumbnail cards, Compact metadata, Arrow links |
| 12 | other | Small-print notes in a single-column white section. | Metric attribution, Legal clarification | Compact text, Plain white background |
| 13 | cta | Centered headline and two side-by-side actions in a full-width band. | Get started action, Demo request option | Aubergine background, White heading, Contrasting pill buttons |
| 14 | navigation | Single-row regional selector and social links above footer navigation. | Change region, Social destinations | White surface, Compact controls, Fine divider |
| 15 | footer | Brand mark beside dense multi-column navigation groups. | Grouped site navigation, Product discovery, Company links | White footer, Five-column link layout, Small muted text |
| 16 | footer | Compact horizontal legal row beneath the main footer. | Download link, Privacy preferences, Copyright information | Small utility text, White canvas, Muted dividers |

## Source CSS custom properties (selected)

```css
--article-theme-primary: #481a54;
--article-theme-secondary: #fff;
--font-family-monospace: "Monaco", "Menlo", "Consolas", "Courier New", monospace;
--sidebar-color: #400d40;
--sidebar-highlight-color: #1264a3;
--attachment-color: #000;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/slack-com