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

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.
• Тримайте поверхні з великою кількістю навігаційних елементів структурованими навколо панелей, бічних меню та колонок чату, а не ізольованих декоративних карток.
• Використовуйте мову аватарів-заокруглених-квадратів і точок статусу при відображенні людей, серверів або активної присутності.