ГК Атрибьют · Личный кабинет пациента

Дизайн-система

Единый источник визуальной правды для мини-аппов Telegram / VK / MAX, сайта lk.atribeautemed.ru и десктоп-приложения. Всё, что рисуется в продуктах бренда, собирается из токенов и компонентов этого документа.

Версия 1.0 · июль 2026 PT Serif + PT Sans 3 направления · 1 система

Архитектура бренда

Три направления делят одну систему: общий синий, общие шрифты, общие компоненты. Различие — только в акцентном цвете, который задаётся атрибутом data-brand на корне приложения. Смешивать акценты разных направлений на одном экране запрещено.

MED

Атрибьют

Доказательная медицина
Акцент #EB5E57 коралл

KIDS

Атрибьют KIDS

Детская стоматология
Акцент #F39EC5 розовый

DENTAL

Атрибьют Dental

Эстетическая стоматология
Акцент #4E949E бирюзовый

Цвета

Navy — голос бренда: заголовки, навигация, логотип. Акцент — действие: одна CTA-кнопка, активные состояния, ссылки. Нейтральные — всё остальное. Минимальный контраст текста 4.5:1 (WCAG AA).

Базовые

brand-navy

#1A3E70

Заголовки, навигация, hero-карточки

neutral-50

#F7F8FA

Фон экранов

neutral-100

#EEF0F4

Разделители, подложки, обводки полей

neutral-200

#E1E5EC

Границы hover, скелетоны

neutral-400

#9AA3B2

Placeholder, подписи, неактивные иконки

neutral-700

#3D4A5C

Основной текст

neutral-900

#1A2130

Заголовки, тосты, тёмный текст

white

#FFFFFF

Карточки, поля, текст на тёмном

Акценты направлений

accent-main · MED

#EB5E57

accent-kids · KIDS

#F39EC5

accent-dental · DENTAL

#4E949E

Семантические

success

#2D8A6E

Приём подтверждён, оплата прошла

warning

#E8A020

Ожидает подтверждения

error

#D94040

Ошибки форм, отмена

info

#3A7EC4

Информационные сообщения

Типографика

PT Serif — заголовки и всё, что говорит голосом бренда. PT Sans — интерфейс и текст. PT Serif не используется мельче 14px; курсив — только для цитат. Кернинг заголовков −0.01em, лейблов ALL CAPS +0.08em. Ширина строки ≤ 65ch.

Мобильная шкала — мини-аппы TG/VK/MAX, мобильный веб

display · 32/1.15PT Serif 700

Здравствуйте, Дмитрий

h1 · 26/1.2PT Serif 700

Запись на приём

h2 · 22/1.25PT Serif 700

Ближайшие приёмы

h3 · 18/1.3PT Serif 700

Результаты анализов

h4 · 16/1.4PT Sans 700

Беляев Дмитрий Павлович

body · 15/1.6PT Sans 400

Приём длится 60 минут, возьмите с собой паспорт

body-sm · 13/1.5PT Sans 400

Стоматолог-терапевт · клиника на Гороховой

caption · 12/1.4PT Sans 400

Обновлено 2 июля в 14:30

label · 10/1.3PT Sans 700 · caps · +0.08em

Ближайший приём

Десктопная шкала — сайт lk.atribeautemed.ru, Tauri ≥ 1024px

display · 48/1.15PT Serif 700

Атрибьют

h1 · 36/1.2PT Serif 700

Медицинская карта

h2 · 28/1.25PT Serif 700

История посещений

h3 · 22/1.3 · h4 · 18Serif / Sans

Документы и справки

body-lg 18 · body 16 · body-sm 14PT Sans

Остальные роли аналогичны мобильной шкале

Пространство, радиусы, тени

Все отступы кратны 4px (базовый шаг — 8px). Экран мини-аппа: боковые поля 16px, между карточками 12px, между секциями 18–24px. Десктоп: сетка 12 колонок, gap 24px, max-width 1200px.

Шкала отступов

--s-4

4 — внутри иконок

--s-8

8 — между связанными элементами

--s-12

12 — между карточками

--s-16

16 — поля экрана, padding карточки

--s-20

20 — padding крупной карточки

--s-24

24 — между секциями

--s-32

32 — крупные блоки, десктоп

--s-48

48 — секции десктопа

--s-64

64 — hero-зоны

Радиусы

--r-sm 4 · кнопки, поля, теги

--r-md 8 · чипы, вложенные блоки

--r-lg 14 · карточки

--r-xl 22 · крупные карточки, шторки

Тени — всегда от navy, не от чёрного

sm · карточки

md · hover, поповеры

lg · шторки, тосты

Компоненты

Все компоненты наследуют акцент через var(--color-accent) — переключите направление, чтобы увидеть тематизацию.

Кнопки — одна primary на экран

Теги и статусы

Черновик Ближайший приём Подтверждено Ожидает Отменено Онлайн MED

Формы

Телефон

Формат E.164, на него придёт код

Проверьте адрес почты

Чипы выбора времени

Карточка врача

Обухова Елизавета Михайловна

Врач-стоматолог

★ 4.9 ·127 отзывов ·14 лет

Завтра 10:15

от 3 500 ₽

Тост и разделитель

Запись подтверждена — напомним за сутки

Разделитель — 1px neutral-100, вертикальные поля 12px

Hero-карточка ближайшего приёма — navy-фон, декоративный круг в цвет акцента

Ближайший приём через 2 часа

Обухова Елизавета Михайловна

Стоматолог · Атрибьют на Чкаловском

Сегодня, 16:00 Очный приём

Нижняя навигация — 5 пунктов, активный в цвете акцента

Экраны — мобильный вид

Мокапы ключевых экранов мини-аппа. Каждый экран использует общие токены и компоненты — переключение бренда тематизирует всё автоматически.

MED

Здравствуйте, Дмитрий

Хорошее здоровье — привычка на всю жизнь

Ближайший приём через 2 часа

Обухова Е.М.

Стоматолог · Новочеркасский

Сегодня, 16:00 Очный

Запись

Медкарта

Чат

Мои врачи

Все

Обухова Е.М.

Стоматолог, к.м.н.

Завтра 10:15

от 3 500 ₽

Главная

Запись на приём

Обухова Е.М.

к.м.н. · Новочеркасский

от 3 500 ₽

Завтра, 10:15

Лавренова М.В.

Невролог · Чкаловский

от 3 500 ₽

Сегодня, 14:30

Попова В.Д.

Кардиолог · Новочеркасский

от 3 000 ₽

Сегодня, 18:00

Пн

Вт

Ср

Чт

Пт

Свободное время

Запись

Профиль

Дмитрий Беляев

+7-921-333-98-98

Посещений

3 200

Бонусов

Личные данные

Документы

Оплата

Выйти

Профиль

Экраны — десктоп вид

Десктопный вид сайта lk.atribeautemed.ru. Боковая навигация, контентная область, max-width 1200px, сетка 12 колонок.

lk.atribeautemed.ru

А Атрибьют

Добро пожаловать, Дмитрий

Управляйте записями и медкартой

MED

Ближайший приём через 2 часа

Обухова Е.М.

Стоматолог · Новочеркасский

Сегодня, 16:00 Очный

Бонусы

3 200 ₽

Доступно для оплаты

Посещений

За последний год

История посещений

Все

2 июля 2026 Подтверждено

Обухова Е.М.

Новочеркасский, 33

15 июня 2026 Завершено

Козлова М.А.

Чкаловский, 50

1 июня 2026 Ожидает

Петров С.И.

Новочеркасский, 33

Правила

Можно и нужно

Одна primary-кнопка на экран, остальное — secondary/ghost
Акцент только через var(--color-accent), никогда хексом
PT Serif для заголовков и имён врачей, PT Sans для остального
Тени только от navy: rgba(26,62,112,…)
Статусы записи — семантическими цветами (success/warning/error)
Медицинские термины объяснять сразу, тон — на «вы», без канцелярита

Нельзя

Смешивать акценты направлений на одном экране
PT Serif мельче 14px; жирный текст вместо иерархии размеров
Чёрные тени, чистый чёрный #000 в тексте
Отступы не кратные 4px, «на глаз»
«Лучший», «уникальный», запугивание, гарантии результата
Логотип: растягивать, перекрашивать, вращать, ставить тень