UI-кит: токены и блоки
Единый источник: палитра, типографика, кнопка, герой и все блоки. Из них собираются все страницы корпуса — одинаково.
Обсудить условия подбора
Палитра
#203660Заголовки, тёмные карточки
#ef6f81Акцент, кнопка
#4968a6Ссылки
#2b4a8fКарточки-факты героя
#e9eff8Светлые панели и плитки
#e3e6ecЛинии и границы
#4a5260Текст в блоках
#000000Основной текст
Типографика — Roboto
H1 и H2 — 30/41, вес 500, #203660 (как на russian_nanny)
H3 — 24/32, вес 500, #203660
H3: подзаголовок раздела
Обычный абзац — 20/30, цвет #000. Лид — 19/29, #333. Ссылка — как эта, цвет #4968a6. Полужирный — вот так.
Лид-абзац 19/29 — им открывается раздел или страница.
Кнопка
CTA — фон #ef6f81, белый текст, radius 30, padding 16×34, шрифт 14/600 (как на russian_nanny)
Первый экран — герой
Панель #e9eff8 radius 45, фото справа 44%, 3 карточки-факта #2b4a8f, акцент в заголовке розовый
Заголовок страницы: с акцентом на числе
Подзаголовок одной–двумя строками: зачем страница и что получит клиент.
Обсудить условия подбораБлок: таблица
Данные, шаги, сравнения
| Колонка | Значение | Число |
|---|---|---|
| Строка один | Описание в одну строку | 80–100 |
| Строка два | Описание | 1 |
Блок: список-секции тонкой линией
Факторы и пункты без коробок и иконок
Заголовок пункта
Короткое пояснение в одну–две строки.
Второй пункт
Пояснение.
Третий пункт
Пояснение.
Блок: нумерованные шаги
Вопросы, этапы проверки
Первый вопрос? Пояснение к нему.
Второй вопрос? Пояснение.
Третий. Пояснение.
Блок: CTA-полоса
Тёмно-синяя полоса #203660, одна на страницу
Заголовок призыва к действию
Подзаголовок: что сделать и что будет дальше.
Блок: FAQ-аккордеон
Первый вопрос?
Ответ на первый вопрос.
Второй вопрос?
Ответ на второй вопрос.
Блок: плитки (для цен)
Две–три плитки с крупным числом и акцентом
Блок: карточки-преимущества с иконкой
Белые карточки, розовая иконка, текст с жирными акцентами — для «почему мы»
Более 10 лет опыта у рекрутеров, которые отбирают кандидатов.
Проверка СБ и рекомендаций — минимум два прежних работодателя.
Упор на развитие ребёнка, а не просто присмотр.
Первые кандидаты за 48 часов, замена в течение года.
Блок: отзывы
Текстовые отзывы семей, без видео — подставляются реальные с сайта клиента
Здесь реальный отзыв семьи — цитата с сайта клиента, две–три строки о результате.
Второй отзыв — короткая цитата о том, как прошёл подбор.
Светлая секция — ритм фонов
В неё заворачиваем 1–2 секции, чтобы разбить белый фон #f5f7fb
Заголовок внутри светлой секции
Контент на светлом фоне для ритма между белыми разделами.
Появление на скролле
Все блоки мягко появляются снизу вверх при прокрутке — на всей странице, без отдельной разметки