The built-in system copies Slack's brand and website: the logo aubergine everywhere, including the buttons, the Larsseit headline font and the bright logo colours. Our copy is Slack's app: Slack-Lato with black-weight names, a green send button, a blue open channel, and the classic design too. They share the text colours, the 15px size and the ruby red.
Every value below is read from the two systems' own files. Colour verdicts are measured: the two colours are put on their page background and their distance is measured in OKLab, a colour space built to match how people see colour. Under 0.012 counts as the same, under 0.05 as close, anything above as different.
7the same
12close
17different
11only in our copy
Which one to use
For the AltLeads CRM (an app), use our copy as the Slack reference. It has the app's real colours, sizes, 722 icons, messages, menus, states, classic design and real classic dark mode.
Use the built-in when you want Slack's brand look fast, for example a marketing page, a deck or an email.
Side by side
The same parts, drawn by each system's own CSS, row for row. Left: the built-in. Right: our copy. Hover and click work in both.
Built-inOpen Design's Slack package
Part
Our copyfrom the real Slack app
Colours
Swatches show each colour on its own page background.
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Page background | #ffffff--bg | #fff--dt_color-base-pry | Samedifference 0.000 | |
| Soft surface (hover, threads) | #f8f8f8--surface | #f8f8f8--dt_color-base-sec | Samedifference 0.000 | |
| Main text | #1d1c1d--fg | #1d1c1d--dt_color-content-pry | Samedifference 0.000 | Both use Slack's near-black #1d1c1d. |
| Secondary text (times) | #616061--muted | #454447--dt_color-content-sec | Differentdifference 0.102 | The built-in grey #616061 is the classic one (we measured it in the 2020-23 picture); Slack's current stylesheet uses a darker grey. |
| Lines and borders | #dddddd--border | #5e5d6073--dt_color-otl-sec | Differentdifference 0.121 | Slack draws lines with a see-through grey. |
| Faint lines (dividers) | #f1f1f1--border-soft | #5e5d6021--dt_color-otl-ter | Closedifference 0.021 | |
| Main button | #4a154b--accent | #007a5a--dt_color-base-inv-hgl-2 | Differentdifference 0.296 | The built-in paints buttons aubergine. Slack's own main button is green (#007a5a), in its stylesheet and in every picture. |
| Sidebar | #4a154b--accent (sidebar) | #3d0157--sl-window-top (new design) | Differentdifference 0.053 | The built-in uses the logo aubergine #4a154b. The new app window is a deeper #3d0157; classic Slack measured #3e103f. |
| Classic sidebar (Aubergine theme) | #4a154b--accent (sidebar) | #3e103f--slc-column (measured) | Closedifference 0.036 | Close to the logo colour, a little redder. |
| Green (success, online) | #2eb67d--success | #007a5a--dt_color-content-hgl-2 | Differentdifference 0.181 | The built-in uses the bright logo green; Slack's app text green is deeper. |
| Yellow (warning) | #ecb22e--warn | #6b5000--dt_color-content-hgl-3 | Differentdifference 0.354 | The built-in uses the logo yellow; the app uses a dark ochre for warning text and a pale yellow fill. |
| Red (badges, danger) | #e01e5a--danger | #e01e5a--dt_color-base-inv-imp | Samedifference 0.000 | Both use Slack's ruby #e01e5a. |
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Page background | #0f1115dark kit page | #1d1c1d--dt_color-base-pry (ours) | Differentdifference 0.051 | Real classic Slack dark is #1a1d21 (measured); the built-in kit is a cool near-black. |
| Classic dark page (real) | #0f1115dark kit page | #1a1d21--slc-bg (measured 2019) | Differentdifference 0.052 | |
| Soft surface | #171a21dark kit surface | rgb(38,36,38)--dt_color-base-sec (ours) | Closedifference 0.047 | |
| Main text | #f8fafcdark kit text | #fff--dt_color-content-pry (ours) | Closedifference 0.016 | Slack's classic dark text was a soft grey-white, not pure white. |
| Secondary text | #a7adbadark kit muted | #cbcccf--dt_color-content-sec (ours) | Differentdifference 0.100 | |
| Lines and borders | #2a2f3adark kit border | #f8f8f88c--dt_color-otl-sec (ours) | Differentdifference 0.365 | |
| Classic dark sidebar (real) | #171a21dark kit surface | #19171d--slc-column (measured 2019) | Samedifference 0.012 | Slack's 2019 dark sidebar dropped the purple: #19171d. |
Type
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Font | The system font for text; "Larsseit" (Slack's marketing font, not installed here) for headings | Slack-Lato everywhere, from Slack's own font files (regular, bold, black, light, italics) | Different | The app has used Lato for years; Larsseit is only on Slack's website. |
| Body text | 15px · line 1.5 | 15px · line 1.46668 (22px) | Same | The same base size. |
| Names and titles | Weight 700 (bold) | Weight 900 (black) for names, channel names and titles | Different | The black weight is a big part of Slack's look. |
| Largest title | 48px website headline | 28px (Slack Kit headline) | Different | |
| Small text | 12 and 13px | 12px times and counts, 13px captions and tooltips | Same | |
| Weights in use | 400 and 700 | 400, 700 and 900 (600 exists but is rare) | Close |
Shape and size
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Button corners | 4px | 4 / 8 / 12px for small / medium / large | Close | |
| Button height | 36px | 28 / 36 / 44px | Close | The built-in has the medium size only. |
| Text field | 36px, 1px #ddd line, 4px corners | 36px, 1px line, 8px corners, focus ring instead of a line | Close | |
| Sidebar rows | 28px, 6px corners, open channel = white at 20% | 28px, 6px corners, open channel solid blue (#1f70c1 new, #1264a3 classic) | Different | Slack highlights the open channel in blue, not white. |
| Reactions | Pill, 1px line, grey fill; yours = 10% blue with a blue line | Pill 24px, no line, 4% grey; yours = 5% blue, 30% blue line, bold count (Slack's own rule) | Close | |
| Messages | None | 36px avatar, black-weight name, hover wash and toolbar, mentions, day divider | Only in ours | |
| Menus and tooltips | None | Slack Kit menu (blue highlighted row) and tooltip (near-black, 13px bold) | Only in ours |
Depth and focus
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Raised shadow | 0 4px 12px black 12% | Slack Kit scale sm to 2xl; menus use a 1px ring plus 0 4px 12px black 12% | Close | The built-in shadow matches Slack's menu shadow, without its ring. |
| Keyboard focus | 2px blue halo at 25% | 1px blue line plus a 4px blue glow at 30% (shadow-a11y) | Close | |
| Dark mode depth | Not defined | Shadows stay; lines get lighter see-through greys | Only in ours |
Motion
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Hover and colour changes | 150ms, curve (0.2, 0, 0, 1) | 80ms, Slack's curve (.36, .19, .29, 1) | Different | Slack is about twice as fast. |
| Speed scale | 150 and 200ms | 80, 160, 200, 240, 320, 400, 480ms | Only in ours | |
| Tooltip | None | Fades in after a 0.3s pause | Only in ours |
What each one includes
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Where the values come from | Open Design's summary of Slack's brand and website | Slack's public "Slack Kit" stylesheet and icon font, plus Slack's own pictures (new and classic) | Different | |
| Design tokens | 56 | 138 light colours + 280 palette + 114 static, plus 70 classic values | Only in ours | |
| Real Slack icons | None | 722, from Slack's own "Slack v2" icon font | Only in ours | |
| Components | Buttons, text field, sidebar, reactions, page layouts | All of those plus menus, tooltips, messages, message box, tabs, badges, avatars and presence, dialogs, toasts | Only in ours | |
| States | Hover and focus on buttons, fields and channels | Rest, hover, pressed, focus and disabled for every control, frozen side by side | Only in ours | |
| Dark mode | A generic dark kit (not Slack's colours) | Classic: Slack's real 2019 dark colours, measured. New design: ours, from Slack's inverse tokens | Different | |
| Classic Slack | None | The 2019 and 2020-23 designs: measured tokens and two rebuilt screens | Only in ours | |
| Product screens | None. 6 sample pages in this style: landing, deck, form, email, newsletter, poster | 4 Slack screens rebuilt and checked pixel by pixel (91.1%, 88.3%, 95.9%, 91.9%), all clickable, light and dark | Only in ours | |
| Guidelines | DESIGN.md in several languages | Plain-language rules, a mini Slack to try, and a 29-law UX scorecard | Close |
The built-in package, as it ships
Open Design's own Slack pages, unchanged. Pick one to open it here.
Our copy
Our Slack design system, built from the real Slack app
- One page, one scroll: colours, type, 722 real icons, every component and state, motion, dark mode, classic Slack, a mini Slack to try, rules and the UX scorecard
- Four real Slack screens rebuilt and checked pixel by pixel (new and classic), all clickable, light and dark