АкцияНовичкам
Первый флоатинг — второй в подарок
60 минут невесомости и полный двухчасовой ритуал. Покупаете первый сеанс — второй дарим.
3 590 ₽7 180 ₽за 2 сеанса
Дизайн-система · стандарт v1-2
Единый набор компонентов FLOTARIUM
Все блоки ниже собраны из утверждённых стилей сайта — тех же, что работают на странице «Акция». Это эталон: новые страницы собираем из этих компонентов, не изобретая новых цветов, шрифтов и узоров.
01 · Токены
Цвет, форма и тень
Фундамент тёмной «водной» темы. Любой компонент собирается только из этих значений.
Фоны и поверхности
Акцент и текст
Коралловый — только акции, рейтинг и подарки
Радиусы скругления
SM · 10
MD · 16
LG · 24
XL · 34
Тени и свечение
Карточка
Свечение акцента
Свечение коралла
Когда применять
- Синий акцент — основное действие, ссылки, активные состояния.
- Коралл — только акции, подарки и звёзды рейтинга.
- Скругления: 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 символов в строке.
Чего избегать
- Не пропускать надзаголовок — он задаёт ритм.
- Не дублировать смысл заголовка в лиде дословно.
- Не центрировать рабочие секции с длинным текстом.
06 · Карточки услуг и цен
Сетка предложений
Одна «фичевая» карточка на два столбца задаёт акцент, остальные — равные по сетке.
Хит
Подарочная карта
Номинал на любые услуги. Остаток не сгорает.
8 000 ₽
−18%
Флоатинг-дуэт
Два сеанса по 60 минут — на двоих или про запас.
5 900 ₽7 180 ₽
−18%
Флоатинг + массаж 60
Час невесомости и час массажа всего тела.
7 400 ₽8 880 ₽
Когда применять
- Одна фичевая карточка на блок — для главного оффера.
- Старую цену показывать зачёркнутой рядом с новой.
- Призрачная кнопка на обычных, синяя — на фичевой.
Чего избегать
- Не делать несколько фичевых карточек в одной сетке.
- Не оставлять карточку без цены или действия.
- Не перегружать описание — 1–2 строки.
07 · «Кому подходит»
Карточки аудиторий
Фото с индексом, тег аудитории, заголовок-ссылка и список выгод. Поднимаются при наведении.
Когда применять
- Сетка 3 в ряд на десктопе, 2 и 1 — уже.
- Тег аудитории — одно-два слова.
- 3–4 коротких пункта выгоды на карточку.
Чего избегать
- Не заполнять фото-слот случайной картинкой не в теме.
- Не делать списки выгод длиннее четырёх строк.
- Не убирать индекс-бейдж с фото.
08 · Промо-полоса
Сезонная акция
Единственный блок с коралловым акцентом и градиентным заголовком. Фото слева, призыв справа.
Сезонная акция · Июнь
Щедрые подаркивесь июнь
К каждому летнему предложению — подарок от FLOTARIUM. Дарим заботу тем, кто выбирает тишину этим летом.
Акция действует до 1 июля
Когда применять
- Один промо-блок на страницу, для активной акции.
- Градиентный курсив — на 1–2 слова в заголовке.
- Рядом с кнопкой — срок действия моно-меткой.
Чего избегать
- Не использовать коралл вне акций.
- Не ставить несколько промо-полос подряд.
- Не заменять коралловую кнопку на синюю внутри промо.
09 · Депозит и тарифы
Панель с тирами
Крупная панель с мягким свечением, ступени скидок и действия справа.
Постоянным гостям
Депозит на услуги
Чем крупнее депозит — тем больше скидка на все услуги базового прайса.
−15%
депозит от 15 000 ₽
−25%
депозит от 25 000 ₽
Выгодно
−30%
депозит от 35 000 ₽
Когда применять
- Для тарифных ступеней и условий лояльности.
- Лучшую ступень помечать бейджем «Выгодно».
- Действия — колонкой справа: основное + призрачное.
Чего избегать
- Не делать больше трёх-четырёх ступеней.
- Не помечать бейджем несколько тиров сразу.
- Не растягивать лид шире ~46 символов.
10 · FAQ-аккордеон
Частые вопросы
Две колонки: слева — шапка секции, справа — нумерованный аккордеон. Открыт один пункт.
Частые вопросы
Коротко о главном
Не нашли ответ? Напишите нам в Telegram — ответим за минуту.
Лучший совет — не ожидайте ничего. Чем меньше установок, тем глубже расслабление. Мы проведём короткий инструктаж, а дальше тело само подскажет, как ему комфортно.
За 4 часа до визита не пейте кофе, а минут за 30 слегка перекусите. В этот день не брейтесь и не ходите в солярий: соль ощутимо щиплет кожу.
Можно ничего — беруши, шапочку, полотенце и тапочки мы выдаём. По желанию возьмите купальник и свою косметику.
Сеанс длится от 60 до 180 минут. Но вместе с душем, чаепитием и отдыхом вы проводите у нас примерно на час больше.
Когда применять
- Нумерация двузначная (01, 02 …).
- По умолчанию открыт первый вопрос.
- Ответ — короткий абзац до ~62 символов в строке.
Чего избегать
- Не держать открытыми сразу несколько пунктов.
- Не подменять этот блок нативным «details» в другом стиле.
- Не уводить ответы в простыни текста.
11 · Отзывы
Карточка и попап
Перетаскиваемая лента карточек. Клик по карточке открывает полный текст в окне.
Когда применять
- Лента перетаскивается; обрезанный текст — 6 строк.
- Полный отзыв — в попапе по клику.
- Источник и уровень — моно-меткой под именем.
Чего избегать
- Не разворачивать длинные отзывы прямо в карточке.
- Не убирать инициал-аватар и источник.
- Не ставить меньше пяти звёзд «для реализма».
12 · Локации
Табы студий
Капсульные табы переключают карточку адреса и карту рядом.
Центральный
АдресБрюсов переулок, д. 2/14, стр. 3
МетроОхотный ряд · Тверская
Телефон+7 (495) 145-63-22
Когда применять
- Активный таб — заливка акцентом.
- Каждая строка адреса — со своей иконкой.
- Карта подменяется с плавным переходом.
Чего избегать
- Не складывать больше 3–4 студий в один ряд табов.
- Не оставлять карту-заглушку без подписи.
- Не убирать кнопку записи из карточки адреса.
13 · Галерея
Фильмстрип атмосферы
Горизонтальная лента фото с перетаскиванием. Кадры разной ширины задают ритм.
Когда применять
- Чередовать вертикальные кадры с одним-двумя широкими.
- Подсказка «тяните, чтобы листать» рядом с заголовком.
- Edge-to-edge — лента уходит за край экрана.
Чего избегать
- Не ставить все кадры одинаковой ширины подряд.
- Не делать видимый полосатый скроллбар.
- Не смешивать сюда не-атмосферные изображения.
14 · Формы и модалка
Поля и окно записи
Поля на тёмном фоне с акцентной рамкой в фокусе, сегментированный переключатель и окно онлайн-записи.
Поля и переключатель
Окно онлайн-записи
Модальное окно затемняет фон, всплывает с лёгким подъёмом. Закрытие — по крестику, клику вне окна или Esc.
Когда применять
- Подпись поля — моно-шрифтом, мелко.
- Сегментированный выбор — для 2–3 коротких опций.
- В фокусе поле подсвечивает рамку акцентом.
Чего избегать
- Не делать поля на светлом фоне.
- Не растягивать форму записи больше 4–5 полей.
- Не убирать способы закрыть окно (Esc / фон / крест).
15 · Хедер и футер
Каркас страницы
Шапка с навигацией, переключателем города и кнопкой записи; подвал с миссией, колонками ссылок и нижней строкой.
Когда применять
- Шапка фиксированная, на скролле уплотняется и затемняется.
- В подвале — миссия + три колонки ссылок + нижняя строка.
- Переключатель города меняет телефон в шапке.
Чего избегать
- Не дублировать призрачную и синюю кнопку в шапке.
- Не добавлять в навигацию больше 5–6 пунктов.
- Не менять порядок колонок подвала между страницами.