Дизайн-система, вдохновлённая GitHub

Category: Инструменты разработчика Платформа, ориентированная на код. Функциональная плотность, точность синего на белом, основы Primer.

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

Поверхность GitHub спроектирована, а не украшена. Каждый пиксель выражает позицию: это инструмент для людей, которым важны диффы, сборки и pull request’ы. Фон страниц — чистый #ffffff (светлая тема) или #0d1117 (тёмная), а контент размещается на плотных прямоугольных панелях, разделённых тонкими границами, а не отступами. Плотность информации — это бренд: строки списков, строки кода, заголовки репозиториев и карточки уведомлений стоят близко, чтобы опытный пользователь мог просмотреть сотню элементов без прокрутки.

Характерные акценты — синий Primer (#0969da) для ссылок и основных действий и зелёный GitHub (#1a7f37) для состояний слияния, успеха и самой кнопки слияния. Оба цвета выглядят немного приглушёнными по сравнению с синим и зелёным в потребительских продуктах — насыщенными ровно настолько, чтобы читаться на фоне плотного серого текста, и сдержанными настолько, чтобы растворяться в фоне, когда их несколько в одном вьюпорте.

Типографика использует стек system-ui во всём продукте, чтобы текст чётко рендерился в любой ОС; для кода применяется SFMono / Menlo / Consolas. Редакционных декоративных шрифтов нет; голос GitHub — это голос системы, в которой вы уже находитесь.

Ключевые характеристики:

• Чисто белый холст (#ffffff) или глубокий тёмно-синий/чёрный (#0d1117) — без теплоты, без оттенка
• Тонкие серые границы (#d0d7de) определяют каждую панель
• Синий Primer (#0969da) — для ссылок и основных действий; зелёный GitHub (#1a7f37) — для успеха и слияния
• system-ui — для прозы; SFMono — для кода; никаких пользовательских гарнитур
• Плотные строки списков с минимальными отступами; пространство используется редко
• Иконография Octicon 16px / 24px — одноконтурная, геометрическая, последовательная
• Статусные бейджи в форме таблеток с чёткой цветовой семантикой

2. Цветовая палитра и роли цветов

Основные

• Canvas Default (#ffffff): основной фон страницы, светлая тема.
• Canvas Subtle (#f6f8fa): вторичная поверхность, боковая панель, фон полей ввода, полоса заголовка.
• Canvas Inset (#eaeef2): фон блоков кода, глубоко утопленная поверхность.
• Fg Default (#1f2328): основной текст, заголовки, шрифт.
• Fg Muted (#656d76): вторичный текст, подписи, пути к файлам.

Брендовый акцент

• Primer Blue (#0969da): ссылки, основные CTA, кольцо фокуса — универсальный интерактивный цвет.
• Primer Blue Hover (#0550ae): наведение/нажатие для основного синего.
• Accent Subtle (#ddf4ff): мягкая синяя поверхность для подсказок и информационных баннеров.

Семантические

• Success / Merge Green (#1a7f37): смёрженные PR, бейджи успеха, кнопка слияния.
• Success Subtle (#dafbe1): оттенок поверхности успеха.
• Open Green (#1a7f37): состояние «Открыт» для issue/PR.
• Closed / Danger Red (#cf222e): закрытые PR, деструктивное действие, ошибка валидации.
• Danger Subtle (#ffebe9): поверхность баннера ошибки.
• Attention / Warning Yellow (#9a6700): предупредительный текст на янтарной поверхности.
• Attention Subtle (#fff8c5): поверхность предупредительного баннера.
• Done Purple (#8250df): смёрженное и архивированное состояние, статус «готово», премиальный бейдж.
• Sponsor Pink (#bf3989): значок сердца спонсоров, бренд GitHub Sponsors.

Границы и разделители

• Border Default (#d0d7de): стандартная тонкая граница, контур панели.
• Border Muted (#d8dee4): внутренние разделители внутри панели.
• Border Subtle (#eaeef2): едва заметные разделители строк таблицы.

Тёмная тема

• Dark Canvas (#0d1117): тёмный фон страницы.
• Dark Surface (#161b22): боковая панель, заголовок, вторичная поверхность.
• Dark Border (#30363d): стандартная граница тёмного режима.
• Dark Fg (#e6edf3): основной текст на тёмном фоне.

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

Семейство шрифтов

• Основной текст / UI: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
• Код / Моно: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
• Emoji: "Apple Color Emoji", "Segoe UI Emoji"

Иерархия

Принципы

• 14px для основного текста, не 16px: плотность прозы GitHub — его идентичность. Продукт читается при 14px, чтобы вместить больше строк в область просмотра.
• Два варианта начертания: 400 для всего по умолчанию; 600 для заголовков и акцентов. Ни 500, ни 700.
• Системные шрифты всегда: никогда не загружайте веб-шрифты для интерфейса — текст должен рендериться мгновенно при медленном соединении.

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

Кнопки

Основная (зелёная)

• Фон: #1f883d
• Текст: #ffffff
• Граница: 1px solid rgba(31, 35, 40, 0.15)
• Отступы: 5px 16px
• Скругление: 6px
• Тень: 0 1px 0 rgba(31,35,40,0.1)
• Наведение: фон #1a7f37
• Использование: «Create repository», «Merge pull request»

По умолчанию

• Фон: #f6f8fa
• Текст: #1f2328
• Граница: 1px solid #d0d7de
• Отступы: 5px 16px
• Скругление: 6px
• Наведение: фон #f3f4f6, граница #d0d7de

Контурная (стиль синей ссылки)

• Фон: #ffffff
• Текст: #0969da
• Граница: 1px solid #d0d7de
• Наведение: фон #0969da, текст #ffffff

Опасная

• Фон: #ffffff
• Текст: #cf222e
• Граница: 1px solid #d0d7de
• Наведение: фон #a40e26, текст #ffffff, граница #a40e26

Карточки / блоки

• Фон: #ffffff
• Граница: 1px solid #d0d7de
• Скругление: 6px
• Отступы: 16px (заголовок) + 16px (тело)
• Заголовок имеет полосу #f6f8fa с нижней границей.

Поля ввода

• Фон: #ffffff
• Граница: 1px solid #d0d7de
• Скругление: 6px
• Отступы: 5px 12px
• Фокус: граница #0969da, кольцо 0 0 0 3px rgba(9,105,218,0.3)

Статусные таблетки (Issue / PR)

• Открыт: фон #1a7f37, белый текст, отступы 4px 10px, скругление 9999px.
• Закрыт: фон #cf222e, белый текст.
• Смёрджен: фон #8250df, белый текст.
• Черновик: фон #6e7781, белый текст.

Метки (теги на Issue/PR)

• Отступы: 0 7px
• Скругление: 9999px
• Шрифт: 12px / 500
• Фон и текст задаются программно (цвет метки → цвет текста вычисляется для контрастности).

5. Отступы и компоновка

• Базовая единица: 4px. Шкала отступов: 4, 8, 12, 16, 24, 32, 40, 48.
• Максимальная ширина страницы: 1280px (Container-xl).
• Боковая панель: 296px на десктопе, сворачивается ниже 1012px.
• Отступы строки: 16px по горизонтали, 12px по вертикали (списки намеренно плотные).

6. Движение

• Длительность: 80ms для наведения; 200ms для открытия меню/поповера.
• Easing: ease-out для открытия, ease-in для закрытия.
• Избегать: анимаций при загрузке страницы, параллакса, постоянных микровзаимодействий. Элементы появляются — но не выступают.

7. Ограничения использования

• Используйте плотные списки, обрамлённые блоки и системную типографику вместе; изолированные зелёные кнопки сами по себе не создают поверхность, похожую на GitHub.
• Применяйте зелёный для конструктивных действий с репозиторием, синий — для ссылок и фокуса, красный/фиолетовый/серый — только для состояний issue, PR и рабочих процессов.
• Отдавайте предпочтение сдержанному оформлению, чётким границам и компактным отступам вместо декоративных теней или крупных маркетинговых карточек.