АкцияНовичкам
Первый флоатинг — второй в подарок
60 минут невесомости и полный двухчасовой ритуал. Покупаете первый сеанс — второй дарим.
3 600 ₽7 180 ₽за 2 сеанса
Дизайн-система · стандарт v1-4
Единый набор компонентов FLOTARIUM
Все блоки ниже собраны из утверждённых стилей сайта — тех же, что работают на страницах «Акция» и «Парам». Это эталон: новые страницы собираем из этих компонентов, не изобретая новых цветов, шрифтов и узоров.
01 · Токены
Цвет, форма и тень
Фундамент тёмной «водной» темы. Любой компонент собирается только из этих значений.
Фоны и поверхности
Акцент и текст
Коралловый — только акции, рейтинг и подарки
Радиусы скругления
SM · 10
MD · 16
LG · 24
XL · 34
Тени и свечение
Карточка
Свечение акцента
Свечение коралла
Вертикальный ритм секций
Обычная
--section-pad-y · clamp(36px, 5vw, 75px) сверху и снизу
После hero
--section-pad-entry-y · clamp(72px, 10vw, 150px) только сверху у первой контентной секции
Класс
.section-pad · единый стандарт для всех обычных секций сайта
Правило
- Каждой обычной контентной секции задавать класс
section-pad. - Чередовать фон секций, не меняя их вертикальные отступы.
- Увеличенный вход после hero применяется автоматически.
Исключения
- Не задавать локальные значения padding, если секция не является hero, финальным CTA или специальной редакционной композицией.
- Не использовать старый увеличенный отступ clamp(72px, 10vw, 150px) между обычными секциями.
Когда применять
- Синий акцент — основное действие, ссылки, активные состояния.
- Коралл — только акции, подарки и звёзды рейтинга.
- Скругления: LG для карточек, XL для крупных панелей, 100px для кнопок.
Чего избегать
- Не вводить новые цвета вне этой палитры.
- Не красить обычный текст в акцент ради «оживления».
- Не смешивать коралл и синий в одном призыве к действию.
02 · Типографика
Три шрифта, одна шкала
Cormorant — для заголовков, Manrope — для текста, JetBrains Mono — для надзаголовков и меток.
Шкала размеров
Step 5Тишина
Step 4Невесомость
Step 3Коротко о главном
Step 2Как проходит сеанс
Step 1Подзаголовок и крупный текст
Step 0Основной текст абзаца
Step −1Подписи и вторичный текст
Дисплейный — Cormorant
Час наедине с собой — без веса, времени и шума и суеты.
Текст — Manrope
Раствор высокой плотности держит вас на поверхности — вы буквально парите, не чувствуя тела, веса и времени.
Надзаголовок · лид · моно-метка
Надзаголовок секции
Лид — вводный абзац под заголовком, приглушённый и крупнее основного текста.
Моно-метка · 60 мин · включено
Когда применять
- Каждую секцию открывать парой «надзаголовок + дисплейный заголовок».
- Курсив акцентного цвета — для одного ключевого слова в заголовке.
- Моно-шрифт — надзаголовки, метки, цифры, кнопки.
Чего избегать
- Не набирать абзацы текста дисплейным Cormorant.
- Не опускаться мельче Step −1 в основном потоке.
- Не выделять курсивом-акцентом больше одного слова подряд.
03 · Кнопки и ссылки
Действия
Капсульная форма, моно-шрифт, подъём и свечение при наведении. Одна основная кнопка на экран.
Основные варианты
Компактные (в карточках)
Текстовая ссылка
Когда применять
- Синяя заливка — одно главное действие в блоке.
- Призрачная — вторичное действие рядом с основным.
- Коралловая — исключительно в акциях.
Чего избегать
- Не ставить две залитые кнопки рядом.
- Не убирать стрелку у ведущих призывов — это часть моторики.
- Не делать прямоугольные углы — кнопки всегда капсульные.
04 · Чипы и бейджи
Метки и ярлыки
Маленькие моно-метки на карточках: статус, скидка, признак акции.
Виды чипов
Для двоих
Хит
Акция
−20% июнь
−18%
Новичкам
Бейдж выгоды (на тарифах)
Выгодно
−30%
депозит от 35 000 ₽
Когда применять
- «Хит»/«Акция» (заливка) — выделить один-два оффера.
- «−18%» (контур) — обозначить скидку на остальных.
- Максимум 1–2 чипа на карточку.
Чего избегать
- Не вешать залитый чип на каждую карточку — пропадёт акцент.
- Не писать в чипе длинные фразы.
- Не смешивать коралловый и синий чип на одной карточке.
05 · Заголовки секций
Как открывается блок
Единый шаблон входа в секцию: надзаголовок, дисплейный заголовок, лид.
Слева (по умолчанию)
Кому подходит
Что флоатинг даёт нашим гостям
Один и тот же час невесомости решает очень разные задачи. Выберите свою — и посмотрите, что изменится.
По центру (для финальных блоков)
Готовы отключиться?
Подарите себе тишину
Когда применять
- Левое выравнивание — рабочие секции страницы.
- Центр — финальный призыв и заставки.
- Лид держать в пределах ~56 символов в строке.
- Надзаголовок
.eyebrowписать словами, без порядковой нумерации.
Чего избегать
- Не пропускать надзаголовок — он задаёт ритм.
- Не добавлять в надзаголовки номера секций: «01 — …», «02 — …».
- Не дублировать смысл заголовка в лиде дословно.
- Не центрировать рабочие секции с длинным текстом.
06 · Карточки услуг и цен
Сетка предложений
Одна «фичевая» карточка на два столбца задаёт акцент, остальные — равные по сетке.
Хит
Подарочная карта
Номинал на любые услуги. Остаток не сгорает.
8 000 ₽
−18%
Флоатинг-дуэт
Два сеанса по 60 минут — на двоих или про запас.
5 900 ₽7 180 ₽
−18%
Флоатинг + массаж 60
Час невесомости и час массажа всего тела.
7 400 ₽8 880 ₽
Когда применять
- Одна фичевая карточка на блок — для главного оффера.
- Старую цену показывать зачёркнутой рядом с новой.
- Призрачная кнопка на обычных, синяя — на фичевой.
Чего избегать
- Не делать несколько фичевых карточек в одной сетке.
- Не оставлять карточку без цены или действия.
- Не перегружать описание — 1–2 строки.
07 · «Кому подходит»
Карточки аудиторий
Фото с индексом, тег аудитории, заголовок-ссылка и список выгод. Поднимаются при наведении.
Когда применять
- Сетка 3 в ряд на десктопе, 2 и 1 — уже.
- Тег аудитории — одно-два слова.
- 3–4 коротких пункта выгоды на карточку.
Чего избегать
- Не заполнять фото-слот случайной картинкой не в теме.
- Не делать списки выгод длиннее четырёх строк.
- Не убирать индекс-бейдж с фото.
08 · Текстовые блоки и шаги
Информационные паттерны
Четыре утверждённых компонента: свободные списки, карточки последовательных шагов и компактные сервисные плашки.
01 · «Что это» · gap 29–51 px
Тёплая магниевая вода
Короткое объяснение ключевого свойства услуги в одну-две строки.
Тишина и темнота
Пункты образуют единый спокойный список без карточных подложек.
Вместе, но не тесно
Иконка помогает сканированию, но не превращается в яркий акцент.
02 · «Польза» · gap 26–46 px
Меньше стресса
Формулировка результата начинается с понятной пользы для гостя.
Больше близости
Заголовок короткий, описание раскрывает эффект без повторения.
Глубокий отдых
На hover весь пункт смещается, заголовок и иконка получают акцент.
03 · «Как проходит» · карточки шагов
01
02
03
04
Запись
Выберите удобное время и формат визита.
Подготовка
Администратор всё покажет и ответит на вопросы.
Сеанс
Тёплая вода и тишина постепенно снимают напряжение.
Отдых
После сеанса остаётся время на чай и мягкое возвращение.
04 · Компактные сервисные плашки · gap 10–14 px
Подберём студию и время под маршрут, задачу и привычный ритм гостя.
Встретим и всё покажем — короткий сервисный тезис остаётся одной компактной строкой.
Остаёмся на связи до и после визита, без лишней визуальной разреженности.
Зафиксировано
- Текстовые пункты: сдвиг вправо на 7 px за 500 мс.
- Иконка: увеличение до 1.08, мягкая заливка 18% акцента, без поворота.
- Заголовок пункта переходит в
--accent-2за 350 мс. - Карточка шага: подъём на 6 px, акцентная рамка, тень и верхняя линия.
- Компактная плашка: gap 10–14 px, круглая иконка 34 px, сдвиг вправо на 10 px.
- В плотных карточных сетках допустим вариант без подъёма: рамка, тень, верхняя линия и реакция иконки сохраняются.
Чего избегать
- Не добавлять фон и рамку отдельным пунктам «Что это» и «Польза».
- Не заменять компактными плашками свободные списки с самостоятельными заголовками и описаниями.
- Не вращать иконки и не использовать резкие пружинящие переходы.
- Не смешивать голубой hover с коралловым акцентом.
- При
prefers-reduced-motionотключать перемещения.
09 · Промо-полоса
Сезонная акция
Единственный блок с коралловым акцентом и градиентным заголовком. Фото слева, призыв справа.
Сезонная акция · Июнь
Щедрые подаркивесь июнь
К каждому летнему предложению — подарок от FLOTARIUM. Дарим заботу тем, кто выбирает тишину этим летом.
Акция действует до 1 июля
Когда применять
- Один промо-блок на страницу, для активной акции.
- Градиентный курсив — на 1–2 слова в заголовке.
- Рядом с кнопкой — срок действия моно-меткой.
Чего избегать
- Не использовать коралл вне акций.
- Не ставить несколько промо-полос подряд.
- Не заменять коралловую кнопку на синюю внутри промо.
10 · Депозит и тарифы
Панель с тирами
Крупная панель с мягким свечением, ступени скидок и действия справа.
Постоянным гостям
Депозит на услуги
Чем крупнее депозит — тем больше скидка на все услуги базового прайса.
−15%
от 15 000 ₽
−20%
от 20 000 ₽
−25%
от 25 000 ₽
Выгодно
−30%
от 35 000 ₽
Когда применять
- Для тарифных ступеней и условий лояльности.
- Лучшую ступень помечать бейджем «Выгодно».
- Действия — колонкой справа: основное + призрачное.
Чего избегать
- Не делать больше трёх-четырёх ступеней.
- Не помечать бейджем несколько тиров сразу.
- Не растягивать лид шире ~46 символов.
11 · FAQ-аккордеон
Частые вопросы
Две колонки: слева — шапка секции, справа — нумерованный аккордеон. Открыт один пункт.
Частые вопросы
Коротко о главном
Не нашли ответ? Напишите нам в Telegram — ответим за минуту.
Лучший совет — не ожидайте ничего. Чем меньше установок, тем глубже расслабление. Мы проведём короткий инструктаж, а дальше тело само подскажет, как ему комфортно.
За 4 часа до визита не пейте кофе, а минут за 30 слегка перекусите. В этот день не брейтесь и не ходите в солярий: соль ощутимо щиплет кожу.
Можно ничего — беруши, шапочку, полотенце и тапочки мы выдаём. По желанию возьмите купальник и свою косметику.
Сеанс длится от 60 до 180 минут. Но вместе с душем, чаепитием и отдыхом вы проводите у нас примерно на час больше.
Когда применять
- Нумерация двузначная (01, 02 …).
- По умолчанию открыт первый вопрос.
- Ответ — короткий абзац до ~62 символов в строке.
Чего избегать
- Не держать открытыми сразу несколько пунктов.
- Не подменять этот блок нативным «details» в другом стиле.
- Не уводить ответы в простыни текста.
12 · Отзывы
Карточка и попап
Перетаскиваемая лента карточек. Клик по карточке открывает полный текст в окне.
Когда применять
- Лента перетаскивается; обрезанный текст — 6 строк.
- Полный отзыв — в попапе по клику.
- Источник и уровень — моно-меткой под именем.
Чего избегать
- Не разворачивать длинные отзывы прямо в карточке.
- Не убирать инициал-аватар и источник.
- Не ставить меньше пяти звёзд «для реализма».
13 · Локации
Табы студий
Капсульные табы переключают карточку адреса и карту рядом.
Центральный
АдресБрюсов переулок, д. 2/14, стр. 3
МетроОхотный ряд · Тверская
Телефон+7 (495) 145-63-22
Когда применять
- Активный таб — заливка акцентом.
- Каждая строка адреса — со своей иконкой.
- Карта подменяется с плавным переходом.
Чего избегать
- Не складывать больше 3–4 студий в один ряд табов.
- Не оставлять карту-заглушку без подписи.
- Не убирать кнопку записи из карточки адреса.
14 · Галерея
Фотомозаика атмосферы
Асимметричная плитка с короткими спокойными подписями. Стандартный вариант для атмосферных фотогалерей на страницах сайта.
Когда применять
- Использовать общий класс
photo-mosaicи структуруfigure + figcaption. - Подпись — одно-два слова в нижнем левом углу, без отдельной плашки.
- Для галереи из 7–8 кадров добавлять модификатор
photo-mosaic--extended.
Чего избегать
- Не помещать подписи в яркие плашки, рамки или контрастные бейджи.
- Не использовать длинные предложения поверх фотографии.
- Не смешивать в одной мозаике фотографии разного визуального характера.
15 · Формы и модалка
Поля и окно записи
Поля на тёмном фоне с акцентной рамкой в фокусе, сегментированный переключатель и окно онлайн-записи.
Поля и переключатель
Окно онлайн-записи
Модальное окно затемняет фон, всплывает с лёгким подъёмом. Закрытие — по крестику, клику вне окна или Esc.
Когда применять
- Подпись поля — моно-шрифтом, мелко.
- Сегментированный выбор — для 2–3 коротких опций.
- В фокусе поле подсвечивает рамку акцентом.
Чего избегать
- Не делать поля на светлом фоне.
- Не растягивать форму записи больше 4–5 полей.
- Не убирать способы закрыть окно (Esc / фон / крест).
16 · Хедер и футер
Каркас страницы
Шапка с навигацией, переключателем города и кнопкой записи; подвал с миссией, колонками ссылок и нижней строкой.
Когда применять
- Шапка фиксированная, на скролле уплотняется и затемняется.
- В подвале — миссия + три колонки ссылок + нижняя строка.
- Переключатель города меняет телефон в шапке.
Чего избегать
- Не дублировать призрачную и синюю кнопку в шапке.
- Не добавлять в навигацию больше 5–6 пунктов.
- Не менять порядок колонок подвала между страницами.