Files

Evgenij I 09c2fa24b1 i18n(uk): add resources/, scripts/, docs/, prompts/ translations

- Translate resources/ (README, QUICK-START, DESIGN-SYSTEM)
- Translate scripts/README.md (EPUB builder docs)
- Copy docs/ and prompts/ as-is (internal planning + functional prompts)
- Copy claude_concepts_guide.md (base for in-place translation)

Ref: luongnv89/claude-howto#63

2026-04-10 00:55:04 +03:00

5.0 KiB

Raw Permalink Blame History

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

5.0 KiB Raw Permalink Blame History Unescape Escape