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

Система Дизайну, Натхненна Slack

Category: Продуктивність і SaaS Платформа комунікації на робочому місці. Основний колір aubergine, мульти-акцентна палітра логотипу, світлі поверхні з темною бічною панеллю, тепла й дружня атмосфера.

1. Візуальна Тема й Атмосфера

Ідентичність Slack будується навколо ідеї, що робота повинна відчуватися людяною і навіть трохи веселою. Канонічна поверхня — світла — білі зони вмісту з глибокою бічною панеллю aubergine (#4A154B) — протилежність інструментам, що ставлять на перше місце темні теми. Цей контраст є навмисним: бічна панель — спокійний, постійно присутній навігаційний якір, тоді як зона вмісту яскрава й відкрита.

Палітра логотипу — синій, зелений, жовтий, червоний — з'являється переважно в іконці хештегу й маркетингових контекстах, а не розкидана по всьому інтерфейсу. В самому продукті Slack використовує стриману, професійну колірну систему з aubergine як єдиним брендовим якорем.

Ключові Характеристики:

• Світлі поверхні вмісту: білий #FFFFFF і майже білий #F8F8F8
• Глибока бічна панель aubergine #4A154B — найбільш упізнаваний елемент інтерфейсу бренду
• Чотири акцентні кольори логотипу (синій, зелений, жовтий, червоний) використовуються ощадливо лише як підсвічення
• Larsseit для заголовків (маркетинг), системний sans-serif для інтерфейсу
• Округлий, але не мультяшний: радіус 4–8px на більшості компонентів
• Щільний, але з простором для дихання: компактні рядки повідомлень із чіткою ієрархією гілок
• Теплий і розмовний тон — емодзі, реакції та ілюстрації є елементами першого класу

---

2. Колірна Палітра й Ролі

Основний Колір Бренду

Токен	Hex	Роль
--color-aubergine	#4A154B	Фон бічної панелі, основний колір бренду
--color-aubergine-dark	#350d36	Стани наведення на поверхнях aubergine
--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	Ліва бічна панель (aubergine)
--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
Код / Monospace	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack використовує Larsseit для маркетингових заголовків і власний варіант Lato для інтерфейсу в продукті. Для використання в вебі system-ui є найбезпечнішим резервом.

Типографічна Шкала

Рівень	Розмір	Товщина	Висота Рядка	Міжлітерний Інтервал	Використання
Відображення XL	48px	800	1.1	-1px	Маркетингові hero-заголовки
Відображення L	36px	700	1.15	-0.5px	Hero секцій
Заголовок 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
• Маркетингові заголовки: letter-spacing -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. Принципи Макету

Триколонковий Макет

┌──────────────┬──────────────────────────────┬─────────────┐
│  Бічна      │        Область Повідомлень    │   Гілка     │
│  Панель     │          (flex: 1)            │  (400px)    │
│  (240px)    │          #FFFFFF              │необов'язково│
│  #4A154B    │                               │             │
└──────────────┴──────────────────────────────┴─────────────┘

Система Відступів (основа 4px)

Токен	Значення	Використання
--space-1	4px	Тісні проміжки
--space-2	8px	Відступ компонента
--space-3	12px	Відступ поля введення
--space-4	16px	Стандартний відступ
--space-6	24px	Відступ картки
--space-8	32px	Проміжки між секціями

Структура Бічної Панелі

[Назва Робочого Простору ▼]
────────────────────
Гілки
Усі ПП
Чернетки та Надіслані
────────────────────
▼ Канали
  # general
  # random
  # design  ● (непрочитане)
────────────────────
▼ Прямі Повідомлення
  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)
Середній	Спадні меню, popover'и	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. Що Робити й Чого Уникати

✅ Робіть

• Використовуйте aubergine #4A154B для бічної панелі — це найбільш іконічний елемент інтерфейсу Slack
• Тримайте основну зону вмісту білою та світлою
• Використовуйте #1D1C1D (майже чорний) для всього тексту вмісту, не чисто чорний
• Виділяйте назви каналів жирним для відображення статусу непрочитаного — товщина є індикатором
• Використовуйте чотири акцентні кольори лише для семантичних ролей (успіх, попередження, небезпека, інформація)
• Застосовуйте border-left: 4px до вкладень повідомлень та вбудованих елементів
• Показуйте мітки часу лише при наведенні
• Використовуйте #1264A3 для посилань і станів фокусу
• Тримайте елементи бічної панелі компактними: висота 28px, border-radius 6px

❌ Не Робіть

• Не використовуйте темну основну зону вмісту — Slack надає перевагу світлій
• Не розкидайте синій/зелений/жовтий/червоний як декоративні акценти
• Не використовуйте чисто чорний #000000 для тексту
• Не використовуйте мовні бульбашки — повідомлення є плоскими рядками
• Не робіть кнопки з великим радіусом — 4px є стандартом
• Не показуйте мітки часу постійно
• Не використовуйте ВЕЛИКІ ЛІТЕРИ для назв каналів
• Не використовуйте розміри шрифтів менше 12px

---

8. Адаптивна Поведінка

Точки Перелому

Точка Перелому	Ширина	Макет
Мобільний	< 768px	Одна панель, бічна панель як лівий ящик
Планшет	768–1024px	Лише бічна панель + зона повідомлень
Десктоп	> 1024px	Повний триколонковий макет

Мобільні Адаптації

• Бічна панель: лівий ящик, проведіть вправо для відкриття
• Нижня панель вкладок: Головна, ПП, Активність, Я
• Панель гілки: накладення на весь екран
• Редактор: закріплений над клавіатурою
• Елементи списку каналів: висота сенсорної цілі 44px
• Верхня панель заголовка aubergine збережена на мобільному

---

9. Посібник із Запитів Агента

Під час створення дизайнів у стилі Slack дотримуйтесь такого підходу:

Застосування кольору:

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

Типографіка:

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

Макет:

Три колонки: бічна панель aubergine 240px + гнучка біла зона повідомлень + необов'язкова панель гілки 400px. Елементи бічної панелі: висота 28px, радіус 6px, жирний при непрочитаному. Редактор: закріплений внизу, border: 1px solid #DDDDDD, border-radius: 8px.

Компоненти:

Кнопки: радіус 4px, висота 36px, aubergine основний. Поля введення: межа 1px solid #DDDDDD, кільце фокусу #1264A3. Рядки повідомлень: плоскі, без бульбашок, кругла аватарка 36px. Реакції: pill border: 1px solid #DDDDDD, border-radius: 24px.

Тон:

Slack теплий, професійний і людяний. Порожні стани використовують дружні ілюстрації. Заклики до дії прямі: "Надіслати повідомлення", "Розпочати". Повідомлення про помилки чіткі й корисні. Ніколи не тривожні.

Антишаблони, яких слід уникати:

Ніякої темної зони вмісту. Ніяких мовних бульбашок. Ніякого чисто чорного тексту. Ніяких розкиданих багатобарвних акцентів. Ніяких ВЕЛИКИХ ЛІТЕР у назвах каналів. Ніяких шрифтів менше 12px. Ніякого великого радіуса кнопок.