Slack
A communication-forward canvas anchored in deep aubergine (#4A154B) — one of the most distinctive brand surfaces in enterprise software — with pure white content areas and a four-color icon system (purple, green, yellow, red) borrowed from the hash logo. The interface reads as warm, approachable, and human despite its density. Display type is set in Slack's custom Lato variant at bold weights; channel lists and messages use system-ui at reading size. Surfaces are predominantly white with the aubergine reserved for the left sidebar, making the nav feel like a physical channel strip.
Color Tokens
version: alpha name: Slack description: "A communication-forward canvas anchored in deep aubergine (#4A154B) — one of the most distinctive brand surfaces in enterprise software — with pure white content areas and a four-color icon system (purple, green, yellow, red) borrowed from the hash logo. The interface reads as warm, approachable, and human despite its density. Display type is set in Slack's custom Lato variant at bold weights; channel lists and messages use system-ui at reading size. Surfaces are predominantly white with the aubergine reserved for the left sidebar, making the nav feel like a physical channel strip."
colors: primary: "#4A154B" on-primary: "#ffffff" primary-hover: "#3b1040" secondary: "#ECB22E" ink: "#1D1C1D" ink-muted: "#616061" canvas: "#ffffff" surface-1: "#F8F8F8" surface-2: "#EFEFEF" sidebar: "#4A154B" sidebar-text: "#CFC3CF" sidebar-active: "#ffffff" border: "#DDDDDD" success: "#2BAC76" danger: "#E01E5A" warning: "#ECB22E" info: "#1264A3"
typography: display: fontFamily: "Lato, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.5px body: fontFamily: "Lato, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64]
radius: sm: 4px md: 6px lg: 12px pill: 9999px
shadows: card: "0 1px 3px rgba(0,0,0,0.08)" elevated: "0 4px 16px rgba(0,0,0,0.12)" modal: "0 8px 32px rgba(0,0,0,0.2)"
motion: duration-fast: 80ms duration-base: 150ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Slack's interface is split into two distinct worlds: the aubergine sidebar and the white content area. The deep purple-maroon sidebar (#4A154B) functions as a brand signature — immediately recognizable and unlike anything else in productivity software. The right panel is ruthlessly utilitarian: white surfaces, dark ink, and minimal chrome. The four-color logo palette (purple, green, yellow, red) appears as status dots and reaction icons, adding warmth to an otherwise dense text environment.
2. Color System
- Sidebar: #4A154B — the defining color, used exclusively for navigation chrome
- Canvas: #ffffff — all message and content areas
- Ink: #1D1C1D — near-black, high-legibility message text
- Muted: #616061 — timestamps, secondary labels, status text
- Accent blue: #1264A3 — links, @mentions, interactive elements
- Success green: #2BAC76 — online presence indicators
- Alert red: #E01E5A — notifications, urgent states
- Warm yellow: #ECB22E — highlights, reactions, the Slack star
3. Typography
Slack uses Lato at all weight levels — bold (700) for channel names and display headings, regular (400) for message body. The marketing site uses a heavier, more expressive variant. Line-height is kept loose (1.5) for readability across long threads. No custom display typeface — the brand leans on color and layout rather than typographic drama.
4. Components & Patterns
- Left sidebar: Fixed 220px panel in aubergine. Workspace name at top, channels in tree list, DMs below. Active channel shows white text + subtle highlight.
- Message input: Full-width box with formatting toolbar, pinned to bottom. Rounded rectangle, 1px border.
- Messages: Compact avatar + name + timestamp header, then message body. Hover reveals reaction/action row.
- Buttons: Primary in #1264A3 blue (not aubergine), secondary as ghost with border.
- Emoji reactions: Pill-shaped, white bg, tight horizontal spacing below messages.
5. Spacing & Layout
Three-column layout: workspace switcher (48px), channel sidebar (220px), content area (flex). Content max-width ~860px for readability. Message padding 16px horizontal, 4px vertical between messages from same sender, 16px between different senders. Dense but readable.
6. Motion & Interaction
Fast, confident transitions. Sidebar channel clicks are near-instant. Message send has a subtle optimistic insert. Notifications pulse briefly. Emoji reaction counts animate with a micro-bounce when first added.