Design System Inspired by Discord

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

1. Visual Theme & Atmosphere

Продукт Discord создан для вечерних сессий, рейдов и группового голосового общения — поэтому вся поверхность строится на тёмной теме. Базовый холст — глубокий Background Primary (#313338 в светлой теме, #1e1f22 в тёмной), а колонки чата накладываются поверх чуть более светлых или тёмных оттенков, обозначая каналы, ветки и боковые панели. Фирменный Blurple (#5865f2) зарезервирован для брендового знака, основных призывов к действию, упоминаний и указателя «вы» — используется экономно, чтобы выделяться на фоне приглушённых нейтральных тонов.

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

Форм-язык — округлённый, но не «пузырчатый»: радиус 8px у карточек, 4px у полей ввода, полные пилюли у бейджей статуса и тегов. Аватары серверов — квадраты с закругленными углами 48px, трансформирующиеся в круги при наведении — маленькая деталь движения, ставшая частью идентичности бренда.

Key Characteristics:

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

2. Color Palette & Roles

Primary

• Blurple (#5865f2): Основной брендовый цвет, основной CTA, выделение упоминаний.
• Blurple Hover (#4752c4): Hover/активное состояние для blurple.
• Blurple Soft (#7289da): Устаревший blurple, второстепенный акцент в маркетинге.

Surface (тёмная тема — по умолчанию)

• 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)): Активная строка.

Surface (светлая тема)

• Light Bg Primary (#ffffff): Поверхность чата в светлой теме.
• Light Bg Secondary (#f2f3f5): Боковая панель в светлой теме.
• Light Bg Tertiary (#e3e5e8): Самая глубокая светлая поверхность.

Text

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

Status & Semantic

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

Border & Divider

• Background Modifier Accent (rgba(255, 255, 255, 0.06)): Стандартный разделитель в тёмной теме.
• Border Subtle (#3f4147): Сплошной разделитель для карточек.

3. Typography Rules

Font Family

• Body / UI / Headings: gg sans, запасной стек: "Helvetica Neue", Helvetica, Arial, sans-serif
• Display (устаревший / Whitney): Whitney, запасной стек: gg sans
• Code / Mono: "gg mono", запасной стек: Consolas, Andale Mono, Courier New, Courier, monospace

Hierarchy

Principles

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

4. Component Stylings

Buttons

Primary

• Background: #5865f2
• Text: #ffffff
• Padding: 8px 16px
• Radius: 4px
• Hover: #4752c4
• Применение: основные CTA, «Продолжить», «Присоединиться к серверу»

Secondary

• Background: #4e5058
• Text: #ffffff
• Padding: 8px 16px
• Radius: 4px
• Hover: #6d6f78

Tertiary / Subtle (Link-style)

• Background: transparent
• Text: #dbdee1
• Hover: текст подчёркивается, фон не изменяется

Danger

• Background: #da373c
• Text: #ffffff
• Hover: #a12d2f

Inputs

• Background: #1e1f22
• Text: #dbdee1
• Border: 1px solid #1e1f22
• Radius: 4px
• Padding: 10px 12px
• Focus: border #5865f2

Server Avatars

• Size: 48×48px
• Radius: 16px (квадрат с закруглёнными углами) по умолчанию; при наведении и в активном состоянии переходит в 50%.
• Активное состояние: белая пилюля 4px на левом краю колонки иконок.

Status Dots

• Size: 10×10px
• Border: 3px solid background-tertiary (создаёт эффект «выреза»)
• Позиция: нижний правый угол аватара.

Cards / Embeds

• Background: #2b2d31 (тёмная) или #f2f3f5 (светлая)
• Левая граница: 4px solid, цвет акцента эмбеда.
• Radius: 4px
• Padding: 8px 16px

Mention Pill

• Background: rgba(88, 101, 242, 0.3)
• Text: #c9cdfb
• Padding: 0 2px
• Radius: 3px

5. Spacing & Layout

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

6. Motion

• Длительность: 200ms для hover; 350ms для трансформации аватара в круг; 80ms для появления подсказки.
• Easing: cubic-bezier(0.215, 0.61, 0.355, 1) для морфинга аватара (быстрый старт, плавное завершение).
• Пульс уведомлений: 1.4s ease-in-out infinite на индикаторе непрочитанных упоминаний.

7. Usage Guardrails

• Сохраняйте тёмную оболочку, компактную плотность и иерархию действий на blurple вместе; использование blurple на светлом маркетинговом макете нарушает ощущение продукта Discord.
• Структурируйте поверхности с насыщенной навигацией вокруг рейлов, боковых панелей и колонок чата, а не изолированных декоративных карточек.
• Используйте язык квадратных аватаров с закруглёнными углами и точек статуса при отображении людей, серверов или активного присутствия.