# Дизайн-система, вдохновлённая 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"`

### Иерархия

| Роль | Шрифт | Размер | Начертание | Межстрочный интервал | Трекинг | Примечания |
|------|------|------|--------|-------------|----------------|-------|
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Заголовок репозитория, маркетинговый герой |
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Заголовок страницы |
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Заголовок раздела |
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Подраздел, заголовок панели |
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Стандартный размер текста — не 16px |
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Подписи, метаданные файлов |
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Блоки кода, diff |
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Встроенные фрагменты `code` |

### Принципы
- **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 и рабочих процессов.
- Отдавайте предпочтение сдержанному оформлению, чётким границам и компактным отступам вместо декоративных теней или крупных маркетинговых карточек.