{
"schema": "brand-kit@2",
"palette": {
"paper": "#FFFFFF",
"surface": "#F4EDE4",
"ink": "#1D1C1D",
"ink_muted": "#5C5C5C",
"accent": "#730394",
"on_accent": "#FFFFFF",
"accent_secondary": "#9602C7",
"night": "#4A154B",
"on_night": "#FFFFFF",
"extras": [
{
"name": "slack-blue",
"hex": "#36C5F0",
"role": "Logo-mark color; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "slack-green",
"hex": "#2EB67D",
"role": "Logo-mark color; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "slack-yellow",
"hex": "#ECB22E",
"role": "Logo-mark color; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "slack-red",
"hex": "#E01E5A",
"role": "Logo-mark color; white text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "black",
"hex": "#1D1C1D",
"role": "Brand Black: default text color in the guide",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "cobalt",
"hex": "#1E328F",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; white text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "sky",
"hex": "#0E9DD3",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "teal",
"hex": "#2392A2",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; white text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "pool",
"hex": "#78D7DD",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "evergreen",
"hex": "#185F34",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; white text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "moss",
"hex": "#729C1A",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "sandbar",
"hex": "#FFD57E",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "peach",
"hex": "#FED4BE",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "salmon",
"hex": "#F2606A",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "bubblegum",
"hex": "#FFB6BD",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "crimson",
"hex": "#921D21",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; white text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "terracotta",
"hex": "#DE8969",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; black text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "berry",
"hex": "#7C2852",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; white text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "mauve",
"hex": "#C05B8C",
"role": "Secondary palette: photography and illustration grounds, shape fills; never text; white text on it",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color"
},
{
"name": "site-aubergine",
"hex": "#481A54",
"role": "Ground of the dark feature bands, stats band and footer sign-up band on slack.com (the guide's Aubergine is #4A154B)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "cta-purple",
"hex": "#730394",
"role": "Primary button fill (Get started) and New Feature eyebrow text on slack.com",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "headline-purple",
"hex": "#9602C7",
"role": "Feature-tab section headlines (Meet Slackbot, It all starts with a channel.) on slack.com",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "site-ink",
"hex": "#181818",
"role": "Hero headline and body text on slack.com (the guide's Black is #1D1C1D)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "muted-text",
"hex": "#5C5C5C",
"role": "Unselected feature-tab titles on slack.com",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "caption-gray",
"hex": "#757575",
"role": "'Trusted by top teams' label on slack.com",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "card-meta",
"hex": "#444444",
"role": "Resource card type labels (Report, Webinar) on slack.com",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "link-blue",
"hex": "#0B5CAB",
"role": "Text-link CTAs (See all updates, Learn about channels) on slack.com",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "mark-red-2026",
"hex": "#E3066A",
"role": "Octothorpe red in the slack.com nav mark SVG (guide: #E01E5A)",
"prov": "observed",
"source": "https://a.slack-edge.com/1f40066/marketing/img/nav/logo.svg",
"date": "2026-10-29"
},
{
"name": "mark-blue-2026",
"hex": "#00B3FF",
"role": "Octothorpe blue in the slack.com nav mark SVG (guide: #36C5F0)",
"prov": "observed",
"source": "https://a.slack-edge.com/1f40066/marketing/img/nav/logo.svg",
"date": "2026-10-29"
},
{
"name": "mark-green-2026",
"hex": "#41B658",
"role": "Octothorpe green in the slack.com nav mark SVG (guide: #2EB67D)",
"prov": "observed",
"source": "https://a.slack-edge.com/1f40066/marketing/img/nav/logo.svg",
"date": "2026-10-29"
},
{
"name": "mark-yellow-2026",
"hex": "#FCC003",
"role": "Octothorpe yellow in the slack.com nav mark SVG (guide: #ECB22E)",
"prov": "observed",
"source": "https://a.slack-edge.com/1f40066/marketing/img/nav/logo.svg",
"date": "2026-10-29"
},
{
"name": "hero-tab-active",
"hex": "#2E0039",
"role": "Fill of the active hero tab pill (\"Ask Slackbot\"), white text",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "lilac-tint",
"hex": "#F9F0FF",
"role": "New / New Feature badge fill, What's new card image well, the hero circle's top color",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "accordion-bar",
"hex": "#F9EDFF",
"role": "4px left bar beside every feature-carousel item (renders #F9EDFF over white)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "stat-gradient-end",
"hex": "#D17DFE",
"role": "Last stop of the gradient text on desktop carousel stats (#481A54 0%, #730394 35.2%, #9602C7 80%, #D17DFE 100%)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "nav-ink",
"hex": "#1D1D1D",
"role": "Nav links, Sign in, Change Region, footer column heads",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "link-hover",
"hex": "#014486",
"role": "Blue text link on hover",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "control-border",
"hex": "#C9C9C9",
"role": "1px border of round carousel arrows and the pause control; 1px divider left of the G2 column",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "card-border",
"hex": "#F3F3F3",
"role": "1px border of What's new cards",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "tab-gray",
"hex": "#747474",
"role": "Desktop section-jump tabs (Knowledge, People, Process, Platform) text",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "tab-rule",
"hex": "#E9E3EA",
"role": "1px line under each section-jump tab (#481A54 at 12% on white)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "footer-rule",
"hex": "#EDEAED",
"role": "1px footer dividers (above the link columns and above the legal row)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "promo-arrow",
"hex": "#1264A3",
"role": "25x14 arrow stroke on resource cards",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "switcher-ring-phone",
"hex": "#B56AC4",
"role": "Phone: 2px border of the active dark-band feature card",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "switcher-fill-phone",
"hex": "#D389E7",
"role": "Phone: lilac right end of the active dark-band feature card (progress fill at rest)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "switcher-text-phone",
"hex": "#5E5D60",
"role": "Phone: text in the white dark-band feature card",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "ring-on-dark",
"hex": "#76537F",
"role": "How rgba(255,255,255,0.25) 1px rings render on #481A54 (dark-band feature pills)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"name": "hero-circle-edge",
"hex": "#FBF5FF",
"role": "Hero circle color where it shows beside the video (gradient from #F9F0FF to white)",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
}
]
},
"typography": {
"display": {
"family": "Poppins",
"weight": 600,
"tracking": -0.035,
"line_height": 1.0625,
"fallback_stack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
"google_fonts": "Poppins:wght@500;600;700",
"real": "Salesforce-Avant-Garde (proprietary to Salesforce; slack.com loads a single 700 face, so CSS 400, 600 and 700 all render the same bold file)",
"stand_in": true
},
"body": {
"family": "Open Sans",
"weight": 400,
"line_height": 1.555,
"scale": 1,
"fallback_stack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
"google_fonts": "Open+Sans:wght@300..800",
"real": "Salesforce-Sans (proprietary to Salesforce; slack.com loads 300, 400, 600 and 700)",
"stand_in": true
},
"calibration": "TRACKING RE-CHECK 2026-10-30 on six more real lines measured on slack.com with the real font loaded (canvas width, real face at its site tracking -0.012em vs Poppins 600): 50px 'Reimagine what's possible with' 796.2 vs 821.8 (-0.025em) / 797.0 (-0.04em); 28px 'Reimagine what's possible' 350.0 vs 363.9 / 353.4; 32px customer-stories head 870.9 vs 908.4 / 881.1; 24px 'AI Agents are the Catalyst for' 352.2 vs 359.6 / 348.1; 24px 'Limitless Workforce' 212.2 vs 226.9 / 220.1. Over all nine measured lines -0.035em is the best single value (h1 -2%, the rest within +0.5 to +2%). USE -0.035em for every Poppins 600 text line (headlines, titles, pills, labels), EXCEPT stat numbers (80px stats band, 64px proof and carousel stats, 48px phone stats) which use -0.012em because Avant Garde digits are wider than Poppins' ('1.7M' 64px: real 144.1 vs Poppins 126.0). Weight stays 600: ink was measured at +0.5 to +2.2% of the real face; 500 is 12-15% too light, 700 is 12-18% too heavy. RECALIBRATED 2026-10-30 (supersedes the Inter choice below). The real Salesforce Avant Garde on slack.com is geometric: circular o/e/d/p bowls, a SINGLE-STOREY round 'a' (bowl + stem, like 'ɑ') and a single-storey 'g' (checked on a crop of 'AI agents' from the reference). Inter's double-storey 'a' and narrow grotesque bowls read as 'conventional'. Poppins 600 has the same circular bowls and single-storey a/g. Measured (canvas width, ink per px, x-height vs the real face): at -0.025em Poppins 600 is h1 64px 0.0% width / +2.2% ink / -0.2% x-height; h2 50px +3.0% (at -0.03em +2.0%) / +0.5%; 24px title +0.4% / +0.6%. Inter 700 at -0.012em was -1.6% / +0.9% / -1.7% x-height on h1 but the wrong letter shapes. Poppins 500 is -12 to -15% ink (too light), Poppins 700 +12 to +18% ink (too heavy): keep 600. USE: every Avant Garde role (H1, H2, card and item titles, hero tab pills, stats, stats-band labels, carousel stat descriptions) = Poppins 600, letter-spacing -0.035em (see TRACKING RE-CHECK). Never Inter. Body faces unchanged (Open Sans). Earlier calibration, kept for the record: Calibrated 2026-10-29 on slack.com (reference variant, see Page anatomy) with canvas measureText width at the site's own letter-spacing, ink = rendered alpha per px of width (2x supersampled), and x-height = actualBoundingBoxAscent of 'x'. Raw numbers: calibration/calibration.json. DISPLAY. slack.com loads ONE Salesforce-Avant-Garde face (700): every Avant Garde line renders that bold file whatever its CSS weight (64px/700 H1, 50px/600 H2, 24px/600 titles, 64px/400 stats). Real: 'All your people and AI agents' 64px tracking -0.768px = 904.4px wide, ink 20.12/px, x-height 35.5; 'Reimagine what's possible with AI and agents' 50px -0.6px = 1078.6px, ink 16.38, x 27.8; 'Meet Slackbot: AI for the whole team' 24px -0.288px = 420.2px, ink 7.95, x 13.3. Round-1 pick Inter 700 (on the shelf): 889.5 / 1085.3 / 420.4px (-1.6% / +0.6% / 0.0%), ink +0.9% / -0.4% / +0.6%, x-height -1.7%. Runners-up: Plus Jakarta Sans 700 (width -3.6/-0.6/-0.2%, ink +0.3/-2.5/-3.0%, x -2.1%; the closest round-bowl shape), Geist 700 (-1.7/+0.8/+1.4%, ink +1.8/+1.1/+0.8%, x -3.4%), Raleway 750 (x -5.5%). Off-list geometric candidates lost: Poppins 600 too wide (+2.7/+5.7/+3.1%), Lexend 675 too wide (+5.6/+6.6/+5.6%), Outfit 675 too narrow (-8.6/-6.8/-6.2%, x -12.6%), Urbanist 800 (-7.1%, x -9.9%), Jost 750 (x-height -17%), Questrial 400 and Didact Gothic 400 far too light (ink -36% and -41%); TeX Gyre Adventor is not on fontsource (404), not tested. [Superseded 2026-10-30: use Poppins 600, see above.] BODY. Real Salesforce-Sans 400 'Slack connects your team. Slackbot multiplies what they can do.' 18px = 532.2px, ink 3.74/px, x 9.16. Winner Open Sans 400 (on the shelf): 531.6px (-0.1%), ink -0.5%, x-height +5.1%; humanist forms like the real face. Public Sans 350 is as close on this one line (+0.1%, ink +1.0%, x +1.6%) but its bold misses the CAPS button width by +6.2%. Mulish 450 -0.3% (ink +0.9%), Lato 400 -7.3%, Nunito Sans 450 -3.1%, Source Sans 3 400 -9.9%. BOLD LABELS. Real Salesforce-Sans 700 'Turn data into action with Slackforce Surfaces' 16px = 351.6px (ink 4.40) and 'GET STARTED' 14px +0.798px = 98.1px (ink 4.08). Open Sans 650: 360.9px (+2.6%) and 98.8px (+0.7%), ink +3.0% / -0.8%, x +4.4%. So: Salesforce Avant Garde (any CSS weight) = Poppins 600 (recalibrated); Salesforce Sans 400 = Open Sans 400; Salesforce Sans 700 = Open Sans 650; Salesforce Sans 600 (Download Slack) = Open Sans 600 (inferred, not measured); Salesforce Sans 300 (quotes, attributions) = Open Sans 300 (inferred). Body tracking 0 (the site's -0.0216px on 18px is negligible); CAPS buttons and footer heads +0.057em (0.8px at 14px)."
},
"style": {
"button_shape": "observed on slack.com: tall solid purple CTA with uppercase label beside an outlined secondary; the brand center itself sets labels in pills",
"motion": "Overshoot, follow-through and anticipation; playful, not silly; no strict easing values published",
"corners": "rounded: shapes, containers and media come from the octothorpe's pill and chat-bubble geometry"
},
"voice": {
"tone": [
"Clear",
"Concise",
"Human"
],
"notes": [
"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": [
{
"id": "headline-case",
"kind": "headline_case",
"value": "sentence"
},
{
"id": "caps-buttons",
"kind": "guidance",
"text": "All caps only for buttons, eyebrows and jump links; never all lowercase",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "no-headline-periods",
"kind": "guidance",
"text": "No periods in headlines, eyebrows, links or buttons (the 2026 homepage breaks this on feature-tab headlines; a landing page may follow the homepage)",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "no-oxford",
"kind": "guidance",
"text": "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)",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "no-ampersand",
"kind": "guidance",
"text": "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\")",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "em-dash",
"kind": "guidance",
"text": "No spaces around em dashes; en dashes for ranges (9:30 a.m.–1 p.m.)",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "times",
"kind": "guidance",
"text": "Times as 9 a.m., 12:30 p.m. in running copy; 8 AM PDT in display copy; drop :00",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "exclamation",
"kind": "guidance",
"text": "Go light on exclamation points",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "emoji",
"kind": "guidance",
"text": "Emoji add meaning or delight; never replace words",
"prov": "published",
"source": "https://web.archive.org/web/20240415160102/https://brand.slackhq.com/emoji"
},
{
"id": "slack-adjective",
"kind": "guidance",
"text": "Slack is an adjective or the app's name: never a verb, plural or possessive; no 'Slackers'",
"prov": "published",
"source": "https://web.archive.org/web/20240406034403/https://brand.slackhq.com/about-slack"
},
{
"id": "lowercase-domain",
"kind": "guidance",
"text": "Always lowercase slack.com; avoid starting a sentence with it",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "ap-style",
"kind": "spelling",
"value": "en-US (AP style, Merriam-Webster first entry)",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "inclusive",
"kind": "guidance",
"text": "No exclusionary, ableist or misgendering language; no slang or niche pop-culture references",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"id": "copy-principles",
"kind": "guidance",
"text": "Copy principles: Don't make me think; Be approachable; Make it memorable; Respect our readers; Be compelling",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
}
],
"approved": {
"words": [
"Slack messages",
"Slack collaboration software",
"integrated with Slack",
"Slack Platform Partner"
]
},
"banned": [
"Slacking",
"Slackers",
"Slack's (possessive)",
"Slacks (plural)",
"I ❤️ Slackbot (emoji for words)",
"DHQ IRL (abbreviations)"
]
},
"spec": {
"signature": [
{
"id": "octothorpe-shapes",
"name": "Shapes cut from the octothorpe",
"where": "containers behind photos and illustrations, patterns, backgrounds, motion fills",
"spec": "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.",
"dont": "Don't invent shapes, merge a pill with a bubble, overlap shapes, distort them or add shadows or bevels",
"prov": "published",
"source": "https://web.archive.org/web/20240524235353/https://brand.slackhq.com/brand-shapes"
},
{
"id": "aubergine-moment",
"name": "Aubergine for the big moment",
"where": "dark bands, hero banners, the product sidebar in UI screens",
"spec": "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.",
"dont": "No gradients made from brand colors; no secondary colors as text",
"prov": "published",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color",
"also": [
"https://web.archive.org/web/20240415151455/https://brand.slackhq.com/ui"
]
},
{
"id": "real-product-ui",
"name": "The product is the hero image",
"where": "hero and feature bands",
"spec": "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.",
"dont": "No invented features; don't mix photo and illustrated personas in one UI",
"prov": "published",
"source": "https://web.archive.org/web/20240415151455/https://brand.slackhq.com/ui",
"also": [
"https://slack.com/"
]
}
],
"motion": [
{
"name": "overshoot",
"use": "Elements go a little past their final pose, then settle",
"prov": "published",
"source": "https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion"
},
{
"name": "follow-through",
"use": "Objects stop at different times, each with its own inertia",
"prov": "published",
"source": "https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion"
},
{
"name": "title-reveal",
"use": "Standalone titles slide up from a mask all at once; phrases slide up word by word with opacity; never character by character",
"prov": "published",
"source": "https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion"
},
{
"name": "cuts",
"use": "Hard cuts or match cuts between scenes; no wipes or washouts",
"prov": "published",
"source": "https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion"
},
{
"name": "web-ui-loops",
"use": "Web UI animations loop, one core action, MP4/GIF/WebM under about 3 MB, no audio",
"prov": "published",
"source": "https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion"
},
{
"name": "easing",
"easing": "not published",
"use": "Easing is used when needed; Slack does not adhere to strict values",
"prov": "published",
"source": "https://web.archive.org/web/20240223222418/https://brand.slackhq.com/motion"
}
],
"icons": {
"grid": "not published",
"stroke": "not published",
"color": "black or white only; on core or secondary grounds, in brand shapes or circles",
"sets": [
"brand (objects and concepts: coffee, collaboration)",
"product (features)"
],
"rules": "Always paired with copy; never decoration or a substitute for illustration; use the library, don't draw new icons",
"prov": "published",
"source": "https://web.archive.org/web/20240415164202/https://brand.slackhq.com/icons"
},
"source": "https://slack.com/",
"how": "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",
"provenance": {
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
"layout": {
"container_max": 1230,
"page_margin": {
"desktop": 105,
"phone": 16,
"note": "content box 1230px centered at 1440 (x 105-1335); feature-carousel images and the What's new card row bleed past the right edge"
},
"nav_height": 80,
"nav_height_phone": 55,
"section_padding": {
"desktop": 96,
"phone": 36,
"note": "feature carousels 96/36; hero 104 top 50 bottom (both widths); dark band 72; What's new 42; stats 48 top 32 bottom; resources and CTA band 80 (phone 48 and 80)"
},
"columns": 12,
"columns_phone": 1,
"hero_text_max": 923,
"feature_split": {
"text_x": 105,
"text_width": 455,
"media_x": 622,
"media_width": 876,
"media_height": 600,
"note": "text column 455 wide; product image 876x600 starts at x 622 and runs off the right edge of the viewport"
},
"dark_split": {
"pill_x": 105,
"pill_width": 492,
"media_x": 659,
"media_width": 677,
"media_height": 462
},
"whats_new_cards": {
"width": 400,
"height": 440,
"gap": 48,
"xs": [
105,
553,
1001
]
},
"resource_cards": {
"width": 285,
"height": 420,
"gap": 30,
"xs": [
105,
420,
735,
1050
]
},
"stats_cards": {
"width": 314,
"gap": 72,
"xs": [
177,
563,
949
]
},
"footer_columns": {
"width": 176,
"pitch": 204,
"xs": [
343,
547,
751,
955,
1159
]
},
"gutter": 48,
"gutter_phone": 16,
"card_gap": 48,
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
"type": [
{
"role": "Hero headline (h1)",
"face": "display",
"size": {
"desktop": 64,
"phone": 32
},
"line_height": 1.0625,
"tracking_px": -2.24,
"weight": 600,
"prov": "observed",
"note": "64/68 desktop (2 lines, centered, 923 wide), 32/35.84 phone (3 lines, 269 wide), tracking -0.012em, #000000; stand-in Poppins 600 at -0.035em (-2.24px desktop; same em at phone sizes)",
"id": "h1"
},
{
"role": "Section headline (h2, big)",
"face": "display",
"size": {
"desktop": 50,
"phone": 28
},
"line_height": 1.12,
"tracking_px": -1.75,
"weight": 600,
"prov": "observed",
"note": "50/56 on the dark band, feature-carousel heads and the CTA band; phone 28/34 (CTA band 32/35.84). CSS weight 600/700, renders the single 700 face; stand-in Poppins 600 at -0.035em (-1.75px desktop; same em at phone sizes)",
"id": "h2"
},
{
"role": "Section headline (h2, small)",
"face": "display",
"size": {
"desktop": 32,
"phone": 28
},
"line_height": 1.25,
"tracking_px": -1.12,
"weight": 600,
"prov": "observed",
"note": "32/40: What's new in Slack, customer stories, stats band, Millions of people, deep dive; phone 28/35 (stats and Millions 32/40); stand-in Poppins 600 at -0.035em (-1.12px desktop; same em at phone sizes)",
"id": "h2-small"
},
{
"role": "Card and item title",
"face": "display",
"size": {
"desktop": 24,
"phone": 22.4
},
"line_height": 1.25,
"tracking_px": -0.84,
"weight": 600,
"prov": "observed",
"note": "24/30 What's new and resource card titles (phone 22.4/30); feature-carousel item titles 24/32 tracking -0.288px; stand-in Poppins 600 at -0.035em (-0.84px desktop; same em at phone sizes)",
"id": "card-title"
},
{
"role": "Hero tab pill",
"face": "display",
"size": {
"desktop": 22,
"phone": 18
},
"line_height": 1.27,
"tracking_px": -0.77,
"weight": 600,
"prov": "observed",
"note": "22px on the five hero pills; phone single pill 18/28; stand-in Poppins 600 at -0.035em (-0.77px desktop; same em at phone sizes)",
"id": "tab"
},
{
"role": "Big stat number",
"face": "display",
"size": {
"desktop": 80,
"phone": 80
},
"line_height": 1.05,
"tracking_px": -0.96,
"weight": 600,
"prov": "observed",
"note": "80/84 white on the stats band (both widths); stand-in Poppins 600 at -0.012em (-0.96px desktop; same em at phone sizes)",
"id": "stat"
},
{
"role": "Proof stat number",
"face": "display",
"size": {
"desktop": 64,
"phone": 48
},
"line_height": 1,
"tracking_px": -0.768,
"weight": 600,
"prov": "observed",
"note": "1B+ / 4M / 3M / 1.7M; feature-carousel stats 64/64 (phone 48); stand-in Poppins 600 at -0.012em (-0.768px desktop; same em at phone sizes)",
"id": "stat-small"
},
{
"role": "Body large",
"face": "body",
"size": {
"desktop": 18,
"phone": 18
},
"line_height": 1.555,
"tracking_px": 0,
"weight": 400,
"prov": "observed",
"note": "18/28: hero subline, section sublines, carousel item copy",
"id": "body-l"
},
{
"role": "Body",
"face": "body",
"size": {
"desktop": 16,
"phone": 16
},
"line_height": 1.5,
"tracking_px": 0,
"weight": 400,
"prov": "observed",
"note": "16/24.9 card copy (phone 14.4/22.4), footnotes 16px",
"id": "body"
},
{
"role": "Bold label",
"face": "body",
"size": {
"desktop": 16,
"phone": 16
},
"line_height": 1.375,
"tracking_px": 0.2,
"weight": 650,
"prov": "observed",
"note": "16/22 700 dark-band feature pills (+0.2px); text links 16/24 700 #0B5CAB. Real face weight 700; render it as Open Sans 650 (the calibrated stand-in for Salesforce Sans 700). Where any other part of this book says '700' for a Sans label or button, it means Open Sans 650",
"id": "label"
},
{
"role": "Button (CAPS)",
"face": "body",
"size": {
"desktop": 14,
"phone": 14
},
"line_height": 1.29,
"tracking_px": 0.798,
"weight": 650,
"prov": "observed",
"note": "14/18 700 uppercase +0.798px: every button, resource-card CTAs. Real face weight 700; render it as Open Sans 650 (the calibrated stand-in for Salesforce Sans 700). Where any other part of this book says '700' for a Sans label or button, it means Open Sans 650",
"id": "button"
},
{
"role": "Nav link",
"face": "body",
"size": {
"desktop": 15,
"phone": 15
},
"line_height": 1.55,
"tracking_px": 0,
"weight": 650,
"prov": "observed",
"note": "15px 700 #1D1D1D (Product, Solutions, Enterprise, Resources, Pricing, Sign in). Real face weight 700; render it as Open Sans 650 (the calibrated stand-in for Salesforce Sans 700). Where any other part of this book says '700' for a Sans label or button, it means Open Sans 650",
"id": "nav"
},
{
"role": "Badge",
"face": "body",
"size": {
"desktop": 12,
"phone": 12
},
"line_height": 1.33,
"tracking_px": 0,
"weight": 650,
"prov": "observed",
"note": "12/16 700 #730394 on #F9F0FF pill: New, New Feature. Real face weight 700; render it as Open Sans 650 (the calibrated stand-in for Salesforce Sans 700). Where any other part of this book says '700' for a Sans label or button, it means Open Sans 650",
"id": "badge"
},
{
"role": "Caption",
"face": "body",
"size": {
"desktop": 12,
"phone": 12
},
"line_height": 1.55,
"tracking_px": 0,
"weight": 400,
"prov": "observed",
"note": "\"Trusted by top teams\" 12/18.7 #757575",
"id": "caption"
},
{
"role": "Card meta",
"face": "body",
"size": {
"desktop": 14,
"phone": 14
},
"line_height": 1.3,
"tracking_px": 0.1,
"weight": 400,
"prov": "observed",
"note": "14/18.2 #444444: Report, Webinar, Future of work, Guide; video control labels 14/20",
"id": "meta"
},
{
"role": "Footer head",
"face": "body",
"size": {
"desktop": 14,
"phone": 14
},
"line_height": 1.55,
"tracking_px": 0.8,
"weight": 650,
"prov": "observed",
"note": "14/21.8 700 uppercase +0.8px #1D1D1D. Real face weight 700; render it as Open Sans 650 (the calibrated stand-in for Salesforce Sans 700). Where any other part of this book says '700' for a Sans label or button, it means Open Sans 650",
"id": "footer-head"
},
{
"role": "Footer link",
"face": "body",
"size": {
"desktop": 14,
"phone": 14
},
"line_height": 1.55,
"tracking_px": 0,
"weight": 400,
"prov": "observed",
"note": "14/21.8 #5C5C5C, 34px row pitch",
"id": "footer-link"
},
{
"role": "Quote",
"face": "body",
"size": {
"desktop": 18,
"phone": 18
},
"line_height": 1.4,
"tracking_px": 0,
"weight": 300,
"prov": "observed",
"note": "18px 300 italic #000000 customer quotes; attribution 16px 300 with the name 700",
"id": "quote"
},
{
"role": "Eyebrow (phone only)",
"face": "body",
"size": {
"desktop": 14,
"phone": 14
},
"line_height": 1.25,
"tracking_px": -0.112,
"weight": 650,
"prov": "observed",
"note": "14/17.5 700 uppercase #000000: KNOWLEDGE, PEOPLE, PROCESS, PLATFORM above each carousel head on phones. Real face weight 700; render it as Open Sans 650 (the calibrated stand-in for Salesforce Sans 700). Where any other part of this book says '700' for a Sans label or button, it means Open Sans 650",
"id": "eyebrow"
}
],
"components": {
"button_primary": {
"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",
"states": {
"hover": {
"css": {
"background-color": "#481A54"
},
"prov": "observed",
"source": "https://slack.com/"
},
"focus": {
"css": {
"outline": "2px dotted #730394",
"outline-offset": "5px"
},
"prov": "observed",
"source": "https://slack.com/"
}
},
"transition": "background, color, box-shadow 0.42s cubic-bezier(0.165, 0.84, 0.44, 1)",
"prov": "observed",
"source": "https://slack.com/"
},
"button_secondary": {
"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",
"states": {
"hover": {
"css": {
"box-shadow": "inset 0 0 0 2px #730394"
},
"prov": "observed",
"source": "https://slack.com/"
}
},
"prov": "observed",
"source": "https://slack.com/"
},
"nav_button_primary": {
"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)",
"prov": "observed",
"source": "https://slack.com/"
},
"nav_button_secondary": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"button_on_dark_primary": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"button_on_dark_secondary": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"hero_tab_pill": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"dark_feature_pill": {
"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)",
"prov": "observed",
"source": "https://slack.com/"
},
"badge_new": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"text_link": {
"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",
"states": {
"hover": {
"css": {
"color": "#014486"
},
"prov": "observed",
"source": "https://slack.com/"
}
},
"prov": "observed",
"source": "https://slack.com/"
},
"carousel_arrow": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"video_control": {
"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)",
"prov": "observed",
"source": "https://slack.com/"
},
"whats_new_card": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"resource_card": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"section_tab": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"carousel_item": {
"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",
"prov": "observed",
"source": "https://slack.com/"
},
"pager_dot": {
"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)",
"prov": "observed",
"source": "https://slack.com/"
}
},
"responsive": {
"measured_at": [
390,
1440
],
"source": "https://slack.com/",
"date": "2026-10-29",
"prov": "observed",
"rows": [
{
"what": "nav",
"values": {
"390": "55px: logo, search icon, GET STARTED 114x34, menu",
"1440": "80px fixed: logo, 5 links, search, Sign in, REQUEST A DEMO, GET STARTED"
}
},
{
"what": "hero headline",
"values": {
"390": "32/35.84, 3 lines",
"1440": "64/68, 2 lines"
}
},
{
"what": "hero buttons",
"values": {
"390": "stacked 288x57, 16px apart",
"1440": "side by side, 178x57 and 226x57, 8px apart"
}
},
{
"what": "trusted logos",
"values": {
"390": "2 rows (4 + 2), no label",
"1440": "one row with \"Trusted by top teams\""
}
},
{
"what": "hero media",
"values": {
"390": "one tab pill above a 351x240 video, 5 dots",
"1440": "800x548 video, 5 pills below"
}
},
{
"what": "section headline",
"values": {
"390": "28px left-aligned (stats/CTA 32 centered)",
"1440": "50px centered (small heads 32)"
}
},
{
"what": "feature carousels",
"values": {
"390": "eyebrow, head, copy, items, stat or quote, then 359x246 image (radius 8)",
"1440": "two columns: items left, 876x600 image right (radius 16)"
}
},
{
"what": "section-jump tabs",
"values": {
"390": "hidden; eyebrows instead",
"1440": "sticky strip of 4 tabs"
}
},
{
"what": "customer stories",
"values": {
"390": "hidden (only the button pair shows)",
"1440": "heading, link, 4 video cards"
}
},
{
"what": "resource cards",
"values": {
"390": "one-card carousel with dots",
"1440": "4 across"
}
},
{
"what": "footer columns",
"values": {
"390": "6 collapsed rows with chevrons",
"1440": "5 columns of links"
}
},
{
"what": "side margin",
"values": {
"390": "16px",
"1440": "105px"
}
}
]
},
"page": {
"source": "https://slack.com/",
"date": "2026-10-29",
"prov": "observed",
"variant": "slack.com A/B-tests its buttons. Some sessions get rounded pill buttons in mixed case (body class s-cta-refresh). The reference screenshot shows the variant without that class: rectangular 4px-radius buttons with uppercase labels, an inset 1px outline on the secondary and a right arrow on FIND YOUR PLAN. Build that variant. Every button value here comes from it.",
"nav": {
"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"
},
"sections": [
{
"name": "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
: \"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
: \"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"
]
},
{
"name": "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"
]
},
{
"name": "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"
]
},
{
"name": "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"
]
},
{
"name": "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"
]
},
{
"name": "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"
]
},
{
"name": "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"
]
},
{
"name": "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"
]
},
{
"name": "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": []
},
{
"name": "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": []
},
{
"name": "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"
]
},
{
"name": "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"
},
"dark_ground": {
"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"
}
},
"bands": [
{
"label": "Nav",
"ground": "#FFFFFF",
"content": "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",
"anatomy": [
"Buttons rectangular, 4px radius, CAPS 14px 700",
"Shadow 0 4px 40px rgba(0,0,0,0.08) only once scrolled"
]
},
{
"label": "Hero",
"ground": "#FFFFFF",
"content": "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",
"anatomy": [
"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"
]
},
{
"label": "Dark AI band",
"ground": "#481A54",
"content": "feature switcher",
"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",
"anatomy": [
"Pill ring rgba(255,255,255,0.25), New badges #F9F0FF/#730394"
]
},
{
"label": "What's new in Slack",
"ground": "#FFFFFF",
"content": "card carousel",
"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",
"anatomy": [
"Card: 1px #F3F3F3 border, radius 16, #F9F0FF image well, New Feature badge, 24/30 title, 16px lede"
]
},
{
"label": "Section-jump tabs",
"ground": "#FFFFFF",
"content": "tabs",
"desktop": "y 2786-2843 sticky, 4 gray 16px 700 labels over 1px #E9E3EA rules",
"phone": "hidden",
"anatomy": [
"Knowledge, People, Process, Platform"
]
},
{
"label": "Feature carousel: Give everyone instant context",
"ground": "#FFFFFF",
"content": "accordion + screenshot",
"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",
"anatomy": [
"Open item \"Meet Slackbot: AI for the whole team\" with link \"Learn more about Slackbot\"",
"Image carousel-img-slackbot-multiplayer.png"
]
},
{
"label": "Feature carousel: Let your people connect like people",
"ground": "#FFFFFF",
"content": "accordion + screenshot",
"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",
"anatomy": [
"Open item \"It all starts with a channel.\" with link \"Learn about channels\"",
"Image carousel-img-people-1.png"
]
},
{
"label": "Feature carousel: Manage all your work from one place",
"ground": "#FFFFFF",
"content": "accordion + screenshot",
"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",
"anatomy": [
"Open item \"Anyone can automate in Slack.\" with link \"Learn about workflows\"",
"Image carousel-img-process-2.png"
]
},
{
"label": "Feature carousel: Secure. Scaleable. Silo-free.",
"ground": "#FFFFFF",
"content": "accordion + screenshot",
"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",
"anatomy": [
"Open item \"From Atlassian to Zoom.\" with link \"See all integrations\"",
"Image carousel-img-platform-1.png"
]
},
{
"label": "Customer stories",
"ground": "#FFFFFF",
"content": "video cards + CTA pair",
"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",
"anatomy": [
"Open card: Anthropic photo, gradient, white logo, 24px white line, play button"
]
},
{
"label": "Stats band",
"ground": "#481A54",
"content": "3 stats",
"desktop": "y 7615-8037: 32px white head; 94% / 312% / $51M at 80px white with 24px 2-line labels",
"phone": "y 7341-8225: stacked",
"anatomy": [
"Count-up animation; resting values per the screenshot"
]
},
{
"label": "Millions of people love working in Slack",
"ground": "#FFFFFF",
"content": "stats + G2 badges",
"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",
"anatomy": [
"1B+, 4M, 3M, 1.7M"
]
},
{
"label": "Your Slack deep dive starts here",
"ground": "#FFFFFF",
"content": "4 resource cards + footnotes",
"desktop": "y 8765-9647: 285x420 shadowed cards at 30 gap; six footnotes",
"phone": "one-card carousel with dots",
"anatomy": [
"Card CTA caps blue with a 25x14 arrow at the right"
]
},
{
"label": "CTA band",
"ground": "#481A54",
"content": "closing CTA",
"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",
"anatomy": [
"No curve on either edge"
]
},
{
"label": "Footer",
"ground": "#FFFFFF",
"content": "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",
"anatomy": [
"Column heads caps 14px 700 #1D1D1D, links 14px #5C5C5C"
]
}
]
},
"system": {
"fixed": [
"The octothorpe and its four colors",
"Aubergine as the lead color",
"Black or white text only",
"Sentence case",
"Real product UI"
],
"flex": "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.",
"traits": [
{
"is": "Clear",
"text": "Clarity is a courtesy: respect readers' time and intelligence (paraphrase).",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"is": "Concise",
"text": "Every word has a purpose.",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"is": "Human",
"text": "Characterful, warm, conversational; character never overwhelms content (paraphrase).",
"prov": "published",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing"
},
{
"is": "Playful",
"not": "silly",
"text": "Witty, not silly or childish; never fun at others' expense (paraphrase).",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
},
{
"is": "Empathetic",
"not": "jargony",
"text": "Make people feel welcome; don't write jargon (paraphrase).",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
},
{
"is": "Crafted",
"not": "careless",
"text": "Sweat the small stuff; proofread, then proofread again (paraphrase).",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
}
]
},
"proportion": {
"note": "Slack publishes no color ratio. Not published; the brand center says lead with aubergine for big moments and avoid adding many extra colors.",
"source": "https://web.archive.org/web/20240223230547/https://brand.slackhq.com/color",
"parts": [],
"prov": "published"
},
"tone_by_state": {
"note": "One voice. The brand center publishes the voice; the homepage shows it in a product-led setting. Levels are our reading.",
"source": "https://web.archive.org/web/20240223225820/https://brand.slackhq.com/writing",
"states": [
{
"state": "Homepage, landing pages and UI copy",
"level": 1
},
{
"state": "Release notes, social and emoji moments",
"level": 3
}
]
},
"formats": [
{
"format": "Landing page",
"level": 2,
"must": "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",
"flex": "how many feature carousels (the homepage has four) and which proof block (stats band, G2 badges, customer stories) carries the middle",
"prov": "ours"
},
{
"format": "Deck",
"level": 2,
"must": "Slack template rules: Avant Garde titles, Sans body, 14pt minimum, paired lockup on content slides",
"flex": "illustrations and emoji from the template set"
},
{
"format": "Proposal page",
"level": 1,
"must": "White page, aubergine for the one big moment, product UI over illustration",
"flex": "a horchata band for warmth"
},
{
"format": "Ad",
"level": 3,
"must": "Logo top left, sentence-case headline, one CAPS button, a pill or chat-bubble container",
"flex": "secondary-color ground behind a persona"
},
{
"format": "Social post",
"level": 4,
"must": "Brand shapes on a grid, black or white text only",
"flex": "animated emoji and illustration"
},
{
"format": "Email",
"level": 1,
"must": "Helvetica Neue, aubergine button, plain copy",
"flex": "one illustration with a purpose"
}
],
"checks": [
{
"name": "Logo hidden",
"text": "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."
},
{
"name": "Swap test",
"text": "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."
},
{
"name": "Style sheet",
"text": "No ampersands, no Oxford commas, caps only on buttons and eyebrows, no secondary color used as text."
}
],
"examples": [
{
"chapter": "color",
"do": {
"ground": "night",
"text": "Where work happens",
"ink": "on_night"
},
"do_caption": "Aubergine for the big moment, white text.",
"dont": {
"ground": "paper",
"text": "Where work happens",
"ink": "#2392A2"
},
"dont_caption": "Secondary colors (here Teal) are never text."
},
{
"chapter": "voice",
"do": {
"ground": "paper",
"text": "Bring conversations out of the inbox"
},
"do_caption": "Sentence case, no ampersand, plain words.",
"dont": {
"ground": "paper",
"text": "This Is Not How We Do Headlines at Slack."
},
"dont_caption": "Title case and a period: the guide's own don't."
},
{
"chapter": "voice",
"do": {
"ground": "surface",
"text": "Send a Slack message"
},
"do_caption": "Slack as an adjective.",
"dont": {
"ground": "surface",
"text": "Just Slack me"
},
"dont_caption": "Slack is never a verb."
},
{
"chapter": "type",
"do": {
"ground": "paper",
"text": "All your people and AI agents working together",
"font": "display",
"weight": 700
},
"do_caption": "Display face, sentence case, tight leading.",
"dont": {
"ground": "paper",
"text": "all your people and ai agents",
"font": "body",
"weight": 400
},
"dont_caption": "Never all lowercase, never the body face for a headline."
},
{
"chapter": "logo",
"do": {
"ground": "night",
"text": "Full-color logo on aubergine",
"ink": "on_night"
},
"do_caption": "White, black or aubergine grounds only.",
"dont": {
"ground": "#ECB22E",
"text": "Full-color logo on Slack yellow",
"ink": "ink"
},
"dont_caption": "Not on core-color grounds."
}
],
"make_it_yours": {
"note": "Everything above transfers. These are Slack's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.",
"replace": [
"identity",
"purpose",
"positioning",
"messaging.pillars",
"messaging.proof_points",
"messaging.taglines",
"messaging.boilerplate"
],
"reference": {
"purpose": {
"mission": {
"text": "Make people's working lives simpler, more pleasant and more productive.",
"prov": "published",
"source": "https://web.archive.org/web/20240406034403/https://brand.slackhq.com/about-slack"
},
"story": {
"text": "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.",
"prov": "published",
"source": "https://slack.com/blog/news/say-hello-new-logo",
"also": [
"https://www.pentagram.com/work/slack",
"https://web.archive.org/web/20240417082758/https://brand.slackhq.com/logo"
]
},
"values": [
{
"name": "Empathy",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
},
{
"name": "Playfulness",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
},
{
"name": "Courtesy",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
},
{
"name": "Solidarity",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
},
{
"name": "Craftsmanship",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
},
{
"name": "Thriving",
"prov": "published",
"source": "https://web.archive.org/web/20240524223821/https://brand.slackhq.com/brand-values"
}
]
},
"positioning": {
"statement": {
"text": "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).",
"prov": "published",
"source": "https://web.archive.org/web/20240406034403/https://brand.slackhq.com/about-slack"
},
"category": {
"text": "AI work platform: page title reads 'AI Work Platform & Productivity Tools'.",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
"audience": {
"text": "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).",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
"problem": {
"text": "Work and AI agents are scattered across tools and inboxes; agents sprawl in silos without shared context (paraphrase).",
"prov": "published",
"source": "https://slack.com/blog/news/agent-first-workspace-slack"
},
"promise": {
"text": "People and AI agents working together in one place, with Slackbot coordinating work across connected apps (paraphrase of the 2026 homepage hero).",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
"differentiators": [
{
"text": "Channels: flexible, transparent spaces for people and agents.",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"text": "Slackbot as one conversational interface for an agent ecosystem; 2,600 pre-configured apps and agents.",
"prov": "published",
"source": "https://slack.com/blog/news/agent-first-workspace-slack"
},
{
"text": "Deep integration with Salesforce Customer 360.",
"prov": "published",
"source": "https://web.archive.org/web/20240406034403/https://brand.slackhq.com/about-slack"
}
],
"alternatives": [
{
"text": "Email and Microsoft Teams: 'Bring conversations out of the inbox' and a Slack-vs-Teams promo card on the homepage.",
"prov": "inferred",
"source": "https://slack.com/",
"why": "The homepage names the inbox as the thing to leave and promotes a compete-teams page; no competitor is named in headlines."
}
]
},
"messaging": {
"taglines": [
{
"text": "All your people and AI agents working together",
"where": "slack.com hero H1",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"text": "Where Work Happens",
"where": "listed trademark",
"prov": "published",
"source": "https://slack.com/terms-of-service/slack-brand"
},
{
"text": "Where the future works",
"where": "lockup line on a brand center typography example banner",
"prov": "published",
"source": "https://web.archive.org/web/20240415160055/https://brand.slackhq.com/typography"
},
{
"text": "Slack is your digital HQ",
"where": "brand center H1 type sample; the 2021-2023 Digital HQ positioning",
"prov": "published",
"source": "https://web.archive.org/web/20240415160055/https://brand.slackhq.com/typography"
}
],
"attributes": [
"clear",
"concise",
"human",
"empathy",
"playfulness",
"courtesy",
"solidarity",
"craftsmanship",
"thriving"
],
"key_messages": [],
"boilerplate": {
"text": "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).",
"prov": "published",
"source": "https://web.archive.org/web/20240406034403/https://brand.slackhq.com/about-slack",
"paraphrase": true
},
"pillars": [
{
"name": "People and agents together",
"claim": "Humans and AI agents work in the same place, coordinated by Slackbot.",
"prov": "inferred",
"source": "https://slack.com/",
"why": "Hero H1 and subline; Slack does not publish named pillars.",
"proof": [
"p-agents",
"p-apps"
]
},
{
"name": "Channels",
"claim": "Work is organized in open, searchable channels instead of inboxes.",
"prov": "inferred",
"source": "https://slack.com/",
"why": "Feature tab 'It all starts with a channel.' and the brand center boilerplate.",
"proof": [
"p-messages",
"p-connect"
]
},
{
"name": "Anyone can automate",
"claim": "No-code workflows by click or by code.",
"prov": "inferred",
"source": "https://slack.com/",
"why": "Feature tab 'Anyone can automate in Slack.' and the short boilerplate.",
"proof": [
"p-workflows"
]
},
{
"name": "Proven returns",
"claim": "Measured ROI and productivity gains.",
"prov": "inferred",
"source": "https://slack.com/",
"why": "The stats band 'We're in the business of growing businesses'.",
"proof": [
"p-roi",
"p-g2"
]
}
],
"proof_points": [
{
"id": "p-roi",
"kind": "stat",
"text": "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).",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"id": "p-messages",
"kind": "stat",
"text": "1B+ messages sent daily (FY26 earnings remarks).",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"id": "p-connect",
"kind": "stat",
"text": "4M Slack Connect users working with external teams each week (FY25 internal data).",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"id": "p-workflows",
"kind": "stat",
"text": "3M daily workflows; 1.7M apps actively used each week (FY25 internal data).",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"id": "p-g2",
"kind": "award",
"text": "A leader in over 290 G2 market reports (G2 Fall 2026).",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"id": "p-apps",
"kind": "other",
"text": "2,600 pre-configured apps and agents on the Slack platform.",
"source": "https://slack.com/blog/news/agent-first-workspace-slack"
},
{
"id": "p-agents",
"kind": "stat",
"text": "More than 300% growth in new custom agents built on Slack since January 2026.",
"source": "https://slack.com/blog/news/agent-first-workspace-slack"
}
],
"claim_boundaries": [
{
"text": "Quote stats only with the homepage's footnoted sources; never round or restate them.",
"prov": "observed",
"source": "https://slack.com/",
"date": "2026-10-29"
},
{
"text": "Don't introduce functions, features or behaviors in UI screens that don't exist.",
"prov": "published",
"source": "https://web.archive.org/web/20240415151455/https://brand.slackhq.com/ui"
},
{
"text": "Slack is an adjective (Slack messages) or a noun for the app or company; never a verb, plural or possessive.",
"prov": "published",
"source": "https://web.archive.org/web/20240406034403/https://brand.slackhq.com/about-slack"
}
]
}
}
}
}