Кружок
Журнал вашей жизни
О бренде
Кружок — это Telegram-бот, который собирает рутину и хаос семейной жизни в красивые истории. Каждое воскресенье семья получает журнал своей недели.
Миссия
Помочь семьям сохранять не только праздники, но и обычные дни — потому что жизнь состоит именно из них.
Тон голоса
Тёплый, но не приторный. Умный, но не снобский. Заботливый, но не навязчивый. Как хороший друг семьи.
Ценности бренда
Тепло
Семья, близость, забота. Цвета тёплые, формы мягкие, тон дружелюбный.
Простота
Минимум усилий от пользователя. Интерфейс чистый, понятный, не перегруженный.
Память
Сохранение моментов, историй, голосов. Ощущение архива, но живого, не музейного.
Логотип
Логотип Кружка — стилизованный круг, символизирующий цикл семейной жизни, сообщество близких людей и форму журнала.
Основная версия
Цветовые версии
Охранная зона
Минимальное расстояние от логотипа до других элементов — высота одного внешнего круга знака.
Недопустимое использование
Цветовая система
Богатая, насыщенная палитра из 14 цветов. Каждый цвет имеет свою роль: от фонов до акцентов, от декора до категорий контента.
Пропорции использования
Основные цвета
Кремовый — Фон
Основной фон страниц и приложения
Navy — Текст
Заголовки и основной текст
Маджента — Акцент
Кнопки CTA, главные действия
Полная палитра
Нейтральные
Розовые / Красные
Тёплые
Синие
Зелёные
Иерархия цветов
Уровень 1: CTA и главные действия
Только маджента. Кнопки «Открыть бот», «Начать», «Подписаться».
Уровень 2: Вторичные акценты
Бирюзовый, синий. Ссылки, второстепенные кнопки, активные табы.
Уровень 3: Декор и категории
Коралловый, оранжевый, золотой. Иконки, маркеры, теги категорий.
Уровень 4: Фоны и подложки
Пастельные версии. Фоны карточек, выделенные блоки, hover-состояния.
Уровень 5: Глубина и контраст
Тёмные: сливовый, изумрудный, navy. Для тёмных секций и инверсии.
Типографика
Два шрифта: Stolzl для заголовков и интерфейса, Lora для текста. Контраст геометрики и классики.
Stolzl
Аа Бб Вв Гг
Light
Light 300Regular
Regular 400Medium
Medium 500Bold
Bold 700Lora
Аа Бб Вв Гг
Regular
Regular 400Italic
Italic 400SemiBold
SemiBold 600Bold
Bold 700Типографическая шкала
Иллюстрации
3D-иллюстрации в стиле мягких фетровых игрушек. Тёплые, тактильные, семейные. Используют полную цветовую палитру.
[Здесь примеры иллюстраций из палитры]
Характеристики стиля
Материал
Мягкий фетр, войлок. Видимая текстура, матовая поверхность.
Формы
Округлые, мягкие. Никаких острых углов. Объёмные, но простые.
Освещение
Мягкое, рассеянное. Лёгкие тени. Без резких контрастов.
Цвета
Вся палитра бренда. Яркие, но не кислотные. Гармоничные сочетания.
Фон
Кремовый (#FAF8F5) или прозрачный. Иногда градиент.
Настроение
Тёплое, уютное, игривое. Семейное, но не инфантильное.
Интерфейсный стиль
Мягкий объём в духе неоморфизма. Элементы «выступают» из фона или «вдавлены» в него. Свет всегда сверху-слева, тень — снизу-справа.
Принципы
Источник света
Всегда сверху-слева (↖). Светлая тень сверху-слева, тёмная — снизу-справа. Это создаёт ощущение объёма.
Многослойные тени
2-3 слоя теней: близкая чёткая + дальняя размытая. Плюс внутренний блик сверху для «толщины».
Градиенты
Фон элементов — градиент от светлого к чуть темнее. Усиливает объём и направление света.
Типы элементов
Выпуклый (raised)
Только кнопки и CTA
Вдавленный с рамкой
Карточки, контентные блоки
Глубокий inset
Поля ввода, прогресс-бары
Объёмная кнопка — код
background: linear-gradient(
160deg,
#ffffff 0%,
#f8f6f3 20%,
#f0ede9 80%,
#e8e5e0 100%
);
box-shadow:
-3px -3px 6px rgba(255, 255, 255, 0.95), /* свет ↖ */
4px 4px 8px rgba(0, 0, 0, 0.15), /* тень ↘ близкая */
6px 6px 16px rgba(0, 0, 0, 0.08), /* тень ↘ дальняя */
inset 0 1px 1px rgba(255, 255, 255, 0.8), /* блик сверху */
inset 0 -1px 2px rgba(0, 0, 0, 0.05); /* тень снизу */
Контентный блок (inset с рамкой) — код
background: var(--cream);
border-radius: 20px;
/* Светлая рамка — отделяет от фона */
border: 3px solid rgba(255, 255, 255, 0.9);
/* Мягкая внутренняя тень — эффект углубления */
box-shadow:
inset 2px 2px 8px rgba(0, 0, 0, 0.04),
inset 1px 1px 3px rgba(0, 0, 0, 0.02);
Ключевой принцип: рамка создаёт границу, inset-тень — ощущение глубины. Блоки как бы «вложены» в фон.
Кольца для фото
Внешнее кольцо — выпуклое (raised), служит рамкой. Внутренняя часть — вдавленная (inset), содержит контент. Создаёт эффект «утопленной» фотографии в объёмной рамке.
Текстура бумаги
Опционально: лёгкий noise поверх фона для тактильности. SVG-паттерн с opacity 0.1-0.15.
feTurbulence type="fractalNoise" baseFrequency="0.9"
Когда использовать
Raised (выпуклое)
- Кнопки CTA
- Кнопки навигации
- Интерактивные элементы
Inset + рамка
- Карточки историй
- Контентные блоки
- Разделы страницы
Осторожно
- Лендинг — только акценты
- Мелкие элементы — упрощать
- Тёмные фоны — адаптировать
Правила использования
Когда и какой цвет использовать.
Кнопки и CTA
Главные кнопки — только маджента. Второстепенные — бирюзовый или обводка navy.
Ссылки в тексте
Синий или бирюзовый. В тёмных секциях — светлые версии.
Иконки и маркеры
Вся палитра. Можно чередовать для разнообразия.
Фоны карточек
Пастельные версии любого цвета для мягкого выделения.
Категории контента
Фото — коралловый, Голосовые — маджента, Видео — бирюзовый, Текст — синий.
Тёмные секции
Navy, сливовый или изумрудный для контраста и акцента.
Примеры применения
Как цвета и элементы работают вместе.
Комбинации
Выделенный блок
Важная информация на розовом фоне.
Инфо-блок
Нейтральная информация на бирюзовом.