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. Стилі Компонентів

### Кнопки

```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. Принципи Макету

### Триколонковий Макет
```
┌──────────────┬──────────────────────────────┬─────────────┐
│  Бічна      │        Область Повідомлень    │   Гілка     │
│  Панель     │          (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. Ніякого великого радіуса кнопок.