09c2fa24b1
- 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
122 lines
5.0 KiB
Markdown
122 lines
5.0 KiB
Markdown
# 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
|