<picture>
  <source media="(prefers-color-scheme: dark)" srcset="logos/claude-howto-logo-dark.svg">
  <img alt="Claude How To" src="logos/claude-howto-logo.svg">
</picture>

# Claude How To — Брендові ресурси

Повна колекція логотипів, іконок та фавіконів для проєкту Claude How To. Усі ресурси використовують дизайн V3.0: компас з символом кодової дужки (`>`), що представляє направлену навігацію кодом — з палітрою Чорний/Білий/Сірий та акцентом Яскраво-зелений (#22C55E).

## Структура каталогів

```
resources/
├── logos/
│   ├── claude-howto-logo.svg       # Основний логотип - Light mode (520×120px)
│   └── claude-howto-logo-dark.svg  # Основний логотип - Dark mode (520×120px)
├── icons/
│   ├── claude-howto-icon.svg       # Іконка додатку - Light mode (256×256px)
│   └── claude-howto-icon-dark.svg  # Іконка додатку - Dark mode (256×256px)
└── favicons/
    ├── favicon-16.svg              # Фавікон - 16×16px
    ├── favicon-32.svg              # Фавікон - 32×32px (основний)
    ├── favicon-64.svg              # Фавікон - 64×64px
    ├── favicon-128.svg             # Фавікон - 128×128px
    └── favicon-256.svg             # Фавікон - 256×256px
```

Додаткові ресурси в `assets/logo/`:
```
assets/logo/
├── logo-full.svg       # Знак + текст (горизонтально)
├── logo-mark.svg       # Тільки символ компасу (120×120px)
├── logo-wordmark.svg   # Тільки текст
├── logo-icon.svg       # Іконка додатку (512×512, округлена)
├── favicon.svg         # 16×16 оптимізований
├── logo-white.svg      # Біла версія для темних фонів
└── logo-black.svg      # Чорна монохромна версія
```

## Огляд ресурсів

### Концепція дизайну (V3.0)

**Компас з кодовою дужкою** — навігація зустрічає код:
- **Кільце компасу** = Навігація, пошук шляху
- **Північна стрілка (зелена)** = Напрямок, прогрес на навчальному шляху
- **Південна стрілка (чорна)** = Основа, міцний фундамент
- **Дужка `>`** = Промпт терміналу, код, контекст CLI
- **Позначки** = Точність, структуроване навчання

### Логотипи

**Файли**:
- `logos/claude-howto-logo.svg` (Light mode)
- `logos/claude-howto-logo-dark.svg` (Dark mode)

**Специфікації**:
- **Розмір**: 520×120 px
- **Призначення**: Основний логотип заголовку/брендингу з текстом
- **Використання**: Заголовки сайтів, бейджі README, маркетингові матеріали, друковані матеріали
- **Формат**: SVG (повністю масштабований)
- **Режими**: Light (білий фон) та Dark (фон #0A0A0A)

### Іконки

**Файли**:
- `icons/claude-howto-icon.svg` (Light mode)
- `icons/claude-howto-icon-dark.svg` (Dark mode)

**Специфікації**:
- **Розмір**: 256×256 px
- **Призначення**: Іконка додатку, аватари, мініатюри
- **Формат**: SVG (повністю масштабований)

### Фавікони

Оптимізовані версії різних розмірів для веб-використання:

| Файл | Розмір | DPI | Використання |
|------|--------|-----|-------------|
| `favicon-16.svg` | 16×16 px | 1x | Вкладки браузера (старі браузери) |
| `favicon-32.svg` | 32×32 px | 1x | Стандартний фавікон |
| `favicon-64.svg` | 64×64 px | 1x-2x | Дисплеї High-DPI |
| `favicon-128.svg` | 128×128 px | 2x | Apple touch icon, закладки |
| `favicon-256.svg` | 256×256 px | 4x | Сучасні браузери, іконки PWA |

## Інтеграція HTML

### Базове налаштування фавіконів

```html
<!-- Browser favicon -->
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg">
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">

<!-- Apple touch icon (mobile home screen) -->
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">

<!-- PWA & modern browsers -->
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
```

## Палітра кольорів

### Основні кольори
- **Чорний**: `#000000` (Основний текст, обведення, південна стрілка)
- **Білий**: `#FFFFFF` (Світлі фони)
- **Сірий**: `#6B7280` (Вторинний текст, малі позначки)

### Акцентний колір
- **Яскраво-зелений**: `#22C55E` (Північна стрілка, центральна точка, акцентні лінії — тільки для виділень, ніколи як фон)

### Dark mode
- **Фон**: `#0A0A0A` (Майже чорний)

### CSS-змінні
```css
--color-primary: #000000;
--color-secondary: #6B7280;
--color-accent: #22C55E;
--color-bg-light: #FFFFFF;
--color-bg-dark: #0A0A0A;
```

## Настанови з дизайну

### Використання логотипу
- Використовуйте на білому або темному (#0A0A0A) фоні
- Масштабуйте пропорційно
- Залишайте вільний простір навколо (мінімум: висота логотипу / 2)
- Використовуйте надані light/dark варіанти для відповідних фонів

### Доступність
- Високі коефіцієнти контрасту (WCAG AA — мінімум 4.5:1)
- Чисті геометричні форми, розпізнавані при будь-якому розмірі
- Масштабований векторний формат
- Без тексту в іконках (текст додається окремо)
- Без залежності від червоно-зеленого розрізнення кольорів

## Атрибуція

Ці ресурси є частиною проєкту Claude How To.

**Ліцензія**: MIT (див. файл LICENSE проєкту)

## Історія версій

- **v3.0** (Лютий 2026): Дизайн компас-дужка з палітрою Чорний/Білий/Сірий + Зелений акцент
- **v2.0** (Січень 2026): Дизайн 12-променевого зоряного спалаху в стилі Claude з смарагдовою палітрою
- **v1.0** (Січень 2026): Оригінальний дизайн іконки прогресії на основі шестикутника

---
**Останнє оновлення**: Лютий 2026
**Поточна версія**: 3.0 (Компас-дужка)