Cf 98 · сборка письма

Обёртка письма: размеры, токены, деградации

Значения ниже — ровно те, что стоят в артбордах слева. Разметка табличная, каждое видимое свойство продублировано инлайн на самом элементе, картинок и внешних шрифтов нет ни одного.

Размеры
полотно
Письмо 600px, поля страницы 24×16. На телефоне те же блоки при полях 12×8 и карточке во всю ширину.
карточка
Заливка surface, рамка 1px border-strong, радиус 8px. Рамка, а не тень, отделяет карточку от канвы.
шапка
Отступ 20×24, знак 24px и имя 16px/600/−0.01em с промежутком 12px — замок навигации из системы, без изменений. Снизу разделитель 1px border.
заголовок
26px / 650 / −0.02em / 32px, цвет ink. На телефоне 22 / 28.
тело
16px / 400 / 25px, цвет ink. Между смысловыми блоками 16–32px.
кнопка
Заливка accent, радиус 8px, поля 13×28, подпись 16px/600 цветом accent-ink. Высота 46px — выше порога касания 44px. На телефоне во всю ширину.
запасная ссылка
Под каждой кнопкой — тот же URL текстом, моноширинный 13px, word-break: break-all. Клиент, вырезавший кнопку, оставляет рабочий адрес.
блок значения
Адрес, имя, идентификатор — на surface-subtle в рамке border, моноширинный 14px/21, с переносом. Длинное значение переносится внутри 600px, а не растягивает письмо.
подвал
Разделитель 1px, имя отправителя моноширинным 12px/600 в верхнем регистре, ниже строка про настройки уведомлений 13px цветом ink-muted. Один и тот же подвал во всех письмах.
Плашки состояния — цвет, слово и знак вместе
✓  ОПУБЛИКОВАНО
!  ТРЕБУЕТ ВНИМАНИЯ
×  ОШИБКА

Знак — обычный текстовый символ, не картинка и не SVG: при отключённых изображениях плашка читается целиком. Контраст текста к своей подложке: 5,90 · 6,87 · 5,08 в тёмной теме и 5,04 · 5,93 · 6,59 в светлой — пары взяты из реестра системы, новых не заведено.

Чего Outlook не покажет
Радиус 8px на таблицах — углы останутся прямыми. Это ожидаемая деградация, форма от неё не разваливается.
Переноса длинных ссылок по символам может не быть: word-break движок Word не понимает. При сборке ссылку резать вручную или держать её короткой.
Свойств, на которых держалась старая обёртка, здесь нет вовсе: ни flex, ни градиента, ни backdrop-filter, ни position, ни теней.
Что придётся поправить в коде
Каталог строк сегодня зашивает ссылку внутрь предложения — «Нажмите здесь, чтобы…». Кнопке нужен отдельный адрес: текст без ссылки, подпись кнопки и URL тремя значениями, иначе кнопки не будет.
Приглашение в команду и решение по заявке агентства идут мимо каталога и захардкожены по-английски. Обёртка их примет, но текст останется английским, пока это не переведут.
Письмо агентства несёт собственный <html><head> внутри общей обёртки — документ внутри документа. При переносе эта обвязка снимается.