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

Дизайн-система, вдохновлённая 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. Стили компонентов

Кнопки

/* 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 {
  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;
}

Элемент канала в боковой панели

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

Бейдж непрочитанного

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

Вложения сообщений / Карточки

.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}

Реакции

.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. Никаких кнопок с большим радиусом.