Slack

Slack sets oversized Salesforce-Avant-Garde headlines in a heavy weight with tight tracking on a light bone white canvas. Orchid (#730394) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 16px, with 999px and 4px on smaller elements.

slack.com ↗

Colors

Orchid

#730394

Primary actions and links

Deep Orchid

#481a54

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Void

#000000

Headlines and body copy

Ash

#5c5c5c

Supporting colour

Deep Bone White

#f9f0ff

Surface or divider

Graphite

#181818

Surface or divider

Soft Graphite

#1d1d1d

Surface or divider

Cobalt

#0b5cab

Supporting colour

Type scale

DisplayAll your people and AI agents working togetherSalesforce-Avant-Garde · 64px · 700

HeadingReimagine what’s possible with AI and agentsSalesforce-Avant-Garde · 50px · 600

SubheadingSlack CRM: Generate meeting insights & Salesforce tasksSalesforce-Avant-Garde · 24px · 700

BodySlack connects your team. Slackbot multiplies what they can do.Salesforce-Sans · 18px · 400

NavEnterpriseSalesforce-Sans · 15px · 700

Buttons

Skip to main contentGet startedGet startedGet Started

Style reference measured from the public page at slack.com on 2026-10-12 for design education. Slack and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Slack — Style Reference
> Slack sets oversized Salesforce-Avant-Garde headlines in a heavy weight with tight tracking on a light bone white canvas. Orchid (#730394) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 16px, with 999px and 4px on smaller elements.

**Theme:** light · **Source:** https://slack.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Orchid | `#730394` | `--color-accent` | Primary actions and links |
| Deep Orchid | `#481a54` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Void | `#000000` | `--color-ink` | Headlines and body copy |
| Ash | `#5c5c5c` | `--color-surface-1` | Supporting colour |
| Deep Bone White | `#f9f0ff` | `--color-surface-2` | Surface or divider |
| Graphite | `#181818` | `--color-surface-3` | Surface or divider |
| Soft Graphite | `#1d1d1d` | `--color-surface-4` | Surface or divider |
| Cobalt | `#0b5cab` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Salesforce-Avant-Garde | 64px | 700 | 1.06 | -0.012em |
| Heading | Salesforce-Avant-Garde | 50px | 600 | 1.12 | -0.012em |
| Subheading | Salesforce-Avant-Garde | 24px | 700 | 1.25 | -0.004em |
| Body | Salesforce-Sans | 18px | 400 | 1.55 | -0.001em |
| Nav | Salesforce-Sans | 15px | 700 | 1.55 | -0.001em |

Font families on the page: Salesforce-Avant-Garde, Salesforce-Sans. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 16px, 999px, 4px, 32px, 100px
- Primary button: background `#730394`, text `#ffffff`, radius 999px, padding 14px 40px, 18px / 700

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer