Slack
slack.comWork chat with an aubergine sidebar, a four-color brand and clear, friendly hierarchy.
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.