# Система дизайну, натхненна Webflow

> Category: Дизайн та творчість
> Візуальний конструктор сайтів. Відполірована естетика маркетингового сайту з синіми акцентами.

## 1. Візуальна тема та атмосфера

Сайт Webflow — це візуально насичена, інструментоорієнтована платформа, яка передає концепцію "дизайну без коду" через чисті білі поверхні, фірмовий синій Webflow（`#146ef5`）та багату вторинну кольорову палітру（фіолетовий, рожевий, зелений, помаранчевий, жовтий, червоний）. Кастомний шрифт WF Visual Sans Variable створює впевнену і точну типографічну систему з вагою 600 для заголовків та 500 для основного тексту.

**Ключові характеристики：**
- Білий холст з майже чорним（`#080808`）текстом
- Синій Webflow（`#146ef5`）як основний колір бренду та взаємодії
- WF Visual Sans Variable — кастомний змінний шрифт з вагою 500–600
- Багата вторинна палітра：фіолетовий `#7a3dff`, рожевий `#ed52cb`, зелений `#00d722`, помаранчевий `#ff6b00`, жовтий `#ffae13`, червоний `#ee1d36`
- Консервативний радіус меж 4px–8px — чіткий, не округлий
- Багатошарові стеки тіней（5-шарові каскадні тіні）
- Мітки у верхньому регістрі：10px–15px, вага 500–600, широкий інтервал між літерами（0,6px–1,5px）
- Анімація translate(6px) при наведенні курсора на кнопки

## 2. Кольорова палітра та ролі

### Основний
- **Майже Чорний**（`#080808`）：Основний текст
- **Синій Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, основний CTA та посилання
- **Синій 400**（`#3b89ff`）：`--_color---primary--blue-400`, світліший інтерактивний синій
- **Синій 300**（`#006acc`）：`--_color---blue-300`, темніший варіант синього
- **Синій при наведенні на кнопку**（`#0055d4`）：`--mkto-embed-color-button-hover`

### Вторинні акценти
- **Фіолетовий**（`#7a3dff`）：`--_color---secondary--purple`
- **Рожевий**（`#ed52cb`）：`--_color---secondary--pink`
- **Зелений**（`#00d722`）：`--_color---secondary--green`
- **Помаранчевий**（`#ff6b00`）：`--_color---secondary--orange`
- **Жовтий**（`#ffae13`）：`--_color---secondary--yellow`
- **Червоний**（`#ee1d36`）：`--_color---secondary--red`

### Нейтральний
- **Сірий 800**（`#222222`）：Темний вторинний текст
- **Сірий 700**（`#363636`）：Середній текст
- **Сірий 300**（`#ababab`）：Приглушений текст, заповнювач
- **Середній сірий**（`#5a5a5a`）：Текст посилання
- **Сірий меж**（`#d8d8d8`）：Межі, роздільники
- **Межа при наведенні**（`#898989`）：Межа при наведенні

### Тіні
- **5-шаровий каскад**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`

## 3. Правила типографіки

### Шрифт：`WF Visual Sans Variable`, запасний：`Arial`

| Роль | Розмір | Вага | Висота рядка | Інтервал | Примітки |
|------|------|--------|-------------|----------------|-------|
| Головний заголовок | 80px | 600 | 1,04 | -0,8px | |
| Заголовок розділу | 56px | 600 | 1,04 | normal | |
| Підзаголовок | 32px | 500 | 1,30 | normal | |
| Заголовок функції | 24px | 500–600 | 1,30 | normal | |
| Основний текст | 20px | 400–500 | 1,40–1,50 | normal | |
| Стандартний текст | 16px | 400–500 | 1,60 | -0,16px | |
| Кнопка | 16px | 500 | 1,60 | -0,16px | |
| Мітка у верхньому регістрі | 15px | 500 | 1,30 | 1,5px | uppercase |
| Підпис | 14px | 400–500 | 1,40–1,60 | normal | |
| Значок у верхньому регістрі | 12,8px | 550 | 1,20 | normal | uppercase |
| Мікро у верхньому регістрі | 10px | 500–600 | 1,30 | 1px | uppercase |
| Код：Inconsolata（супровідний моноширинний шрифт）

## 4. Стилізація компонентів

### Кнопки
- Прозора：текст `#080808`, translate(6px) при наведенні
- Біле коло：радіус 50%, білий фон
- Синій значок：фон `#146ef5`, радіус 4px, вага 550

### Картки：`1px solid #d8d8d8`, радіус 4px–8px
### Значки：синюватий фон з 10% непрозорістю, радіус 4px

## 5. Макет
- Відступи：дробна шкала（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Радіус：2px, 4px, 8px, 50% — консервативний, чіткий
- Контрольні точки：479px, 768px, 992px

## 6. Глибина：5-шарова каскадна система тіней

## 7. Що слід і чого не слід робити
- Слід：Використовувати WF Visual Sans Variable з вагою 500–600. Синій（`#146ef5`）для CTA. Радіус 4px. translate(6px) при наведенні.
- Не слід：Заокруглювати функціональні елементи більш ніж на 8px. Використовувати вторинні кольори на основних CTA.

## 8. Адаптивний：479px, 768px, 992px

## 9. Посібник з промптів для Agent
- Текст：Майже Чорний（`#080808`）
- CTA：Синій Webflow（`#146ef5`）
- Фон：Білий（`#ffffff`）
- Межа：`#d8d8d8`
- Вторинний：Фіолетовий `#7a3dff`, Рожевий `#ed52cb`, Зелений `#00d722`