# Система дизайну, натхненна GitHub

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

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

Поверхня GitHub спроєктована, а не прикрашена. Кожен піксель виражає позицію: це інструмент для людей, які дбають про дифи, збірки та пул-реквести. Фон сторінки — чистий `#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`): Стан «відкрито» для задачі/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 | Блоки коду, дифи |
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Вбудовані `code` фрагменти |

### Принципи
- **14px для основного тексту, не 16px**: Щільність прозового тексту GitHub — це його ідентичність. Продукт відображається при 14px, щоб вмістити більше рядків у вікні перегляду.
- **Бінарна насиченість**: 400 для всього за замовчуванням; 600 для заголовків і виділення. Ніяких 500 або 700.
- **Системні шрифти завжди**: ніколи не завантажуйте веб-шрифт для інтерфейсу — текст повинен відображатися миттєво на повільних з'єднаннях.

## 4. Стилізація компонентів

### Кнопки

**Основна (зелена)**
- Background: `#1f883d`
- Text: `#ffffff`
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
- Padding: 5px 16px
- Radius: 6px
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
- Hover: background `#1a7f37`
- Використання: «Створити репозиторій», «Злити пул-реквест»

**Стандартна**
- Background: `#f6f8fa`
- Text: `#1f2328`
- Border: 1px solid `#d0d7de`
- Padding: 5px 16px
- Radius: 6px
- Hover: background `#f3f4f6`, border `#d0d7de`

**Контурна (стиль синього посилання)**
- Background: `#ffffff`
- Text: `#0969da`
- Border: 1px solid `#d0d7de`
- Hover: background `#0969da`, text `#ffffff`

**Небезпечна**
- Background: `#ffffff`
- Text: `#cf222e`
- Border: 1px solid `#d0d7de`
- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`

### Картки / Блоки
- Background: `#ffffff`
- Border: 1px solid `#d0d7de`
- Radius: 6px
- Padding: 16px (заголовок) + 16px (тіло)
- Заголовок має смугу `#f6f8fa` з нижньою рамкою.

### Поля введення
- Background: `#ffffff`
- Border: 1px solid `#d0d7de`
- Radius: 6px
- Padding: 5px 12px
- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`

### Таблетки статусу (задача / PR)
- **Відкрито**: background `#1a7f37`, текст білий, padding 4px 10px, radius 9999px.
- **Закрито**: background `#cf222e`, текст білий.
- **Злито**: background `#8250df`, текст білий.
- **Чернетка**: background `#6e7781`, текст білий.

### Мітки (теги на задачах/PR)
- Padding: 0 7px
- Radius: 9999px
- Font: 12px / 500
- Фон і текст визначаються програмно (колір мітки → текст обчислюється для контрастності).

## 5. Відступи та макет

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

## 6. Анімація

- **Тривалість**: 80ms для наведення; 200ms для відкриття меню/поповера.
- **Прискорення**: `ease-out` для відкриття, `ease-in` для закриття.
- **Уникається**: анімація при завантаженні сторінки, ефект паралаксу, постійні мікровзаємодії. Елементи з'являються; вони не виступають.

## 7. Обмеження використання

- Тримайте щільні списки, блоки з рамками та системну типографіку разом; одних зелених кнопок недостатньо, щоб створити поверхню, схожу на GitHub.
- Використовуйте зелений для конструктивних дій у репозиторії, синій — для посилань і фокусу, а червоний/фіолетовий/сірий — лише для станів задач, PR і робочих процесів.
- Надавайте перевагу тихому інтерфейсу, чітким рамкам і компактним відступам, а не декоративним тіням або великим картками у маркетинговому стилі.