# Дизайн-система Mozilla Protocol ## Mozilla Protocol Предпросмотр интерфейса дизайн-системы Сравните плотность текста, раскройте пояснения и проверьте состояния неверно и верно введённого адреса электронной почты — подписка не создаётся. ## Mozilla Protocol Справочник дизайн-системы Опубликованный JSON токенов Mozilla Protocol 22.0.0 и нативный CSS. Названия с префиксом доллара — это токены Sass. В оригинальном примере используется типографическая тема Mozilla; элементы управления плотностью текста и круговая иллюстрация — решения приложения. ### Наборы шрифтов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $font-stack-base | Inter, X-LocaleSpecific, sans-serif | Явно выбирайте фирменный набор Mozilla или Firefox; не используйте шрифт для заголовков в длинном основном тексте. | | $font-stack-firefox | Metropolis, X-LocaleSpecific, sans-serif | Явно выбирайте фирменный набор Mozilla или Firefox; не используйте шрифт для заголовков в длинном основном тексте. | | $font-stack-mozilla-headline | 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Явно выбирайте фирменный набор Mozilla или Firefox; не используйте шрифт для заголовков в длинном основном тексте. | | $font-stack-mozilla-text | 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Явно выбирайте фирменный набор Mozilla или Firefox; не используйте шрифт для заголовков в длинном основном тексте. | | $font-stack-mono | Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace | Явно выбирайте фирменный набор Mozilla или Firefox; не используйте шрифт для заголовков в длинном основном тексте. | ### Интервалы компонентов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $spacing-xs | 4px | Интервалы внутри компонента или между тесно связанными элементами. | | $spacing-sm | 8px | Интервалы внутри компонента или между тесно связанными элементами. | | $spacing-md | 16px | Интервалы внутри компонента или между тесно связанными элементами. | | $spacing-lg | 24px | Интервалы внутри компонента или между тесно связанными элементами. | | $spacing-xl | 32px | Интервалы внутри компонента или между тесно связанными элементами. | | $spacing-2xl | 48px | Интервалы внутри компонента или между тесно связанными элементами. | ### Ритм крупной компоновки | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $layout-2xs | 16px | Используйте более крупные интервалы между редакционными разделами; они отличаются от интервалов компонентов. | | $layout-xs | 24px | Используйте более крупные интервалы между редакционными разделами; они отличаются от интервалов компонентов. | | $layout-sm | 32px | Используйте более крупные интервалы между редакционными разделами; они отличаются от интервалов компонентов. | | $layout-md | 48px | Используйте более крупные интервалы между редакционными разделами; они отличаются от интервалов компонентов. | | $layout-lg | 64px | Используйте более крупные интервалы между редакционными разделами; они отличаются от интервалов компонентов. | | $layout-xl | 96px | Используйте более крупные интервалы между редакционными разделами; они отличаются от интервалов компонентов. | | $layout-2xl | 192px | Используйте более крупные интервалы между редакционными разделами; они отличаются от интервалов компонентов. | ### Ширина содержимого | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $content-xs | 304px | Выбирайте максимальную ширину по фактическому содержимому, а не растягивайте каждый текстовый блок до самого большого контейнера. | | $content-sm | 432px | Выбирайте максимальную ширину по фактическому содержимому, а не растягивайте каждый текстовый блок до самого большого контейнера. | | $content-md | 688px | Выбирайте максимальную ширину по фактическому содержимому, а не растягивайте каждый текстовый блок до самого большого контейнера. | | $content-lg | 928px | Выбирайте максимальную ширину по фактическому содержимому, а не растягивайте каждый текстовый блок до самого большого контейнера. | | $content-xl | 1152px | Выбирайте максимальную ширину по фактическому содержимому, а не растягивайте каждый текстовый блок до самого большого контейнера. | | $content-max | 1440px | Выбирайте максимальную ширину по фактическому содержимому, а не растягивайте каждый текстовый блок до самого большого контейнера. | ### Контрольные точки экранов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $screen-xs | 320px | Опубликованные значения ширины области просмотра. Миксины отдельных компонентов могут адаптироваться на выбранных контрольных точках. | | $screen-sm | 480px | Опубликованные значения ширины области просмотра. Миксины отдельных компонентов могут адаптироваться на выбранных контрольных точках. | | $screen-md | 768px | Опубликованные значения ширины области просмотра. Миксины отдельных компонентов могут адаптироваться на выбранных контрольных точках. | | $screen-lg | 1024px | Опубликованные значения ширины области просмотра. Миксины отдельных компонентов могут адаптироваться на выбранных контрольных точках. | | $screen-xl | 1312px | Опубликованные значения ширины области просмотра. Миксины отдельных компонентов могут адаптироваться на выбранных контрольных точках. | ### Радиус углов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $border-radius-xs | 2px | Выбирайте радиус в соответствии с компонентом; авторскую иллюстрацию следует отделять от формы элементов интерфейса. | | $border-radius-sm | 4px | Выбирайте радиус в соответствии с компонентом; авторскую иллюстрацию следует отделять от формы элементов интерфейса. | | $border-radius-md | 8px | Выбирайте радиус в соответствии с компонентом; авторскую иллюстрацию следует отделять от формы элементов интерфейса. | | $border-radius-lg | 16px | Выбирайте радиус в соответствии с компонентом; авторскую иллюстрацию следует отделять от формы элементов интерфейса. | ### Типографические утилиты и выбор темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $brand-theme: mozilla | Mozilla Headline + Mozilla Text | Редакционное содержимое в теме Mozilla; в предпросмотре загружаются шрифты из официального пакета. | | $brand-theme: firefox | Metropolis + Inter | Типографика в теме Firefox — отдельный выбор фирменного стиля. | | mzp-u-title-lg | Responsive title utility | Используйте для основного редакционного заголовка; не выводите семантический уровень заголовка из его визуального размера. | | mzp-u-title-xs | Small title utility | В двух вспомогательных разделах этот класс применяется к семантическим элементам h2. | | mzp-u-title-2xs | Compact title utility | В короткой статье этот класс применяется к элементу h3. | | Comfortable / Compact sample | 16px / 1.6 and 14px / 1.4 | Оригинальная настройка предпочтительной плотности текста, а не одна из двух официальных тем Protocol. | ## Полное руководство по дизайн-системе Mozilla Protocol Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Редакционная компоновка дизайн-системы Mozilla Protocol ### Начните с удобной для чтения редакционной иерархии > Protocol подходит для редакционных и маркетинговых страниц, а также для интерфейсов. Образец начинается с крупного заголовка и оригинальной круглой иллюстрации, а затем переходит к анонсу статьи и форме подписки на дайджест. Такая композиция сначала даёт сообщению пространство, а уже потом предлагает читателю взаимодействовать с элементами управления. Это не плотная административная панель. ### Отделяйте тему бренда от идеи приложения В примере используются mzp-t-mozilla и стандартная типографика Protocol. Статья, иллюстрация и настройка плотности текста — оригинальный контент приложения. Ни стандартные имена классов, ни файлы шрифтов не превращают его в официальный сервис Mozilla. Область применения указана в нижнем колонтитуле, а действие с дайджестом лишь показывает пример подтверждения. ## Mozilla Protocol Шрифты и утилиты заголовков дизайн-системы ### Выберите типографическую пару для бренда Protocol 22 предоставляет гарнитуры Mozilla Headline и Mozilla Text для Mozilla, а также Metropolis и Inter для Firefox. В примере загружаются шрифты из пакета. Разделяйте роли заголовков и основного текста: если использовать акцидентный шрифт в каждом абзаце, исчезнет контраст, благодаря которому редакционная иерархия работает. ### Не связывайте семантику заголовков с их визуальным размером Для главного заголовка используется h1 с mzp-u-title-lg. Заголовки разделов оформлены как h2 с mzp-u-title-xs, а заголовок статьи — как h3 с mzp-u-title-2xs. Адаптивные утилиты могут менять визуальный размер, не нарушая структуру заголовков. Настройка плотности текста меняет только пример абзацев, но не масштабирует всю страницу и элементы управления. - h1 обозначает заголовок страницы. - h2 разделяет превью статьи и форму. - h3 обозначает заголовок отрывка статьи. ## Mozilla Protocol Цвет и иллюстрация в дизайн-системе ### Используйте иллюстрацию как редакционный контент Круговой градиент — оригинальная иллюстрация CSS с кратким описанием для средств доступности. Переход от тёплого оттенка к фиолетовому не представлен как новый официальный логотип Mozilla или токен Protocol. Остальная часть страницы оформлена сдержанными нейтральными фоновыми слоями, чтобы иллюстрация и основное действие сохраняли заметную роль. ### Задайте отдельное значение состоянию формы Локальная ошибка ввода адреса электронной почты сопровождается пояснением и заметной рамкой поля в состоянии ошибки. Успешный результат отображается в отдельном блоке подтверждения, где указан введённый пример адреса и поясняется, что письмо не отправлялось. Яркий первый экран не должен отвлекать от ошибки или создавать сомнения в том, была ли форма успешно отправлена. ## Mozilla Protocol Шкалы компонентов и макета в дизайн-системе ### Продуманно используйте обе шкалы отступов Опубликованные шаги отступов для компонентов: 4, 8, 16, 24, 32 и 48px. Отдельная шкала макета дополняет их значениями 64, 96 и 192px. Используйте меньшую шкалу внутри форм и карточек, а более крупный ритм — между редакционными разделами. Если увеличить каждый небольшой промежуток до значения из шкалы макета, связь между подписью и полем ослабнет. ### Ограничьте длину строки, прежде чем добавлять столбцы В Protocol предусмотрена ширина контента от 304px до максимума 1440px. В примере используется редакционный контейнер шириной 1152px с двумя столбцами, если позволяет пространство. Ниже заданной для приложения точки адаптации статья и форма располагаются друг под другом. Для заголовка, статьи и формы сохраняется удобная ширина строки, чтобы она не становилась чрезмерно длинной. ## Mozilla Protocol Кнопки, раскрывающийся блок и форма в дизайн-системе ### Сохраните настоящую структуру формы В примере с дайджестом используется стандартная форма с видимой подписью, полем электронной почты, пояснением, текстом ошибки и кнопкой отправки. Protocol оформляет компоненты, а приложение проверяет данные и показывает локальный результат. Для действия на первом экране используется ссылка, поскольку она ведёт к разделу этой же страницы; для отправки формы — кнопка. ### Для дополнительного пояснения используйте простой раскрывающийся блок Блок «Что меняется» — это стандартная пара details/summary. В нём поясняется, как заданы пользовательские значения плотности текста «комфортная» и «компактная», без прерывания чтения статьи. Это не имитация вкладки навигации и не скрытое обязательное условие: формой и настройками плотности можно пользоваться независимо от того, раскрыт блок или нет. ## Mozilla Protocol Состояния чтения и валидации в дизайн-системе ### Меняйте настройки чтения по одной Две кнопки плотности текста объединены в подписанную группу и используют атрибут aria-pressed. Переключение на компактный режим меняет размер шрифта, высоту строки и нижний отступ только у абзацев статьи. Текст, заголовок и поле формы остаются на месте. В примере эта настройка намеренно отделена от переключения тем брендов Mozilla и Firefox. ### Сделайте восстановление после ошибки формы предсказуемым При вводе неверного адреса появляется ошибка, а фокус перемещается на поле. При редактировании устаревшая ошибка исчезает, а предыдущее подтверждение скрывается. Если адрес корректен, отображается результат, созданный локально, и фокус перемещается на него. Кнопка «Указать другой адрес» очищает форму, снимает состояние ошибки и возвращает фокус в поле; асинхронная подписка не выполняется. 1. Отправьте пустой или некорректный адрес и прочитайте сообщение об ошибке поля. 2. Введите пример адреса и посмотрите на локальное подтверждение. 3. Нажмите «Указать другой адрес», чтобы сбросить форму и вернуть фокус в поле. ## Mozilla Protocol Доступные элементы управления редакционной страницы в дизайн-системе ### Задайте разные роли иллюстрации и элементам управления Для иллюстрации используется элемент с ролью изображения и кратким альтернативным текстом. Кнопки плотности, раскрывающийся блок и кнопка отправки — настоящие элементы управления. Поле электронной почты ссылается и на пояснение, и на сообщение об ошибке через aria-describedby. Видимая обводка фокуса дополняет стандартное оформление и помогает пользоваться страницей с клавиатуры. ### Сохраните осмысленный порядок при переходе к одноколоночному макету В документе сначала идут заголовок, превью статьи, пояснение и форма. На мобильных устройствах порядок остаётся таким же: CSS не переносит форму перед контекстом. Иллюстрация размером 180px для мобильных устройств служит редакционным дополнением, а не препятствием фиксированной ширины, из-за которого страница прокручивается по горизонтали. ## Mozilla Protocol Интеграция с дизайн-системой CSS ### Подключите поставляемые ресурсы к примеру В предоставленной точке входа импортируются скомпилированная тема, protocol.css и protocol-components.css, а затем таблица стилей приложения. Для Protocol 22 необходимо задать пользовательские свойства темы на :root: одного класса бренда из предыдущей версии недостаточно для корректной типографики. Скомпилируйте protocol-theme.scss перед запуском Vite. Сборщик, поддерживающий модули, обработает URL шрифтов и изображений. Блоки HTML, JavaScript и CSS ниже содержат весь исходный код примера; скрытой серверной части рассылки или специфического для пакета провайдера состояния нет. ### Дополняйте форму только при наличии реального сервиса подписки Для рабочей версии замените локальный результат проверенным запросом и определите обработку согласия, ожидания, повторной подписки и ошибки сервера с учётом особенностей своего сервиса. Отделяйте оформление Protocol от этих требований приложения. Не называйте локальное подтверждение успешной подпиской только потому, что адрес соответствует синтаксису. ## Mozilla Protocol Примеры компонентов дизайн-системы ### index.html — готовая редакционная страница Семантическая статья, настройки плотности текста, раскрывающийся блок и локальная форма дайджеста с оригинальной иллюстрацией CSS. ``` Reading specimen
MOZILLA PROTOCOL · EDITORIAL SPECIMENOriginal example by OpenDesign

A little more room to read.

Make space for useful ideas, quieter pages, and a reading rhythm that feels like yours.

Explore the reading preview

Choose your reading rhythm

Compare two application-defined densities using the same short article.

The open page

A useful page gives an idea enough room to breathe. Its headings show the path, its paragraphs keep a readable measure, and its controls remain easy to find.

Changing density should preserve the story. This preview adjusts paragraph size and spacing without replacing the article or changing your place in the task.

What changes in this example?

Comfortable uses 16px text with 1.6 line height. Compact uses 14px with 1.4. These are example reading preferences, not separate official Protocol themes.

``` Справочник по коду - Сохраните файл как index.html в корне проекта. Следующие два блока — src/main.js и src/protocol.css. ### main.js — стандартные ресурсы и локальная логика Импортирует официальные стили и реализует настройку плотности, проверку, управление фокусом и сброс без отправки данных. ``` import "./protocol-theme.css"; import "@mozilla-protocol/core/protocol/css/protocol.css"; import "@mozilla-protocol/core/protocol/css/protocol-components.css"; import "./protocol.css"; const form = document.querySelector("#reading-form"), error = document.querySelector("#email-error"), input = document.querySelector("#email"), result = document.querySelector("#confirmation"); form.addEventListener("submit", (event) => { event.preventDefault(); const value = input.value.trim(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { error.hidden = false; input.setAttribute("aria-invalid", "true"); input.focus(); return; } error.hidden = true; input.removeAttribute("aria-invalid"); result.hidden = false; result.querySelector("strong").textContent = value; result.focus(); }); input.addEventListener("input", () => { error.hidden = true; input.removeAttribute("aria-invalid"); result.hidden = true; }); document.querySelector("#reset").addEventListener("click", () => { form.reset(); result.hidden = true; error.hidden = true; input.removeAttribute("aria-invalid"); input.focus(); }); document.querySelectorAll("[data-density]").forEach((button) => button.addEventListener("click", () => { document .querySelectorAll("[data-density]") .forEach((b) => b.setAttribute("aria-pressed", String(b === button))); document .querySelector("#article-sample") .classList.toggle("compact", button.dataset.density === "compact"); }), ); ``` Справочник по коду - Это поведение приложения JavaScript, а не сервис рассылки Protocol. ### protocol.css — оригинальная композиция Адаптивная компоновка страницы, настройки чтения и оригинальная круглая иллюстрация. ``` [hidden] { display: none !important; } body { margin: 0; } .reading-example { background: #fff; color: #000; } .reading-top { padding: 24px; border-bottom: 1px solid #cdcdd4; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; } .reading-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(200px, 0.7fr); gap: 48px; align-items: center; padding: 48px; max-width: 1152px; margin: auto; } .reading-hero h1 { max-width: 680px; } .reading-hero p { max-width: 580px; } .orb { aspect-ratio: 1; background: radial-gradient( circle at 33% 32%, #ffea80 0 10%, #ff8a50 30%, #ff298a 55%, #7542e5 82% ); border-radius: 50%; position: relative; box-shadow: 16px 24px 0 #f0f0f4; } .orb:after { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: white; } .reading-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: 48px; max-width: 1152px; margin: auto; padding: 0 48px 48px; } .density-options { display: flex; gap: 8px; margin: 16px 0; } .density-options button { font-size: 12px; padding: 8px 12px; } .density-options button[aria-pressed="true"] { box-shadow: 0 0 0 2px #0060df; } #article-sample { padding: 24px; border: 1px solid #cdcdd4; border-radius: 8px; background: #f9f9fb; } #article-sample p { font-size: 16px; line-height: 1.6; margin: 0 0 16px; } #article-sample.compact p { font-size: 14px; line-height: 1.4; margin-bottom: 8px; } .signup { padding: 24px; background: #e7dfff; border-radius: 8px; } .signup input { width: 100%; margin-bottom: 8px; } .signup label { display: block; font-weight: 700; margin-bottom: 8px; } .signup .note { font-size: 12px; line-height: 1.5; } .signup .error { color: #a4000f; font-size: 14px; font-weight: 700; } .signup input[aria-invalid="true"] { border-color: #a4000f; box-shadow: 0 0 0 2px #a4000f; } .signup .mzp-c-button { width: 100%; margin: 8px 0; } #confirmation { padding: 16px; background: #e3fff3; margin-top: 16px; border-left: 4px solid #008a46; overflow-wrap: anywhere; } .reading-footer { padding: 24px; border-top: 1px solid #cdcdd4; font-size: 12px; } .reading-example details { margin-top: 24px; } .reading-example summary { cursor: pointer; font-weight: 700; } .reading-example details p { font-size: 14px; margin-top: 12px; } button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #0060df; outline-offset: 4px; } @media (max-width: 760px) { .reading-hero { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; } .orb { width: 180px; justify-self: center; box-shadow: 8px 12px 0 #f0f0f4; } .reading-main { grid-template-columns: 1fr; padding: 0 24px 32px; gap: 32px; } .reading-top { flex-wrap: wrap; } .reading-hero h1 { font-size: 36px; } .density-options { flex-wrap: wrap; } } ``` Справочник по коду - Настройки плотности и компоновки приложения отделены от опубликованных токенов Sass. ### protocol-theme.scss — обязательная корневая тема Mozilla Скомпилируйте этот файл в src/protocol-theme.css перед запуском приложения. ``` @use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla'); @use '@mozilla-protocol/core/protocol/css/includes/themes'; ``` Справочник по коду - В конфигурации Sass выбирается бренд; переключение классов во время работы не используется. ## Mozilla Protocol Настройка AI-агента для дизайн-системы ### Отправная точка для реализации Стандартные ресурсы из CSS/fonts и оригинальный скрипт включены в локальный пример. Используйте версию Node.js, поддерживаемую вашей версией Vite. Если вы распространяете сборку, сохраните лицензию пакета и атрибуцию ресурсов. ``` npm create vite@latest protocol-reading -- --template vanilla cd protocol-reading npm install npm install @mozilla-protocol/core@22.0.0 npm install --save-dev sass npx sass --load-path=node_modules src/protocol-theme.scss src/protocol-theme.css # Replace index.html; add src/main.js and src/protocol.css from the full examples. npm run dev ``` ### Запрос для вашего проекта ``` Создайте редакционную страницу с Mozilla Protocol 22.0.0. Сверьтесь с фактическими значениями шрифтов, отступов и ширины контейнера. Возьмите за основу предоставленную композицию HTML/CSS/JS целиком, сохраните семантические заголовки и видимые подписи полей, а оригинальную иллюстрацию и настройки плотности текста отличайте от официальных токенов. Не вводите пользователей в заблуждение насчёт локальной проверки; подключайте настоящий сервис подписки только после того, как определены его требования к сервису и согласию. ``` ## Mozilla Protocol Источники и область применения дизайн-системы Руководство по приложению OpenDesign для Mozilla Protocol 22.0.0. В примере используются опубликованная CSS и включённые в комплект шрифты, а текст, иллюстрация и локальная логика формы оригинальные. Это не продукт Mozilla, не рассылка и не сервис подписки; права на бренды и ресурсы принадлежат их владельцам. - Типографика Protocol Типографические пары брендов и утилиты заголовков. - Экспорт опубликованных токенов Отступы, компоновка, ширина контента и наборы шрифтов. - Использование Protocol CSS Интеграция таблиц стилей. - Исходный код Protocol Реализация, ресурсы и лицензирование по MPL. ## Mozilla Protocol Связанные материалы по дизайн-системе ### Nord дизайн-система Изучите токены темы Therapy в Nord и контракты веб-компонентов на примере черновика запроса на бронирование комнаты: реальные цветовые роли, адаптивные размеры полей, явная проверка данных и локально подготовленные результаты. ### Oracle Redwood Изучите реальную палитру, семантические роли, отступы и границы плотности Oracle JET 19 Redwood на примере полноценного оригинального редактируемого листа проверки запасов. ### Orange OUDS Web Изучите реальные семантические токены Orange OUDS 1.4, пакеты тем и встроенное поведение Offcanvas на примере полноценного адаптивного сравнительного обзора. - [Справочник по реализации](https://protocol.mozilla.org/docs/usage/framework) - [Источник](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Источник](https://protocol.mozilla.org/docs/fundamentals/typography) - [Справочник по коду](https://protocol.mozilla.org/components/detail/example-form) - [Справочник по коду](https://protocol.mozilla.org/docs/usage/framework) - [Справочник по коду](https://protocol.mozilla.org/docs/fundamentals/design-tokens) - [Типографика Protocol Типографические пары брендов и утилиты заголовков.](https://protocol.mozilla.org/docs/fundamentals/typography) - [Экспорт опубликованных токенов Отступы, компоновка, ширина контента и наборы шрифтов.](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Использование Protocol CSS Интеграция таблиц стилей.](https://protocol.mozilla.org/docs/usage/framework) - [Исходный код Protocol Реализация, ресурсы и лицензирование по MPL.](https://github.com/mozilla/protocol)