# Design System Inspired by Discord

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

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

Продукт Discord розроблений для вечорів, рейдів та групових голосових сесій — тому вся поверхня є темною за замовчуванням. Стандартний фон — глибокий `Background Primary` (`#313338` у світлій темі, `#1e1f22` у темній), а колонки чату накладаються на трохи світліші або темніші відтінки для позначення каналів, гілок обговорень і бічних панелей. Фірмовий **Blurple** (`#5865f2`) зарезервований для знаку бренду, основних CTA, згадок та власного ідентифікатора — використовується дозовано, щоб виділятися на тлі приглушених нейтральних тонів.

Типографіка — **gg sans** (власна заміна Whitney від Discord) для основного тексту та інтерфейсу, із заокругленими геометричними формами, які виглядають доступно, але залишаються зрозумілими за малих розмірів, яких вимагає чат-клієнт. Заголовки збільшуються поступово; рядки чату щільні (4–8px між групами повідомлень), щоб годинний скролбек залишався легким для перегляду.

Мова форм — заокруглена, але не роздута: радіус 8px для карток, 4px для полів введення, повні овали для значків статусу та теґів. Сервери — аватари у формі заокругленого квадрата розміром 48px, які перетворюються на кола при наведенні — невеликий елемент руху, що став частиною фірмового стилю бренду.

**Ключові характеристики:**
- Темні поверхні за замовчуванням: `#1e1f22` / `#2b2d31` / `#313338` (3 рівні глибини)
- Blurple `#5865f2` як єдиний насичений акцент у поверхні чату
- gg sans (стиль Whitney) для всього тексту — дружній, геометричний, нейтральний
- Аватари серверів у формі заокругленого квадрата (радіус 16px), що перетворюються на кола при наведенні
- Щільний міжрядковий інтервал у чаті, великі відступи в бічній панелі
- Точки статусу: зелена — онлайн, жовта — відсутній, червона — не турбувати, сіра — офлайн
- Роздільники 1px з вирівнюванням по пікселях у приглушеному білому з низькою прозорістю

## 2. Кольорова палітра та ролі

### Основні кольори
- **Blurple** (`#5865f2`): Основний колір бренду, основний CTA, виділення згадок.
- **Blurple Hover** (`#4752c4`): Стан наведення/активний для blurple.
- **Blurple Soft** (`#7289da`): Застарілий blurple, другорядний акцент у маркетингу.

### Поверхня (темна тема — за замовчуванням)
- **Background Tertiary** (`#1e1f22`): Панель списку серверів, найглибший фон.
- **Background Secondary** (`#2b2d31`): Бічна панель каналів, бічна панель налаштувань.
- **Background Primary** (`#313338`): Поверхня чату, колонка повідомлень.
- **Background Floating** (`#111214`): Спливаючі елементи, підказки, автодоповнення.
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Оверлей наведення на рядки.
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Активний рядок.

### Поверхня (світла тема)
- **Light Bg Primary** (`#ffffff`): Поверхня чату у світлій темі.
- **Light Bg Secondary** (`#f2f3f5`): Бічна панель у світлій темі.
- **Light Bg Tertiary** (`#e3e5e8`): Найглибша світла поверхня.

### Текст
- **Header Primary** (`#f2f3f5`): Заголовки каналів, назви модальних вікон у темній темі.
- **Header Secondary** (`#b5bac1`): Приглушені заголовки.
- **Text Normal** (`#dbdee1`): Основний текст у темній темі — дещо холодніший за чистий білий.
- **Text Muted** (`#949ba4`): Мітки часу, назви серверів, другорядні метадані.
- **Text Link** (`#00a8fc`): Гіперпосилання в повідомленнях — небесно-блакитний, відрізняється від blurple.
- **Channels Default** (`#80848e`): Назва неактивного каналу в бічній панелі.

### Статус і семантика
- **Status Online** (`#23a55a`): Точка онлайн, стани успіху.
- **Status Idle** (`#f0b232`): Точка відсутності, afk.
- **Status DND** (`#f23f43`): Не турбувати, також використовується як деструктивний червоний.
- **Status Streaming** (`#593695`): Пурпурний колір «трансляції».
- **Status Offline** (`#80848e`): Сірий офлайн.
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): М'яке blurple-накладення на рядки з @-згадками.

### Рамки та роздільники
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Стандартний роздільник у темній темі.
- **Border Subtle** (`#3f4147`): Суцільний роздільник для карток.

## 3. Правила типографіки

### Гарнітура шрифту
- **Основний текст / UI / Заголовки**: `gg sans`, з запасним варіантом: `"Helvetica Neue", Helvetica, Arial, sans-serif`
- **Відображення (застарілий / Whitney)**: `Whitney`, з запасним варіантом: `gg sans`
- **Код / Моноширинний**: `"gg mono"`, з запасним варіантом: `Consolas, Andale Mono, Courier New, Courier, monospace`

### Ієрархія

| Роль | Шрифт | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Маркетинговий герой |
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Заголовки налаштувань/профілю |
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, заголовок каналу |
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | Стандартний текст чату |
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | Автор повідомлення |
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | «Today at 4:32 PM» |
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | Рядки списку каналів |
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Заголовок сервера |
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Текст статусу, мітка редагування |
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Вбудований `code` |
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | Блок ```triple-fenced``` |

### Принципи
- **Дружня геометрія**: gg sans замінює Whitney, маючи заокруглені закінчення символів a/g/s — бренд прагне теплоти без шкоди для читабельності.
- **Контраст насиченості замість контрасту кольору**: ієрархія будується на кроках насиченості 400→500→600→700→800; поверхня залишається нейтральною.
- **Основний текст 16px**: повідомлення чату не зменшуються нижче 16px. Щільність досягається висотою рядка (1.375), а не розміром шрифту.

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

### Кнопки

**Основна**
- Background: `#5865f2`
- Text: `#ffffff`
- Padding: 8px 16px
- Radius: 4px
- Hover: `#4752c4`
- Використання: основні CTA, «Continue», «Join Server»

**Другорядна**
- Background: `#4e5058`
- Text: `#ffffff`
- Padding: 8px 16px
- Radius: 4px
- Hover: `#6d6f78`

**Третинна / Прихована (стиль посилання)**
- Background: transparent
- Text: `#dbdee1`
- Hover: підкреслення тексту, фон не змінюється

**Деструктивна**
- Background: `#da373c`
- Text: `#ffffff`
- Hover: `#a12d2f`

### Поля введення
- Background: `#1e1f22`
- Text: `#dbdee1`
- Border: 1px solid `#1e1f22`
- Radius: 4px
- Padding: 10px 12px
- Focus: border `#5865f2`

### Аватари серверів
- Розмір: 48×48px
- Radius: 16px (заокруглений квадрат) за замовчуванням; при наведенні та в активному стані переходить до 50%.
- Активний стан: біла овальна смуга 4px по лівому краю колонки іконок.

### Точки статусу
- Розмір: 10×10px
- Border: 3px solid background-tertiary (створює ефект «виїмки»)
- Позиція: правий нижній кут аватара.

### Картки / Вставки
- Background: `#2b2d31` (темна) або `#f2f3f5` (світла)
- Ліва рамка: 4px solid акцентний колір вставки.
- Radius: 4px
- Padding: 8px 16px

### Пілюля згадки
- Background: `rgba(88, 101, 242, 0.3)`
- Text: `#c9cdfb`
- Padding: 0 2px
- Radius: 3px

## 5. Відступи та макет

- **Базова одиниця**: 4px. Шкала: 4, 8, 12, 16, 20, 24, 32, 40.
- **Панель серверів**: 72px, фіксована.
- **Бічна панель каналів**: 240px.
- **Список учасників**: 240px на десктопі.
- **Колонка чату**: рідка, мін. 380px.

## 6. Анімація

- **Тривалість**: 200ms для наведення; 350ms для морфінгу аватара в коло; 80ms для появи підказки.
- **Пом'якшення**: `cubic-bezier(0.215, 0.61, 0.355, 1)` для морфінгу аватара (різкий початок і плавне завершення).
- **Пульс сповіщення**: 1.4s ease-in-out infinite для індикатора непрочитаної згадки.

## 7. Обмеження використання

- Зберігайте темну оболонку, компактну щільність та ієрархію дій на основі blurple разом; використання blurple у світлому маркетинговому макеті руйнує відчуття продукту Discord.
- Тримайте поверхні з великою кількістю навігаційних елементів структурованими навколо панелей, бічних меню та колонок чату, а не ізольованих декоративних карток.
- Використовуйте мову аватарів-заокруглених-квадратів і точок статусу при відображенні людей, серверів або активної присутності.