claude-howto/uk/resources

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

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

<!-- 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-змінні

--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 (Компас-дужка)