Slack at a glance

A friendly chat app. One font (Slack-Lato), 15px text, black-weight names, an aubergine window around a white message pane, and one green for "send". Messages sit in a calm list; colour is saved for mentions, reactions and unread badges. Small things move fast (80ms) along one curve.

What you notice first

Left: Slack's own picture. Right: our copy, built only from this design system. The copies work. Open one full size to hover messages, react, type and post, switch channels and use the filters. The bar at the bottom of a copy switches dark mode and wipes against the original with a blue line.

New design · channel

New design · search with an AI answer

Classic design (2020 to 2023) · Aubergine theme

Classic design (2019) · real dark mode

Slack names colours by job: base = surfaces, content = text and icons, otl = lines (outlines), pry / sec / ter = first, second, third strength, hgl = highlight (1 blue, 2 green, 3 yellow), imp = important (red), inv = for dark-on-light flips. The values below are read live from the token file, so they are always the real ones.

Core roles · light and dark

Light = Slack's own values. Dark (new design) = ours: Slack's real dark values load only inside the signed-in app, so our dark swaps each role for Slack's own "inverse" token. The classic dark further down is real.

The window and sidebar (new design) shot

Not in the public stylesheet; measured on Slack's pictures. The window is a gradient from deep aubergine (#3d0157) to plum (#77236a). The selected channel in the A1 Company picture is blue (#1f70c1).

Full palette real

20 colour families in 12 strengths (0 = palest, 100 = darkest). Aubergine is Slack's own purple; the others carry Slack's playful names (Cilantro, Horchata, Honeycomb…).

One font everywhere: Slack-Lato, Slack's own build of Lato 2 (regular, bold, black, light, and italics). Text is 15px with a line height of 1.46668 (22px). Names and titles use the black weight (900), which gives Slack its friendly, chunky look.

Slack's size steps: 12, 13, 15, 18, 22, 28. Weights: 400, 600 (semibold, rare), 700, 900. Line heights: 1, 1.25, 1.5 and the 1.46668 used for messages.

722 named icons from Slack's own icon font, "Slack v2" (a font where each letter is a picture). Each was turned into a drawing (SVG) with its real name, so none are redrawn. They are filled with the text colour and drawn on a 20px square in menus, 16 to 24px elsewhere. Two newer icons (Tools, Unreads) are not in the public font; they are cut from Slack's own picture.

The ones you see on the channel screen

All icons

Slack keeps corners friendly but small: 4px on small buttons, 8px on medium buttons, inputs and avatars, 12px on large buttons, dialogs and the message pane. Space comes from one 4px grid.

Space steps

Heights and sizes

Slack's shadows are soft and grey, from sm (a 1px whisper) to 2xl (dialogs). Two more are rings, not shadows: a11y is the blue keyboard-focus ring and error the red one.

Live and clickable, built with slack.css. Hover, click and use the keyboard. Buttons, inputs, menus and tooltips are copied from Slack's own stylesheet; the app frame (messages, sidebar, message box) is measured on Slack's pictures.

MessagesCanvasFilesPins

AL 312 @Madhu

Tabs 13px bold, grey until chosen, the open tab underlined in aubergine 2px est.. Badge 18px round, red --dt_color-base-inv-imp, white 12px bold. Presence 10px dot with a 2px ring in the page colour: green = active, hollow = away. Avatar 8px corners (new), 4px (classic).

A small working Slack built only from this design system. Switch channels, post (use *bold*, _italic_, ~strike~ and `code`), react, reply in a thread, edit or delete your own messages (with Undo), search, and flip between the new and the classic look. It follows the page's dark mode.

Every clickable thing has the same few looks. Each state is frozen below so you can compare them without hovering. Button, input, menu and tooltip states are Slack's own rules real; the app-frame ones are measured shot.

Focus = Slack's two-step blue ring: a 1px blue line plus a 4px blue glow at 30% (--dt_static_shadow-a11y). Errors use the same shape in red. Disabled = grey fill, grey text, no pointer.

Motion

Slack moves little and fast, all on one curve (cubic-bezier(.36, .19, .29, 1): quick start, soft landing). Colours change in 80ms; panels and popovers take 160 to 240ms. Press Play to watch each one.

Slack's motion tokens real

If someone turns on "reduce motion" on their computer, every transition on this page switches off.

Two stories. Classic dark is real: Slack's 2019 dark-mode picture gives the sidebar #19171d, the pane #1a1d21 and text #d1d2d3-ish, all measured. New-design dark is ours: the public stylesheet only says "dark" exists; the values load after login. Ours uses Slack's own inverse tokens, so it stays in Slack's family. Flip this whole page with Dark mode at the top.

What changes in dark mode

Before the 2023 redesign Slack had a dark top bar with search (2020 on), a sidebar painted by a theme (Aubergine by default), full-width rows, square-ish avatars (4px corners), and in 2019 a workspace rail with team icons. Slack no longer publishes those styles, so every value here was measured on Slack's own old pictures (file: slack/slack-classic.css).

Theme colours

Classic Slack let anyone paint the sidebar with 8 colours (column, menu hover, active item, active text, hover item, text, presence, mention badge). The commonly quoted Aubergine string is #3F0E40, #350d36, #1164A3, #FFFFFF, #350D36, #FFFFFF, #2BAC76, #CD2553; we could not find it on an archived Slack page, so treat it as hearsay. The measured picture agrees closely: column #3e103f, active #1264a3, badge #e01e5a.

Checked against Slack's own pictures and files. The small grey label after each rule names the Law of UX behind it; click it to jump there. A red bullet marks a rule where Slack itself falls short.

The rules behind Slack's feel, for AltLeads too. Each card names the UX law, explains it simply, and shows where Slack follows it. All 29 laws are checked one by one in the scorecard below.

Live contrast check

Checklist before any screen ships

All 29 laws from lawsofux.com, each checked against Slack. Every card says what the law means in plain words, what Slack really does, and what AltLeads should take from it. Click a coloured bar to jump to a law, or filter by result.

Add these files to any HTML page, then use the classes. Put sk-dark on <html> (or any parent) for dark mode, and slc-dark for classic dark. The same files are in the Figma kit as variables.

<link rel="stylesheet" href="slack/slack-tokens.css">   <!-- Slack Kit tokens: light (real) + dark (ours) -->
<link rel="stylesheet" href="slack/slack-classic.css">  <!-- classic 2019-2023 values, light + real dark -->
<link rel="stylesheet" href="slack/slack.css">          <!-- components: c-button, c-input_text, c-menu, sk-msg… -->
<body class="sk-root">
<script src="slack/slack-icons.js"></script>            <!-- 722 real icons -->
<script src="slack/slack-kit.js"></script>              <!-- draws <svg data-i="…"> -->

<button class="c-button c-button--primary c-button--medium">Send message</button>
<button class="sk-reaction is-mine"><span class="e">🎉</span>5</button>
<svg class="sk-i" data-i="paperplane-filled"></svg>