Единая визуальная система для всех страниц сайта. Основана на брендбуке компании — фирменный красный #C40001, шрифт Inter, принципы честности и прозрачности.
Цвета и градиенты
Палитра строго соответствует официальному брендбуку РосНедвижимость. Основной цвет — ярко-красный #C40001.
Основные цвета
Красный
#C40001
Наведение
#A80001
Тёмный
#7F0000
Глубокий
#4A0000
Светлый
#FFF0F0
Чёрный
#191616
Тёмно-серый
#3D3A3A
Средний
#6B6560
Приглушённый
#9A9494
Белый фон
#F8F6F4
Фирменные градиенты
Героический / Основной
Тёплый акцент
Мягкое появление
Тёмный / Нейтральный
Типографика
Шрифт Inter (Google Fonts). Все размеры через clamp() — масштабируются под ширину экрана автоматически.
Заголовок H1
Inter 800 · clamp(1.6rem, 6vw, 3.8rem) · межбуквенный -.025em · высота строки 1.05
Заголовок секции H2
Inter 800 · clamp(1.25rem, 4vw, 2.6rem) · межбуквенный -.02em · высота строки 1.12
Подзаголовок H3
Inter 700 · clamp(1.05rem, 2.8vw, 1.6rem) · высота строки 1.22
Вводный текст секции. Используется под заголовком для краткого описания содержимого блока.
Inter 400 · clamp(14px, 2.2vw, 16px) · высота строки 1.78 · цвет: средний
Основной текст параграфов, описания услуг, пояснения в карточках и сносках.
Inter 400 · clamp(13px, 2vw, 15px) · высота строки 1.75
НАДПИСЬ НАД ЗАГОЛОВКОМ
Inter 700 · 11px · межбуквенный .13em · верхний регистр · фиксированный размер
Отступы и скругления
Токены радиусов применяются последовательно — от мелких элементов до крупных блоков.
Токены скруглений
6px
--rxs
10px
--rsm
16px
--rl
22px
--rxl
32px
--rxx
100px
--pill
Система теней
Пять уровней глубины. Красная тень — только для CTA-кнопок.
xs
уровень 1
sm
уровень 2
md
уровень 3
lg
уровень 4
красная
CTA кнопка
Кнопки
Четыре вида × три размера. Состояние «Отключено» применяется ко всем видам.
Виды кнопок
Размеры
Состояние «Отключено»
Навигационные пилюли
Используются для переключения категорий объектов и фильтров поиска.
Анимированная красная полоска снизу появляется при наведении курсора.
📋
Все заботы на нас
Риэлторы общаются с покупателями и соседями, готовят документы — вы отдыхаете.
🔄
Встречные сделки
Продайте комнату и сразу купите квартиру или дом с семейной ипотекой.
💎
Стоимость известна сразу
Фиксированная оплата по факту, без надбавок и скрытых платежей.
Карточка объекта недвижимости
Ключевой компонент каталога: фото, цена, адрес, параметры. Бейджи сигнализируют о типе и статусе.
🏠
ПродажаНовинка
2 850 000 ₽ / 71 250 ₽ за м²
ул. Советская, 14, кв. 23
Центральный район
40 м²
Площадь
2/5 эт.
Этаж
2 комн.
Комнат
🏢
Аренда
18 000 ₽ / месяц
пр. Ленина, 88, кв. 5
Северный район
32 м²
Площадь
4/9 эт.
Этаж
1 комн.
Комнат
Уведомления и алерты
Четыре семантических типа: успех, ошибка, предупреждение, информация.
✅
Заявка отправлена!Менеджер свяжется с вами в течение 15 минут в рабочее время.
❌
Ошибка отправкиПроверьте правильность заполнения формы и попробуйте снова.
⚠️
ВниманиеДля продажи комнаты требуется согласие всех соседей — собственников других долей.
ℹ️
СоветОформите нотариальные отказы от преимущественного права покупки заранее.
Шаги / Прогресс сделки
Визуальный прогресс процесса продажи — от оценки до получения денег на счёт.
Индикатор шагов
✓
Оценка
✓
Реклама
3
Показы
4
Документы
5
Сделка
Прогресс-бар
Готовность документов65%
Сбор отказов соседей30%
Навигация
Хлебные крошки помогают ориентироваться в структуре сайта, пагинация — листать каталог.
Хлебные крошки
Пагинация
FAQ / Аккордеон
Разворачиваемые блоки с ответами на частые вопросы о продаже недвижимости.
Нужно ли согласие соседей для продажи комнаты? ▾
Да, соседи-собственники имеют преимущественное право покупки. Необходимо предложить им выкупить комнату письменно через нотариуса и получить отказ или дождаться 30 дней.
Сколько времени занимает продажа? ▾
В среднем 1–3 месяца от оценки до получения денег. Сроки зависят от рыночной цены, готовности документов и количества соседей-дольщиков.
Какова комиссия агентства? ▾
Фиксированное вознаграждение без скрытых платежей и надбавок. Точная сумма озвучивается на бесплатной консультации и фиксируется в договоре.
Аватар агента
Используется в карточке специалиста, блоке «Ваш менеджер» и отзывах клиентов.
Размеры аватара
АИ
АИ
АИ
АИ
Карточка агента
АИ
Анна ИвановаСтарший риэлтор · 8 лет опыта
Тултип и разделитель
Тултип поясняет сложные термины при наведении. Разделитель «или» применяется между альтернативными действиями.
Тултип (подсказка при наведении)
Преимущественное право покупки
?
Право соседей купить долю первыми
Разделитель
или
Состояния загрузки
Спиннер — для активной загрузки, скелетон — для предварительного отображения контента.
Спиннер
Загружаем объекты…
Скелетон-заглушки
Таблица сравнения тарифов
Используется для сравнения пакетов услуг или характеристик объектов недвижимости.
Услуга
Базовый
Стандарт
Премиум
Оценка рыночной стоимости
✓
✓
✓
Профессиональная фотосъёмка
—
✓
✓
Продвижение в топе площадок
—
✓
✓
3D-тур объекта
—
—
✓
Юридическое сопровождение
✓
✓
✓
Бейджи / Статусы
Цветовые метки для категорий объектов, стадий сделки и типов операций.
ПродажаОдобреноВ работеИпотекаАрхив
Надпись над заголовком
Фирменный элемент с горизонтальным штрихом слева. Только красный цвет, только верхний регистр.
Почему мы
Как мы работаем
Отзывы клиентов
Иконки секций
Эмодзи-иконки на светло-красном фоне. Применяются в карточках, шагах и заголовках блоков.
📋
Документы
🔄
Встречная
💎
Качество
📈
Выгода
🏠
Недвижим.
🔑
Ключи
📸
Фотосъёмка
👥
Покупатели
✍️
Сделка
🤝
Соседи +
⚠️
Соседи −
🛡️
ЗащитаНаписать нам
Ответим быстро — Пн–Пт 9:00–20:00, Сб–Вс 10:00–18:00