# Slack: brand book and build spec

Aubergine and horchata with a four-color octothorpe; pills and chat bubbles cut from that mark; real product UI as the hero; and a coworker voice that is clear, concise and human. Since joining Salesforce, the site speaks in Salesforce typefaces and brighter purples.

From unfairly.ai/brand-guidelines/slack, checked 2026-10-29. Unofficial study; not affiliated with Slack.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** One mark, many parts. Slack's octothorpe breaks into the pills and bubbles that frame its photos, pattern its ads and move in its motion, so even a shape on a webinar banner reads as Slack. Based on: From the 2019 Pentagram identity (speech bubble and lozenge extracted as graphic elements), the brand shapes, motion and color pages of the brand center.

## Purpose

Mission: Make people's working lives simpler, more pleasant and more productive. (published; https://web.archive.org/web/20240406034403/https://brand.slackhq.com/about-slack)

Story: Slack launched in 2013 with an 11-color octothorpe logo. On January 16, 2019 it launched a simpler four-color octothorpe built with Michael Bierut and Pentagram, whose speech-bubble and pill shapes became the brand shapes. Slack became a Salesforce company; its logo now carries 'from Salesforce' and its site uses Salesforce typefaces. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Empathy |  | published: https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values |
| Playfulness |  | published: https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values |
| Courtesy |  | published: https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values |
| Solidarity |  | published: https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values |
| Craftsmanship |  | published: https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values |
| Thriving |  | published: https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values |

## Fixed and flexible

Never changes:
- The octothorpe and its four colors
- Aubergine as the lead color
- Black or white text only
- Sentence case
- Real product UI

The one thing that varies: From plain (white page, aubergine band, product UI) to expressive (brand-shape patterns, secondary colors, illustration, animated emoji), chosen by how much delight the moment allows.

## Positioning

- **Statement**: Slack is the productivity platform that empowers everyone with no-code automation, seamless search and knowledge sharing, and connected teams (paraphrase of the short boilerplate). (published)
- **Category**: AI work platform: page title reads 'AI Work Platform & Productivity Tools'. (observed)
- **Audience**: Teams and companies of every size; the homepage names SMB, mid-market and enterprise G2 awards and leads with enterprise logos (GM, OpenAI, Target, Paramount, Stripe, IBM). (observed)
- **Problem**: Work and AI agents are scattered across tools and inboxes; agents sprawl in silos without shared context (paraphrase). (published)
- **Promise**: People and AI agents working together in one place, with Slackbot coordinating work across connected apps (paraphrase of the 2026 homepage hero). (observed)
- **Differentiators**: Channels: flexible, transparent spaces for people and agents.; Slackbot as one conversational interface for an agent ecosystem; 2,600 pre-configured apps and agents.; Deep integration with Salesforce Customer 360.
- **Alternatives**: Email and Microsoft Teams: 'Bring conversations out of the inbox' and a Slack-vs-Teams promo card on the homepage.

## Messaging

Boilerplate (published): Slack is on a mission to make people's working lives simpler, more pleasant and more productive. It is the productivity platform for customer companies, with no-code automation, seamless search and knowledge sharing, and connected teams; as part of Salesforce it is integrated into Customer 360 (paraphrase of the long boilerplate).

Taglines:
- All your people and AI agents working together (slack.com hero H1)
- Where Work Happens (listed trademark)
- Where the future works (lockup line on a brand center typography example banner)
- Slack is your digital HQ (brand center H1 type sample; the 2021-2023 Digital HQ positioning)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| People and agents together | Humans and AI agents work in the same place, coordinated by Slackbot. | More than 300% growth in new custom agents built on Slack since January 2026.; 2,600 pre-configured apps and agents on the Slack platform. | our reading |
| Channels | Work is organized in open, searchable channels instead of inboxes. | 1B+ messages sent daily (FY26 earnings remarks).; 4M Slack Connect users working with external teams each week (FY25 internal data). | our reading |
| Anyone can automate | No-code workflows by click or by code. | 3M daily workflows; 1.7M apps actively used each week (FY25 internal data). | our reading |
| Proven returns | Measured ROI and productivity gains. | 94% of users seeing positive ROI; 312% ROI over three years; $51M in collaboration gains (footnoted to Salesforce internal data and a 2026 Forrester TEI study).; A leader in over 290 G2 market reports (G2 Fall 2026). | our reading |

They never claim:
- Quote stats only with the homepage's footnoted sources; never round or restate them.
- Don't introduce functions, features or behaviors in UI screens that don't exist.
- Slack is an adjective (Slack messages) or a noun for the app or company; never a verb, plural or possessive.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "All your people and AI agents working together" | homepage | https://slack.com/ |
| "Slack connects your team. Slackbot multiplies what they can do." | homepage | https://slack.com/ |
| "Reimagine what’s possible with AI and agents" | homepage | https://slack.com/ |
| "What’s new in Slack" | homepage | https://slack.com/ |
| "Meet Slackbot: AI for the whole team" | homepage | https://slack.com/ |
| "One search to rule them all." | homepage | https://slack.com/ |
| "It all starts with a channel." | homepage | https://slack.com/ |
| "When talking is easier than typing…" | homepage | https://slack.com/ |
| "Bring conversations out of the inbox." | homepage | https://slack.com/ |
| "Anyone can automate in Slack." | homepage | https://slack.com/ |
| "From Atlassian to Zoom." | homepage | https://slack.com/ |
| "The most innovative companies run their business in Slack" | homepage | https://slack.com/ |
| "Slack reimagines work for Anthropic at the speed of AI" | homepage | https://slack.com/ |
| "We’re in the business of growing businesses" | homepage | https://slack.com/ |
| "Millions of people love working in Slack" | homepage | https://slack.com/ |
| "Your Slack deep dive starts here" | homepage | https://slack.com/ |
| "See all you can accomplish in Slack" | homepage | https://slack.com/ |

## Voice

Tone words: Clear, Concise, Human.

Traits:
- Clear (published)
- Concise (published)
- Human (published)
- Playful, but not silly (published)
- Empathetic, but not jargony (published)
- Crafted, but not careless (published)

- Brand center voice (2024): like a friendly, intelligent coworker; character never overwhelms content; delight when the moment is right.
- Homepage voice (slack.com, 2026-10-29): short product claims about people and AI agents, many ending in a period ('It all starts with a channel.'), uppercase button labels, a stats band with footnotes.
- A landing page follows the homepage voice: a sentence-case claim of 4 to 8 words, one plain subline, two buttons (Get started, Find your plan).
- Slack Design's content team adds trust as the bar for AI copy: set expectations, never mislead.
- Two voices, scoped: the brand-center guide voice (no periods in headlines) governs campaigns and ads; the homepage voice (observed 2026-10-29) governs landing pages: section heads without periods, feature-item titles that often end in a period ("It all starts with a channel."), CAPS buttons. A landing page follows the homepage.

Rules a copy check enforces:
- Sentence case headlines
- All caps only for buttons, eyebrows and jump links; never all lowercase
- No periods in headlines, eyebrows, links or buttons (the 2026 homepage breaks this on feature-tab headlines; a landing page may follow the homepage)
- No Oxford comma unless critical for clarity. Applies to copy you WRITE. Quotes and printed page lines keep their Oxford commas exactly (the Anthropic quote, the channels copy, the carousel sublines)
- Don't use & or + in place of 'and'. Applies to copy you WRITE. Text the page already prints is reproduced exactly as printed, & included ("Slack CRM: Generate meeting insights & Salesforce tasks", footer "Apps & Integrations", "Auto & Energy", "Health & Life Sciences", "employee Q&A")
- No spaces around em dashes; en dashes for ranges (9:30 a.m.–1 p.m.)
- Times as 9 a.m., 12:30 p.m. in running copy; 8 AM PDT in display copy; drop :00
- Go light on exclamation points
- Emoji add meaning or delight; never replace words
- Slack is an adjective or the app's name: never a verb, plural or possessive; no 'Slackers'
- Always lowercase slack.com; avoid starting a sentence with it
- American spelling
- No exclusionary, ableist or misgendering language; no slang or niche pop-culture references
- Copy principles: Don't make me think; Be approachable; Make it memorable; Respect our readers; Be compelling

Their words: Slack messages, Slack collaboration software, integrated with Slack, Slack Platform Partner.
Never: Slacking, Slackers, Slack's (possessive), Slacks (plural), I ❤️ Slackbot (emoji for words), DHQ IRL (abbreviations).

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Homepage, landing pages and UI copy 1, Release notes, social and emoji moments 3. One voice. The brand center publishes the voice; the homepage shows it in a product-led setting. Levels are our reading.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Aubergine | #4A154B | night | Lead color for big brand moments; white text on it. PMS 2623 C. slack.com renders its dark bands in #481A54 (observed). |
| Horchata | #F4EDE4 | surface | Warm neutral ground; black text on it. PMS 7604 C at 80% |
| Black | #1D1C1D | ink | Default text color. PMS Black. slack.com sets text in #181818 (observed). |
| White | #FFFFFF | paper | Default text color on dark grounds; page ground. Also the slack.com page ground (observed 2026-10-29). |
| Slack blue | #36C5F0 | extra | Logo-mark color; black text on it. PMS 298 C |
| Slack green | #2EB67D | extra | Logo-mark color; black text on it. PMS 2250 C |
| Slack yellow | #ECB22E | extra | Logo-mark color; black text on it. PMS 7409 C |
| Slack red | #E01E5A | extra | Logo-mark color; white text on it. PMS 214 C |
| Cobalt | #1E328F | extra | Secondary: photography and illustration grounds, shape fills. Never text. White text on it. |
| Sky | #0E9DD3 | extra | Secondary: photography and illustration grounds, shape fills. Never text. Black text on it. |
| Teal | #2392A2 | extra | Secondary: photography and illustration grounds, shape fills. Never text. White text on it. |
| Pool | #78D7DD | extra | Secondary: photography and illustration grounds, shape fills. Never text. Black text on it. |
| Evergreen | #185F34 | extra | Secondary: photography and illustration grounds, shape fills. Never text. White text on it. |
| Moss | #729C1A | extra | Secondary: photography and illustration grounds, shape fills. Never text. Black text on it. |
| Sandbar | #FFD57E | extra | Secondary: photography and illustration grounds, shape fills. Never text. Black text on it. |
| Peach | #FED4BE | extra | Secondary: photography and illustration grounds, shape fills. Never text. Black text on it. |
| Salmon | #F2606A | extra | Secondary: photography and illustration grounds, shape fills. Never text. Black text on it. |
| Bubblegum | #FFB6BD | extra | Secondary: photography and illustration grounds, shape fills. Never text. Black text on it. |
| Crimson | #921D21 | extra | Secondary: photography and illustration grounds, shape fills. Never text. White text on it. |
| Terracotta | #DE8969 | extra | Secondary: photography and illustration grounds, shape fills. Never text. Black text on it. |
| Berry | #7C2852 | extra | Secondary: photography and illustration grounds, shape fills. Never text. White text on it. |
| Mauve | #C05B8C | extra | Secondary: photography and illustration grounds, shape fills. Never text. White text on it. |
| CTA purple (site) | #730394 | accent | slack.com primary button fill and eyebrow text; not in the guide. |
| Headline purple (site) | #9602C7 | accent_secondary | slack.com feature-tab headlines; not in the guide. |
| Muted gray (site) | #5C5C5C | ink_muted | slack.com unselected tab titles; the guide publishes no gray. |

Proportion (published; Slack publishes no color ratio. Not published; the brand center says lead with aubergine for big moments and avoid adding many extra colors.): .

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Salesforce-Avant-Garde | Proprietary to Salesforce (not an open font) | Poppins | "Helvetica Neue", Helvetica, Arial, sans-serif |
| body | Salesforce-Sans | Proprietary to Salesforce | Open Sans | "Helvetica Neue", Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline (h1) | --text-h1-* | display | 64px | 32px | 1.0625 | -2.24px | 600 |
| Section headline (h2, big) | --text-h2-* | display | 50px | 28px | 1.12 | -1.75px | 600 |
| Section headline (h2, small) | --text-h2-small-* | display | 32px | 28px | 1.25 | -1.12px | 600 |
| Card and item title | --text-card-title-* | display | 24px | 22.4px | 1.25 | -0.84px | 600 |
| Hero tab pill | --text-tab-* | display | 22px | 18px | 1.27 | -0.77px | 600 |
| Big stat number | --text-stat-* | display | 80px | 80px | 1.05 | -0.96px | 600 |
| Proof stat number | --text-stat-small-* | display | 64px | 48px | 1 | -0.768px | 600 |
| Body large | --text-body-l-* | body | 18px | 18px | 1.555 | 0px | 400 |
| Body | --text-body-* | body | 16px | 16px | 1.5 | 0px | 400 |
| Bold label | --text-label-* | body | 16px | 16px | 1.375 | 0.2px | 650 |
| Button (CAPS) | --text-button-* | body | 14px | 14px | 1.29 | 0.798px | 650 |
| Nav link | --text-nav-* | body | 15px | 15px | 1.55 | 0px | 650 |
| Badge | --text-badge-* | body | 12px | 12px | 1.33 | 0px | 650 |
| Caption | --text-caption-* | body | 12px | 12px | 1.55 | 0px | 400 |
| Card meta | --text-meta-* | body | 14px | 14px | 1.3 | 0.1px | 400 |
| Footer head | --text-footer-head-* | body | 14px | 14px | 1.55 | 0.8px | 650 |
| Footer link | --text-footer-link-* | body | 14px | 14px | 1.55 | 0px | 400 |
| Quote | --text-quote-* | body | 18px | 18px | 1.4 | 0px | 300 |
| Eyebrow (phone only) | --text-eyebrow-* | body | 14px | 14px | 1.25 | -0.112px | 650 |

## Layout

Measured on https://slack.com/: Playwright at 1440x900 and 390x844 with a desktop Chrome UA on 2026-10-29, the OneTrust banner hidden and the reference variant forced (body class s-cta-refresh removed; see the hero CTA note); computed styles plus pixel samples of the reference screenshots.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 105px | 16px |
| Section padding | 96px | 36px |
| Container max width | 1230px | full |
| Hero text width | max 923px | full |
| Grid columns | 12 | 1 |
| Gutter | 48px | 16px |
| Card gap | 48px | 48px |
| Navigation height | 80px | 80px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| nav | 55px: logo, search icon, GET STARTED 114x34, menu | 80px fixed: logo, 5 links, search, Sign in, REQUEST A DEMO, GET STARTED |
| hero headline | 32/35.84, 3 lines | 64/68, 2 lines |
| hero buttons | stacked 288x57, 16px apart | side by side, 178x57 and 226x57, 8px apart |
| trusted logos | 2 rows (4 + 2), no label | one row with "Trusted by top teams" |
| hero media | one tab pill above a 351x240 video, 5 dots | 800x548 video, 5 pills below |
| section headline | 28px left-aligned (stats/CTA 32 centered) | 50px centered (small heads 32) |
| feature carousels | eyebrow, head, copy, items, stat or quote, then 359x246 image (radius 8) | two columns: items left, 876x600 image right (radius 16) |
| section-jump tabs | hidden; eyebrows instead | sticky strip of 4 tabs |
| customer stories | hidden (only the button pair shows) | heading, link, 4 video cards |
| resource cards | one-card carousel with dots | 4 across |
| footer columns | 6 collapsed rows with chevrons | 5 columns of links |
| side margin | 16px | 105px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Slack's.

Homepage bands, top to bottom (observed):
1. Nav
   - Desktop: y 0-80, fixed; logo x 105, links from x 242, search/Sign in/REQUEST A DEMO/GET STARTED ending x 1335
   - Phone: 55px: logo, search, GET STARTED 114x34, menu
   - Buttons rectangular, 4px radius, CAPS 14px 700
   - Shadow 0 4px 40px rgba(0,0,0,0.08) only once scrolled
2. Hero
   - Desktop: y 0-1239: centered H1 64px (2 lines), subline, two CAPS buttons, logo strip, 800x548 video at y 468, pause control, 5 tab pills in rows of 3 and 2
   - Phone: y 0-986: H1 32px 3 lines, stacked 288px buttons, logos 4+2, one pill, 351x240 video, 5 dots
   - 2880px circle, #F9F0FF top fading to white by 288px, top edge y 805, behind the lower video
   - Active pill #2E0039 with white text, others white with #481A54 text
3. Dark AI band
   - Desktop: y 1239-2103: 50px white head (2 lines) and subline centered; 5 outlined 492x52 pills left, 677x462 video right
   - Phone: y 986-1765: left-aligned 28px head, one white feature card over the video, white dots
   - Pill ring rgba(255,255,255,0.25), New badges #F9F0FF/#730394
4. What's new in Slack
   - Desktop: y 2103-2786: 32px head + See all updates left, 40px arrows right, 400x440 cards at 48 gap bleeding right
   - Phone: y 1765-2474: one card, arrows top right
   - Card: 1px #F3F3F3 border, radius 16, #F9F0FF image well, New Feature badge, 24/30 title, 16px lede
5. Section-jump tabs
   - Desktop: y 2786-2843 sticky, 4 gray 16px 700 labels over 1px #E9E3EA rules
   - Phone: hidden
   - Knowledge, People, Process, Platform
6. Feature carousel: Give everyone instant context
   - Desktop: y 2843-3854: centered 50px head and subline, 3 items with 4px #F9EDFF bars left (open title #9602C7), stat below, 876x600 image right at x 622
   - Phone: y 2490-3686: eyebrow KNOWLEDGE, 28px head, items, then 359x246 image
   - Open item "Meet Slackbot: AI for the whole team" with link "Learn more about Slackbot"
   - Image carousel-img-slackbot-multiplayer.png
7. Feature carousel: Let your people connect like people
   - Desktop: y 3854-4865: centered 50px head and subline, 3 items with 4px #F9EDFF bars left (open title #9602C7), quote below, 876x600 image right at x 622
   - Phone: y 3686-4880: eyebrow PEOPLE, 28px head, items, then 359x246 image
   - Open item "It all starts with a channel." with link "Learn about channels"
   - Image carousel-img-people-1.png
8. Feature carousel: Manage all your work from one place
   - Desktop: y 4865-5876: centered 50px head and subline, 3 items with 4px #F9EDFF bars left (open title #9602C7), stat below, 876x600 image right at x 622
   - Phone: y 4880-5988: eyebrow PROCESS, 28px head, items, then 359x246 image
   - Open item "Anyone can automate in Slack." with link "Learn about workflows"
   - Image carousel-img-process-2.png
9. Feature carousel: Secure. Scaleable. Silo-free.
   - Desktop: y 5876-6910: centered 50px head and subline, 3 items with 4px #F9EDFF bars left (open title #9602C7), quote below, 876x600 image right at x 622
   - Phone: y 5988-7131: eyebrow PLATFORM, 28px head, items, then 359x246 image
   - Open item "From Atlassian to Zoom." with link "See all integrations"
   - Image carousel-img-platform-1.png
10. Customer stories
   - Desktop: y 6910-7615: 32px head, blue link, 580px open card + three 183px dimmed cards (radius 16, 328 tall), GET STARTED + FIND YOUR PLAN centered
   - Phone: only the stacked button pair
   - Open card: Anthropic photo, gradient, white logo, 24px white line, play button
11. Stats band
   - Desktop: y 7615-8037: 32px white head; 94% / 312% / $51M at 80px white with 24px 2-line labels
   - Phone: y 7341-8225: stacked
   - Count-up animation; resting values per the screenshot
12. Millions of people love working in Slack
   - Desktop: y 8037-8765: four 64px stats left; 1px #C9C9C9 rule; G2 claim and 6 badges right
   - Phone: y 8225-9627: stacked, 1px #000000 rule above the G2 block
   - 1B+, 4M, 3M, 1.7M
13. Your Slack deep dive starts here
   - Desktop: y 8765-9647: 285x420 shadowed cards at 30 gap; six footnotes
   - Phone: one-card carousel with dots
   - Card CTA caps blue with a 25x14 arrow at the right
14. CTA band
   - Desktop: y 9647-10031: 50px white line, white GET STARTED + outlined REQUEST A DEMO; straight edges
   - Phone: y 10670-11063: 2-line head, stacked buttons
   - No curve on either edge
15. Footer
   - Desktop: y 10031-10999: Change Region + socials, rule, octothorpe + 5 columns, rule, Download Slack + legal links + copyright right
   - Phone: y 11063-11933: centered region and socials, 6 collapsed rows, legal stacked
   - Column heads caps 14px 700 #1D1D1D, links 14px #5C5C5C

## Page anatomy

How Slack's own landing pages are built, part by part (observed; https://slack.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: White 80px bar fixed to the top: color logo left, five text links, then search, Sign in and two rectangular CAPS buttons right
- ground: #FFFFFF; no border; fixed (position fixed, top 0). After scrolling it gains box-shadow 0 4px 40px rgba(0,0,0,0.08)
- height: 80px desktop, 55px phone
- logo: slack-salesforce-logo-nav-black.png (assets nav-slack-salesforce-logo-nav-black.png): multicolor octothorpe + black "slack" wordmark with a small "from Salesforce" line under it, 101x38 at x 105, y 25. Phone: same 101x38 at x 16, y 9
- links: "Product", "Solutions", "Enterprise", "Resources", "Pricing": 15px 700 #1D1D1D, text tops at y 29-31, x 242 / 339 / 447 / 544 / 657 (24px between items: each item has 12px side padding). Product, Solutions and Resources add an 8x5 black chevron 6px after the label. Left-aligned after the logo (first link 37px right of it)
- actions: Right group ending at x 1335: search icon (20px magnifier, black) at x 907; "Sign in" 15px 700 #1D1D1D at x 947; "REQUEST A DEMO" outlined CAPS button 166x42 at x 1019, y 19; "GET STARTED" filled #730394 CAPS button 130x42 at x 1205, y 19. 20px between the two buttons, 20px between search and Sign in
- sticky: yes (fixed)
- phone: 55px: logo at x 16; search icon 20px at x 180; GET STARTED 114x34 at x 220, y 11; menu glyph at x 350: three rounded bars, each 17x2 (fully rounded ends), 5px pitch (bars at y 0, 5, 10 of a 17x12 glyph), fill #1D1C1D, glyph box 17x12 vertically centered on the bar (button 24x21, glyph offset 3.5px from its left). It is a SMALL glyph: never a 24px-wide icon, never thicker than 2px bars (asset nav-menu.svg). No links, no Sign in, no REQUEST A DEMO
- menu labels:
  - Product
  - Solutions
  - Enterprise
  - Resources
  - Pricing
- utility labels:
  - Search (icon)
  - Sign in
  - REQUEST A DEMO
  - GET STARTED

**Hero**
- summary: Centered white hero: two-line 64px headline, one subline, two rectangular CAPS buttons, a one-line logo strip, then an 800x548 product video with a pause control and five tab pills; a huge lilac circle rises behind the lower half
- desktop: band y 0-1239 (under the fixed nav), padding 104 top 50 bottom. H1 y 104-240, 2 lines ("All your people and AI agents" / "working together"), centered, box 923 wide at x 259. Subline y 260-288, one line, 532 wide: "Slack connects your team. Slackbot multiplies what they can do." Buttons y 304-361: GET STARTED 178x57 at x 514, FIND YOUR PLAN 226x57 at x 700 (8px gap, group centered). Logo strip y 385-436 (centered, 488 wide): "Trusted by top teams" 12px #757575 at x 418, y 401, then six grayscale logos at x 560 (gm 32x31), 628 (OpenAI 52x14), 716 (Target 32x31), 784 (Paramount 52x31), 872 (stripe 52x23), 960 (IBM 52x20), vertically centered on y 410. Video 800x548 at x 320, y 468, radius 8, no border or shadow. Pause control: 32px circle at x 320, y 1033, label "Pause animation" 14/20 #444444 at x 360. Tab pills row 1 at y 1101: "Ask Slackbot" (active, 216x38, x 385), "Close deals" (203, x 613), "Plan launches" (227, x 828); row 2 at y 1151: "Chat with clients" (253, x 466), "Automate tasks" (243, x 731). Band ends y 1239
- phone: H1 32/35.84 centered, 3 lines in 269px at y 104; subline 18/28 centered 320 wide, 2 lines at y 231; GET STARTED and FIND YOUR PLAN stacked, 288x57 at x 51, y 303 and y 376. Logos in two rows without the label: gm x 47, OpenAI x 127, Target x 227, Paramount x 307 at y 467; stripe x 87, IBM x 267 at y 519. Then one tab pill "Ask Slackbot" (white, 151x38, 18/28, #481A54, centered) at y 583, the video 351x240 at x 20, y 637 (radius 8), and five 12px #730394 dots centered at y 927 (active solid, others 20%). Band ends y 986
- at rest: Static state = the video poster (assets hero-video-slackbot-big-mode.jpg): Slack desktop window, aubergine sidebar, "Good morning, Arcadio!" with an empty "How can I help?" composer with a rainbow edge and three "Suggested for you" rows. The "Ask Slackbot" pill is active. Tab switching and the typing are animation only
- media: hero-video-slackbot-big-mode.jpg (2920x2000 poster of the mp4), object-fit contain in 800x548, radius 8. The window frame and purple sidebar are inside the image
- background shape: One circle 2880px in diameter (border-radius 50%), centered on the page (left -720px), its top edge at y 805: linear-gradient from #F9F0FF at 5% to #FFFFFF at 10% of its height, so the top 144px is solid lilac fading to white by 288px. Only its top arc shows, behind the lower half of the video: at x 155 the arc is at y 920, at the page edge at y 980, and it fades out above the tab pills. Phone: a 780px solid #F9F0FF circle, left -195px, top y 690, behind the video and dots
- type: H1 Avant Garde (stand-in Poppins 600) 64/68, stand-in tracking -0.035em = -2.24px (the site's own -0.768px is for the real face only) #000000; subline Sans 18/28 #000000; caption 12px #757575
- cta: GET STARTED (filled #730394) + FIND YOUR PLAN (white, 1px #730394 inset ring, arrow): both 57 tall, 4px radius, 14px 700 caps +0.798px
- proof: Logo strip: gm, OpenAI, Target, Paramount, stripe, IBM, ALL rendered mid gray (about #757575) in the reference. The supplied trusted-logo-*.png files are in full color, so apply CSS filter: grayscale(1) opacity(0.6) to every one of the six (our recipe to reach the gray shown); never show a red, blue or violet logo

**Dark AI band: Reimagine what's possible with AI and agents**
- summary: Full-bleed #481A54 band: centered white 50px head and subline, then five outlined feature pills left and a product video right
- ground: #481A54
- desktop: y 1239-2103, padding 72. H2 50/56 white centered, max 801 wide, 2 lines at y 1311, broken with an explicit <br>: "Reimagine what's possible with AI" / "and agents". Subline 18/28 white centered, 738 wide, 2 lines at y 1431. Pills 492x52 at x 105, y 1582 / 1658 / 1734 / 1810 / 1886. Video 677x462 at x 659, y 1529, radius 12, box-shadow 0 0 32px rgba(24,24,24,0.1). "Play animation" control at x 659, y 1999
- phone: y 986-1765, padding 72. H2 28/31.4 white left-aligned at x 16, y 1058, EXACTLY 2 lines broken with an explicit <br>: "Reimagine what's possible" / "with AI and agents" (at -0.035em the first line is 356px and fits the 358px column; never let it run to 3 lines); subline 18/28 white, 4 lines. One feature card at y ~1268, 340x82 at x 31: an outer #D389E7 rounded rect (radius 16) and, inside it on the left, a SEPARATE white rounded rect 279x82 (x 31-310, radius 16 on ALL four corners, so its right edge is a rounded curve, never a square division) holding "Turn data into action with Slackforce Surfaces" in Open Sans 600 18/28 #5E5D60 (semibold, 2 lines, text at x 50); the purple strip to its right (x 310-371) holds the New badge (46x24, #F9F0FF fill, #730394 text) at x 319; the card overlaps the top of a 328x224 video at x 31, y 1320 (radius 8). Five 13px white dots (others 32%) at y 1604; Play animation control centered at y 1677
- anatomy:
  - Subline (exact copy, 2 lines at 1440, 4 at 390): "AI in Slack delivers action, not just answers. It's tapped into the full context of your business, making every connected app and agent smarter in the process."
  - Pill labels in order: "Turn data into action with Slackforce Surfaces" (New), "Automate tasks using Slackbot Skills" (New), "Build together in channels with Slack Code" (New), "Track and update sales pipelines with Slack CRM", "Get fast answers with Claude"
  - Pills: inset 1px rgba(255,255,255,0.25) ring, radius 32, 16/22 700 white, +0.2px; the New badge (46x24, #F9F0FF fill, #730394 text) sits at x 535
  - Phone card colors are a progress fill mid-animation; give the resting card as described
  - At rest ALL FIVE pills look identical on desktop: #481A54 fill, the 0.25 white inset ring, white label; the first pill has no extra fill, border or highlight (the active state only shows as a progress fill during the animation). The video poster (dark-video-slackbot-surfaces.jpg) shows a Slackbot pane "Good afternoon, Zoe! How can I help?" over an aubergine sidebar
  - New badges on the first three pills only (Slackforce Surfaces, Slackbot Skills, Slack Code); the last two pills have none
- components:
  - dark_feature_pill
  - badge_new
  - video_control

**What's new in Slack**
- summary: White band: 32px head left with a blue link, round prev/next arrows right, and a row of 400px cards that runs off the right edge
- ground: #FFFFFF
- desktop: y 2103-2786, padding 42. H2 "What's new in Slack" 32/40 at x 105, y 2172; "See all updates" link at y 2228. Arrows 40px at x 1247 and 1295, y 2216. Cards y 2304-2744 at x 105, 553, 1001 (48 gap); the third card (x 1001-1401) is cut off by an overflow-hidden track at x 1367, so its right 34px including the right border do not show
- phone: y 1765-2474. H2 28/35, 2 lines in 247px at x 16, y 1830; link at y 1916; arrows at x 286 and 334, y 1904. The card is the SAME 400px desktop card positioned at x -5 (wider than the phone), inside a track clipped to x 16-374: so the image shows edge to edge from x 16 to 374, its left/right borders are hidden, and the image is object-fit cover 400x208 (a tight crop: the screenshot's window frame is cut at both sides). Copy keeps the card's 24px padding from the card edge, which puts the badge and text at x 20 (only 4px in from the image's visible left edge). Title 22.4/30, 2 lines ("Slack CRM: Generate meeting" / "insights & Salesforce tasks") in 350px; lede 14.4/22.4, 2 lines. Never inset the phone copy 24px from the visible image edge
- anatomy:
  - Card 1: image whatsnew-Slack-CRM_-Generate-meeting-insights-Salesforce-tasks.jpg; title "Slack CRM: Generate meeting insights & Salesforce tasks" (2 lines; keep the & exactly as the page prints it); lede "Your CRM meetings now write their own notes, and their own to-do list." (2 lines)
  - EVERY card (all three) carries the "New Feature" badge (93x24) above its title
  - Card 2: whatsnew-Slackbot-in-Lightning.jpg; "Slackbot in Lightning"; "Slackbot now lives inside Salesforce Lightning, not just inside Slack."
  - Card 3: whatsnew-img-whats-new-placeholder.jpg (white Slack mark tile on lilac); "Work Object Embeds"; "Your apps now live inside Slack, fully interactive, not just a preview."
  - Prev arrow at 60% opacity at rest
- components:
  - whats_new_card
  - badge_new
  - carousel_arrow
  - text_link

**Section-jump tabs**
- summary: Desktop-only sticky strip of four gray labels with thin rules
- ground: #FFFFFF
- desktop: y 2786-2843 (57 tall, padding 8px 35.6px, sticky at top 88px, rgba(255,255,255,0.5)). Tabs "Knowledge", "People", "Process", "Platform": 307 wide at x 106 / 413 / 720 / 1027, label 16/24 700 #747474 centered at y 2803; 1px #E9E3EA rule under each at y 2833
- phone: not shown; each carousel gets an eyebrow label instead
- anatomy:
  - No tab is highlighted at rest
- components:
  - section_tab

**Feature carousel 1 (Knowledge): Give everyone instant context**
- summary: Centered 50px head and subline, then a three-item accordion with a purple open title on the left and a large product screenshot bleeding off the right edge
- ground: #FFFFFF
- desktop: y 2843-3854, padding-top 96. H2 50/56 #181818 centered, one line at y 2939; subline 18/28 #181818 centered in 615px at x 413 (2 lines), 93px space below. Content row starts y 3158: left column x 105-560. ITEMS STACK BY CONTENT with a 32px gap between item boxes (no minimum heights): the open item box is exactly its content (title 32 + 8 + copy + 16 + link 24 = 196 tall here) and its 4px #F9EDFF bar is exactly that tall; each closed item box is 16px top padding + its title (48 tall for one line, 80 for two). So the closed TITLES sit at y 3402 and y 3482 (row top +244 and +324); the stat block is BOTTOM-ALIGNED to the 600px image: its last line ends at row top + 600 (the image bottom), 24px from the column edge; it never pushes the row taller. Image 876x600 at x 622, radius 16, cut by the viewport at x 1440. DECORATION (stat or quote) box: x 105, padding-left 24 so its text starts at x 129, text column exactly 272px wide (max-width 65% of the 455 column minus the 24 padding). Never let a stat description or quote run wider than 272px
- phone: y 2490-3686, padding 36. Eyebrow "KNOWLEDGE" 14/17.5 700 caps at x 16; H2 28/34 #181818 left-aligned (2 lines); subline 18px left; items with the 4px bar at x 16 and text at x 44 (24px between items); stat 48px (Poppins 600, -0.012em) in solid #9602C7 (no gradient) with an 18px #181818 description; then the image 359x246 radius 8 at x 16. PHONE SPACING (measured 2026-10-30): band padding 36 top and bottom; eyebrow at band top + 36, H2 32px below the eyebrow's bottom (H2 box has 8px bottom padding); subline box has 48px bottom padding; each item has 24px bottom margin and closed items 24px top padding; the open item is title 24/32 + copy + link; the decoration (stat or quote) follows the last item with 24px (stat) or 16px (quote) top padding and 24px left padding (text at x 40, 299 wide; quote logo then 8px gap); the image (359x246) starts 32px below the decoration; 36px band padding after the image
- anatomy:
  - Subline (exact copy, 2 lines centered in 615px at 1440): "Get access to every file, decision, and conversation, so you can build on past work instead of recreating it."
  - Items in order: "Meet Slackbot: AI for the whole team" (open: title #9602C7 24/32, copy 18/28 #181818 "Slackbot knows your whole business and coordinates work across every connected app and agent. Now it works in channels too, so one person's answer becomes the whole team's.", link "Learn more about Slackbot" with arrow), "One search to rule them all.", "Slack CRM: the new conversational CRM" (closed: #181818 titles only)
  - Each item has a 4px #F9EDFF bar on its left edge (x 105-108), as tall as its text; text starts at x 133
  - Decoration: stat: "5 hours" / "average time saved weekly with Slackbot" + superscript 1. Desktop stat text is gradient-filled: linear-gradient(#481A54 0%, #730394 35.2%, #9602C7 80%, #D17DFE 100%) clipped to the text; number 64/64, description 24/32, Avant Garde (Poppins 600). In 272px the description breaks exactly as "average time saved" / "weekly with Slackbot" (2 lines, 64 tall)
  - Image: carousel-img-slackbot-multiplayer.png (1095x750 transparent PNG, a Slack window with an aubergine sidebar)
- components:
  - carousel_item
  - text_link

**Feature carousel 2 (People): Let your people connect like people**
- summary: Centered 50px head and subline, then a three-item accordion with a purple open title on the left and a large product screenshot bleeding off the right edge
- ground: #FFFFFF
- desktop: y 3854-4865, padding-top 96. H2 50/56 #181818 centered, one line at y 3950; subline 18/28 #181818 centered in 615px at x 413 (2 lines), 93px space below. Content row starts y 4169: left column x 105-560. ITEMS STACK BY CONTENT with a 32px gap between item boxes (no minimum heights): the open item box is exactly its content (title 32 + 8 + copy + 16 + link 24 = 140 tall here) and its 4px #F9EDFF bar is exactly that tall; each closed item box is 16px top padding + its title (48 tall for one line, 80 for two). So the closed TITLES sit at y 4357 and y 4437 (row top +188 and +268); the quote block is BOTTOM-ALIGNED to the 600px image: its last line ends at row top + 600 (the image bottom), 24px from the column edge; it never pushes the row taller. Image 876x600 at x 622, radius 16, cut by the viewport at x 1440. DECORATION (stat or quote) box: x 105, padding-left 24 so its text starts at x 129, text column exactly 272px wide (max-width 65% of the 455 column minus the 24 padding). Never let a stat description or quote run wider than 272px
- phone: y 3686-4880, padding 36. Eyebrow "PEOPLE" 14/17.5 700 caps at x 16; H2 28/34 #181818 left-aligned (2 lines); subline 18px left; items with the 4px bar at x 16 and text at x 44 (24px between items); quote with logo; then the image 359x246 radius 8 at x 16. PHONE SPACING (measured 2026-10-30): band padding 36 top and bottom; eyebrow at band top + 36, H2 32px below the eyebrow's bottom (H2 box has 8px bottom padding); subline box has 48px bottom padding; each item has 24px bottom margin and closed items 24px top padding; the open item is title 24/32 + copy + link; the decoration (stat or quote) follows the last item with 24px (stat) or 16px (quote) top padding and 24px left padding (text at x 40, 299 wide; quote logo then 8px gap); the image (359x246) starts 32px below the decoration; 36px band padding after the image
- anatomy:
  - Subline (exact copy, 2 lines centered in 615px at 1440): "Slack's conversational UI makes collaborating more approachable, whether you're working with a colleague or an agent."
  - Items in order: "It all starts with a channel." (open: title #9602C7 24/32, copy 18/28 #181818 "Channels are flexible, transparent spaces for working with your team, AI assistants, and agents.", link "Learn about channels" with arrow), "When talking is easier than typing…", "Bring conversations out of the inbox." (closed: #181818 titles only)
  - Each item has a 4px #F9EDFF bar on its left edge (x 105-108), as tall as its text; text starts at x 133
  - Decoration: quote: Anthropic logo (quote-logo-anthropic.png, 140x17), "Slack has been essential to our growth, our speed, and our ability to stay aligned as we scale" in 18px 300 italic, then "Kate Jenson," 700 + " Head of Americas, Anthropic" 300, 16px. Measure 272px: the quote sets in exactly 3 lines ("Slack has been essential to our" / "growth, our speed, and our ability" / "to stay aligned as we scale") with curly quotes “ ”, then the attribution 12px below on 2 lines ("Kate Jenson, Head of Americas," / "Anthropic"); logo above the quote, 16px gap
  - Image: carousel-img-people-1.png (1095x750 transparent PNG, a Slack window with an aubergine sidebar)
- components:
  - carousel_item
  - text_link

**Feature carousel 3 (Process): Manage all your work from one place**
- summary: Centered 50px head and subline, then a three-item accordion with a purple open title on the left and a large product screenshot bleeding off the right edge
- ground: #FFFFFF
- desktop: y 4865-5876, padding-top 96. H2 50/56 #181818 centered, one line at y 4961; subline 18/28 #181818 centered in 615px at x 413 (2 lines), 93px space below. Content row starts y 5180: left column x 105-560. ITEMS STACK BY CONTENT with a 32px gap between item boxes (no minimum heights): the open item box is exactly its content (title 32 + 8 + copy + 16 + link 24 = 140 tall here) and its 4px #F9EDFF bar is exactly that tall; each closed item box is 16px top padding + its title (48 tall for one line, 80 for two). So the closed TITLES sit at y 5368 and y 5448 (row top +188 and +268); the stat block is BOTTOM-ALIGNED to the 600px image: its last line ends at row top + 600 (the image bottom), 24px from the column edge; it never pushes the row taller. Image 876x600 at x 622, radius 16, cut by the viewport at x 1440. DECORATION (stat or quote) box: x 105, padding-left 24 so its text starts at x 129, text column exactly 272px wide (max-width 65% of the 455 column minus the 24 padding). Never let a stat description or quote run wider than 272px
- phone: y 4880-5988, padding 36. Eyebrow "PROCESS" 14/17.5 700 caps at x 16; H2 28/34 #181818 left-aligned (2 lines); subline 18px left; items with the 4px bar at x 16 and text at x 44 (24px between items); stat 48px (Poppins 600, -0.012em) in solid #9602C7 (no gradient) with an 18px #181818 description; then the image 359x246 radius 8 at x 16. PHONE SPACING (measured 2026-10-30): band padding 36 top and bottom; eyebrow at band top + 36, H2 32px below the eyebrow's bottom (H2 box has 8px bottom padding); subline box has 48px bottom padding; each item has 24px bottom margin and closed items 24px top padding; the open item is title 24/32 + copy + link; the decoration (stat or quote) follows the last item with 24px (stat) or 16px (quote) top padding and 24px left padding (text at x 40, 299 wide; quote logo then 8px gap); the image (359x246) starts 32px below the decoration; 36px band padding after the image
- anatomy:
  - Subline (exact copy, 2 lines centered in 615px at 1440): "Automate daily stand-ups, project updates, and approvals so your team can focus on growth instead of guesswork."
  - Items in order: "Anyone can automate in Slack." (open: title #9602C7 24/32, copy 18/28 #181818 "By click or by code, Slack makes it easy for anyone to build time-saving automations of their own.", link "Learn about workflows" with arrow), "Manage projects and tasks.", "A simpler way to get started." (closed: #181818 titles only)
  - Each item has a 4px #F9EDFF bar on its left edge (x 105-108), as tall as its text; text starts at x 133
  - Decoration: stat: "35%" / "increase in time saved due to automations for Slack users" + superscript 2. Desktop stat text is gradient-filled: linear-gradient(#481A54 0%, #730394 35.2%, #9602C7 80%, #D17DFE 100%) clipped to the text; number 64/64, description 24/32, Avant Garde (Poppins 600). In 272px the description takes 3 lines (96 tall): "increase in time saved" / "due to automations for" / "Slack users"
  - Image: carousel-img-process-2.png (1095x750 transparent PNG, a Slack window with an aubergine sidebar)
- components:
  - carousel_item
  - text_link

**Feature carousel 4 (Platform): Secure. Scaleable. Silo-free.**
- summary: Centered 50px head and subline, then a three-item accordion with a purple open title on the left and a large product screenshot bleeding off the right edge
- ground: #FFFFFF
- desktop: y 5876-6910, padding-top 96. H2 50/56 #181818 centered, one line at y 5972; subline 18/28 #181818 centered in 615px at x 413 (3 lines), 93px space below. Content row starts y 6191: left column x 105-560. ITEMS STACK BY CONTENT with a 32px gap between item boxes (no minimum heights): the open item box is exactly its content (title 32 + 8 + copy + 16 + link 24 = 140 tall here) and its 4px #F9EDFF bar is exactly that tall; each closed item box is 16px top padding + its title (48 tall for one line, 80 for two). So the closed TITLES sit at y 6379 and y 6459 (row top +188 and +268); the quote block is BOTTOM-ALIGNED to the 600px image: its last line ends at row top + 600 (the image bottom), 24px from the column edge; it never pushes the row taller. Image 876x600 at x 622, radius 16, cut by the viewport at x 1440. DECORATION (stat or quote) box: x 105, padding-left 24 so its text starts at x 129, text column exactly 272px wide (max-width 65% of the 455 column minus the 24 padding). Never let a stat description or quote run wider than 272px
- phone: y 5988-7131, padding 36. Eyebrow "PLATFORM" 14/17.5 700 caps at x 16; H2 28/34 #181818 left-aligned (2 lines); subline 18px left; items with the 4px bar at x 16 and text at x 44 (24px between items); quote with logo; then the image 359x246 radius 8 at x 16. PHONE SPACING (measured 2026-10-30): band padding 36 top and bottom; eyebrow at band top + 36, H2 32px below the eyebrow's bottom (H2 box has 8px bottom padding); subline box has 48px bottom padding; each item has 24px bottom margin and closed items 24px top padding; the open item is title 24/32 + copy + link; the decoration (stat or quote) follows the last item with 24px (stat) or 16px (quote) top padding and 24px left padding (text at x 40, 299 wide; quote logo then 8px gap); the image (359x246) starts 32px below the decoration; 36px band padding after the image
- anatomy:
  - Subline (exact copy, 3 lines centered in 615px at 1440): "Our flexible, open platform is purpose-built for bringing the best agents and AI to every business, and can be tailored to fit however your teams work best."
  - Items in order: "From Atlassian to Zoom." (open: title #9602C7 24/32, copy 18/28 #181818 "Google Drive. ChatGPT. Vercel. Box. Asana. Workday. You name it, it works in Slack.", link "See all integrations" with arrow), "Customize Slack to fit your needs.", "Work without worry." (closed: #181818 titles only)
  - Each item has a 4px #F9EDFF bar on its left edge (x 105-108), as tall as its text; text starts at x 133
  - Decoration: quote: Vercel logo (quote-logo-vercel.png, 90x18), "Work starts in conversation. That's why we see Slack as the natural place to build our agents." italic, then "Guillermo Rauch," 700 + " CEO, Vercel" 300. Measure 272px: the quote sets in 3 lines with curly quotes “ ”, attribution 12px below
  - Image: carousel-img-platform-1.png (1095x750 transparent PNG, a Slack window with an aubergine sidebar)
- components:
  - carousel_item
  - text_link

**Customer stories**
- summary: Centered 32px head with a blue link, then a row of four rounded video cards: one wide open card and three narrow dimmed ones; a centered button pair below
- ground: #FFFFFF
- desktop: y 6910-7615, padding-top 80. H2 "The most innovative companies run their business in Slack" 32/40 centered, ONE line (white-space: nowrap; about 890px wide with the stand-in) at y 6990; "See all customer stories" 16/24 700 #0B5CAB with an 18px arrow at y 7038, centered, no underline. Cards y 7110, 328 tall, radius 16: open card 580 wide at x 120, closed cards 183 wide at x 724 / 931 / 1138 (24 gap). Buttons y 7486: GET STARTED 178x57 at x 523, FIND YOUR PLAN 208x57 at x 709; 72 below
- phone: Cards and heading hidden. Only GET STARTED and FIND YOUR PLAN, stacked full width (359x57) at y 7211 and 7284
- anatomy:
  - Open card: photo cv-background-anthropic.jpg (cover) with a bottom-dark gradient (rgba(24,24,24,0) at 22.75% to about 0.5 at 57%, darker below), the white Anthropic wordmark 136x15 at x 144, y 7252, the line "Slack reimagines work for Anthropic at the speed of AI" 24/32 700 white at x 144, y 7350 (2 lines, 407 wide), and a white 100x96 play button (play-button.png) at x 596, y 7334
  - Closed cards: poster photos (poster-box-web-trailer.jpg, cv-background-notion.jpg, poster-rivian-web-trailer.jpg) under a #000000 50% overlay with the white box, Notion and RIVIAN logos centered near the top
  - Videos play on hover only (animation only); at rest the open card shows its photo
- components:
  - button_primary
  - button_secondary

**Stats band: We're in the business of growing businesses**
- summary: Full-bleed #481A54 band with a centered 32px white head and three huge white stats with two-line labels
- ground: #481A54
- desktop: y 7615-8037 (422 tall). Band padding 48 top / 32 bottom, BUT the H2 itself has padding 32 top / 42 bottom: so the heading TEXT sits at y 7695 (80px below the band top), 32/40 white centered, one line. Stat row starts y 7777 (the cards block has padding 0 72 48). Three 314-wide columns at x 177 / 563 / 949: number 80/84 white centered, top at y 7777; label box at y 7861 with 16px top padding, so label TEXT starts at y 7877 (16px clear gap under the number), 24/32 white centered in 180px (2 lines each: "of users seeing" / "positive ROI¹", "ROI over" / "three years³", "in collaboration" / "gains³"). Labels end y 7941; 48 + 32 = 80px below them to the band bottom at 8037
- phone: y 7341-8225 (884). Band padding 48 top / 32 bottom. H2 has 96px top padding (32/40 white centered, 2 lines, 359 wide). Cards block: 16px top / 48px bottom padding. Each stat: 32px top padding, number 80/84 (84 tall), 8px gap, label 24/32 one line with 16px top padding and 16px bottom margin. So stat number tops are 188px apart
- anatomy:
  - Print "94%", "312%", "$51M": the values the count-up ends on and the claim in messaging.proof_points (a screenshot taken mid-animation can show 93% and 310%). Superscripts: ¹ on the first label, ³ on the other two
  - The % is set at the same 80px size as the digits
  - Labels are Avant Garde (Poppins 600), not the Sans face
- components:

**Proof: Millions of people love working in Slack**
- summary: Centered 32px head; left half four big black usage stats, right half a G2 claim and six G2 badges, split by a 1px gray rule
- ground: #FFFFFF
- desktop: y 8037-8765. H2 32/40 centered, its text at y 8101 (64 top padding). Left half x 105-720 (padding 16 64): rows at y 8205 / 8333 / 8461 / 8589 (128 pitch), number 64/64 right-aligned in a 164px box at x 169 (Poppins 600 at -0.012em: the digits must look as tall and wide as possible; never tighten them), label 16/22.9 at x 349. Right half x 720-1336, 1px #C9C9C9 left border, padding 16 64: "Don't just take our word for it." 24/32 700 at x 785, y 8205; "Slack is a leader in over 290 G2 market reports." 18/28 + superscript 6 at y 8253; badges 104x120 in 3 columns x 814 / 976 / 1138, rows y 8313 and 8465
- phone: y 8225-9627. H2 32/40 centered 2 lines; stats stacked and centered (number 48/48, label 16/22.9, 24px apart); then a 1px #000000 top rule and the G2 block centered: head 24/32, sub 18/28, badges 104x119 at x 40 / 143 / 247, rows y 9236 and 9387. Phone stat stack (measured 2026-10-30): number 48/48 (box 48 tall) then 16px to the label 16/22.9, then 64px from the label's last line to the next number (pitch 151 for one-line labels, 173 for two-line)
- anatomy:
  - Stats: "1B+" Messages sent daily 4; "4M" Slack Connect users working directly with external teams each week 5; "3M" Daily Workflows 5; "1.7M" Apps actively used each week 5
  - Badges in order: Best Results, Best Usability, Highest User Adoption; Leader Small Business, Leader Mid-Market, Leader Enterprise (all FALL 2026)
- components:

**Resources: Your Slack deep dive starts here**
- summary: Centered 32px head and four shadowed resource cards, then six footnotes
- ground: #FFFFFF
- desktop: y 8765-9647, padding 80. H2 32/40 centered at y 8845. Cards 285x420 at x 105 / 420 / 735 / 1050, y 8925. Footnotes y 9400-9567: six lines 16px #000000, 25px pitch, superscript numbers first
- phone: y 9627-10670, padding 48. H2 28/35 centered; one 285x420 card centered (x 53) in a carousel with four 13px dots (#730394 active, #000000 20%) at y 10248; footnotes 16px at x 16
- anatomy:
  - Card 1: promo-promo-state-of-work.jpg; "Report"; "AI Agents are the Catalyst for a Limitless Workforce"; GET THE REPORT
  - Card 2: promo-updated-img-promo-1.jpg; "Webinar"; "Unlock Agentic Productivity for Every Employee"; WATCH NOW
  - Card 3: promo-compete-teams-promo.jpg; "Future of work"; "The Cost of Business as Usual in the AI Era."; LEARN MORE
  - Card 4: promo-promo-10-ways.jpg; "Guide"; "10 Ways to Replace Ineffective Meetings with Slack"; READ MORE
  - Footnotes: 1 Salesforce Internal; 2 FY24 Customer Success Metrics. Base: Total n = 247-1,696, Slack internal data.; 3 2026 Forrester Total Economic Impact Study; 4 FY26 Earnings Remarks; 5 FY25 Slack internal data, product usage analysis.; 6 G2 Fall 2026 market reports for work management, workflow management, project collaboration software, enterprise search, knowledge base, employee Q&A, audio conferencing, business instant messaging, unified workspaces and more.
- components:
  - resource_card

**CTA band: See all you can accomplish in Slack**
- summary: Full-bleed #481A54 band, straight edges, one centered 50px white line and two buttons
- ground: #481A54
- desktop: y 9647-10031 (384 tall), padding 80. Headline 50/56 700 white centered, one line (856 wide) at y 9766; buttons y 9854: GET STARTED (white, #730394 text) 178x57 at x 520, REQUEST A DEMO (transparent, 1px white inset ring) 214x57 at x 706. Top and bottom edges are straight: no curve, no shape
- phone: y 10670-11063, padding 80. Headline 32/35.84 centered, 2 lines; buttons stacked 359x57 at y 10853 and 10926
- anatomy:
  - Same aubergine as the dark AI and stats bands; nothing else in the band
- components:
  - button_on_dark_primary
  - button_on_dark_secondary

**Footer**
- summary: White footer: Change Region left and six black social icons right, a hairline, the octothorpe and five link columns, a hairline, then Download Slack with legal links left and the copyright right
- ground: #FFFFFF
- anatomy:
  - Top row y 10031-10155 (padding 56/48): globe icon 18px + "Change Region" 16px 700 #1D1D1D + 8x5 chevron at x 105, y 10087; social icons 18px black at x 1107, 1149, 1191, 1233, 1275, 1317 (24px apart) in order LinkedIn, Instagram, Facebook, X, YouTube, TikTok (assets social-*.svg)
  - 1px #EDEAED rule at y 10155, then padding 48/40
  - Octothorpe mark (nav-logo.svg) 54x54 at x 105, y 10204
  - Columns 176 wide at x 343 / 547 / 751 / 955 / 1159; heads 14/21.8 700 caps +0.8px #1D1D1D at y 10204; links 14/21.8 #5C5C5C, first at y 10239, 34px pitch (wrapped links take 2 lines)
  - Column 1: PRODUCT: Watch Demo, Pricing, Paid vs. Free, Accessibility, Featured Releases, Changelog, Status; then (y 10535) WHY SLACK?: Slack vs. Email, Slack vs. Teams, Enterprise, Small Business, Productivity, Task Management, Scale, Trust
  - Column 2: FEATURES: Channels, Slack Connect, Workflow Builder, Messaging, Huddles, Canvas, Lists, Clips, Apps & Integrations, File Sharing, Slack AI, Agentforce, Enterprise Search, Security, Enterprise Key Management, Slack Atlas, See all features
  - Column 3: SOLUTIONS: Frontline, Engineering, IT, Customer Service, Sales, Project Management, Marketing, Security, Manufacturing, Auto & Energy, Technology, Media, Financial Services, Retail, Public Sector, Education, Health & Life Sciences, See all solutions
  - Column 4: RESOURCES: Help Center, What’s New, Resources Library, Slack Blog, Community, Customer Stories, Events, Developers, Partner Program, Partner Offers, Slack Marketplace, Slack Certified, Run Effective Meetings, Collaborate Externally, Manage Projects Efficiently
  - Column 5: COMPANY: About Us, News, Media Kit, Brand Center, Careers, Swag Store, Engineering Blog, Design Blog, Contact Us
  - 1px #EDEAED rule at y 10875, then padding 32
  - Legal row y 10912: "Download Slack" 14px 600 #0B5CAB + 19x16 download icon (nav-download.svg) at x 105; then "Privacy", "Terms", "Cookie Preferences", "Your Privacy Choices" + 24x11 blue toggle icon (nav-ccpa.svg), 14px #5C5C5C at x 233 / 294 / 349 / 505
  - Copyright right-aligned (x 832-1336, y 10911), 14/20 #5C5C5C, 2 lines: "©2026 Slack Technologies, LLC, a Salesforce company. All rights reserved." / "Various trademarks held by their respective owners."
  - No address or phone number on the page
- phone: y 11063-11933. Change Region centered at y 11111; six social icons centered in a row at y 11180 (x 81-285); 1px #EDEAED rule; six collapsed rows PRODUCT, WHY SLACK?, FEATURES, SOLUTIONS, RESOURCES, COMPANY (14px 700 caps, 55px pitch from y 11247) each with a right chevron at x ~375; rule; octothorpe 40x40 at x 16, y 11605; Download Slack at y 11671; "Privacy", "Terms", "Cookie Preferences" on one row at y 11719; "Your Privacy Choices" at y 11771; copyright 14/20 #5C5C5C, 3 lines at y 11841

**On dark grounds**
- secondary button: transparent, #FFFFFF text, inset 0 0 0 1px #FFFFFF ring (REQUEST A DEMO on the CTA band)
- primary button: #FFFFFF fill, #730394 text
- link: no text links on dark bands; the Play animation label is 14/20 #FFFFFF
- muted text: none: all text on #481A54 is #FFFFFF
- hairline: rgba(255,255,255,0.25) rings (render #76537F) on the feature pills
- logo: no logo on dark bands; the white lockup (slack-salesforce-logo-nav-white) exists but is unused on this page

## Components

- **button primary** (observed): fill #730394, text #FFFFFF, radius 4, height 57, padding x 40, font size 14, weight 700, letter spacing 0.798px, case uppercase, use GET STARTED in the hero and after customer stories: 178x57, padding 19px 40px 20px, Salesforce Sans 700 14/18 caps (Open Sans 650). Phone: full content width (288 in the hero, 359 elsewhere), 57 tall, transition background, color, box-shadow 0.42s cubic-bezier(0.165, 0.84, 0.44, 1)
  - hover (observed): background-color #481A54
  - focus (observed): outline 2px dotted #730394, outline-offset 5px
- **button secondary** (observed): fill #FFFFFF, text #730394, ring #730394, radius 4, height 57, padding x 40, font size 14, weight 700, letter spacing 0.798px, case uppercase, use FIND YOUR PLAN: 226x57 in the hero (208 lower down), 8px right of the primary. Border is box-shadow inset 0 0 0 1px #730394 (no CSS border). The hero one ends with a 15x13 right arrow in #730394, 8px after the label
  - hover (observed): box-shadow inset 0 0 0 2px #730394
- **nav button primary** (observed): fill #730394, text #FFFFFF, radius 4, height 42, padding x 16, font size 14, weight 700, letter spacing 0.798px, case uppercase, use GET STARTED in the nav: 130x42 at x 1205, padding 12px 16px. Phone: 114x34 at x 220, padding 8px, plus inset 0 0 0 1.5px rgba(255,255,255,0.25)
- **nav button secondary** (observed): fill #FFFFFF, text #730394, ring #730394, radius 4, height 42, padding x 16, font size 14, weight 700, letter spacing 0.798px, case uppercase, use REQUEST A DEMO in the nav: 166x42 at x 1019, inset 1px #730394 ring, 20px left of GET STARTED. Hidden on phones
- **button on dark primary** (observed): fill #FFFFFF, text #730394, radius 4, height 57, padding x 40, font size 14, weight 700, letter spacing 0.798px, case uppercase, use GET STARTED on the #481A54 CTA band: 178x57
- **button on dark secondary** (observed): fill rgba(0,0,0,0), text #FFFFFF, ring #FFFFFF, radius 4, height 57, padding x 40, font size 14, weight 700, letter spacing 0.798px, case uppercase, use REQUEST A DEMO on the CTA band: 214x57, transparent with inset 0 0 0 1px #FFFFFF, 8px right of GET STARTED
- **hero tab pill** (observed): fill #FFFFFF, text #481A54, radius 48, height 38, padding x 18, font size 22, weight 700, use Five pills under the hero video in two centered rows (3 then 2), 12px apart both ways. Avant Garde 22px (Poppins 600), 4px 18px padding, 1px rgba(0,0,0,0.04) border, a 24px color icon 8px after the label. Active pill: #2E0039 fill, white text
- **dark feature pill** (observed): fill #481A54, text #FFFFFF, radius 32, height 52, padding x 16, font size 16, weight 700, use Five stacked 492x52 pills on the dark band, 24px apart (76px pitch): inset 0 0 0 1px rgba(255,255,255,0.25) ring (renders #76537F), 16/22 700 white, +0.2px tracking; New badge right-aligned inside (x+430). Phone: one card at a time (see the dark band)
- **badge new** (observed): fill #F9F0FF, text #730394, radius pill, height 24, padding x 10, font size 12, weight 700, use New (46x24) and New Feature (93x24): 12/16 700, padding 4px 10px
- **text link** (observed): fill rgba(0,0,0,0), text #0B5CAB, radius 0, height 28, font size 16, weight 700, use See all updates, Learn more about Slackbot, Learn about channels, Learn about workflows, See all integrations, See all customer stories, anatomy 16/24 700 #0B5CAB with a plain underline (text-decoration underline) and a 17x15 right-arrow icon in the same blue 8px after the text; the arrow is not underlined. See all customer stories has no underline
  - hover (observed): color #014486
- **carousel arrow** (observed): fill #FFFFFF, text #181818, radius pill, height 40, font size 16, weight 400, use What's new prev/next: 40x40 circles, 1px #C9C9C9 border, 8px apart, right-aligned at x 1247 and 1295; the prev arrow rests at 60% opacity
- **video control** (observed): fill #FFFFFF, text #730394, radius pill, height 32, font size 14, weight 400, use Pause animation (hero) and Play animation (dark band): 32px circle, 1px #C9C9C9 border (white at 90% with no border on the dark band) with a #730394 glyph, label 14/20 8px to the right (#444444 on white, #FFFFFF on dark)
- **whats new card** (observed): fill #FFFFFF, text #000000, radius 16, height 440, padding x 24, font size 24, weight 700, use 400x440, 1px #F3F3F3 border: image well 398x208 (#F9F0FF, radius 16 16 0 0, image cover), then 20px gap, New Feature badge, title 24/30 8px below, lede 16/24.9 8px below; copy padding 0 24px 16px. Phone: same 400px card at x -5 clipped by a 359px track (see What's new phone); copy at x 20
- **resource card** (observed): fill #FFFFFF, text #000000, radius 0, height 420, padding x 12, font size 24, weight 700, use 285x420, box-shadow 0 0 16px rgba(0,0,0,0.1), no border: image 261x184 inset 12px from the top and sides; meta label 14/18.2 #444444 8px below; title 24/30 700 (2-3 lines); CTA 14/18 700 caps #0B5CAB 12px from the left at y+387 and a 25x14 arrow (#1264A3 2px stroke) at x+245 on the same line
- **section tab** (observed): fill rgba(0,0,0,0), text #747474, radius 0, height 39, font size 16, weight 700, use Desktop only: four 307px-wide centered tabs (Knowledge, People, Process, Platform) in a 57px sticky strip (top 88px, rgba(255,255,255,0.5)), each with a 1px #E9E3EA rule 38px below its top. None active at rest
- **carousel item** (observed): fill rgba(0,0,0,0), text #181818, radius 0, height 48, font size 24, weight 700, use Feature-carousel list item: 4px #F9EDFF bar at the column's left edge as tall as the item text; text 28px right of the bar. Open item: title in #9602C7, 18/28 copy, a text link; closed items: title only in #181818, 16px top padding
- **pager dot** (observed): fill #730394, text #FFFFFF, radius pill, height 12, use Phone carousels: 12px dots 8px apart (13px on the dark band and resources), active solid, others at 20% (white at 32% on the dark band)

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| overshoot |  |  | Elements go a little past their final pose, then settle | published |
| follow-through |  |  | Objects stop at different times, each with its own inertia | published |
| title-reveal |  |  | Standalone titles slide up from a mask all at once; phrases slide up word by word with opacity; never character by character | published |
| cuts |  |  | Hard cuts or match cuts between scenes; no wipes or washouts | published |
| web-ui-loops |  |  | Web UI animations loop, one core action, MP4/GIF/WebM under about 3 MB, no audio | published |
| easing | not published |  | Easing is used when needed; Slack does not adhere to strict values | published |

## Icon tokens

Grid not published, stroke not published (published).

## Signature moves

### Shapes cut from the octothorpe

Where: containers behind photos and illustrations, patterns, backgrounds, motion fills.
Do: Two shapes from the logo: the pill (stretchable) and the chat bubble (scale proportionally only); the circle only when both are present or as a mask. Built on a grid, rotated only in 90-degree steps, solid by default, stroke sparingly. Images anchor to the bottom of a shape and may break out of its top or side. Monochrome patterns use a tint 1-2 steps from the ground..
Don't: Don't invent shapes, merge a pill with a bubble, overlap shapes, distort them or add shadows or bevels.

### Aubergine for the big moment

Where: dark bands, hero banners, the product sidebar in UI screens.
Do: Aubergine (#4A154B published; #481A54 on slack.com) carries the big brand moments with white text; horchata adds warmth. The aubergine product sidebar should feature in most UI screens..
Don't: No gradients made from brand colors; no secondary colors as text.

### The product is the hero image

Where: hero and feature bands.
Do: Accurate Slack UI at one of three fidelities (high, simplified, abstracted), with Lato, licensed JoyPixels emoji and approved personas. On slack.com the hero is an 800x548 product video with 8px corners; feature tabs pair a 24px purple headline with a product video..
Don't: No invented features; don't mix photo and illustrated personas in one UI.

## Messaging: rules

The brand center states a mission (simpler, more pleasant, more productive working lives) and two boilerplates. The 2026 homepage has moved the story to people and AI agents working together, with Slackbot as the coordinator, and backs it with a footnoted stats band.

Why it works: The mission is stable; the headline claim changes with the product era (digital HQ in 2021, agents in 2026).

|  |  |
|---|---|
| Mission | Make people's working lives simpler, more pleasant and more productive |
| Short boilerplate | Productivity platform: no-code automation, search and knowledge sharing, connected teams (paraphrase) |

- Lead with the people-and-agents claim on web pages; use the mission as the reason why
- Every stat carries its footnote source
- Slack is a Salesforce company and an independent brand: say both when it matters

Sources: https://web.archive.org/web/20240406034403/https://brand.slackhq.com/about-slack, https://slack.com/

## Voice: rules

The guide's voice is a friendly, intelligent coworker: clear, concise, human. It publishes five copy principles and a strict style sheet: sentence case, no Oxford comma, no ampersands, no headline periods, caps only for buttons and eyebrows. The homepage is shorter and more product-led, and ends many feature headlines with a period.

Why it works: Clarity is framed as courtesy: respecting the reader's time is the brand.

|  |  |
|---|---|
| Voice | Clear, concise, human |
| Copy principles | Don't make me think; Be approachable; Make it memorable; Respect our readers; Be compelling |
| Style | AP, Merriam-Webster |
| Homepage scope | slack.com 2026-10-29: product claims, CAPS buttons, footnoted stats |

- Sentence case for headlines, subheads, body and links
- Caps for buttons, eyebrows and jump links only
- Character never overwhelms content
- Delight when the moment is right; witty, not silly
- Emoji are frosting, never food
- Don't Title case or periods in brand-center headlines
- Don't Emoji in place of words
- Don't Abbreviations like DHQ IRL
- Don't Slack as a verb, plural or possessive

Do and don't:
- Do: "Bring conversations out of the inbox". Sentence case, no ampersand, plain words.
- Don't: "This Is Not How We Do Headlines at Slack.". Title case and a period: the guide's own don't.
- Do: "Send a Slack message". Slack as an adjective.
- Don't: "Just Slack me". Slack is never a verb.

Real examples, to look at on Slack's own pages (not for reuse):
- Enterprise web band: CAPS eyebrow, sentence-case headline, CAPS aubergine button: https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing

Sources: https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing, https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values, https://web.archive.org/web/20240415160102/https://brand.slackhq.com/emoji, https://slack.com/, https://slack.design/articles/slack-content-design-in-the-age-of-ai/

## Logo: rules

The logo is the four-color octothorpe, the slack name (set in Hellix Bold) and 'from Salesforce' with the cloud. Clear space is published two ways: the logo mark's width on each side (brand center) and at least one pill of the octothorpe (brand terms). A small horizontal logo exists for 50-90px widths; the small mark for 15-20px. slack.com's nav mark SVG now draws the octothorpe in brighter colors than the guide's four.

Why it works: Pentagram rebuilt the 2013 eleven-color mark on a grid so it reproduces cleanly at any size.

|  |  |
|---|---|
| Clear space | mark width each side; minimum one pill |
| Small logo | 50-90px wide |
| Small mark | 15-20px wide |
| Wordmark face | Hellix Bold |
| Lockup entity names | Hellix Regular |
| Backgrounds | white, black, aubergine |

- Clear space: the logo mark's width on each side (brand center); never less than one pill length (brand terms)
- Small logo: 50-90px wide; small mark: 15-20px wide
- Full-color logo on white, black or aubergine only; never on core-color grounds or low-contrast photos
- Stacked logo only where the horizontal won't fit
- Paired Slack + Salesforce lockup for co-presenting; Salesforce-first when Salesforce or a third party leads
- Partner lockups: Slack left or top, a vertical rule between, equal visual size
- No ads, apparel or merchandise without approval
- Don't Alter, crop, skew, outline, distort or recreate
- Don't Show the Slack name without the mark
- Don't Recolor or shuffle the octothorpe colors
- Don't Rotate the mark
- Don't Add effects, shadows or animation (outside approved animations)
- Don't Change transparency

Do and don't:
- Do: "Full-color logo on aubergine". White, black or aubergine grounds only.
- Don't: "Full-color logo on Slack yellow". Not on core-color grounds.

Real examples, to look at on Slack's own pages (not for reuse):
- Clear space around the Slack from Salesforce logo: https://web.archive.org/web/20240417082758/https://brand.slackhq.com/logo
- Full-color logo on aubergine: https://web.archive.org/web/20240417082758/https://brand.slackhq.com/logo
- Full-color logo on black: https://web.archive.org/web/20240417082758/https://brand.slackhq.com/logo
- Logo mark in a notification on aubergine: https://web.archive.org/web/20240417082758/https://brand.slackhq.com/logo

Sources: https://web.archive.org/web/20240417082758/https://brand.slackhq.com/logo, https://web.archive.org/web/20240223223946/https://brand.slackhq.com/brand-architecture, https://slack.com/terms-of-service/slack-brand, https://slack.com/media-kit

## Color: rules

Eight core colors: aubergine and horchata lead, the four logo colors are go-to accents, black and white are text. An extended tonal scale runs light to dark for each core hue; pairings sit 1-2 steps apart. Fourteen secondary colors serve photography and illustration and never carry text. Every swatch publishes HEX, RGB, CMYK and PMS plus its approved text color. slack.com uses its own purples (#481A54, #730394, #9602C7) and #181818 text.

Why it works: Aubergine is the most recognizable Slack color; fixed text pairings keep every combination accessible.

|  |  |
|---|---|
| Aubergine | #4A154B, PMS 2623 C, white text |
| Horchata | #F4EDE4, PMS 7604 C at 80%, black text |
| Black | #1D1C1D |
| Logo colors | #36C5F0, #2EB67D, #ECB22E, #E01E5A |

- Lead with aubergine for big brand moments; horchata for warmth
- Text only black or white, as paired in the guide
- Tonal pairings 1-2 steps apart on the extended scale
- A few extra colors, not many
- Don't Secondary colors as text
- Don't Overly muted combinations
- Don't Gradients made from brand colors
- Don't Low-contrast text pairings
- Don't Pairings 2+ steps apart for background shapes

Not published: Extended core scale hex values (shown only as an image); A color ratio; Grays for UI or muted text.

Do and don't:
- Do: "Where work happens". Aubergine for the big moment, white text.
- Don't: "Where work happens". Secondary colors (here Teal) are never text.

Real examples, to look at on Slack's own pages (not for reuse):
- Extended core palette, light to dark: https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color
- Do: shape pairing 1-2 steps apart: https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color
- Don't: pairing 2+ steps apart: https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color
- Event wall in Slack blue with personas and channel pills: https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color

Sources: https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color, https://slack.com/

## Typography: rules

The 2024 brand center set headlines in Larsseit Bold (H1 36/41, H2 24/30, H3 18/22.5, H4 12/15, 125% leading) and body in Slack Circular (10/14, 140%); Larsseit Thin Italic for pull quotes; Lato for product UI. The 2024 presentations page moved slides to Salesforce's Avant Garde Demi and Salesforce Sans, and slack.com now renders Salesforce-Avant-Garde and Salesforce-Sans throughout.

Why it works: Typeface alignment with Salesforce lets slides and pages move between the two brands.

|  |  |
|---|---|
| Display (site) | Salesforce Avant Garde 700, 64/68 hero |
| Body (site) | Salesforce Sans 400, 18/28 |
| Headline (2024 guide) | Larsseit Bold |
| Body (2024 guide) | Slack Circular |
| Product UI | Lato |
| Japanese | Tazugane; Noto Sans in UI |

- Sentence case; never all lowercase
- All caps for eyebrows and buttons only
- Optical kerning for print and embedded collateral
- Localize: Japanese 15% smaller, Russian about 10%, Romance and German 10%
- Inter for Google Slides, Helvetica Neue for email
- Don't Effects on type
- Don't Low-contrast text
- Don't Avant Garde for body copy
- Don't Salesforce Sans for slide titles

Do and don't:
- Do: "All your people and AI agents working together". Display face, sentence case, tight leading.
- Don't: "all your people and ai agents". Never all lowercase, never the body face for a headline.

Real examples, to look at on Slack's own pages (not for reuse):
- Banner: Larsseit headline on aubergine with the lockup line: https://web.archive.org/web/20240415160055/https://brand.slackhq.com/typography
- Print ad: horchata panels, aubergine headline, big stat numerals, illustrated people: https://web.archive.org/web/20240415160055/https://brand.slackhq.com/typography
- Lato in product UI: https://web.archive.org/web/20240415160055/https://brand.slackhq.com/typography

Sources: https://web.archive.org/web/20240415160055/https://brand.slackhq.com/typography, https://web.archive.org/web/20240617065201/https://brand.slackhq.com/presentations, https://slack.com/

## Iconography: rules

Two libraries, brand and product, in black or white only, placed on core or secondary grounds, inside brand shapes or circles. Always paired with copy. 'Icons are nuts and bolts; emoji are bells and whistles.'

Why it works: Icons explain; emoji and illustration add personality, so icons stay plain.

- Black or white only
- High-contrast ground from core or secondary palette
- Always with copy
- Use the library
- Don't Recolor icons
- Don't Icons outside the approved sets
- Don't Disproportionate scaling that changes stroke weight
- Don't Icons as decoration

Real examples, to look at on Slack's own pages (not for reuse):
- Brand icon set: https://web.archive.org/web/20240415164202/https://brand.slackhq.com/icons
- Product icon set: https://web.archive.org/web/20240415164202/https://brand.slackhq.com/icons

Sources: https://web.archive.org/web/20240415164202/https://brand.slackhq.com/icons

## Illustration: rules

Bold, dimensional, elevated and unexpected: isometric objects shaded with tints, shades and black shadows; people of many skin tones with vibrant hair and clothes. Illustrations must serve education, acknowledgement, clarity or humanity, never decoration; the library is gated for that reason.

Why it works: Restricting illustration to a purpose keeps it from becoming wallpaper.

- Isometric construction
- Shadows set in black, no larger than 10% of the object
- Core and secondary palettes with tints and shades
- Multiple skin tones when several people appear
- Logo may take the illustration's perspective, nothing more
- Don't Strokes or outlines
- Don't Transparency or overlays
- Don't Gradients on objects or backgrounds
- Don't Patterns or textures
- Don't Text inside illustrations
- Don't Exaggerated, cartoonish anatomy

Real examples, to look at on Slack's own pages (not for reuse):
- Illustration hero: https://web.archive.org/web/20240415161304/https://brand.slackhq.com/illustration
- Isometric objects: https://web.archive.org/web/20240415161304/https://brand.slackhq.com/illustration
- People: https://web.archive.org/web/20240415161304/https://brand.slackhq.com/illustration
- Object construction, final step: https://web.archive.org/web/20240415161304/https://brand.slackhq.com/illustration

Sources: https://web.archive.org/web/20240415161304/https://brand.slackhq.com/illustration

## Photography: rules

Three styles: personas on secondary-color grounds, simple still life with sharp shadows, and calm lifestyle scenes in natural light. The aim is relatable, aspirational and delightful; clear, concise and human like the voice.

Why it works: Simple, well-lit pictures read the same at a glance as the copy.

- Personas on secondary-palette grounds, confident and diverse
- Still life: simple ground, clear focal point, everything in focus, sharp shadows
- Lifestyle: about people, not product; collaboration and calm; natural light
- Don't Busy frames or cropped subjects
- Don't Low contrast
- Don't Washed-out light or lens flares
- Don't Fuzzy shadows
- Don't Moody or unnatural filters
- Don't Staged, unengaged people

Real examples, to look at on Slack's own pages (not for reuse):
- Persona reference: https://web.archive.org/web/20240223225521/https://brand.slackhq.com/photography
- Still life reference: https://web.archive.org/web/20240223225521/https://brand.slackhq.com/photography
- Lifestyle reference: https://web.archive.org/web/20240223225521/https://brand.slackhq.com/photography

Sources: https://web.archive.org/web/20240223225521/https://brand.slackhq.com/photography

## Motion: rules

Engaging, purposeful, clear, delightful. Staging, overshoot, follow-through and anticipation; easing used when needed, with no strict values. Brand shapes animate as accents, transitions and fills. Titles slide up from a mask; phrases word by word; never letter by letter. Hard or match cuts only.

Why it works: Motion directs attention; 'playful, not silly' keeps it professional.

- Animate the logo only with the provided looping or non-looping versions
- Smears, not motion blur, in 2D
- Give viewers time to read text twice aloud
- 3D: rounded, stylized, 135-300mm focal length
- Don't Flashy wipes
- Don't Character-by-character text
- Don't Motion blur in 2D
- Don't Animating characters without experience

Real examples, to look at on Slack's own pages (not for reuse):
- Looping logo animation: https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion
- Title reveal: https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion
- Overshoot: https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion

Sources: https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion

## Interface and layout: rules

slack.com at 1440: a 1230px content column (105px margins), a centered hero with a 64px headline, two buttons and an 800px product video; then an aubergine feature band, a three-up news row, three tabbed feature sections with product video, a customer row, an aubergine stats band, G2 badges, a four-up resource row and an aubergine sign-up band before the footer. Phones run 16px margins. The brand center publishes no grid; brand shapes sit on a grid by default.

Why it works: Product video does the explaining, so the layout stays a calm column.

|  |  |
|---|---|
| Container | 1230px at 1440 (observed) |
| Margins | 105 desktop / 16 phone (observed) |
| Hero top padding | 104px (observed) |

- Brand shapes on a grid, 90-degree rotations only
- Images anchored to the bottom of their shape
- Aubergine bands punctuate a white page

Sources: https://slack.com/, https://web.archive.org/web/20240524235353/https://brand.slackhq.com/brand-shapes

## Rules: rules

The public rules are trademark law (brand terms on slack.com) plus the 2024 brand center, now offline. Third parties may not imitate Slack's look and feel, colors, icons or typefaces; most logo use needs a license.

Why it works: Slack protects its trade dress: partners describe integration in words, not in Slack's visuals.

- Approval from the brand team for any lockup
- US: ® on the most prominent use plus the trademark line; elsewhere no ®
- Copyright line right-justified at the bottom, never under 7pt
- Disclaimer text at least 15pt and 80% opacity when required
- Don't Slack in domains, trademarks or search ads without approval
- Don't Screenshots with identifiable people or third-party content
- Don't Altered screenshots except resizing
- Don't Slack marks on merchandise

Sources: https://slack.com/terms-of-service/slack-brand, https://slack.com/media-kit, https://web.archive.org/web/20240223223946/https://brand.slackhq.com/brand-architecture

## Campaigns

### Say hello, new logo: the Pentagram identity (2019)

Slack replaced its 2013 eleven-color octothorpe (which needed an exact 18-degree rotation and a white ground) with a simpler four-color mark built on a grid, with Michael Bierut and Pentagram and the in-house team.

How the system shows: Pentagram split the mark into a speech bubble and a lozenge (pill) that became the brand shapes for icons, illustration and advertising.
Why it works: Kept the equity of the hash that starts every channel name while making it reproducible at any size and on any ground.
Channels: logo, app icons, website, advertising, brand system. Source: https://slack.com/blog/news/say-hello-new-logo

### Your digital HQ (2021)

Salesforce and Slack positioned Slack as every company's digital HQ, connecting employees, customers and partners, at Dreamforce 2021. The brand center's type sample still reads 'Slack is your digital HQ'.

How the system shows: Brand center event wall: Slack blue ground, personas in circles linked by dotted lines, channel-name pills in core colors (color page applications).
Why it works: Turned a chat app into a place: the HQ metaphor sold Slack as where work lives when offices emptied.
Channels: Dreamforce, press, web, events. Source: https://www.salesforce.com/news/press-releases/2021/09/21/new-salesforce-and-slack-innovations-empower-companies-to-build-their-digital-hq

### Agent-first workspace: Slackbot for the agentic enterprise (2026)

Slack framed itself as an agentic work operating system with Slackbot as the single conversational interface to partner agents (Claude, Cursor, Docusign, Linear and others). The homepage hero now reads 'All your people and AI agents working together'. A product launch narrative rather than an ad campaign.

How the system shows: Homepage: product video of Slackbot in an aubergine window, purple CTAs, agent names in the integrations tab.
Why it works: Positions the existing channel model as the home for agents instead of a new tool.
Channels: blog, homepage, product. Source: https://slack.com/blog/news/agent-first-workspace-slack

## Applications

| Format | What | Source |
|---|---|---|
| event | Event wall in Slack blue with persona photos in circles, dotted connector lines and channel pills. | https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color |
| banner ad | Aubergine banner: lockup with 'Where the future works', white headline 'Get more done in a digital HQ', smiling emoji. | https://web.archive.org/web/20240415160055/https://brand.slackhq.com/typography |
| webinar promo | Horchata ground, logo top left, caps WEBINAR eyebrow, black headline, aubergine CAPS button, clock photo in a yellow pill shape. | https://web.archive.org/web/20240524235353/https://brand.slackhq.com/brand-shapes |
| presentation | Slack version of the Salesforce corporate template: paired lockup on content slides, Slack from Salesforce on cover and thank-you slides, blue icons. | https://web.archive.org/web/20240617065201/https://brand.slackhq.com/presentations |
| website | slack.com: centered hero, product video, aubergine bands, stats with footnotes. | https://slack.com/ |
| UI screens | High fidelity, simplified and abstracted UI with the aubergine sidebar, for landing pages, social, video and decks. | https://web.archive.org/web/20240415151455/https://brand.slackhq.com/ui |

## By format

How our engine applies Slack's system to each format. This is our recipe built from their rules, not something Slack publishes. Level = how far toward the expressive end (illustration, shapes, many colors). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Follows the homepage voice and anatomy (kit.spec.page): fixed white nav with rectangular CAPS buttons; centered sentence-case 64px headline, one 18px subline, GET STARTED (filled #730394) + FIND YOUR PLAN (outlined) at 4px radius; logo strip; real product UI video over a lilac circle; #481A54 bands on white for the AI switcher, stats and closing CTA; feature carousels with a purple open title and an 876x600 screenshot; footnoted stats; the full footer | how many feature carousels (the homepage has four) and which proof block (stats band, G2 badges, customer stories) carries the middle |
| Deck | 2 | Slack template rules: Avant Garde titles, Sans body, 14pt minimum, paired lockup on content slides | illustrations and emoji from the template set |
| Proposal page | 1 | White page, aubergine for the one big moment, product UI over illustration | a horchata band for warmth |
| Ad | 3 | Logo top left, sentence-case headline, one CAPS button, a pill or chat-bubble container | secondary-color ground behind a persona |
| Social post | 4 | Brand shapes on a grid, black or white text only | animated emoji and illustration |
| Email | 1 | Helvetica Neue, aubergine button, plain copy | one illustration with a purpose |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Slack: aubergine somewhere, rounded pill or bubble geometry, real Slack UI, sentence-case copy that sounds like a helpful coworker.
- **Swap test**: Put Teams' or Google's logo on it. If the aubergine, the octothorpe shapes and the product UI don't feel borrowed, it's generic.
- **Style sheet**: No ampersands, no Oxford commas, caps only on buttons and eyebrows, no secondary color used as text.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Slack's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- brand.slackhq.com is offline (404); the brand center rules here come from 2023-2024 Wayback captures and may predate the site's current Salesforce typefaces and purples
- Extended core palette hex values: not published (image only)
- Color ratio or proportions: not published
- Grays and muted text colors: not published; site values are observed
- slack.com's purples (#481A54, #730394, #9602C7) and the nav mark's brighter octothorpe colors (#E3066A, #00B3FF, #41B658, #FCC003) are not in any published guide; no published note explains the change
- Minimum logo size beyond the small-logo ranges: not published
- Icon grid, stroke and sizes: not published
- Easing values: not published (the guide says it adheres to none)
- Web type scale for Salesforce Avant Garde and Salesforce Sans: not published; only observed
- The 24-point voice and tone spectrum, copy principles deck, editorial style guide, shape toolkit, illustration and photo libraries: behind sign-in, not read
- Brand center data errors: Bubblegum lists RGB 225 182 189 against HEX FFB6BD; illustration skin tones are labelled 'Horchata' and 'Aubergine' and one repeats E69E6C
- Brand center Spacesuit (web) special-use palette: behind sign-in
- No published landing-page or web layout grid
- slack.com A/B-tests its CTA style: sessions with body class s-cta-refresh get rounded mixed-case pill buttons; the reference screenshot (and this book) use the 4px-radius CAPS variant
- The closing CTA band has straight edges; no curved purple band was found on the page (2026-10-29)
- TeX Gyre Adventor (an open Avant Garde clone) is not on fontsource, so it was not calibrated
- CSS breakpoints were not measured; only 390 and 1440
- Stats count up on scroll and end at 94% and 312%, the published claim; a screenshot taken mid-animation shows lower numbers (the reference caught 93% and 310%)
- Nav search, chevron, globe, arrow and play/pause glyphs were not extracted as files; the builder draws them from the sizes in Page anatomy (request the icon set from Slack)
- slack.com's live content changed after the 2026-10-29 capture (new What's new cards, s-cta-refresh variant); the book describes the captured reference

Logos and reference images belong to Slack. Look at them on Slack's own pages; don't reuse them.