UI-кит

Общая база компонентов для Синодика, Тайнства.ру, Типикона и Стихиры — одна визуальная система вместо четырёх разных.

Логотипы сервисов

Тайнства.ру
Тайнства.руСкачать
Синодик
СинодикСкачать
Стихира
СтихираСкачать
Типикон
ТипиконСкачать

Цвета

Брендовая палитра

Семантические токены (собраны из палитры выше)

Радиусы

sm
9999px
md
9999px
lg
9999px
xl
9999px
2xl
9999px
3xl
9999px
full
9999px

Типографика

Заголовок h1 — TT Ricordi Allegria, 48px

Заголовок h2 — 22px

Заголовок h3 — 17px

Интерфейсный h1 — TT Commons, 32px

Основной текст — TT Commons Pro, 16px. Используется для всего остального контента интерфейса.

Вспомогательный текст — 14px, приглушённый цвет.

Иконки VKUI

Библиотека @vkontakte/icons — вместо ручных SVG-дублей, которые сегодня разными файлами лежат и в Синодике, и в Стихире.

Кнопки

Чипы

У чипов с аватаром наведи курсор — покажется тултип с саном.

12 октябряСИотец ИоаннСИотец Александр

Инпуты, селекты, специальные поля

+7

Радио, чекбоксы, свитчер

Сегментированный контрол и табы

Содержимое вкладки «Вечерня».

Таблица

ДатаПериод / ГласПраздник
12.10.2026Глас 3—
14.10.2026Глас 5Покров Пресвятой Богородицы

Календарь

октябрь 2026
октябрь 2026

Модальное окно подтверждения/удаления

Боковая панель (Side Panel)

Выезжает справа. Один контейнер, ширина анимируется — по паттерну из Стихиры (`app/posts/page.tsx`, «Two-level sliding plan panel»): первый уровень фиксированной ширины (380px) не закрывается вторым, а сдвигается левее вместе с расширением контейнера; второй уровень заполняет освободившееся место рядом с первым, а не поверх него.

Header / AppSidebar / Layout

Это компоненты уровня всей страницы (фиксированное позиционирование на весь вьюпорт), поэтому вживую их логично смотреть не внутри этой витрины, а на отдельной странице — см. /dashboard. Layout сам сворачивает меню при нехватке места (см. lib/layout — SIDEBAR_COLLAPSE_BREAKPOINT) и держит центральную колонку по центру экрана независимо от состояния меню (ContentShell).

<Layout
  headerLogo={<Logo />}
  headerActions={<Button>Открыть VK</Button>}
  churches={churches}
  currentChurchId={currentChurchId}
  onSelectChurch={setCurrentChurchId}
  onAddChurch={() => setSheetOpen(true)}
  active={active}
  onNavigate={setActive}
  widgets={<Analytics />}
>
  {children}
</Layout>

Карточки, бейджи, аватары, прогресс

Пример карточки
bg-card, rounded-2xl, без тени и обводки
СИ
СинодикПример аватара
По умолчаниюВторичныйКонтурныйОшибка
62%