Slack

Overview

Slack is an AI-powered work platform that unifies team communication, intelligent automation, and collaborative workflows into a single, intuitive interface. The design aesthetic embraces 'Purposeful Minimalism'—a clean, light-first approach with strategic use of deep purple (#611f69) as the signature accent, complemented by sky blue (#1264a3) and cyan (#36c5f0) for secondary actions and data visualization. The brand personality is professional yet approachable, confident without pretension, speaking to enterprise teams and creative organizations alike. The UI evokes clarity and efficiency: every element has a function, every color choice guides the user's attention toward meaningful action.

Slack's voice is direct, conversational, and action-oriented. The brand avoids jargon while maintaining technical credibility. Vocabulary patterns emphasize connection ('together', 'unified', 'seamless'), productivity ('multiplies', 'accelerates', 'automates'), and intelligence ('agents', 'AI', 'smart'). Example sentence in brand voice: 'Slackbot multiplies what your team can do—turning routine tasks into automated workflows and turning conversations into decisions.'

Colors

The color system is anchored by a deep, sophisticated purple primary (#611f69, rgb(97, 31, 105)) used exclusively for primary CTAs, focus states, and brand-critical interactive elements. This purple is paired with white text (#ffffff) for maximum contrast (WCAG AAA compliant at 10.5:1 ratio). The secondary accent, a professional blue (#1264a3, rgb(18, 100, 163)), supports navigation, secondary actions, and data highlights. A bright cyan tertiary (#36c5f0) provides visual relief and is reserved for status indicators, highlights, and accent UI elements.

The surface stack is built on a clean white foundation (#ffffff) with carefully calibrated grays for depth: surface-container (#ebeaeb) for subtle backgrounds, surface-container-highest (#d8d8d8) for elevated surfaces, and on-surface text at

Typography

The type system uses two primary typefaces: Salesforce-Avant-Garde for display and headline scales (58px, 40px, 28px) to establish visual hierarchy and brand presence, and Salesforce-Sans for body and label scales (18px, 16px, 14px, 12px) to ensure legibility and consistency across UI elements. Display (58px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight, -0.02em) breaks major sections; Headline-md (28px, 600 weight, -0.01em) introduces subsections. Body-lg (18px, 400 weight) is used for hero copy and introductory paragraphs; Body-md (16px, 400 weight) for standard body text and card content. Label-md (14px, 700 weight, 0.01em) is applied to all button text and form labels; Label-sm (12px, 600 weight, 0.02em) for badges, m

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, maintaining a fluid design that scales responsively from mobile (320px) to desktop (1920px+). The page rhythm is structured around the 8px unit scale: gutter spacing (24px) separates major sections, lg spacing (40px) creates breathing room between hero and content blocks, and md spacing (24px) is used for card padding and internal component spacing. The hero section occupies the full viewport height with a light gradient background (white to light purple), establishing visual hierarchy immediately. Content sections use alternating background colors—white for primary content, surface-container (#ebeaeb) for secondary sections—to create visual rhythm without overwhelming the interface. Cards and containers main

Elevation & Depth

Depth is conveyed through a subtle shadow system that avoids heavy drop-shadows in favor of refined, layered elevation. Level 1 (Base): the main surface uses no shadow, relying on the white background (#ffffff) and subtle 1px borders in outline-variant (#c4c4c4) to define edges. Level 2 (Standard Cards): cards and contained elements use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts content 4px above the base plane, with a 1px border in outline-variant for definition. Level 3 (Elevated/Modals): modals, popovers, and floating elements use box-shadow: 0 8px 24px rgba(0, 0, 0

Shapes

The shape philosophy is 'Technical Precision'—sharp, geometric corners that convey professionalism and clarity while maintaining subtle softness where it aids usability. Buttons use 4px border-radius (DEFAULT), a barely-perceptible rounding that softens hard edges without appearing playful or casual. Input fields use 50% border-radius (full), creating pill-shaped containers that feel modern and approachable, with internal padding of 6px 35px 6px 15px to accommodate icons and text. Cards and containers use 8px border-radius (md), providing enough rounding to feel contemporary while maintaining

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants. Primary buttons (background: #611f69, color: #ffffff, padding: 19px 40px 20px, border-radius: 4px, font-weight: 700, font-size: 14px) are used for main CTAs like 'GET STARTED' and 'REQUEST A DEMO'. On hover, the background darkens to #4a154b with a 150ms ease-in-out transition. Secondary buttons (background: transparent, border: 2px solid #611f69, color: #611f69, padding: 19px 40px 20px, border-radius: 4px) are used for alternative actions like 'FIND YOUR PLAN'. On hover, the background fills with #f9f0ff (primary-container) and text remains #611f69. Tertiary buttons (background: transparent, color: #1d1d1d, padding: 12px 16px, border-radius: 4px) are used for low-priority actions and links. All b

Do's and Don'ts

**Do**

• Do use primary purple (#611f69) exclusively for primary CTAs and focus states—it is the brand's signature accent and must never be diluted or overused.
• Do maintain 24px gutter spacing between grid columns and 40px margins on major section breaks to preserve the minimalist aesthetic and reduce cognitive load.
• Do apply 150ms ease-in-out transitions to all interactive state changes (hover, focus, active) to create a sense of responsive, polished interaction.
• Do use Salesforce-Avant-Garde for all display and headline scales (58px–28px) and Salesforce-Sans for body and label scales to maintain typographic consistency and brand recognition.
• Do layer elevation using the three-level shadow system (no shadow for base, 0 3px 8px for cards, 0 8px 24px for modals) rather than relying on color or borders alone to convey depth.

**Don't**

• Don't use secondary blue (#1264a3) or cyan (#36c5f0) for primary CTAs—these are supporting accents and will dilute the brand's visual identity.
• Don't apply border-radius greater than 8px to buttons or form inputs; the brand uses technical precision (4px for buttons, 50% for inputs only) to convey professionalism.
• Don't exceed 2 levels of visual hierarchy in a single section—use whitespace and typography scale (display → headline → body) rather than color or shadow to guide attention.
• Don't use system fonts or generic sans-serifs in place of Salesforce-Sans or Salesforce-Avant-Garde; the typeface choice is core to brand recognition and must be enforced across all surfaces.
• Don't add drop-shadows or heavy elevation to elements below the card level (e.g., list items, badges); reserve shadows for cards and modals to maintain visual clarity and hierarchy.