Цветовая палитра в духе GitHub
Палитра в духе GitHub - тёмная, контрастная система для инструментов разработчика: почти чёрный фон, синий основной цвет для ссылок и действий и зелёный акцент только для состояний успеха.
Посмотрите, как палитра в духе GitHub выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Как выглядит палитра в духе GitHub?
Инструменты для разработчиков обычно строятся вокруг долгих фокусированных сессий, а не быстрого просмотра: тёмный фон снижает нагрузку на глаза при многочасовом чтении кода и логов, цвет используется сдержанно, чтобы подсветка синтаксиса и статусные индикаторы выделялись, а не соревновались с интерфейсом, а сам UI старается не мешать плотному моноширинному контенту.
Этот мокап PaletteDesk - боковая панель с файлами рядом с областью кода - заимствует это общее ощущение: тёмный фон, тёмная верхняя панель, система из синего и зелёного акцента, - чтобы показать, как палитра держится в такого рода плотном, текстовом интерфейсе, а не на маркетинговой странице. Это оригинальный макет в этом духе, а не копия дизайн-системы или защищённого товарным знаком UI какого-либо реального продукта.
Ключевые визуальные характеристики
- Почти чёрный или очень тёмный нейтральный фон по всему интерфейсу, а не просто переключаемая «тёмная тема»
- Постоянная боковая панель с файлами/навигацией рядом с основной областью контента
- Тёмная верхняя панель с логотипом, поиском и элементами управления аккаунтом
- Небольшие статусные бейджи и метки (open, merged, passing) в виде компактных цветных плашек
- Моноширинный шрифт для имён файлов, кода и ссылок на коммиты
Цветовые характеристики
- Тёмная, малонасыщенная нейтральная база, чтобы долгое чтение оставалось комфортным
- Один синий основной цвет для ссылок, кнопок и активных состояний навигации
- Зелёный акцент, зарезервированный именно для успешных/позитивных статусов, отдельно от основного цвета
Типографика
- Моноширинный шрифт для всего, что связано с кодом - пути файлов, хэши коммитов, инлайн-код
- Простой, легко читаемый системный гротеск для всего остального - меток, навигации, текста
- Мелкий, плотный кегль по всему интерфейсу, так как он рассчитан на то, чтобы показывать больше контента, а не крупный текст
UI-паттерны
- Тёмная верхняя панель с логотипом, глобальным поиском и меню аккаунта
- Сворачиваемая боковая панель со списком файлов или пунктов навигации
- Основная область, разделённая на дерево файлов и панель деталей
- Компактные цветные статусные плашки (open, merged, failing) рядом с элементами списка
Частые вопросы
Какие цвета обычно используются в интерфейсе в духе GitHub?
Почти чёрный фон, синий основной цвет для ссылок и кнопок и зелёный акцент, зарезервированный для состояний успеха или «merged» - намеренно простая система, чтобы статусные цвета выделялись на тёмном фоне.
Это официальные цвета бренда GitHub?
Нет - это оригинальный макет, вдохновлённый общим видом инструментов для разработчиков вроде GitHub, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.
Подойдёт ли тёмная палитра инструмента разработчика с любым акцентным цветом?
Почти любой акцентный цвет подойдёт, но стоит держать один цвет отдельно для «позитивного» статуса (например, зелёный для успеха), отдельно от основного цвета действий, чтобы они не спорили за внимание в плотных списках.
Можно ли посмотреть свои цвета в этом интерфейсе в духе GitHub, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе GitHub вместо цветов по умолчанию.