Спот-иллюстрации
Векторные споты в стиле сайта вместо разношёрстных растровых картинок: смысл блока превращается в предметную метафору, геометрия выравнивается под дизайн-токены, на выходе — чистый SVG на 3–8 КБ, который перекрашивается вместе с брендом.
1. Метафора вместо «облака»
Вставьте тезисы блока — модель предложит три предметные метафоры. Иллюстрация работает визуальным якорем, а не пятном цвета.
2. Геометрия под токены
Нормализатор выравнивает обводку (1.5/2/3 px), скругляет углы, выбрасывает микромусор. Все споты выглядят «из одного набора».
3. Цвета через переменные
Заливки — это var(--nj9-accent): смена бренда в CSS перекрашивает все иллюстрации без перерисовки.
4. 3–8 КБ и микро-анимация
Вместо PNG на 50–150 КБ — вектор, резкий на любом Retina-экране. Шестерёнка дышит, деталь реагирует на наведение — чистыми CSS keyframes.
Палитра бренда (токены сцены)
Стили сцены
- Flat — плоские заливки, минимум контура
- Outlined — контурный минимализм без заливок
- Duotone — только основной и акцентный цвет
- Glassmorphism — полупрозрачные заливки
Обводка: 1.5 / 2 / 3 px, одна на всю картинку. Скругления: 8 px, как в интерфейсе.
Последние споты
Моя библиотека →Пока пусто. Соберите первый спот — например, для блока с тарифами.
Как встроить в дизайн страницы
- Соберите спот по тезисам блока или сразу по URL страницы (автопилот сам прочитает описание и положит картинку в базу).
- Готовый спот вставьте инлайн или картинкой:
<img src="/spots/svg/<код>.svg" width="480" height="360" alt="…">. - Чтобы спот красился в тему страницы, объявите переменные палитры на контейнере (значения подсказывает модуль на странице спота).
- Из кода страницы картинку можно получить сервисом:
Service_Nj669_Spotillo::embed_for_url($url).