TRC · цифровые рекомендации
Спокойный интерфейс, который помогает двигаться дальше
Светлая медицинская дизайн-система с ясной иерархией, предсказуемыми состояниями и доступными компонентами без лишнего визуального давления.
Знак остаётся неизменным
Используем только оригинальные SVG на белых и очень светлых поверхностях. Не перекрашиваем, не добавляем тени, фильтры и эффекты.
Многосайтовость
Единый мастер-бренд · разные продуктыclinic.trc-72.ru
Клиника
shop.trc-72.ru
Интернет-магазин
account.trc-72.ru
Личный кабинет
Многосайтовость · компактный вариант
Знак · разделитель · продуктclinic.trc-72.ru
Клиника
shop.trc-72.ru
Интернет-магазин
account.trc-72.ru
Личный кабинет
Можно
- Сохранять исходные пропорции и охранную зону
- Размещать на белом или очень светлом фоне
- Оставлять полный логотип шириной не менее 180 px
Нельзя
- Перекрашивать, инвертировать или собирать заново
- Добавлять тени, фильтры, контуры и объём
- Размещать на пёстром или неконтрастном фоне
Цвет описывает роль, а не декор
Основной синий отвечает за действия, тёмные нейтральные оттенки — за текст, а голубой accent применяется в графике и небольших акцентах. Для мелкого текста на белом accent не используется.
Действия и акцент
default · hover · activeТекстовые роли
Поверхности и границы
Нейтральное поднятие
Без синего свечения--trc-shadow-xsТонкое отделение поверхности
--trc-shadow-smКарточка или шапка
--trc-shadow-mdHover интерактивной карточки
--trc-shadow-lgМеню или высокий слой
Ясная и спокойная иерархия
Roboto остаётся в заголовках и интерфейсе, PT Sans — в основном тексте. Основной текст плавно меняется от 16 px на небольших экранах до 18 px на desktop, а интерфейс сохраняет преимущественно 16 px.
Возвращаем опору для движения
Понятный путь к восстановлению
Программа реабилитации
Индивидуальная программа
Следующий шаг
Спокойно объясняем варианты и вместе выбираем следующий шаг.
Специалист выслушает, изучит рекомендации врача и предложит понятный план следующих шагов. На каждом этапе можно задать вопросы и получить спокойное объяснение.
Рекомендации остаются читаемыми без горизонтального масштабирования.
Получить консультацию · Выбрать направление
Телефон для обратной связи
Подпись поясняет изображение и не несёт критичную инструкцию.
Программа восстановления
TOKEN 03 · #145095 · служебный пример
Важно: видимый текст не уменьшается ниже 14 px. Основной интерфейсный текст, навигация, действия и поля используют преимущественно 16 px.
Роли шрифтов
Интерфейс · редакционный текстRoboto / UI
СтатусСтруктура и короткое действие
Навигация, кнопки, labels, поля, статусы, таблицы, технические подписи и короткие карточки.
PT Sans / Content
Объяснение и долгое чтение
Вводные абзацы, статьи, описания, рекомендации и содержательные страницы используют более мягкий редакционный ритм.
Заголовок остаётся в Roboto, основной текст — в PT Sans.
Комбинация в контексте
Roboto задаёт структуру, PT Sans поддерживает долгое чтение
Чёткий заголовок помогает быстро понять тему, а спокойный основной текст — последовательно разобраться в содержании.
Редакционный текст не должен выглядеть как продолжение панели управления. Ему нужны комфортная длина строки, увеличенный межстрочный интервал и предсказуемые смысловые паузы.
Внутри кнопок, полей и небольших служебных элементов при этом сохраняется единый интерфейсный Roboto.
Набор символов
Аа Бб Вв Гг Дд Ее Жж Зз Ии Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф 0123456789
Списки
Лист из знака · номера для последовательностиМаркированный список
- Индивидуальный план с понятными этапами восстановления
- Ответы на вопросы до и после консультации
- Рекомендации специалиста в одном месте
Нумерованный список
- Опишите задачу и ожидаемый результат
- Выберите удобное время консультации
- Получите понятный план следующих шагов
Изображение имеет задачу и точку фокуса
Раздел сохраняет композицию актуального каталога: правила собраны в привычных демонстрационных карточках, а вместо внешних стоков используются локальные placeholders с назначением, пропорцией и рекомендуемым кадрированием.
Hero image16:10 или 3:2Фокус: процесс или пространство
Hero
Первый экран или крупный смысловой блок. Главное LCP-изображение не получает lazy loading.
Card image4:3 или 3:2Фокус: основной объект
Card media
Универсальная медиа-область для сущностей, публикаций и предметных карточек.
Portrait4:5 или 1:1Фокус: сверху по центру
Portrait
Для человека по умолчанию используется верхняя центральная точка, затем позиция уточняется вручную.
Содержательная фотография3:2 · без встроенного текста
Fallback и доступность
- Содержательный alt описывает назначение изображения в контексте.
- Декоративное изображение получает
alt="". - Fallback сообщает тип материала и не показывает сломанный файл.
- Текст не располагается поверх лица или важного объекта.
- Подпись сохраняет размер не меньше 14 px и достаточный контраст.
Загрузка и адаптивность
width · height · srcset · sizes<img
src="image-960.webp"
srcset="image-640.webp 640w, image-960.webp 960w"
sizes="(max-width: 48rem) 100vw, 40vw"
width="960" height="640"
loading="lazy" decoding="async"
alt="Описание назначения изображения"
>Правила материала
- Предпочтительны реальные люди, помещения, изделия и процессы.
- Используются AVIF или WebP с fallback при необходимости.
- На mobile fixed-height не должен вызывать агрессивную обрезку.
- Overlay не применяется автоматически к каждой фотографии.
- Случайные внешние URL и изображения со встроенным текстом не используются.
Каждое состояние отвечает на свой вопрос
Hover сообщает о возможности взаимодействия мышью, focus-visible показывает положение клавиатурного фокуса, active подтверждает нажатие, а selected описывает сохранённый выбор.
Hover
Мягкая подсказка для указателя. Не заменяет focus и не должна резко менять характер компонента.
Focus-visible
Хорошо заметное кольцо для клавиатуры. Не снимается без равноценной замены.
Active
Короткая обратная связь в момент нажатия. Цвет немного насыщеннее, без масштаба.
Selected
Сохранённый выбор: активный пункт, вкладка или option. Это не то же самое, что active.
Disabled
Действие временно недоступно. Нейтральные цвет и фон дополняются disabled-семантикой.
Loading
Операция выполняется. Индикатор видим, повторное нажатие заблокировано, статус озвучивается.
Правильный hover
Правильно
Неправильно
Статический блок
Не должен подниматься или синеть только из-за наведения.
Уверенное действие без резкого скачка
Основная кнопка сохраняет белый текст во всех интерактивных состояниях. Secondary остаётся светлой, quiet получает только спокойный голубой фон.
Варианты
Иконки
20 px · currentColor · stroke 1.8Матрица состояний
Каталожные классы имитируют hover и focusDefault
Hover
Focus
Active
Disabled
Loading
Подпись, состояние и следующий шаг
Hover усиливает нейтральную границу, focus добавляет основной синий и кольцо. Ошибка всегда содержит текст и связана с полем через aria-describedby.
Текстовое поле
Подпись остаётся над полем.
Select
Textarea
С иконкой
Префикс и суффикс
от₽
Readonly
Значение можно скопировать, но нельзя изменить.
Disabled
Error
Укажите номер телефона полностью.
Success
Адрес проверен.
File upload
Checkbox
Radio group
Форма заявки
Демонстрация клиентской валидацииОдна карточка — одна задача
Статическая карточка остаётся неподвижной. Только модификатор interactive включает тень, небольшое поднятие и focus-within — и только когда внутри есть понятное действие.
Статическая и интерактивная
Информация без перехода
Карточка группирует содержание, но не реагирует на hover и не обещает действие.
Есть ясный следующий шаг
На hover усиливается только тень; клавиатурный фокус виден через focus-within.
Feature
Светлая фирменная поверхностьОстаёмся рядом и отвечаем на вопросы
Помогаем адаптироваться к решению и при необходимости объясняем, что можно скорректировать.
Универсальные композиции
TYPE A–D · нейтральные данныеTYPE A / CONTENT
Название сущности
Короткое описание помогает понять содержание и решить, нужен ли переход к подробностям.
Media slot4:3
TYPE B / MEDIA
Название объекта
Изображение, название, пояснение и основное значение образуют единый сценарий.
Основное значение
TYPE C / FILE
TYPE D / DATA
Структурированный блок
- Параметр 01
- Значение
- Параметр 02
- Значение
- Параметр 03
- Значение
Готовые блоки для типовых задач
Компоненты используют единые токены, простые SVG с currentColor и текстовые признаки состояния. Цвет никогда не остаётся единственным сигналом.
Badge и status
НейтральныйБрендИнформацияПодтвержденоТребует вниманияОшибка
ОжидаетНа проверкеДоступноОсталось 2 местаНедоступно
Breadcrumbs
Accordion / FAQ
Нативная семантика · плавная высотаНужны ли медицинские документы на первой встрече?
Если у вас есть заключения и рекомендации врача, возьмите их с собой. Но начать разговор можно и без полного комплекта документов.
Сколько длится первичная консультация?
Обычно от 45 до 60 минут. Специалист уточнит задачу, проведёт первичную оценку и объяснит возможные следующие шаги.
Можно ли прийти с сопровождающим?
Да. Если присутствие близкого человека помогает вам чувствовать себя увереннее, сообщите об этом при записи.
Модальные окна
Small · Medium · LargeРазмер выбирается по объёму задачи. Все варианты используют нативный dialog, удерживают фокус внутри и закрываются по Escape.
Показатели с пояснениями
12
лет практики
Опыт центра с 2014 года
18
специалистов
Включая смежные направления
7
направлений
От оценки до сопровождения
4
этапа подбора
Каждый этап объясняется заранее
Правило иконок
Уведомления
Информация. Возьмите с собой рекомендации врача, если они есть.
Готово. Заявка принята, администратор свяжется с вами.
Обратите внимание. Для визита понадобится предварительная запись.
Не удалось отправить. Проверьте связь и попробуйте ещё раз.
Меню сохраняет контакты и действие
На узком экране открытое меню показывает все ссылки, телефон, режим работы и CTA. Escape, выбор ссылки и клик вне шапки закрывают меню с корректным возвратом фокуса.
Light-first от первого экрана до CTA
Крупные поверхности остаются светлыми, тёмный ink используется точечно. CTA уверенный, но не агрессивный, а декоративные окружности не конкурируют с содержанием.
Комплексная реабилитация
Помогаем вернуть уверенность в движении
Оценим вашу ситуацию, подберём программу и объясним каждый этап понятным языком.
Место для реальной фотографии
специалист и пациент на консультации
специалист и пациент на консультации
Понятный процесс
Три шага к началу работы
Разговор
Уточняем задачу и выбираем подходящего специалиста.
Диагностика
Оцениваем состояние и вместе формируем цель.
Программа
Согласуем этапы, сроки и формат сопровождения.
Мы рядом
Начните с разговора со специалистом
Расскажите, что вас беспокоит. Мы поможем определить спокойный и понятный следующий шаг.
На малом экране приоритеты сохраняются
Mobile — не уменьшенная копия. Контент идёт одной колонкой, основные действия занимают удобную ширину, а навигация не теряет телефон и запись.
≤ 767
Mobile
Одна колонка, основные CTA на всю ширину, поля 20 px.
768+
Tablet
Гибкая сетка в 1–2 колонки и раскрываемая навигация.
1024+
Desktop
Полная сетка, компактная шапка и расширенный контент.
Проверяем на каждой ширине
- Нет горизонтального скролла
- Интерактивные зоны не меньше 44 × 44 px
- Русские заголовки переносятся без обрезки
- Меню не остаётся открытым после resize
- Телефон, режим работы и CTA доступны
Понятно без мыши, цвета и анимации
Компоненты работают с клавиатуры, ошибки озвучиваются через связи, а motion отключается по пользовательской настройке. Плотность выбирается по задаче, не по желанию уместить всё.
Базовый чек-лист
- Обычный текст имеет контраст не ниже 4.5:1
- Крупный текст и значимая графика — не ниже 3:1
- focus-visible заметен и не зависит от hover
- Ошибки связаны через aria-describedby
- Состояние не обозначается только цветом
- prefers-reduced-motion убирает перемещение
Клавиатурный сценарий
- Tab переводит фокус по логичному порядку.
- Enter и Space активируют нативные элементы.
- Escape закрывает мобильное меню и модальное окно.
- После закрытия фокус возвращается на кнопку-вызов.
- Summary открывает FAQ без JavaScript.
Рекомендации по плотности
Comfortable
Формы, консультации, основной пользовательский путь.
Regular
Карточки услуг, документы, списки специалистов.
Compact
Только служебные таблицы; зона действия всё равно 44 px.