awesome-design-md/design-md/slack/DESIGN.md

Design System Inspired by Slack

1. Visual Theme & Atmosphere

Slack's marketing website is a confident, enterprise-friendly showcase that balances Salesforce's corporate muscle with Slack's original playful personality. The design operates on a white canvas with deep aubergine purple (#481a54, #4a154b) as the signature brand color — a rich, wine-dark hue that distinguishes Slack from every blue-dominated enterprise tool. Product screenshots and animated UI demos punctuate the white space, creating a "see it in action" experience.

The typography reflects Slack's acquisition by Salesforce: Salesforce-Avant-Garde handles display headings at massive scale (64px, weight 700) with negative letter-spacing (-0.768px), while Salesforce-Sans serves as the UI/body workhorse. Both fonts carry Salesforce's geometric precision but retain enough warmth to feel approachable. Uppercase button labels with positive letter-spacing (0.8px–0.96px) create a systematic, enterprise-label voice.

What makes Slack distinctive is its hover behavior: buttons transition from a soft lavender (#f9f0ff) to deep aubergine (#4a154b) on hover with a translate(3px) shift — a playful micro-animation that retains Slack's personality within the Salesforce design language. The sidebar highlight blue (#1264a3) provides the secondary interactive accent, and the overall shadow system uses soft, wide-radius shadows (0px 0px 32px at 0.1 opacity) that create a gentle, cloud-like elevation.

Key Characteristics:

• Aubergine purple (#481a54, #4a154b) as singular brand color — distinctive in an ocean of blue enterprise tools
• Salesforce-Avant-Garde for display (up to 64px, weight 700, negative tracking)
• Salesforce-Sans for body/UI with both positive and negative letter-spacing variants
• Soft lavender button (#f9f0ff) → aubergine hover with translate(3px) animation
• Sidebar Blue (#1264a3) as secondary interactive accent
• Uppercase labels with wide tracking (0.8px–0.96px) for enterprise structure
• Soft, wide-radius shadows (32px blur at 0.1 opacity) — cloud-like elevation
• Purple inset ring (rgb(97,31,105) 0px 0px 0px 1px inset) for active states

2. Color Palette & Roles

Primary Brand

• Aubergine (#481a54): Deep purple brand color — hero backgrounds, dark sections
• Aubergine Dark (#4a154b): Button hover, slightly different shade for depth
• Aubergine Link (#611f69): Purple link text variant

Interactive

• Sidebar Blue (#1264a3): --sidebar-highlight-color, active states, focus borders
• Hover Blue (#3860be): All link hover states transition to this blue
• Lavender Surface (#f9f0ff): Primary button background — soft, inviting purple tint
• Purple Border (#592466): Button borders on purple context
• Purple Inset (rgb(97, 31, 105)): Inset ring shadow for active/focus

Text

• White (#ffffff): Primary text on dark/purple surfaces
• Near Black (#1d1d1d): Primary text on light surfaces
• Black (#000000): Secondary, attachment color
• Mid Gray (#696969): Muted text, secondary descriptions

Shadows

• Soft Wide (rgba(0,0,0,0.1) 0px 0px 32px): Primary card elevation — cloud-like
• Button Lift (rgba(0,0,0,0.1) 0px 5px 20px): Button default shadow
• Subtle (rgba(0,0,0,0.2) 0px 1px 10px): Light elevation

3. Typography Rules

Font Families

• Display: Salesforce-Avant-Garde, fallbacks: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans
• Body / UI: Salesforce-Sans, same fallback stack

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Hero	SF-Avant-Garde	64px (4.00rem)	700	1.12 (tight)	-0.768px	Maximum impact
Display Secondary	SF-Avant-Garde	58px (3.63rem)	600	1.25 (tight)	-0.464px	Sub-hero
Section Heading	SF-Avant-Garde	50px (3.13rem)	700	1.12 (tight)	-0.6px	Feature sections
Sub-heading	SF-Avant-Garde	32px (2.00rem)	700	1.25 (tight)	-0.256px	Card headings
Card Title	SF-Avant-Garde	24px (1.50rem)	700	1.33	-0.096px	Smaller headings
Feature Label	SF-Avant-Garde	18px (1.13rem)	600	1.56	-0.0216px	Feature emphasis
Body Bold	Salesforce-Sans	18px (1.13rem)	700	1.55–1.67	-0.072px	Strong body
Body	Salesforce-Sans	18px (1.13rem)	400	1.55	-0.0216px	Standard reading
Body Light	Salesforce-Sans	18px (1.13rem)	300	—	—	Light variant
Button Large	SF-Avant-Garde / SF-Sans	18px (1.13rem)	700	—	—	Primary CTA
Button	Salesforce-Sans	16px (1.00rem)	700	1.38	0.2px	Standard button
Nav Bold	Salesforce-Sans	15px (0.94rem)	700	1.55	-0.0216px	Navigation
Caption	Salesforce-Sans	14px (0.88rem)	400–700	1.30–1.55	0.1px	Metadata
Uppercase Label	Salesforce-Sans	14px (0.88rem)	700	1.29 (tight)	0.798px	text-transform: uppercase
Uppercase Small	Salesforce-Sans	12px (0.75rem)	700	1.00 (tight)	0.96px	text-transform: uppercase

Principles

• Dual-font Salesforce system: Avant-Garde for display authority, Sans for body reliability. The enterprise weight of Salesforce's type system gives Slack corporate credibility.
• Negative tracking on display: -0.256px to -0.768px on headings creates compressed, impactful titles.
• Positive tracking on labels: +0.2px to +0.96px on uppercase labels creates the structured enterprise labeling system.
• Weight 700 dominant for headings: Both fonts use bold as the primary heading weight — confident, not subtle.

4. Component Stylings

Buttons

Primary Lavender

• Background: #f9f0ff (soft lavender)
• Text: #000000
• Padding: 10px 30px
• Shadow: rgba(0,0,0,0.1) 0px 5px 20px
• Hover: background #4a154b (aubergine), text white, border 2px solid #1264a3, translate(3px)
• Active: text #1264a3, inset ring rgb(255,255,255) 0px 0px 0px 2px inset, dotted outline #611f69
• The signature button — lavender to aubergine on hover

Pill Button (90px radius)

• Salesforce-Sans 16px weight 700
• Various background treatments
• 90px radius creates large pill shape

Uppercase Small

• Salesforce-Sans 12px weight 700
• text-transform: uppercase
• Letter-spacing: 0.96px
• 4px radius

Cards & Containers

• Background: white
• Radius: 16px (cards), 48px (large panels)
• Shadow: rgba(0,0,0,0.1) 0px 0px 32px (soft, wide)
• Border: 1px solid rgba(0,0,0,0.04) (ultra-subtle)
• Product screenshots as primary card content

Navigation

• Dark aubergine header or white header
• Salesforce-Sans 15px weight 700 for nav links
• Slack/Salesforce logo left-aligned
• Lavender CTA button right-aligned
• Mobile: hamburger with 4px radius toggle

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 5px, 6px, 8px, 10px, 12px, 16px, 19px, 20px, 23px, 24px, 28px

Grid & Container

• Centered content with generous max-width
• Product demo sections with screenshots
• Stat counter sections with large numbers
• Trust bar with company logos
• Full-width aubergine footer

Whitespace Philosophy

• Enterprise generosity: Wide spacing between sections creates a professional, unhurried pace that communicates stability.
• Demo-forward: Product screenshots and UI demos get generous space to breathe.

Border Radius Scale

• Minimal (2px): Close buttons, small utility
• Subtle (4px): Standard buttons, search
• Standard (8px): List items, video containers
• Comfortable (12px): Video, medium panels
• Card (16px): Feature cards, navigation
• Large (48px): Hero panels, large containers
• Pill (90px): Primary CTA buttons

6. Depth & Elevation

Level	Treatment	Use
Flat (Level 0)	No shadow	Default surfaces
Soft Wide (Level 1)	rgba(0,0,0,0.1) 0px 0px 32px	Cards, demo panels
Button (Level 2)	rgba(0,0,0,0.1) 0px 5px 20px	CTA buttons
Subtle (Level 3)	rgba(0,0,0,0.2) 0px 1px 10px	Dropdowns
Purple Inset	rgb(97,31,105) 0px 0px 0px 1px inset	Active state ring

Shadow Philosophy: Slack uses notably wide-radius shadows (32px blur) at low opacity (0.1), creating a cloud-like floating quality. Elements don't appear elevated — they appear to gently hover, reflecting the "Slack is where work happens in the cloud" metaphor.

7. Do's and Don'ts

Do

• Use aubergine (#481a54 / #4a154b) as the primary brand color — it's Slack's identity
• Apply the lavender-to-aubergine hover transition on primary buttons
• Use Salesforce-Avant-Garde for display headings only, Salesforce-Sans for everything else
• Apply uppercase + positive letter-spacing (0.8px–0.96px) for labels and small buttons
• Use wide-radius shadows (32px blur) for cloud-like elevation
• Include the translate(3px) hover animation on buttons
• Use Sidebar Blue (#1264a3) for secondary interactive accents

Don't

• Don't use standard blue as the primary brand color — aubergine is non-negotiable
• Don't skip the hover animation (translate + color shift) on primary buttons
• Don't use heavy/sharp shadows — Slack's elevation is soft and wide
• Don't apply negative letter-spacing to button labels — buttons use positive tracking
• Don't use aubergine as body text color — it's for surfaces and dark sections
• Don't mix Avant-Garde into body text — it's display-only

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	<479px	Single column, hamburger nav
Mobile Large	479–768px	Slight adjustments
Tablet	768–1024px	2-column layouts begin
Desktop	1024–1280px	Standard desktop layout
Large Desktop	1280–1440px	Expanded
Ultra-wide	>1440px	Maximum width

Collapsing Strategy

• Hero: 64px → 50px → scales down
• Navigation: horizontal → hamburger (4px radius toggle)
• Feature sections: side-by-side → stacked
• Stats: horizontal counters → vertical
• Buttons: maintain pill shape, full-width on mobile

9. Agent Prompt Guide

Quick Color Reference

• Brand: Aubergine (#481a54)
• Button: Lavender (#f9f0ff)
• Button hover: Aubergine Dark (#4a154b)
• Interactive: Sidebar Blue (#1264a3)
• Text light: White (#ffffff)
• Text dark: Near Black (#1d1d1d)
• Muted: Mid Gray (#696969)

Example Component Prompts

• "Create a hero: white background. Headline at 64px Salesforce-Avant-Garde weight 700, line-height 1.12, letter-spacing -0.768px, black text. Lavender CTA button (#f9f0ff, 10px 30px padding, shadow rgba(0,0,0,0.1) 0px 5px 20px). On hover: aubergine (#4a154b) background, white text, translate(3px)."
• "Design an aubergine section: #481a54 background. White text at 32px SF-Avant-Garde weight 700. Stat counters at 50px weight 700."
• "Build uppercase label: 12px Salesforce-Sans weight 700, text-transform uppercase, letter-spacing 0.96px."
• "Create a card: white background, 16px radius, shadow rgba(0,0,0,0.1) 0px 0px 32px. Product screenshot inside."

Iteration Guide

1. Aubergine purple is the signature — every design should include it somewhere
2. Lavender (#f9f0ff) buttons with aubergine hover = the Slack interaction
3. Salesforce-Avant-Garde for display, Salesforce-Sans for body — strict split
4. Uppercase + positive tracking for labels and small buttons
5. Soft wide shadows (32px blur) for the cloud-floating quality
6. translate(3px) on hover for playful enterprise personality