Design System inspired by Slack

Team messaging. Aubergine and multi-color palette, friendly rounded shapes.

Usage

npx getdesign@latest add slack

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Slack design system. A curated starting point for building Slack-like UIs with your AI coding agent.

Team messaging. Aubergine and multi-color palette, friendly rounded shapes.

Preview

slack.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF SLACK

Team messaging. Aubergine and multi-color palette, friendly rounded shapes.

Explore the system View tokens

Color Palette

Team messaging. Aubergine and multi-color palette, friendly rounded shapes.

Primary

Aubergine

#4a154b

Brand color

Blue

#36c5f0

Brand color

Green

#2eb67d

Brand color

Red

#e01e5a

Brand color

Yellow

#ecb22e

Brand color

White

#ffffff

Brand color

Light Gray

#f8f8f8

Brand color

Dark Gray

#1d1c1d

Brand color

Typography

A type system inspired by Slack.

Slack-Lato

Slack-Lato, Slack-Lato

Lato

Lato, Slack-Lato

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Slack.

Not detected on this URL

Components

Other component primitives mapped from the Slack spec.

Not detected on this URL

Design System Inspired by Slack

1. Visual Theme & Atmosphere

Team messaging. Aubergine and multi-color palette, friendly rounded shapes.

Key Characteristics:

Aubergine (#4A154B) as distinctive sidebar color

Multi-color brand palette (blue, green, red, yellow)

Friendly rounded shapes and UI elements

Emoji-rich communication aesthetic

Sidebar navigation as core UI pattern

2. Color Palette & Roles

Primary

Aubergine (#4A154B): Brand color
Blue (#36C5F0): Brand color
Green (#2EB67D): Brand color
Red (#E01E5A): Brand color
Yellow (#ECB22E): Brand color
White (#FFFFFF): Brand color
Light Gray (#F8F8F8): Brand color
Dark Gray (#1D1C1D): Brand color

3. Typography Rules

Font Family

Display & UI: Slack-Lato, Lato

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth is communicated through background color shifts and subtle shadows or borders.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Aubergine: #4A154B
Blue: #36C5F0
Green: #2EB67D
Red: #E01E5A
Yellow: #ECB22E
White: #FFFFFF

Typography

Font: Slack-Lato, Lato