Внутренний справочник RION+Редакция 2.0.0 · 05.11.2026

Дизайн-код RION+

Общая типографика и целостность оформления с сохранением действующих страниц.

Блок преимуществ над контентом — без изменений.

Посмотреть типографику Границы изменений

Что зафиксировано

Дизайн-код задаёт общий язык страниц: шрифт, роли текста, читаемость и спокойную визуальную основу. Существующие страницы сохраняют свою композицию.

Istok Web · 16 pxОсновной текст. Выбор подтверждён владельцем сайта.

Istok WebЗаголовки. Размер зависит от роли текста на странице.

Предыдущая рекомендация использовать Arial для основного текста отменена. Arial остаётся только запасным шрифтом на время загрузки Istok Web.

Одна типографика не означает один макет. Промостраница может иметь крупный заголовок и колонки. Текстовая страница может быть проще. Согласованность проверяем по ролям и качеству исполнения, а не по совпадению всех размеров.

Что нельзя менять

Блок преимуществ над основным контентом защищён от редизайна. На странице «Оплата и доставка» это четыре плашки:

Склад и производство в Санкт-Петербурге.
Бесплатная доставка по Санкт-Петербургу.
Быстрая доставка до любой ТК.
Самовывоз со склада в день заказа.

Сохраняем тексты, иконки, шрифт, цвета, размеры, отступы, порядок, сетку и поведение на телефоне. Не скрываем блок и не заменяем его другим оформлением.

Техническая граница защищённого блока

Элемент и его родительская область оформления остаются без изменений. Этот селектор служит только для проверки сохранности:

main .widget-type_system_widget_v4_benefits_5

Не добавлять для него переопределения CSS, не исключать виджет из цикла вывода. При проверке основного контента системные блоки преимуществ не включать в список типографических правок.

Область	Правило
Шапка, логотип, подвал, нижняя панель, чат	Сохраняем действующую оболочку сайта.
Основной контент старых страниц	Сейчас только проверяем типографику и целостность.
Колонки, ширина блоков, изображения, ссылки и порядок секций	Не меняем в рамках типографической проверки.
Тексты документов и параметры оплаты	Сохраняем без изменений.
Страница дизайн-кода	Можно обновлять как справочник. Её CSS изолирован от остальных страниц.

Роли и размеры текста

Обязательная основа: основной текст 16 px и Istok Web; заголовки тоже Istok Web. Для нового контента ниже приведены ориентиры. Это не команда заменить размеры всех действующих страниц.

Роль	Ориентир для нового контента	Как проверять старые страницы
Главный заголовок обычной страницы	40–48 px; на телефоне 28–32 px	Учитываем назначение страницы и действующий макет.
Заголовок раздела	28–34 px; на телефоне 24–28 px	Равные по роли разделы выглядят одинаково внутри страницы.
Подзаголовок	20–24 px	Он заметнее основного текста и слабее заголовка раздела.
Основной текст	16 px; интерлиньяж около 1,5–1,6	Проверяем реальный font-family, размер и читаемость.
Вводный текст или крупный шаг	18–22 px, если это отдельная роль	Не считаем каждый увеличенный абзац ошибкой.
Подпись и вспомогательная информация	14 px	Этот размер не заменяет обычные абзацы и ответы.
Текст действия	Обычно 16 px	Проверяем шрифт и ясность, не перестраивая кнопку.

Для нового контента ориентир начертания: 400 для текста и 700 для заголовков. В действующем макете сначала проверяем, что одинаковые роли используют согласованные начертания.

Образец одной семьи шрифтов с разными ролями

Оплата и доставка

Три способа доставки

Основной текст набран шрифтом Istok Web размером 16 px. Он объясняет условия, отвечает на вопрос или описывает следующий шаг.

Вспомогательная подпись · 14 px

Крупный заголовок — отдельная роль

У промостраницы и справочной страницы может быть разный масштаб. Существующие крупные заголовки не уменьшаем автоматически до 44 px и не перестраиваем вокруг них блоки.

Существующий пример	Что сохраняем	Что сравниваем
«Оплата и доставка»	Крупную обложку, перенос заголовка и расположение блока регистрации	Семью шрифта, начертание, аккуратность переноса и согласованность подзаголовков.
Страница заказа запчастей	Композицию заголовка, действие и последовательность шагов	Шрифт и роли текста, без изменения сценария.
FAQ и инструкции к замкам	Навигацию, вкладки, реальные схемы и содержимое	Семью шрифта, основной кегль и иерархию.
Главная и страница быстрых ссылок	Собственную композицию и назначение	Узнаваемость бренда и общий шрифт; отдельный макет сам по себе не ошибка.

Выход за ориентир размера — повод оценить роль текста и показать конкретный пример. Это не автоматическое несоответствие.

Общая целостность

Сайт сохраняет светлую основу, тёмный текст, нейтральные вспомогательные поверхности и существующие фотографии товаров. В одном типографическом проходе не вводим новую палитру или ещё одну семью шрифтов.

Светлая основа
#ffffff

Тёмный акцент
#171717

Вторичный текст
#505050

Вспомогательная поверхность
#f5f5f5

Это направление, а не приказ перекрасить существующие блоки в точные HEX. Небольшие различия нейтральных оттенков оцениваем в контексте. Цветные иконки сервисов, фотографии и схемы могут сохранять исходные цвета.

Одинаковая роль текста должна быть узнаваема на соседних страницах.
Ссылки, подзаголовки и пояснения не должны случайно выглядеть как главный заголовок.
Обычный текст остаётся читаемым; ориентир контраста 4,5:1, крупного текста — 3:1.
Длинную строку отмечаем как наблюдение. Ширину колонки без отдельной задачи не меняем.
Защищённые блоки сохраняют текущее оформление даже при отличиях от примеров справочника.

Как проверяем страницы

Текущий проход — только чтение. Результат — список конкретных наблюдений с адресом страницы и ролью текста.

Статус	Когда использовать
Несоответствие	Основной контент набран другой семьёй, обычный текст меньше 16 px, одинаковые роли оформлены случайно по-разному.
Осмысленный вариант	Большой промозаголовок, отдельная вводная строка, собственная композиция главной или визитки.
Наблюдение	Нужен контекст: необычный интервал, длина строки, семантический уровень заголовка.
Защищено / вне области	Блок преимуществ, шапка, подвал, виджеты и функциональные сценарии. В этот проход не меняем.

В отчёте показываем: страница → конкретный текст → фактический шрифт и размер → роль → оценка. Не превращаем список наблюдений в автоматическую массовую замену шаблонов.

Сначала обновляем этот справочник. Затем проверяем существующие страницы по нему. Изменения самих страниц выполняются отдельной задачей после просмотра конкретного результата.

Чек-лист проверки

Отметки помогают пройти текущую проверку и никуда не отправляются.

Зафиксированы Istok Web для основного текста и заголовков; основной текст 16 px.Блок преимуществ исключён из правок, его вид и содержимое сохраняются.Крупный заголовок оценивается по роли, а не сравнивается механически с 44 px.Проверка не меняет колонки, ширину, изображения, порядок секций и шаблоны.Для каждого замечания указаны страница, текст и фактические значения.Типографические несоответствия отделены от осмысленных вариантов и наблюдений.

Для авторов новых страниц

Используйте утверждённую типографику внутри конкретного контентного блока. Не подключайте общий новый шаблон ко всем страницам и не переносите целиком композицию справочника.

/* Пример только для согласованного контентного блока */
#page-content-example .page-copy {
  font-family: "Istok Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
#page-content-example .page-heading {
  font-family: "Istok Web", Arial, sans-serif;
  font-weight: 700;
}

Прежний сниппет версии 1.0 содержит старую рекомендацию Arial. Его массовое подключение не является способом привести страницы к этому справочнику. Общие ресурсы сайта в текущей задаче не меняются.

Открыть страницу доставки

Правила в машиночитаемом виде

{
  "version": "2.0.0",
  "date": "2026-11-05",
  "status": "user-confirmed fonts; typography audit only on existing pages",
  "reference": "https://rion-plus.ru/page/design-code",
  "approved": {
    "body": {
      "fontFamily": "Istok Web",
      "fontSize": 16
    },
    "headings": {
      "fontFamily": "Istok Web"
    }
  },
  "newContentGuidance": {
    "bodyLineHeight": 1.55,
    "headingWeight": 700,
    "bodyWeight": 400,
    "headingDesktop": [
      40,
      48
    ],
    "headingMobile": [
      28,
      32
    ],
    "sectionDesktop": [
      28,
      34
    ],
    "subheadingDesktop": [
      20,
      24
    ],
    "lead": [
      18,
      22
    ],
    "caption": 14
  },
  "existingPages": {
    "mode": "read-only typography and visual coherence audit",
    "preserve": [
      "composition",
      "content",
      "links",
      "images",
      "widgets",
      "templates",
      "payment parameters",
      "responsive layout"
    ],
    "displayHeadings": "preserve existing scale; larger type is not automatically a defect",
    "fontMismatch": "report when primary content is not Istok Web; do not fix automatically"
  },
  "protected": [
    {
      "page": "/page/delivery",
      "selector": "main .widget-type_system_widget_v4_benefits_5",
      "rule": "No changes to content, icons, typography, colors, spacing, order, grid or responsive behavior"
    },
    {
      "selector": "header, footer, [data-fixed-panels], .outside-widgets",
      "rule": "Outside content typography work; preserve store shell"
    }
  ],
  "legacy": {
    "sharedSnippetVersion": "1.0.0",
    "status": "not the approved typography source; do not mass apply"
  }
}

Редакция 2.0.0 · 05.11.2026. В этой редакции разделены утверждённые шрифты, рекомендации по ролям, защищённые блоки и границы проверки. Массовая миграция 1.1 отменена и не возобновляется.