workbuddy_skills/open-design/design-systems/slack/DESIGN.md

# Design System Inspired by Slack

> Category: Productivity & SaaS
> Workplace communication platform. Aubergine-primary, multi-accent logo palette, light surfaces with dark sidebar, warm and approachable.

## 1. Visual Theme & Atmosphere

Slack's identity is built around the idea that work should feel human and even a little fun. The canonical surface is **light** — white content areas with a deep aubergine (`#4A154B`) sidebar — the inverse of dark-first tools. This contrast is intentional: the sidebar is a calm, always-present navigation anchor, while the content area is bright and open.

The logo palette — blue, green, yellow, red — appears primarily in the hashtag icon and marketing contexts, not scattered through the UI. In the product itself, Slack uses a restrained, professional color system with aubergine as the sole brand anchor.

**Key Characteristics:**
- Light-first content surfaces: white `#FFFFFF` and near-white `#F8F8F8`
- Deep aubergine `#4A154B` sidebar — the brand's most recognizable UI element
- Four logo accent colors (blue, green, yellow, red) used sparingly as highlights only
- Larsseit for headings (marketing), system sans-serif for UI
- Rounded but not cartoonish: 4–8px radius on most components
- Dense but breathable: compact message rows with clear thread hierarchy
- Warm and conversational tone — emojis, reactions, and illustrations are first-class

---

## 2. Color Palette & Roles

### Brand Primary
| Token | Hex | Role |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Sidebar background, primary brand color |
| `--color-aubergine-dark` | `#350d36` | Hover states on aubergine surfaces |
| `--color-aubergine-light` | `#611f69` | Active item highlight in sidebar |

### Logo Accent Colors (use sparingly — highlights, icons, marketing only)
| Token | Hex | Name | Role |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Sky Blue | Channel icons, links, info states |
| `--color-green` | `#2EB67D` | Teal Green | Online status, success states |
| `--color-yellow` | `#ECB22E` | Gold | Away status, warnings, highlights |
| `--color-red` | `#E01E5A` | Ruby | Notifications, errors, mentions badge |

### Surface & Background
| Token | Hex | Role |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Main message area, modals |
| `--bg-secondary` | `#F8F8F8` | Thread panels, secondary surfaces |
| `--bg-tertiary` | `#F1F1F1` | Input backgrounds, hover states |
| `--bg-sidebar` | `#4A154B` | Left sidebar (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Sidebar item hover |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Active sidebar item |
| `--bg-message-hover` | `#F8F8F8` | Message row hover |

### Text Colors
| Token | Hex | Role |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Primary body text (near-black) |
| `--text-secondary` | `#616061` | Timestamps, muted labels |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Sidebar channel names |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Sidebar inactive items |
| `--text-link` | `#1264A3` | Inline links in messages |
| `--text-mention` | `#1264A3` | @mention text color |

### Semantic Colors
| Token | Hex | Role |
|---|---|---|
| `--color-success` | `#2EB67D` | Success toasts, positive states |
| `--color-warning` | `#ECB22E` | Warning states |
| `--color-danger` | `#E01E5A` | Error states, destructive actions |
| `--color-info` | `#36C5F0` | Informational highlights |

### Border & Divider
| Token | Hex | Role |
|---|---|---|
| `--border-default` | `#DDDDDD` | Standard dividers, card borders |
| `--border-subtle` | `#F1F1F1` | Subtle separators between rows |
| `--border-focus` | `#1264A3` | Focus ring color |

---

## 3. Typography Rules

### Typefaces
| Role | Official | Web Fallback |
|---|---|---|
| Display / Marketing Headings | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / Body / Chrome | Slack Lato (custom) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Code / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |

> Slack uses **Larsseit** for marketing headlines and a custom Lato variant for in-product UI. For web use, `system-ui` is the safest fallback.

### Type Scale

| Level | Size | Weight | Line Height | Letter Spacing | Usage |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | Marketing hero headlines |
| Display L | 36px | 700 | 1.15 | -0.5px | Section heroes |
| Heading 1 | 28px | 700 | 1.25 | normal | Modal titles, page headers |
| Heading 2 | 22px | 700 | 1.3 | normal | Card titles, settings sections |
| Heading 3 | 18px | 700 | 1.35 | normal | Sub-section headers |
| Body L | 16px | 400 | 1.5 | normal | Message text, descriptions |
| Body | 15px | 400 | 1.46667 | normal | Default UI text (Slack's base size) |
| Body SM | 13px | 400 | 1.38462 | normal | Secondary metadata |
| Caption | 12px | 400 | 1.33 | normal | Timestamps, hints |
| Code | 12px | 400 | 1.5 | normal | Inline code, code blocks |

### Type Rules
- Slack's base body size is **15px** — slightly smaller than 16px for density
- Unread channels: weight 700 — bold is the primary unread indicator
- Timestamps: 12px `--text-secondary`, show on hover only
- Code blocks: background `#F8F8F8`, border `1px solid #DDDDDD`, border-radius 4px
- Never use font sizes below 12px
- Marketing headings: letter-spacing `-1px` for large display sizes

---

## 4. Component Stylings

### Buttons

```css
/* Primary */
.btn-primary {
  background: #4A154B;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #611f69; }

/* Secondary */
.btn-secondary {
  background: #FFFFFF;
  color: #1D1C1D;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }

/* Danger */
.btn-danger {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```

### Input Fields
```css
.input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #1D1C1D;
  font-size: 15px;
  padding: 8px 12px;
  height: 36px;
}
.input:focus {
  border-color: #1264A3;
  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
  outline: none;
}
```

### Sidebar Channel Item
```css
.channel-item {
  height: 28px;
  padding: 0 16px;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 400;
}
.channel-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.channel-item.active {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}
.channel-item.unread {
  color: #FFFFFF;
  font-weight: 700;
}
```

### Unread Badge
```css
.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}
```

### Message Attachments / Cards
```css
.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}
```

### Reactions
```css
.reaction {
  border: 1px solid #DDDDDD;
  border-radius: 24px;
  background: #F8F8F8;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
  background: rgba(18,100,163,0.1);
  border-color: #1264A3;
}
```

---

## 5. Layout Principles

### Three-Column Layout
```
┌──────────────┬──────────────────────────────┬─────────────┐
│   Sidebar    │        Message Area          │   Thread    │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  optional   │
└──────────────┴──────────────────────────────┴─────────────┘
```

### Spacing System (4px base)
| Token | Value | Usage |
|---|---|---|
| `--space-1` | 4px | Tight gaps |
| `--space-2` | 8px | Component padding |
| `--space-3` | 12px | Input padding |
| `--space-4` | 16px | Standard padding |
| `--space-6` | 24px | Card padding |
| `--space-8` | 32px | Section gaps |

### Sidebar Structure
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
  # general
  # random
  # design  ● (unread)
────────────────────
▼ Direct Messages
  John Doe
  Jane Smith
```

### Message Composer
- Pinned to bottom of message area
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Toolbar: emoji, attach, format, send button

---

## 6. Depth & Elevation

Slack uses light shadows on a light surface:

| Level | Usage | Shadow |
|---|---|---|
| Flat | Message rows, sidebar items | none |
| Low | Cards, inputs | `0 1px 3px rgba(0,0,0,0.08)` |
| Medium | Dropdowns, popovers | `0 4px 12px rgba(0,0,0,0.12)` |
| High | Modals, dialogs | `0 8px 24px rgba(0,0,0,0.15)` |
| Overlay | Modal backdrops | `rgba(0,0,0,0.5)` |

---

## 7. Do's and Don'ts

### ✅ Do
- Use aubergine `#4A154B` for the sidebar — it is Slack's most iconic UI element
- Keep the main content area white and light
- Use `#1D1C1D` (near-black) for all body text, not pure black
- Bold channel names to show unread status — weight is the indicator
- Use the four accent colors only for semantic roles (success, warning, danger, info)
- Apply `border-left: 4px` on message attachments and embeds
- Show timestamps on hover only
- Use `#1264A3` for links and focus states
- Keep sidebar items compact: 28px height, 6px border-radius

### ❌ Don't
- Don't use a dark main content area — Slack is light-first
- Don't scatter blue/green/yellow/red as decorative accents
- Don't use pure black `#000000` for text
- Don't use speech bubbles — messages are flat rows
- Don't make buttons large-radius — 4px is standard
- Don't show timestamps permanently
- Don't use ALL CAPS for channel names
- Don't use font sizes below 12px

---

## 8. Responsive Behavior

### Breakpoints
| Breakpoint | Width | Layout |
|---|---|---|
| Mobile | < 768px | Single panel, sidebar as left drawer |
| Tablet | 768–1024px | Sidebar + message area only |
| Desktop | > 1024px | Full three-column layout |

### Mobile Adaptations
- Sidebar: left drawer, swipe right to open
- Bottom tab bar: Home, DMs, Activity, You
- Thread panel: full-screen overlay
- Composer: pinned above keyboard
- Channel list items: 44px touch target height
- Aubergine top header bar retained on mobile

---

## 9. Agent Prompt Guide

When generating Slack-styled designs, follow this approach:

**Color application:**
> Set `background: #FFFFFF` as the main canvas. Use `#4A154B` (aubergine) for the sidebar. All primary text is `#1D1C1D`. Links and focus rings use `#1264A3`. The four logo colors — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — are semantic only: info, success, warning, danger.

**Typography:**
> Use `system-ui, -apple-system, sans-serif` for all UI. Base size is 15px. Unread channels: weight 700. Body text: weight 400. Timestamps: 12px `#616061`, hover-only. Code: `Monaco, Menlo, monospace`, 12px, `#F8F8F8` background.

**Layout:**
> Three columns: 240px aubergine sidebar + flex white message area + optional 400px thread panel. Sidebar items: 28px height, 6px radius, bold when unread. Composer: pinned bottom, `border: 1px solid #DDDDDD`, `border-radius: 8px`.

**Components:**
> Buttons: 4px radius, 36px height, aubergine primary. Inputs: `1px solid #DDDDDD` border, `#1264A3` focus ring. Message rows: flat, no bubbles, 36px circle avatar. Reactions: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.

**Tone:**
> Slack is warm, professional, and human. Empty states use friendly illustrations. CTAs are direct: "Send message", "Get started". Error messages are clear and helpful. Never alarming.

**Anti-patterns to avoid:**
> No dark content area. No speech bubbles. No pure black text. No scattered multi-color accents. No ALL CAPS channel names. No font below 12px. No large button radius.