mirror of
https://github.com/luongnv89/claude-howto.git
synced 2026-08-26 00:22:31 +02:00
Evgenij I
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
|