Цветовая палитра — 7 слотов, primary и secondary

[object Object]

Цветовая палитра — 7 слотов, primary и secondary

Misea не заставляет «выбирать из 3 готовых тем». Вместо этого у вас 7 отдельных слотов, которые можно настраивать с точностью до HEX + opacity. Когда палитра согласованна — сайт выглядит профессионально без дизайнера.

Семь слотов

Primary — основной бренд-цвет. Кнопки, активные ссылки, ценовые плашки.
Secondary — вторичный. Используется в акцентах, hover-состояниях.
Background — фон страницы. Обычно почти белый или тёмный.
Text — основной текст. Должен контрастировать с Background.
Surface — фон карточек, плашек, модалок. Чуть отличается от Background.
Accent — привлечение внимания: красные «горячие цены», жёлтые плашки акций.
Muted — приглушённый серый для подзаголовков, подсказок, разделителей.

Как редактировать

Toolbar → Site → Палитра → кликаете по слоту.

В редакторе слота:

HEX — #2E5BFF.
Opacity — 0–100 %.
Lightness / Saturation — точечная подстройка через слайдеры (не обязательно знать HEX).
Предпросмотр — мини-карточка сайта обновляется в реальном времени.

«Подобрать цвета»

Кнопка в верху окна палитры. Открывает диалог:

Автопалитра от Primary — задаёте только Primary (например, #2E5BFF), Misea подбирает согласующиеся Secondary / Accent / Muted на основе теории цвета (комплементарные / аналогичные).
Из картинки — загружаете фото вашего заведения или еды, алгоритм вытаскивает 5 доминирующих цветов → назначает их слоты.
Из логотипа — аналогично, но работает на SVG.

«Фирменные цвета»

Если ваш бренд уже имеет guidelines (например, из Tilda или Figma):

В диалоге Фирменные цвета вводите HEX-коды вашего бренда.
Misea назначает их слотам + генерирует «рабочие» оттенки (light / dark варианты).

Валидатор

Misea проверяет палитру на:

Контраст Text/Background — должен быть ≥ 4.5:1 (WCAG AA). Иначе текст будет нечитаем.
Primary ≠ Text — если цвета совпадают, ссылки и кнопки сливаются с текстом.
Достаточная дистанция Background/Surface — чтобы карточки визуально выделялись.

Предупреждение появляется плашкой под палитрой. Можно игнорировать, но читабельность пострадает.

Общие рекомендации

Primary — яркий, отличительный. Ваш брендовый цвет.
Background — нейтральный: почти белый (#FAFAFA, #F9F7F4) или тёмный (#0B0D12).
Surface — чуть темнее Background на светлых темах, чуть светлее на тёмных.
Text — ≥ 80 % контраста к Background (обычно #111827 или #F9FAFB).
Accent — используется точечно (1 % страницы), иначе теряет силу.
Muted — не слишком светлый, иначе текст будет нечитаем.

Dark mode

Выключатель Dark mode переворачивает палитру: Background и Text меняются местами, Surface пересчитывается. Для большинства сайтов достаточно Light.

Автоматический Dark mode (по системной настройке гостя) — в Page → Тема → Auto.