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

Правила вёрстки для тех, кто делает новые экраны. Каждое правило появилось после конкретной ошибки — они здесь не для красоты.

1. Ширина текста

Самая частая ошибка в этом прототипе. Возникала не меньше пяти раз на разных экранах.

Как делать нельзя

Ставить max-width тексту, выровненному по левому краю. Получается узкая колонка, прижатая к левому краю широкой страницы. Ширина контента здесь 1400 пикселей — абзац на 200 знаков в такой колонке занимает треть строки и выглядит брошенным.

.my-block p {
  max-width: 720px;   /* ← колонка прижата влево */
}

Как надо

Текст по левому краю занимает всю ширину своего блока. Если строка получается слишком длинной для чтения — раскладывайте в колонки сеткой, а не обрезайте контейнер.

.my-block p {
  max-width: none;    /* во всю ширину блока */
}
.my-questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 46px;        /* две колонки вместо обрезки */
}

Единственное исключение

Ограничивать ширину можно у текста, выровненного по центру, и только вместе с margin: auto. Это подзаголовки разделов, сноски, юридические примечания — то, что читается как единый блок, а не как колонка.

.section-note {
  max-width: 820px;
  margin: 0 auto;      /* обязательно вместе */
  text-align: center;  /* и только по центру */
}

Что верстаем	Ширина	Почему
Абзацы, списки, таблицы	во всю ширину блока	Читаются слева направо, обрезка создаёт пустоту справа
Подзаголовок раздела по центру	760–820 px с margin auto	Одна фраза по центру на 1400 читается плохо
Юридическая сноска	820 px с margin auto	Мелкий шрифт на всю ширину не читается
Поле с адресом или коротким значением	по содержимому	Растягивать «mia@example.com» на 1400 бессмысленно
Длинная статья	760 px с margin auto	Единственный случай, где узкая колонка оправдана: сплошной текст на много экранов

2. Переменные

Жёстко заданные цвета в новых блоках не допускаются — при смене темы они останутся прежними.

--pact-public-max1400px — ширина контента публичных страниц

--inkОсновной текст и заголовки

--mutedПояснения, подписи

--hintСноски, служебные подписи

--accentЯнтарный акцент, ссылки, активное

--lineРамки и разделители

--cardФон карточек

--bg-softПриглушённый фон блоков

3. Прочие правила

Правило	Откуда взялось
Разделитель между блоками — сплошная линия с отступом, не пунктир	Пунктир в артефакте нигде больше не используется
Кикер капслоком делает CSS, а не текст в разметке	Иначе заголовок нельзя переиспользовать в другом месте
Новый блок вставляется в свою секцию, а не в первую попавшуюся	Блок уровней однажды попал внутрь hero и унаследовал его вёрстку
Счётчики пересчитываются из фактического числа элементов	После перестановки групп счётчики разъехались на 10 единиц
При добавлении экрана регистрировать в четырёх местах	Массив экранов, крошки, маршруты, набор публичных страниц