---
name: Slack
description: "Work chat with an aubergine sidebar, a four-color brand and clear, friendly hierarchy."
website: https://slack.com
color: "#4A154B"
category: Productivity
updated_at: "2026-10-29"
---

# Slack — DESIGN.md

> An independent summary of Slack's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Slack. Color values are approximate.

## Overview

Slack's interface centers on channels and threads. A strong sidebar color anchors navigation while the message area stays white and readable.

## Color

| Role | Value | Use |
| --- | --- | --- |
| Aubergine | `#4A154B` | Sidebar, brand |
| Blue | `#36C5F0` | Brand accent |
| Green | `#2EB67D` | Brand accent, success |
| Yellow | `#ECB22E` | Brand accent |

## Typography

Lato in the app at 15px; Larsseit-style geometric sans for marketing headlines.

## Spacing and layout

Comfortable message spacing with hover-revealed actions; sidebar items are compact.

## Components

- Sidebar with sections, channels and unread bolding.
- Message hover toolbar (react, reply, more).
- Composer with formatting bar and shortcuts.
- Huddle and thread side panels.

## Do

- Bold unread items instead of adding color.
- Reveal message actions on hover and focus.

## Don't

- Don't use all four brand colors in product UI.
- Don't shrink message text below 14px.

## Prompt for your agent

```
Style this interface in the spirit of Slack's design language, without copying its logo or brand assets.
Work chat with an aubergine sidebar, a four-color brand and clear, friendly hierarchy.
Follow the color roles, type and component notes in this DESIGN.md.
```