Дизайн-код публичного сайта СКН

Версия 1.0. Область действия — читательские страницы sakonews.ru. Админка имеет собственный документ: admin-design-code.md.

Хостинг: читательская версия, исходный Markdown.

Характер и границы

«Редакционная полоса»: выразительная чёрно-белая типографика, спокойные поверхности, тонкие разделители и тёплый медный акцент. Основа — существующий СКН: PT Sans, компактная шапка, редакционная сетка главной, мозаики разделов, двухколоночная новость, маскот и яркая мемная лента.

Общий слой — assets/css/public-design-system.css, подключённый после style.css. Все правила ограничены body.public-site; токены имеют префикс --pub-. Подключение админских CSS, компонентов и токенов на паблике не допускается. Геометрия игр и анимация маскота регулируются их собственными компонентами.

Сетка главной, три карточки мемов в ряду с отдельной первой карточкой, aspect ratio видео и работа галерей сохраняют свои специальные правила. Объединяются повторяющиеся роли: отступ страницы, заголовок, подпись, ссылка, поле, кнопка, карточка, панель и состояние.

Палитра и поверхности

• Основной фон/текст наследуются от текущей тёмной или светлой темы. В тёмной теме сохраняются чёрный фон и белый текст; в светлой — белый фон и тёмный текст.
• Тёплый акцент: действующие --link-color / --accent-rgb (тёмная тема #f1a24a, светлая #b5651d). Применяется к ссылкам, фокусу и выбору, а не к каждому контейнеру.
• Поверхность панели — --pub-surface, вложенного поля — --pub-field; рамка 1 px --pub-line. Текст второго уровня — --pub-muted, подписи — --pub-caption.
• У обычных карточек нет тяжёлых теней и постоянных градиентов. Тень --pub-shadow предназначена для меню, подсказок и диалогов.
• Красный используется для ошибки. Коралловый/жёлтый блок мемов и красные кнопки видеоплееров — сохранённые редакционные акценты своих форматов; они не распространяются на формы и поиск.

Типографика и ритм

Шрифт — локальный PT Sans. Все поля и кнопки наследуют его. Нельзя добавлять отдельный шрифт для нового раздела без новой роли в дизайн-коде.

Длинные заголовки переносятся естественно; обрезка допускается только в специально компактном превью. Основной текст новости не обрезается и ограничен мерой 65ch в своей колонке. Начертание основного текста — 400; авторские strong и b сохраняются. Между абзацами — 1em; списки имеют отступ, цитата — медную вертикальную линию. Длинные ссылки переносятся, таблицы прокручиваются внутри своей колонки.

Базовый шаг — 4 px. Канонические интервалы — 4, 8, 12, 16, 24, 32, 48 px. Поля, подписи и кнопки одной формы используют один ритм. При адаптации уменьшается общий gutter, а не случайные отступы отдельных карточек.

Контейнеры и карточки

• Общая внешняя ширина шапки, главной, новостей, листингов и футера — 1440 px с внутренним gutter 24 px (16 px до 760 px, 12 px до 400 px).
• Каталоги, мемы, поиск и тематические страницы — 1280 px с тем же gutter. Предложка — 920 px, информационная страница — 800 px, форма подписки — 620 px.
• Внешний радиус обычной карточки — 8 px, поля/кнопки — 5 px, диалога — 12 px. Мемный хиро сохраняет свой формат и цвет.
• Карточка раздела, справочника, связанного материала использует одинаковую рамку и состояние hover. Поверхность не приподнимается и не меняет размеры при наведении.
• Существующие разные композиции главной остаются композициями: общий дизайн-код не превращает их в одинаковые прямоугольники с рамками.
• Превью сохраняет заданное соотношение сторон; визуальные карточки используют cover, полноразмерный просмотр и изображение мема — contain. Пользовательский контент не обрезается ради внешнего единообразия.

Контролы

• Поле и кнопка формы — минимум 44 px. Однострочные поля имеют одинаковые padding и радиус; textarea сохраняет изменение высоты и минимум 140 px.
• Подпись — обычный регистр, 13 px; инструкции располагаются под полем. Placeholder не заменяет подпись.
• Основная кнопка — светлый/тёмный контрастный фон в зависимости от темы. Вторичная — прозрачная с рамкой. В группе одинаковая высота, кроме явно обозначенного компактного управления.
• Компактная иконка шапки, «Поделиться» и пагинация — 40 px. У иконки без подписи обязательны aria-label и понятная подсказка.
• Select сохраняет нативное управление клавиатурой и проверку формы, но использует общую поверхность, типографику и контурную стрелку. Нельзя заменять его недоступным div-меню.
• Сохраняются name, value, form, required, disabled и существующие JS-обработчики. Скрипты форм и публикации не зависят от цвета/радиуса компонента.

Состояния и слои

• Ссылка в тексте подчёркнута приглушённой линией; hover делает линию и цвет выразительнее. Заголовки и навигация получают подчёркивание при наведении; выбранный раздел подчёркнут постоянно.
• Hover карточки меняет рамку/тон поверхности. Размер, отступы и соседние элементы не двигаются.
• Focus-visible — 2 px медный контур с отступом 3 px. Поле дополнительно получает мягкое кольцо. Outline не скрывается без равноценной замены.
• Active кнопки — смещение вниз на 1 px. Disabled — приглушение, обычный курсор, без hover/active эффекта.
• Выбранная вкладка/страница — медный тон и видимая линия или поверхность; состояние не обозначается одним цветом.
• Меню и подсказки — общая поверхность, рамка и тень. Поиск — фиксированный диалог с затемнённым backdrop; медиалайтбокс сохраняет чёрную сцену и собственную геометрию плеера.
• Переходы — 160–180 ms. prefers-reduced-motion отключает декоративное движение контролов и превью. Маскот и игры используют свои существующие правила доступности.

Адаптивность и развитие

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

Новое правило сначала добавляется в этот документ и общий CSS, затем применяется к разделам. Вместо нового локального размера используется ближайшая существующая роль. Исключение оформляется семантическим классом с объяснением, а не inline-стилем. Исторические !important в новом слое допускаются только как адаптер к уже имеющимся фиксированным размерам в style.css; новые компоненты их не вводят.

Доступ разработчикам

Канонические Markdown-документы хранятся в docs/ проекта и развёртываются на том же хостинге. Читательская копия доступна через страницу «Дизайн-коды» в документации проекта; туда входят отдельные документы для админки, публичной части и набора админских иконок. При изменении компонента код и его правила обновляются в одном развёртывании.