Дизайн-система, вдохновлённая 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

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