# Дизайн-система, вдохновлённая Slack

> Category: Продуктивность и SaaS
> Платформа для корпоративного общения. Основной цвет — баклажан, многоцветная логотипная палитра, светлые поверхности с тёмной боковой панелью, тёплый и дружелюбный тон.

## 1. Визуальная тема и атмосфера

Идентичность Slack построена на идее, что работа должна ощущаться по-человечески и даже немного весело. Каноническая поверхность — **светлая**: белые области контента с глубокой баклажановой боковой панелью (`#4A154B`) — в противовес инструментам с тёмным фоном. Этот контраст намеренный: боковая панель служит спокойным, всегда присутствующим навигационным якорем, тогда как область контента — яркая и открытая.

Логотипная палитра — синий, зелёный, жёлтый, красный — появляется преимущественно в иконке решётки и в маркетинговых контекстах, а не разбросана по интерфейсу. В самом продукте Slack использует сдержанную профессиональную цветовую систему, где баклажановый — единственный якорь бренда.

**Ключевые характеристики:**
- Светлые поверхности контента: белый `#FFFFFF` и почти белый `#F8F8F8`
- Глубокая баклажановая боковая панель `#4A154B` — самый узнаваемый UI-элемент бренда
- Четыре акцентных цвета логотипа (синий, зелёный, жёлтый, красный) используются экономно, только как акценты
- Larsseit для заголовков (маркетинг), системный sans-serif для интерфейса
- Скруглённый, но не мультяшный: радиус 4–8px у большинства компонентов
- Плотный, но «дышащий»: компактные строки сообщений с чёткой иерархией тредов
- Тёплый и разговорный тон — эмодзи, реакции и иллюстрации являются полноправными элементами

---

## 2. Цветовая палитра и роли

### Основной цвет бренда
| Токен | Hex | Роль |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Фон боковой панели, основной цвет бренда |
| `--color-aubergine-dark` | `#350d36` | Состояния наведения на баклажановых поверхностях |
| `--color-aubergine-light` | `#611f69` | Выделение активного элемента в боковой панели |

### Акцентные цвета логотипа (использовать экономно — только акценты, иконки, маркетинг)
| Токен | Hex | Название | Роль |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Небесно-голубой | Иконки каналов, ссылки, информационные состояния |
| `--color-green` | `#2EB67D` | Бирюзово-зелёный | Статус онлайн, состояния успеха |
| `--color-yellow` | `#ECB22E` | Золотой | Статус «отошёл», предупреждения, акценты |
| `--color-red` | `#E01E5A` | Рубиновый | Уведомления, ошибки, бейдж упоминаний |

### Поверхности и фоны
| Токен | Hex | Роль |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Основная область сообщений, модальные окна |
| `--bg-secondary` | `#F8F8F8` | Панели тредов, вторичные поверхности |
| `--bg-tertiary` | `#F1F1F1` | Фоны полей ввода, состояния наведения |
| `--bg-sidebar` | `#4A154B` | Левая боковая панель (баклажановая) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Наведение на элемент боковой панели |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Активный элемент боковой панели |
| `--bg-message-hover` | `#F8F8F8` | Наведение на строку сообщения |

### Цвета текста
| Токен | Hex | Роль |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Основной текст (почти чёрный) |
| `--text-secondary` | `#616061` | Временны́е метки, приглушённые подписи |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Названия каналов в боковой панели |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Неактивные элементы боковой панели |
| `--text-link` | `#1264A3` | Встроенные ссылки в сообщениях |
| `--text-mention` | `#1264A3` | Цвет текста @упоминаний |

### Семантические цвета
| Токен | Hex | Роль |
|---|---|---|
| `--color-success` | `#2EB67D` | Уведомления об успехе, положительные состояния |
| `--color-warning` | `#ECB22E` | Предупреждающие состояния |
| `--color-danger` | `#E01E5A` | Состояния ошибок, деструктивные действия |
| `--color-info` | `#36C5F0` | Информационные акценты |

### Границы и разделители
| Токен | Hex | Роль |
|---|---|---|
| `--border-default` | `#DDDDDD` | Стандартные разделители, границы карточек |
| `--border-subtle` | `#F1F1F1` | Ненавязчивые разделители между строками |
| `--border-focus` | `#1264A3` | Цвет кольца фокуса |

---

## 3. Типографические правила

### Шрифты
| Роль | Официальный | Веб-замена |
|---|---|---|
| Дисплейные / Маркетинговые заголовки | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| Интерфейс / Текст / Chrome | Slack Lato (кастомный) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Код / Моноширинный | — | `'Monaco', 'Menlo', 'Courier New', monospace` |

> Slack использует **Larsseit** для маркетинговых заголовков и кастомный вариант Lato для интерфейса продукта. Для веб-использования `system-ui` — наиболее надёжная замена.

### Шкала типографики

| Уровень | Размер | Начертание | Высота строки | Межбуквенный интервал | Использование |
|---|---|---|---|---|---|
| Дисплей XL | 48px | 800 | 1.1 | -1px | Маркетинговые заголовки-герои |
| Дисплей L | 36px | 700 | 1.15 | -0.5px | Секционные герои |
| Заголовок 1 | 28px | 700 | 1.25 | normal | Заголовки модальных окон, заголовки страниц |
| Заголовок 2 | 22px | 700 | 1.3 | normal | Заголовки карточек, разделы настроек |
| Заголовок 3 | 18px | 700 | 1.35 | normal | Заголовки подразделов |
| Текст L | 16px | 400 | 1.5 | normal | Текст сообщений, описания |
| Текст | 15px | 400 | 1.46667 | normal | Текст интерфейса по умолчанию (базовый размер Slack) |
| Текст SM | 13px | 400 | 1.38462 | normal | Вторичные метаданные |
| Подпись | 12px | 400 | 1.33 | normal | Временны́е метки, подсказки |
| Код | 12px | 400 | 1.5 | normal | Встроенный код, блоки кода |

### Типографические правила
- Базовый размер текста в Slack — **15px** — немного меньше 16px для плотности
- Непрочитанные каналы: начертание 700 — жирный шрифт является основным индикатором непрочитанного
- Временны́е метки: 12px `--text-secondary`, отображаются только при наведении
- Блоки кода: фон `#F8F8F8`, граница `1px solid #DDDDDD`, border-radius 4px
- Никогда не использовать размеры шрифта менее 12px
- Маркетинговые заголовки: межбуквенный интервал `-1px` для крупных дисплейных размеров

---

## 4. Стили компонентов

### Кнопки

```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; }
```

### Поля ввода
```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;
}
```

### Элемент канала в боковой панели
```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;
}
```

### Бейдж непрочитанного
```css
.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}
```

### Вложения сообщений / Карточки
```css
.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}
```

### Реакции
```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. Принципы компоновки

### Трёхколоночная компоновка
```
┌──────────────┬──────────────────────────────┬─────────────┐
│   Sidebar    │        Message Area          │   Thread    │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  optional   │
└──────────────┴──────────────────────────────┴─────────────┘
```

### Система отступов (базовый блок 4px)
| Токен | Значение | Использование |
|---|---|---|
| `--space-1` | 4px | Узкие промежутки |
| `--space-2` | 8px | Внутренние отступы компонента |
| `--space-3` | 12px | Внутренние отступы полей ввода |
| `--space-4` | 16px | Стандартные отступы |
| `--space-6` | 24px | Отступы карточек |
| `--space-8` | 32px | Промежутки между секциями |

### Структура боковой панели
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
  # general
  # random
  # design  ● (unread)
────────────────────
▼ Direct Messages
  John Doe
  Jane Smith
```

### Строка ввода сообщения
- Закреплена в нижней части области сообщений
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Панель инструментов: эмодзи, вложение, форматирование, кнопка отправки

---

## 6. Глубина и возвышение

Slack использует лёгкие тени на светлой поверхности:

| Уровень | Использование | Тень |
|---|---|---|
| Плоский | Строки сообщений, элементы боковой панели | none |
| Низкий | Карточки, поля ввода | `0 1px 3px rgba(0,0,0,0.08)` |
| Средний | Выпадающие меню, поповеры | `0 4px 12px rgba(0,0,0,0.12)` |
| Высокий | Модальные окна, диалоги | `0 8px 24px rgba(0,0,0,0.15)` |
| Оверлей | Фоны модальных окон | `rgba(0,0,0,0.5)` |

---

## 7. Что делать и чего не делать

### ✅ Делать
- Использовать баклажановый `#4A154B` для боковой панели — это самый узнаваемый UI-элемент Slack
- Сохранять основную область контента белой и светлой
- Использовать `#1D1C1D` (почти чёрный) для всего основного текста, а не чистый чёрный
- Выделять названия каналов жирным для обозначения непрочитанных — начертание является индикатором
- Использовать четыре акцентных цвета только для семантических ролей (успех, предупреждение, опасность, информация)
- Применять `border-left: 4px` к вложениям и встроенным элементам сообщений
- Показывать временны́е метки только при наведении
- Использовать `#1264A3` для ссылок и состояний фокуса
- Сохранять компактность элементов боковой панели: высота 28px, border-radius 6px

### ❌ Не делать
- Не использовать тёмную основную область контента — Slack светлый по умолчанию
- Не рассыпать синий/зелёный/жёлтый/красный как декоративные акценты
- Не использовать чистый чёрный `#000000` для текста
- Не использовать речевые пузыри — сообщения являются плоскими строками
- Не делать кнопки с большим радиусом — 4px является стандартом
- Не отображать временны́е метки постоянно
- Не использовать ЗАГЛАВНЫЕ БУКВЫ для названий каналов
- Не использовать размеры шрифта менее 12px

---

## 8. Адаптивное поведение

### Контрольные точки
| Контрольная точка | Ширина | Компоновка |
|---|---|---|
| Мобильный | < 768px | Одна панель, боковая панель как левый выдвижной ящик |
| Планшет | 768–1024px | Только боковая панель + область сообщений |
| Десктоп | > 1024px | Полная трёхколоночная компоновка |

### Мобильные адаптации
- Боковая панель: левый выдвижной ящик, открывается смахиванием вправо
- Нижняя панель вкладок: Главная, Личные сообщения, Активность, Я
- Панель треда: полноэкранный оверлей
- Строка ввода: закреплена над клавиатурой
- Элементы списка каналов: высота касательной области 44px
- Баклажановая верхняя панель заголовка сохраняется на мобильном

---

## 9. Руководство по промптам для агента

При генерации дизайнов в стиле Slack следуйте этому подходу:

**Применение цветов:**
> Установите `background: #FFFFFF` в качестве основного холста. Используйте `#4A154B` (баклажановый) для боковой панели. Весь основной текст — `#1D1C1D`. Ссылки и кольца фокуса используют `#1264A3`. Четыре цвета логотипа — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — только семантические: информация, успех, предупреждение, опасность.

**Типографика:**
> Используйте `system-ui, -apple-system, sans-serif` для всего интерфейса. Базовый размер — 15px. Непрочитанные каналы: начертание 700. Основной текст: начертание 400. Временны́е метки: 12px `#616061`, только при наведении. Код: `Monaco, Menlo, monospace`, 12px, фон `#F8F8F8`.

**Компоновка:**
> Три колонки: баклажановая боковая панель 240px + гибкая белая область сообщений + опциональная панель тредов 400px. Элементы боковой панели: высота 28px, радиус 6px, жирный при непрочитанном. Строка ввода: закреплена внизу, `border: 1px solid #DDDDDD`, `border-radius: 8px`.

**Компоненты:**
> Кнопки: радиус 4px, высота 36px, основная баклажановая. Поля ввода: граница `1px solid #DDDDDD`, кольцо фокуса `#1264A3`. Строки сообщений: плоские, без пузырей, круглый аватар 36px. Реакции: таблетка `border: 1px solid #DDDDDD`, `border-radius: 24px`.

**Тон:**
> Slack тёплый, профессиональный и человечный. Пустые состояния используют дружелюбные иллюстрации. Призывы к действию прямые: «Отправить сообщение», «Начать». Сообщения об ошибках ясные и полезные. Никогда не пугающие.

**Антипаттерны, которых следует избегать:**
> Никакой тёмной области контента. Никаких речевых пузырей. Никакого чисто чёрного текста. Никаких разбросанных многоцветных акцентов. Никаких названий каналов ЗАГЛАВНЫМИ БУКВАМИ. Никаких шрифтов ниже 12px. Никаких кнопок с большим радиусом.