📝
Как выбрать торт на день рождения
Разбираем критерии: вес, начинка, оформление и сроки заказа.
1. Бренд-платформа
Фундамент коммуникации и визуального языка
Миссия
Дарить тепло домашних праздников через натуральные сладости ручной работы, сохраняя традиции и заботу в каждом слое.
Ценности
• Натуральность: только мёд, сливки, яйца без добавок
• Ручная работа: каждый торт собирает кондитер
• Эко-ответственность: упаковка без пластика
• Честность: прозрачные цены и сроки
Позиционирование
«Мёдведь» — кондитерская для тех, кто ценит вкус детства и качество ингредиентов. Не масс-маркет, а камерное производство с душой.
Целевая аудитория
Ядро: 25–45 лет, семьи с детьми, ценители домашних десертов
Психографика: ищут качество, готовы платить за ручную работу, активны в соцсетях
Гео: города с доставкой, приоритет — локальные сообщества
2. Логотип
Основной знак и правила использования
Основная версия
Использовать на светлом фоне (#FFFBF7 или #fff)
Охранное поле
Минимальный отступ вокруг знака = высота буквы «М» в логотипе
Минимальный размер
• Веб: ширина ≥ 80px
• Печать: ширина ≥ 25мм
• Иконка: использовать упрощённый символ (соты)
3. Цвет и Типографика
Система, соответствующая WCAG 2.2 AA (контраст ≥ 4.5:1)
Цветовая палитра
Основные
#2C1810
#FFFBF7
#F5E6D3
Акцентные
#D4A017
#C9A961
Функциональные
#4A7C59
#A84438
#5B7C99
Все комбинации текста/фона проверены на контраст ≥ 4.5:1
Типографика
Шрифт: Manrope (Google Fonts), fallback: system-ui, sans-serif
Заголовок H1
32px / 700 / line-height: 1.2 / mobile: clamp(24px, 5vw, 32px)
Заголовок H2
24px / 700 / line-height: 1.3 / mobile: clamp(20px, 4vw, 24px)
Заголовок H3
20px / 600 / line-height: 1.4
Основной текст. Используется для описаний, статей, интерфейсных подсказок.
16px / 400 / line-height: 1.5
Второстепенный текст: подписи, мета-данные, даты.
14px / 400 / line-height: 1.5
Технические подписи, код, юридический текст.
12px / 400 / line-height: 1.4
Mobile-first иерархия
• Все размеры заданы через clamp() или rem
• Минимальный тап-таргет: 44×44px
• Контраст текста: проверен для всех состояний
4. Графика
Иконки, фото, иллюстрации и форматы
Стиль иконок (SVG)
• Линейные, толщина обводки: 1.5px
• Скругления: 2px
• Цвет: наследуется от контекста (currentColor)
• Размер: 24px базовый, масштаб кратен 4
play
cart
heart
search
Фотографии и иллюстрации
Фото: естественный свет, тёплые тона, акцент на текстуры (мёд, крем, крошка). Избегать стокового «глянца».
📸
Иллюстрации: плоский стиль, ограниченная палитра (3–4 цвета из бренд-палитры), акцент на эмоции, а не детализацию.
🎨
Форматы и оптимизация
• Изображения: WebP с fallback на JPG
• Видео: WebM (VP9) + MP4 fallback, максимальный размер 5МБ для hero
• SVG: инлайн для иконок, спрайт для повторяющихся элементов
• Lazy-load для ниже the fold
5. UI-кит (Atomic Design)
Компоненты от атомов до организмов
Атомы
Подсказка под полем
New
Tag
Молекулы
🎂
−15%
Медовик
Классика с заварным кремом
2 100 ₽ 1 890 ₽
Все
Медовики
Капкейки
Организмы
Header
Product Grid
🎂
Торт 1
1 200 ₽
🧁
Капкейки
450 ₽
🍪
Печенье
320 ₽
🍯
Мёд
890 ₽
Состояния (States)
Default
Hover
Focus
Active
Disabled
Все интерактивные элементы имеют видимые состояния focus/hover для доступности
6. Сетка и Layout
Адаптивная система, отступы, анимации
Адаптивная сетка (mobile-first)
Container
max-width: 700px, центрирование, padding: 20px mobile / 40px desktop
Grid Columns
• Mobile: 1 колонка
• Tablet: 2 колонки (minmax(280px, 1fr))
• Desktop: 3–4 колонки (auto-fit)
Система отступов (8px grid)
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 40px
Анимации
• Длительность: 200–500ms
• easing: ease-in-out (CSS: cubic-bezier(0.4, 0, 0.2, 1))
• Плавные переходы для: hover, focus, modal, toast
• Уважать prefers-reduced-motion
:root { --transition: 300ms ease-in-out; }
.btn { transition: transform var(--transition), box-shadow var(--transition); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.btn { transition: transform var(--transition), box-shadow var(--transition); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
7. Тон коммуникации
Стиль текстов для интерфейса, блога, карточек
Принципы
• Тепло, но без пафоса
• Кратко: 1 идея = 1 предложение
• Конкретика вместо абстракций
• Эмодзи умеренно (только в неформальных контекстах)
Интерфейс
Кнопка CTA
✓ Заказать торт
✗ Осуществить оформление заказа
Ошибка формы
✓ Укажите телефон для связи
✗ Поле обязательно для заполнения
Блог и карточки товаров
Описание товара
✓ Нежные коржи с заварным кремом на натуральном мёде. Идеален для семейных праздников.
✗ Наш медовик — это симфония вкуса, созданная мастерами своего дела...
Заголовок статьи
✓ Как выбрать торт на день рождения: 5 правил
✗ Секреты идеального праздничного десерта от экспертов
8. Специфичные шаблоны
Готовые паттерны для магазина, блога, лендингов
Магазин
Карточка товара (детальная)
🎂▶ Видео
🎂
🍰
🎬
Хит
Медовик классический
1 890 ₽
1
Корзина (мини)
🎂
Медовик
1.2 кг
1
1 890 ₽
Итого:1 890 ₽
Блог
🎥
Закулисье: как мы печём медовик
Короткий ролик о процессе: от замеса теста до сборки.
Лендинг
Сладости с душой
Натуральные ингредиенты, ручная работа и доставка в день заказа
Нужен торт к празднику?
Оставьте заявку — перезвоним за 15 минут
«Заказывали на свадьбу — гости в восторге! Медовик был нежным и не приторным.»
«Доставили точно ко времени, упаковка красивая, торт свежий.»