W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Slack
Slack is a channel-based messaging and collaboration platform for modern work, owned by Salesforce since the 2021 acquisition. The brand voice is warm, conversational, and human — "where work happens." Visually, the 2019 Pentagram-led rebrand replaced the earlier eleven-color identity with a tight four-color octothorpe mark anchored on Slack Aubergine, designed so the brand reads instantly against the white of competing desktop windows.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/slack/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/slack/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Slack
Slack is a channel-based messaging and collaboration platform for modern work, owned by Salesforce since the 2021 acquisition. The brand voice is warm, conversational, and human — "where work happens." Visually, the 2019 Pentagram-led rebrand replaced the earlier eleven-color identity with a tight four-color octothorpe mark anchored on Slack Aubergine, designed so the brand reads instantly against the white of competing desktop windows.
Tags: saas, productivity, slack, salesforce, messaging
Atoms
Palette
Slack · [email protected] · Proprietary — All Rights Reserved
Slack's brand palette, anchored on the signature Slack Aubergine (#4A154B) and the four quadrant colors of the octothorpe mark introduced in the 2019 Pentagram-led rebrand: green, blue, yellow, and a hot pink-red. Aubergine reads as the institutional voice; the four quadrant colors carry the playful, conversational accent layer.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Slack Sans ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Slack Sans ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
aubergine |
Slack Aubergine | #4A154B |
slack-green |
Slack Green | #2EB67D |
slack-blue |
Slack Blue | #36C5F0 |
slack-yellow |
Slack Yellow | #ECB22E |
slack-red |
Slack Red | #E01E5A |
slack-white |
Slack White | #FFFFFF |
slack-black |
Slack Black | #1D1C1D |
slack-surface-light |
Slack Surface Light | #F4F4F4 |
slack-surface-dark |
Slack Surface Dark | #2C2D30 |
slack-text-secondary |
Slack Text Secondary | #616061 |
slack-text-tertiary |
Slack Text Tertiary | #868686 |
slack-text-on-dark-secondary |
Slack Text Secondary (Dark) | #ABABAD |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
slack-white |
#FFFFFF |
surface |
slack-surface-light |
#F4F4F4 |
surface-elevated |
slack-white |
#FFFFFF |
text-primary |
slack-black |
#1D1C1D |
text-secondary |
slack-text-secondary |
#616061 |
text-tertiary |
slack-text-tertiary |
#868686 |
primary |
aubergine |
#4A154B |
primary-hover |
aubergine |
#4A154B |
accent |
slack-green |
#2EB67D |
accent-hover |
slack-green |
#2EB67D |
warning |
slack-yellow |
#ECB22E |
warning-hover |
slack-yellow |
#ECB22E |
error |
slack-red |
#E01E5A |
success |
slack-green |
#2EB67D |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
aubergine |
#4A154B |
surface |
slack-surface-dark |
#2C2D30 |
surface-elevated |
slack-black |
#1D1C1D |
text-primary |
slack-white |
#FFFFFF |
text-secondary |
slack-text-on-dark-secondary |
#ABABAD |
text-tertiary |
slack-text-tertiary |
#868686 |
primary |
slack-blue |
#36C5F0 |
primary-hover |
slack-blue |
#36C5F0 |
accent |
slack-green |
#2EB67D |
accent-hover |
slack-green |
#2EB67D |
warning |
slack-yellow |
#ECB22E |
warning-hover |
slack-yellow |
#ECB22E |
error |
slack-red |
#E01E5A |
success |
slack-green |
#2EB67D |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
aubergine |
#4A154B |
on-identity |
slack-white |
#FFFFFF |
primary |
aubergine |
#4A154B |
primary-hover |
aubergine |
#4A154B |
accent |
slack-green |
#2EB67D |
accent-hover |
slack-green |
#2EB67D |
accent-blue |
slack-blue |
#36C5F0 |
accent-yellow |
slack-yellow |
#ECB22E |
accent-red |
slack-red |
#E01E5A |
success |
slack-green |
#2EB67D |
warning |
slack-yellow |
#ECB22E |
error |
slack-red |
#E01E5A |
background-light |
slack-white |
#FFFFFF |
background-dark |
aubergine |
#4A154B |
surface-light |
slack-surface-light |
#F4F4F4 |
surface-dark |
slack-surface-dark |
#2C2D30 |
text-primary-light |
slack-black |
#1D1C1D |
text-primary-dark |
slack-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: aubergine, slack-green, slack-blue, slack-yellow, slack-red, slack-white, slack-black
- forbidden: any-non-brand-color
The four quadrant colors of the Slack mark and Aubergine are the only documented brand colors. Recoloring the mark into off-brand hues violates Slack's brand-use guidelines as published at slack.com/media-kit.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, cropped, reordered-quadrants
Slack's media kit explicitly prohibits stretching, rotating, recoloring, applying effects to, or rearranging the quadrants of the Slack mark. The four-color octothorpe is a fixed composition.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Slack Black (#1D1C1D) on Slack White (#FFFFFF) clears AA comfortably; Slack White on Aubergine (#4A154B) also clears AA.
variantSelection → logo
- use:
logo-light-on-dark - when:
backgroundColorScheme="dark"
On dark surfaces (including the canonical Aubergine canvas), the light-on-dark wordmark variant is required for legibility. Do not invert the mark file on the fly.
variantSelection → logo
- use:
logo-dark-on-light - when:
backgroundColorScheme="light"
On light surfaces, use the dark-on-light wordmark variant where the wordmark renders in Aubergine. Do not place the light-on-dark variant on white.
contextRestriction → logo.mark
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication
Slack's trademark guidelines forbid use of the mark in a way that implies endorsement, on third-party merchandise, or on competing-product surfaces without explicit license.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. All Slack-skinned interfaces must clear AA at minimum.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700, 900
Slack Sans is distributed with discrete weights Regular (400), Medium (500), Bold (700), and Black (900). Headings use 500 and above to maintain Slack's bold-typographic voice.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: slack-white, slack-black
- doesNotPairWith: slack-yellow
Aubergine + Slack Yellow combinations fight without resolving; Aubergine pairs cleanly with white and with the green/blue quadrants. Reserve yellow for accents on a neutral canvas.
Provenance
- Source: https://slack.com/media-kit
- License:
Proprietary — All Rights Reserved - Attribution: Slack and the Slack mark are trademarks of Slack Technologies, LLC, a Salesforce company. brand-atoms reads only the publicly documented core palette and proprietary-font identity; licensed application of the Slack name and mark is governed by Slack's brand-use program at slack.com/media-kit and the Slack trademark guidelines.
- Imported:
2026-05-17 - Notes: Slack Sans, Slack's proprietary corporate typeface, is referenced here as the canonical brand face. The fallbackStack on slack-sans@1 specifies Lato as the public-web fallback when the licensed file is not available.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Slack
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Slack
A clear hierarchy in Slack's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Slack
[email protected]font · heading
Slack Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Slack Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ slack-green #2EB67D accent-blue
→ slack-blue #36C5F0 accent-hover
→ slack-green #2EB67D accent-red
→ slack-red #E01E5A accent-yellow
→ slack-yellow #ECB22E background-dark
→ aubergine #4A154B background-light
→ slack-white #FFFFFF error
→ slack-red #E01E5A identity
→ aubergine #4A154B on-identity
→ slack-white #FFFFFF primary
→ aubergine #4A154B primary-hover
→ aubergine #4A154B success
→ slack-green #2EB67D surface-dark
→ slack-surface-dark #2C2D30 surface-light
→ slack-surface-light #F4F4F4 text-primary-dark
→ slack-white #FFFFFF text-primary-light
→ slack-black #1D1C1D warning
→ slack-yellow #ECB22E Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Slack Sans prose
→ body Slack Sans Palette mode mappings (from slack)
Light mode (14 roles)
accent
→ slack-green accent-hover
→ slack-green background
→ slack-white error
→ slack-red primary
→ aubergine primary-hover
→ aubergine success
→ slack-green surface
→ slack-surface-light surface-elevated
→ slack-white text-primary
→ slack-black text-secondary
→ slack-text-secondary text-tertiary
→ slack-text-tertiary warning
→ slack-yellow warning-hover
→ slack-yellow Dark mode (14 roles)
accent
→ slack-green accent-hover
→ slack-green background
→ aubergine error
→ slack-red primary
→ slack-blue primary-hover
→ slack-blue success
→ slack-green surface
→ slack-surface-dark surface-elevated
→ slack-black text-primary
→ slack-white text-secondary
→ slack-text-on-dark-secondary text-tertiary
→ slack-text-tertiary warning
→ slack-yellow warning-hover
→ slack-yellow Rules (9 typed constraints)
error · 7 rules
colorChoice logo.mark allowed aubergine, slack-green, slack-blue, slack-yellow, slack-red, slack-white, slack-black forbidden any-non-brand-color The four quadrant colors of the Slack mark and Aubergine are the only documented brand colors. Recoloring the mark into off-brand hues violates Slack's brand-use guidelines as published at slack.com/media-kit.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, cropped, reordered-quadrants Slack's media kit explicitly prohibits stretching, rotating, recoloring, applying effects to, or rearranging the quadrants of the Slack mark. The four-color octothorpe is a fixed composition.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Slack Black (#1D1C1D) on Slack White (#FFFFFF) clears AA comfortably; Slack White on Aubergine (#4A154B) also clears AA.
variantSelection logo use logo-light-on-dark when backgroundColorScheme="dark" On dark surfaces (including the canonical Aubergine canvas), the light-on-dark wordmark variant is required for legibility. Do not invert the mark file on the fly.
variantSelection logo use logo-dark-on-light when backgroundColorScheme="light" On light surfaces, use the dark-on-light wordmark variant where the wordmark renders in Aubergine. Do not place the light-on-dark variant on white.
contextRestriction logo.mark forbiddenContexts product-of-competitor, merchandise, endorsement-implication Slack's trademark guidelines forbid use of the mark in a way that implies endorsement, on third-party merchandise, or on competing-product surfaces without explicit license.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. All Slack-skinned interfaces must clear AA at minimum.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 700, 900 Slack Sans is distributed with discrete weights Regular (400), Medium (500), Bold (700), and Black (900). Headings use 500 and above to maintain Slack's bold-typographic voice.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith slack-white, slack-black doesNotPairWith slack-yellow Aubergine + Slack Yellow combinations fight without resolving; Aubergine pairs cleanly with white and with the green/blue quadrants. Reserve yellow for accents on a neutral canvas.
Provenance
- Source
- https://slack.com/media-kit
- License
Proprietary — All Rights Reserved- Attribution
- Slack and the Slack mark are trademarks of Slack Technologies, LLC, a Salesforce company. brand-atoms reads only the publicly documented core palette and proprietary-font identity; licensed application of the Slack name and mark is governed by Slack's brand-use program at slack.com/media-kit and the Slack trademark guidelines.
- Imported
2026-05-17- Notes
- Slack Sans, Slack's proprietary corporate typeface, is referenced here as the canonical brand face. The fallbackStack on slack-sans@1 specifies Lato as the public-web fallback when the licensed file is not available.