What font does Slack use?

Slack’s website uses three typefaces: Salesforce-Avant-Garde (headings), served from a.slack-edge.com; Salesforce-Sans (body text), served from a.slack-edge.com; NotoSansJP, served from a.slack-edge.com.

What are Slack’s brand colours?

The main colours on slack.com are Purple (#730394), Light Indigo (#481A54), Deep Royal Blue (#0B5CAB), Deep Sky Blue (#00B3FF), Fire Brick (#BA0517) and Thistle (#F2DEFE).

What colour is Slack’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Slack’s logo from?

The logo shown in this guide was found on slack.com’s homepage. For official logo files and usage rules, check Slack’s own brand or press page.

Is this Slack’s official style guide?

No. SiteStyleGuide made it from slack.com’s public web pages on 21 October 2026, and isn’t affiliated with Slack. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from slack.com’s public web pages. Not affiliated with or endorsed by Slack. The real site is slack.com ↗

Unofficial style guide

Slackstyle guide

Slack’s website (slack.com) sets its headings in Salesforce-Avant-Garde and its body text in Salesforce-Sans. Its palette is led by Purple (#730394), Light Indigo (#481A54) and Deep Royal Blue (#0B5CAB), with #000000 text on #FFFFFF. Captured from the live site on 21 October 2026.

Website: slack.com
Typefaces: Salesforce-Avant-Garde, Salesforce-Sans, NotoSansJP
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 21 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the slack.com homepage on a desktop screen — Screenshot of slack.com on a 1440 px desktop screen, 21 Oct 2026.

Screenshot of the slack.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Slack | AI work platform and productivity tools; ● 47 / 60 characters
Meta description: Boost productivity and save time with Slack‌ – ‌the AI work platform for managing projects, automating workflows and connecting teams securely. Start working smarter today.; ▲ 172 / 160 characters
Site name: Slack
og:title: Slack | AI work platform and productivity tools
og:description: Boost productivity and save time with Slack‌ – ‌the AI work platform for managing projects, automating workflows and connecting teams securely. Start working smarter today.
Language: en-GB

In search results

Slackhttps://slack.com/intl/en-au/

Slack | AI work platform and productivity tools

Boost productivity and save time with Slack‌ – ‌the AI work platform for managing projects, automating workflows and connecting teams securely. Start working sma…

When shared

slack.com

Slack | AI work platform and productivity tools

Boost productivity and save time with Slack‌ – ‌the AI work platform for managing projects, automating workfl…

Logo & favicons

Found as: image in the header. PNG, 100 × 38.

Logo

On white

On black

On Purple

Favicons

2 found

256 px · ICO favicon.ico
35 px · PNG shortcut icon

Slack | AI work platform and productivity tools

Light browser tab

Slack | AI work platform and productivity tools

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 39.8%
Near Black 11%
Purple 10.9%
Light Indigo 8.3%
Dark Grey 7.3%
Deep Royal Blue 7.3%
Black 6.2%
Deep Sky Blue 1.9%
Fire Brick 1.7%
Thistle 1%
Sea Green 1%
Dark Violet 1%
Light Royal Blue 0.6%
Dark Slate Blue 0.6%
Midnight Blue 0.6%
Deep Indigo 0.6%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Background, text, border · body.notifications:before, .c-dark-ai-container .c-switcher-container .c-switcher-desktop.o-two-columns.v--
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 91

On text
1.18:1 Fail

On white
17.76:1 AAA

Text, background, border · p, .c-nav--primary--expanded.t-dark-bg:not(.is-fixed):has(.c-nav-2026__panel).c-nav
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 64

On text
3.14:1 AA large

On white
6.69:1 AA

Text, graphic, border · .c-slider-nav-title, .billboard_refresh_q2fy27 .c-billboard .c-billboard__tab .c-switcher-nav-item__h
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, graphic · html, h1

Colours

Brand colours and accents, most used first

Purple

HEX

RGB

HSL

OKLCH

CMYK
22 98 0 42

On text
2.17:1 Fail

On white
9.68:1 AAA

Background, text, border · .s-hp-df-content:not(.s-cta-refresh) .c-billboard .c-cta--signup .c-button.v--se, .billboard_refresh_q2fy27 .c-billboard .c-billboard__tab.active .c-switcher-nav-
Light Indigo

HEX

RGB

HSL

OKLCH

CMYK
14 69 0 67

On text
1.55:1 Fail

On white
13.54:1 AAA

Background, text, border · .c-card--video__carousel, .c-card--story__carousel
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
94 46 0 33

On text
3.13:1 AA large

On white
6.70:1 AA

Text, background, border · ._arrow-link-default:before, a:not(:where(.c-button,.c-feature-tile,.c-wmp-feature-tile,.t-blank-link),:has(:
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 30 0 0

On text
8.89:1 AAA

On white
2.36:1 Fail

Text, border, background · ._arrow-link-reverse, ._arrow-link-reverse:before
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 97 88 27

On text
3.12:1 AA large

On white
6.73:1 AA

Text, border, background · .error, .c-newsletter .has-error .c-form__action
Thistle

HEX

RGB

HSL

OKLCH

CMYK
5 13 0 0

On text
16.66:1 AAA

On white
1.26:1 Fail

Background · .c-use-case-tile-container .c-use-case-tile--content:first-child, .c-use-case-tile-container .c-use-case-tile--content:nth-child(2)
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
65 0 44 48

On text
4.52:1 AA

On white
4.65:1 AA

Text, background, border · .c-message__button.v--green, .c-nav-2026__card-figure--whats-new
Dark Violet

HEX

RGB

HSL

OKLCH

CMYK
25 99 0 22

On text
3.13:1 AA large

On white
6.71:1 AA

Text, background · .c-accordion-carousel .asset-text-carousel__text.active .c-accordion-carousel__t, .s-hp-df-content .c-accordion-carousel .c-accordion-carousel__decoration--stat-n
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
89 39 0 36

On text
3.38:1 AA large

On white
6.22:1 AA

Text, background · .c-message_attachment__field_title.v--blue, .s-product [data-selected=true]
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
92 46 0 45

On text
2.43:1 Fail

On white
8.65:1 AAA

Text · .c-dark-ai-container .c-switcher-container .swiper-container .c-switcher-item.is, a:not(:where(.c-button,.c-feature-tile,.c-wmp-feature-tile,.t-blank-link),:has(:
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
85 44 0 76

On text
1.32:1 Fail

On white
15.89:1 AAA

Background · .u-gradient--sapphire-blue, .u-gradient--sapphire-blue--opaque
Deep Indigo

HEX

RGB

HSL

OKLCH

CMYK
0 80 0 75

On text
1.35:1 Fail

On white
15.56:1 AAA

Background, text, graphic · .c-product-sidebar, .c-featured-carousel__nav-btn

Gradients

linear-gradient(90deg,#83388a 0%,#d389e7 80%)
linear-gradient(#fff 0%,#edf4ff 22.115%,#f9f0ff 100%)
linear-gradient(180deg, 0%, #fff 100%)

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Salesforce-Avant-Garde

Aa 400 Aa 700

Salesforce-Avant-Garde

Served from a.slack-edge.com · weights 400, 600, 700 · headings, buttons · shown in a stand-in if you don’t have it

Aa 100 Aa 700

Salesforce-Sans

Served from a.slack-edge.com · weights 100, 200, 300, 400, 600, 700 · body · shown in a stand-in if you don’t have it

Aa 400 Aa 900

NotoSansJP

Served from a.slack-edge.com · weights 400, 700, 900 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 clamp(2rem,2.88462vw + 1.27885rem,3.125rem) · 50 px / 1.12 weight 700 · Salesforce-Avant-Garde

Slack

Heading 2 clamp(1.75rem,.641026vw + 1.58974rem,2rem) · 32 px / 1.25 weight 700 · Salesforce-Avant-Garde

Slack | AI work platform and productivity tools

Heading 3 1.5rem · 24 px / 1.333 weight 700 · Salesforce-Avant-Garde

Slack | AI work platform and productivity tools

Heading 4 1.5rem · 24 px / 1.333 weight 700 · Salesforce-Avant-Garde

Slack | AI work platform and productivity tools

Heading 5 14px

Slack | AI work platform and productivity tools

Body — Salesforce-Sans

Boost productivity and save time with Slack‌ – ‌the AI work platform for managing projects, automating workflows and connecting teams secur…

Paragraph 1.125rem · 18 px / 1.555 weight 400

Boost productivity and save time with Slack‌ – ‌the AI work platform for managing projects, automating workflows and connecting teams secur…

Small .875rem · 14 px / 1.429 weight 400

Boost productivity and save time with Slack‌ – ‌the AI work platform for managing projects, automating workflows and connecting teams secur…

Link .875rem · 14 px / 1.429 weight 400 · uppercase

Sizes in use

Most common across the site

44pxline 1.25 · 62 rules
32pxline 1.375 · 80 rules
28pxline 1.25 · 33 rules
24pxline 1.333 · 103 rules
20pxline 1.3 · 43 rules
18pxline 1.555 · 109 rules
16pxline 1.5 · 310 rules
14pxline 1.429 · 330 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

4px · 48×
50% · 17×
1rem · 16×
8px · 12×
999px · 10×
unset · 10×

Shadows

0 0 2rem #0000001a
0 0 2rem #1818181a
0 5px 20px #0000001a
0 1rem 2rem #0000001a

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Content widths (max-width)

1280 px

1230 px

960 px

864 px

700 px

400 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 47 characters, short enough to show in full in search results.
▲ CheckThe description is 172 characters. Search results usually show about 160.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Slack use?: Slack’s website uses three typefaces: Salesforce-Avant-Garde (headings), served from a.slack-edge.com; Salesforce-Sans (body text), served from a.slack-edge.com; NotoSansJP, served from a.slack-edge.com.
What are Slack’s brand colours?: The main colours on slack.com are Purple (#730394), Light Indigo (#481A54), Deep Royal Blue (#0B5CAB), Deep Sky Blue (#00B3FF), Fire Brick (#BA0517) and Thistle (#F2DEFE).
What colour is Slack’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Slack’s logo from?: The logo shown in this guide was found on slack.com’s homepage. For official logo files and usage rules, check Slack’s own brand or press page.
Is this Slack’s official style guide?: No. SiteStyleGuide made it from slack.com’s public web pages on 21 October 2026, and isn’t affiliated with Slack. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

slack-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* slack.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/slack.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #181818;
  --colour-dark-grey: #5C5C5C;
  --colour-black: #000000;
  --colour-purple: #730394;
  --colour-light-indigo: #481A54;
  --colour-deep-royal-blue: #0B5CAB;
  --colour-deep-sky-blue: #00B3FF;
  --colour-fire-brick: #BA0517;
  --colour-thistle: #F2DEFE;
  --colour-sea-green: #2E844A;
  --colour-dark-violet: #9602C7;
  --colour-light-royal-blue: #1264A3;
  --colour-dark-slate-blue: #0B4C8C;
  --colour-midnight-blue: #09233E;
  --colour-deep-indigo: #400D40;
  --gradient-1: linear-gradient(90deg,#83388a 0%,#d389e7 80%);
  --gradient-2: linear-gradient(#fff 0%,#edf4ff 22.115%,#f9f0ff 100%);
  --gradient-3: linear-gradient(180deg, 0%, #fff 100%);

  /* Typefaces */
  --font-headings: 'Salesforce-Avant-Garde', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';
  --font-buttons: 'Salesforce-Avant-Garde', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';
  --font-body: 'Salesforce-Sans', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';
  --font-other: 'NotoSansJP', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';

  /* Type scale */
  --text-h1: clamp(2rem,2.88462vw + 1.27885rem,3.125rem);
  --leading-h1: 1.12;
  --text-h2: clamp(1.75rem,.641026vw + 1.58974rem,2rem);
  --leading-h2: 1.25;
  --text-h3: 1.5rem;
  --leading-h3: 1.333;
  --text-h4: 1.5rem;
  --leading-h4: 1.333;
  --text-h5: 14px;
  --text-p: 1.125rem;
  --leading-p: 1.555;
  --text-small: .875rem;
  --leading-small: 1.429;
  --text-a: .875rem;
  --leading-a: 1.429;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 50%;
  --radius-3: 1rem;
  --radius-4: 8px;
  --radius-5: 999px;
  --radius-6: unset;
}

{
    "site": "slack.com",
    "source": "https://sitestyleguide.com/slack.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#181818",
            "rgb": [
                24,
                24,
                24
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#5C5C5C",
            "rgb": [
                92,
                92,
                92
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Purple",
            "hex": "#730394",
            "rgb": [
                115,
                3,
                148
            ]
        },
        {
            "name": "Light Indigo",
            "hex": "#481A54",
            "rgb": [
                72,
                26,
                84
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0B5CAB",
            "rgb": [
                11,
                92,
                171
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00B3FF",
            "rgb": [
                0,
                179,
                255
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#BA0517",
            "rgb": [
                186,
                5,
                23
            ]
        },
        {
            "name": "Thistle",
            "hex": "#F2DEFE",
            "rgb": [
                242,
                222,
                254
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#2E844A",
            "rgb": [
                46,
                132,
                74
            ]
        },
        {
            "name": "Dark Violet",
            "hex": "#9602C7",
            "rgb": [
                150,
                2,
                199
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#1264A3",
            "rgb": [
                18,
                100,
                163
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#0B4C8C",
            "rgb": [
                11,
                76,
                140
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#09233E",
            "rgb": [
                9,
                35,
                62
            ]
        },
        {
            "name": "Deep Indigo",
            "hex": "#400D40",
            "rgb": [
                64,
                13,
                64
            ]
        }
    ],
    "fonts": [
        {
            "name": "Salesforce-Avant-Garde",
            "stack": "\"Salesforce-Avant-Garde\", system-ui, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Served from a.slack-edge.com"
        },
        {
            "name": "Salesforce-Sans",
            "stack": "\"Salesforce-Sans\", system-ui, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [
                100,
                200,
                300,
                400,
                600,
                700
            ],
            "source": "Served from a.slack-edge.com"
        },
        {
            "name": "NotoSansJP",
            "stack": "NotoSansJP, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
            "weights": [
                400,
                700,
                900
            ],
            "source": "Served from a.slack-edge.com"
        }
    ]
}

Websites whose lead colour is closest to Slack’s

Radiopaedia

radiopaedia.org · 5 days ago
Save
Rakuten

rakuten.com · 4 days ago
Save
JustGiving

justgiving.com · 2 days ago
Save
ABC

abc.com · 2 days ago
Save

Captured from slack.com on 21 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Slack; this guide describes the public website for reference.

Slackstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Dark Grey

Black

Colours

Purple

Light Indigo

Deep Royal Blue

Deep Sky Blue

Fire Brick

Thistle

Sea Green

Dark Violet

Light Royal Blue

Dark Slate Blue

Midnight Blue

Deep Indigo

Gradients

Salesforce-Avant-Garde

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run slack.com?

Similar colours

Radiopaedia

Rakuten

JustGiving

ABC

Title &
description