# Claude How To — Дизайн-система

## Візуальна ідентичність

### Концепція дизайну іконки: Компас з кодовою дужкою

Іконка Claude How To використовує **компас з кодовою дужкою `>`** для представлення направленої навігації кодом:

```
     N (green)
     ▲
     │
W ───>─── E     Compass = Guidance/Direction
     │          > Bracket = Code/Terminal/CLI
     ▼
     S (black)
```

Це створює:
- **Візуальна ясність**: Одразу комунікує "гайд з навігації кодом"
- **Символічне значення**: Компас = пошук шляху; `>` = код/термінал
- **Масштабованість**: Працює при будь-якому розмірі від 16px до 512px
- **Відповідність бренду**: Відповідає естетиці інструменту розробника з мінімальною палітрою

---

## Кольорова система

### Палітра

| Колір | Hex | RGB | Використання |
|-------|-----|-----|-------------|
| Чорний (основний) | `#000000` | 0, 0, 0 | Основні обведення, текст, південна стрілка |
| Білий (фон) | `#FFFFFF` | 255, 255, 255 | Світлі фони |
| Сірий (вторинний) | `#6B7280` | 107, 114, 128 | Малі позначки, вторинний текст |
| Яскраво-зелений (акцент) | `#22C55E` | 34, 197, 94 | Північна стрілка, центральна точка, акцентні лінії |
| Майже чорний (темний фон) | `#0A0A0A` | 10, 10, 10 | Фони dark mode |

### Коефіцієнти контрасту (WCAG)

- Чорний на білому: **21:1** AAA
- Сірий на білому: **4.6:1** AA
- Зелений на білому: **3.2:1** (тільки декоративний, не для тексту)
- Білий на темному: **19.5:1** AAA

### Правило акцентного кольору

**Яскраво-зелений (#22C55E) зарезервований тільки для виділень:**
- Північна стрілка компасу
- Центральна точка
- Акцентні підкреслення/рамки
- Ніколи як фон
- Ніколи для основного тексту

---

## Типографіка

### Шрифт логотипу
- **Сімейство**: Inter, SF Pro Display, -apple-system, Segoe UI, sans-serif
- **"Claude"**: 42px, weight 700 (bold), Чорний
- **"How-To"**: 32px, weight 500 (medium), Сірий (#6B7280)
- **Підзаголовок**: 10px, weight 500, Сірий, letter-spacing 1.5px, uppercase

---

## Деталі іконки

### Специфікації компасу

```
Element             | Stroke/Fill    | Color
--------------------|----------------|------------------
Outer ring          | 3px stroke     | Black / White (dark mode)
North tick          | 2.5px stroke   | Black / White (dark mode)
Other cardinal ticks| 2px stroke     | Gray / White 50% (dark mode)
Intercardinal ticks | 1.5px stroke   | Gray / White 40% (dark mode)
North needle        | filled polygon | #22C55E (always green)
South needle        | filled polygon | Black / White (dark mode)
> bracket           | 3px stroke     | Black / White (dark mode)
Center dot          | filled circle  | #22C55E (always green)
```

### Прогресія розмірів

```
16px  → Кільце + стрілки + шеврон (мінімально)
32px  → Додаються кардинальні позначки
64px  → Додаються інтеркардинальні позначки
128px → Повна деталізація, всі елементи чіткі
256px → Максимальна деталізація, товсті обведення
```

---

## Настанови з розмірів

### Розміри логотипу
- **Мінімум**: 200px ширина (для веб)
- **Рекомендовано**: 520px (нативний розмір)
- **Максимум**: Необмежено (векторний формат)
- **Пропорції**: ~4.3:1 (ширина:висота)

### Розміри іконки
- **Мінімум**: 16px (фавікон)
- **Рекомендовано**: 64-256px (додатки, аватари)
- **Максимум**: Необмежено (векторний формат)
- **Пропорції**: 1:1 (квадрат)

---

## Доступність

- Усі тексти відповідають WCAG AA (мінімум 4.5:1)
- Зелений акцент — декоративний, не інформаційний
- Без залежності від червоно-зеленого розрізнення

---

**Останнє оновлення**: Лютий 2026
**Версія дизайн-системи**: 3.0