Палитра DarScoop
Четыре базовых цвета сняты с логотипа: малиновый, кремово-персиковый, золотой и сиреневый. Ниже — полная раскладка по оттенкам, роли, иконки и живые примеры. Логотип и баннер уже в макете: слово в шапке и подвале, значок — в фавиконе.
Цвета и их роли
Значения живут в src/data/palette.json и попадают в CSS-переменные при сборке —
оттенок меняется в одном месте и расходится по всему сайту.
Где какой цвет
Малиновый ведёт действия, золотой отвечает за выгоду, крем держит фон, сиреневый разбавляет.
| Роль | Токены | Где видно |
|---|
Компоненты в новой палитре
Так цвета выглядят в кнопках, бейджах, полях и карточках — без выдуманных образцов.
Кнопки
Бейджи и метки
Выбор
Карточка и цена
2 ложки
≈ 10–14 товаров
Графика бренда
Иконки
Шесть иконок в палитре DarScoop. Исходники лежат в src/source-icons/,
прозрачные версии и бесшовную плитку фона собирает
scripts/prepare-icons.py.
-
spoon
шаг «выбираете ложки», CTA
-
gift
шаг «упаковываем»
-
heart
шаг «бусинки выбирают»
-
truck
блок «Доставка»
-
card
блок «Дополнения»
-
help
блок «Остались вопросы?»
Знак и баннер
Логотип
Логотип собран из присланного баннера: вырезан по фону, обрезан и сохранён в трёх видах.
Исходник лежит в src/source-brand/banner.png, нарезку делает
scripts/prepare-brand.py.
-
logo.png
шапка и подвал, высота 44 px
-
logo-full.png
логотип с девизом
-
spoon-mark.png
заголовок механики, кнопка «Зачерпнуть»
-
logo-square.png
иконка на телефоне, экран успеха
-
favicon.png
иконка приложения по стандарту iOS: 180, 32 и 16 px
Что дальше
Макет готов: страницы, механика с бусинками, палитра и графика на месте.
Осталось подставить реальные ссылки на мессенджеры в
src/data/site.json.
Фоны для соцсетей
Четыре вертикальных фона 9:16: два чистых и два с готовыми местами под текст и фото. Исходники 1080×1920 лежат в
src/source-social/, для сайта собраны уменьшенные копии тем же скриптомscripts/prepare-social.py.