# Sistema de design Mozilla Protocol ## Mozilla Protocol Prévia da interface do sistema de design Compare a densidade de leitura, expanda os detalhes explicativos e teste estados de e-mail válido e inválido sem criar uma assinatura. ## Mozilla Protocol Referência de design do sistema de design JSON de tokens publicado do Mozilla Protocol 22.0.0 e CSS nativo. Os nomes iniciados por cifrão são tokens Sass. O exemplo original usa o tema tipográfico Mozilla; os controles de densidade e a ilustração circular são escolhas da aplicação. ### Conjuntos de fontes | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $font-stack-base | Inter, X-LocaleSpecific, sans-serif | Escolha explicitamente o conjunto de fontes da marca Mozilla ou Firefox; não use uma fonte de títulos em textos longos. | | $font-stack-firefox | Metropolis, X-LocaleSpecific, sans-serif | Escolha explicitamente o conjunto de fontes da marca Mozilla ou Firefox; não use uma fonte de títulos em textos longos. | | $font-stack-mozilla-headline | 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Escolha explicitamente o conjunto de fontes da marca Mozilla ou Firefox; não use uma fonte de títulos em textos longos. | | $font-stack-mozilla-text | 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Escolha explicitamente o conjunto de fontes da marca Mozilla ou Firefox; não use uma fonte de títulos em textos longos. | | $font-stack-mono | Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace | Escolha explicitamente o conjunto de fontes da marca Mozilla ou Firefox; não use uma fonte de títulos em textos longos. | ### Espaçamento dos componentes | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $spacing-xs | 4px | Espaçamento dentro de um componente ou entre elementos estreitamente relacionados. | | $spacing-sm | 8px | Espaçamento dentro de um componente ou entre elementos estreitamente relacionados. | | $spacing-md | 16px | Espaçamento dentro de um componente ou entre elementos estreitamente relacionados. | | $spacing-lg | 24px | Espaçamento dentro de um componente ou entre elementos estreitamente relacionados. | | $spacing-xl | 32px | Espaçamento dentro de um componente ou entre elementos estreitamente relacionados. | | $spacing-2xl | 48px | Espaçamento dentro de um componente ou entre elementos estreitamente relacionados. | ### Ritmo de layout em grande escala | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $layout-2xs | 16px | Use separações maiores entre seções editoriais; elas são diferentes do espaçamento entre componentes. | | $layout-xs | 24px | Use separações maiores entre seções editoriais; elas são diferentes do espaçamento entre componentes. | | $layout-sm | 32px | Use separações maiores entre seções editoriais; elas são diferentes do espaçamento entre componentes. | | $layout-md | 48px | Use separações maiores entre seções editoriais; elas são diferentes do espaçamento entre componentes. | | $layout-lg | 64px | Use separações maiores entre seções editoriais; elas são diferentes do espaçamento entre componentes. | | $layout-xl | 96px | Use separações maiores entre seções editoriais; elas são diferentes do espaçamento entre componentes. | | $layout-2xl | 192px | Use separações maiores entre seções editoriais; elas são diferentes do espaçamento entre componentes. | ### Larguras de conteúdo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $content-xs | 304px | Escolha uma largura máxima legível para o conteúdo real, em vez de esticar cada bloco de texto até o maior contêiner. | | $content-sm | 432px | Escolha uma largura máxima legível para o conteúdo real, em vez de esticar cada bloco de texto até o maior contêiner. | | $content-md | 688px | Escolha uma largura máxima legível para o conteúdo real, em vez de esticar cada bloco de texto até o maior contêiner. | | $content-lg | 928px | Escolha uma largura máxima legível para o conteúdo real, em vez de esticar cada bloco de texto até o maior contêiner. | | $content-xl | 1152px | Escolha uma largura máxima legível para o conteúdo real, em vez de esticar cada bloco de texto até o maior contêiner. | | $content-max | 1440px | Escolha uma largura máxima legível para o conteúdo real, em vez de esticar cada bloco de texto até o maior contêiner. | ### Pontos de interrupção da tela | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $screen-xs | 320px | Etapas de viewport publicadas. Mixins de componentes individuais podem se adaptar em etapas selecionadas. | | $screen-sm | 480px | Etapas de viewport publicadas. Mixins de componentes individuais podem se adaptar em etapas selecionadas. | | $screen-md | 768px | Etapas de viewport publicadas. Mixins de componentes individuais podem se adaptar em etapas selecionadas. | | $screen-lg | 1024px | Etapas de viewport publicadas. Mixins de componentes individuais podem se adaptar em etapas selecionadas. | | $screen-xl | 1312px | Etapas de viewport publicadas. Mixins de componentes individuais podem se adaptar em etapas selecionadas. | ### Raio dos cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $border-radius-xs | 2px | Use o raio adequado ao componente; mantenha a ilustração criada separada das formas da interface. | | $border-radius-sm | 4px | Use o raio adequado ao componente; mantenha a ilustração criada separada das formas da interface. | | $border-radius-md | 8px | Use o raio adequado ao componente; mantenha a ilustração criada separada das formas da interface. | | $border-radius-lg | 16px | Use o raio adequado ao componente; mantenha a ilustração criada separada das formas da interface. | ### Utilitários tipográficos e seleção de tema | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $brand-theme: mozilla | Mozilla Headline + Mozilla Text | Conteúdo editorial com tema Mozilla; a prévia carrega fontes do pacote oficial. | | $brand-theme: firefox | Metropolis + Inter | A tipografia com tema Firefox é uma escolha de marca separada. | | mzp-u-title-lg | Responsive title utility | Use no título editorial principal; não deduza a semântica do título a partir do tamanho visual. | | mzp-u-title-xs | Small title utility | As duas seções de apoio usam esta classe em elementos h2 semânticos. | | mzp-u-title-2xs | Compact title utility | O artigo curto usa esta classe em seu h3. | | Comfortable / Compact sample | 16px / 1.6 and 14px / 1.4 | Preferência de leitura original, não dois temas oficiais do Protocol. | ## Mozilla Protocol Guia completo do sistema de design Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Mozilla Protocol Composição editorial do sistema de design ### Comece com uma hierarquia editorial legível > O Protocol atende a interfaces editoriais e de marketing, além de oferecer suporte à interface do usuário. O exemplo começa com um título amplo e uma ilustração circular original, depois passa a uma prévia de artigo e a um formulário de boletim informativo. Essa composição dá espaço à mensagem antes de pedir que o leitor interaja com os controles. É diferente de um painel administrativo denso. ### Separe o tema da marca da ideia da aplicação O exemplo usa mzp-t-mozilla e a tipografia nativa do Protocol. O artigo, a ilustração e a preferência de densidade são conteúdo original da aplicação. Nem os nomes de classes nativos nem os arquivos de fonte fazem deste um serviço oficial da Mozilla. O rodapé esclarece o escopo, e a ação do boletim apenas exibe uma confirmação. ## Mozilla Protocol Fontes e utilitários de título do sistema de design ### Escolha o par tipográfico específico da marca O Protocol 22 exporta os conjuntos Mozilla Headline e Mozilla Text para a Mozilla, e Metropolis com Inter para o Firefox. O exemplo carrega as fontes fornecidas pelo pacote. Mantenha separados os papéis de título e de corpo: usar uma fonte de exibição em todos os parágrafos elimina o contraste que torna útil a hierarquia editorial. ### Mantenha a semântica dos títulos independente do tamanho visual O destaque principal é um h1 com mzp-u-title-lg. As seções de apoio são h2 com mzp-u-title-xs, e o título do artigo é h3 com mzp-u-title-2xs. Utilitários responsivos podem alterar a escala visual sem mudar essa estrutura. O controle de densidade de leitura altera apenas os parágrafos de exemplo; não redimensiona a página inteira nem seus controles. - h1 apresenta a página. - h2 divide a prévia de leitura e o formulário. - h3 identifica o trecho do artigo. ## Mozilla Protocol Cor e ilustração do sistema de design ### Use a ilustração como conteúdo editorial O gradiente circular é uma ilustração original de CSS com uma breve descrição acessível. Seu tratamento em tons quentes e roxos não é apresentado como um novo logotipo oficial da Mozilla nem como um token exportado pelo Protocol. O restante da página usa superfícies neutras e contidas para que a ilustração e a ação principal mantenham um papel claro. ### Dê um significado próprio aos estados do formulário O erro de e-mail local tem uma explicação por escrito e uma borda de inválido visível. A confirmação aparece em um bloco separado, inclui o endereço de exemplo informado e deixa claro que nenhum e-mail foi enviado. Uma ilustração colorida de destaque não deve competir com o estado de erro nem deixar dúvidas sobre o envio do formulário. ## Mozilla Protocol Escalas de componentes e layout do sistema de design ### Use as duas escalas de espaçamento de forma intencional Os intervalos de espaçamento publicados para componentes são 4, 8, 16, 24, 32 e 48px. Uma escala de layout separada inclui também 64, 96 e 192px. Use a escala menor em formulários e cartões, e o ritmo mais amplo entre seções editoriais. Aumentar todos os pequenos intervalos para valores de layout enfraqueceria a relação entre um rótulo e seu campo. ### Limite o comprimento das linhas antes de adicionar mais colunas Protocol oferece larguras de conteúdo de 304px até o máximo de 1440px. O exemplo usa um contêiner editorial de 1152px com duas colunas quando há espaço. Abaixo do breakpoint do aplicativo, o artigo e o formulário ficam empilhados. O título, o artigo e o formulário mantêm larguras de leitura adequadas, sem linhas excessivamente longas. ## Mozilla Protocol Botões, detalhes e formulários do sistema de design ### Preserve a estrutura real do formulário O exemplo de boletim é um formulário nativo com rótulo visível, campo de e-mail, nota explicativa, texto de erro e botão de envio. Protocol estiliza os componentes; o aplicativo valida e informa o resultado local. O link é usado como ação de destaque porque leva a uma seção da página, enquanto o envio é feito por um botão. ### Use um elemento de divulgação simples para explicações complementares A divulgação “O que muda” é composta pelos elementos nativos details/summary. Ela explica os valores personalizados confortável e compacto dos parágrafos sem interromper o artigo principal. Não é uma falsa aba de navegação nem um pré-requisito oculto; o formulário e os controles de densidade continuam utilizáveis com a divulgação aberta ou fechada. ## Mozilla Protocol Estados de leitura e validação do sistema de design ### Altere uma preferência de leitura por vez Os dois botões de densidade formam um grupo identificado e expõem aria-pressed. A opção Compacto altera apenas o tamanho da fonte, a altura da linha e o espaçamento inferior dos parágrafos do artigo. O texto, o título e o campo de formulário permanecem no lugar. O exemplo diferencia intencionalmente essa preferência da troca entre os temas de marca Mozilla e Firefox. ### Torne previsível a recuperação do formulário local Um endereço inválido exibe o erro e move o foco para o campo. Ao editar, o erro desatualizado é removido e qualquer confirmação anterior é ocultada. Um endereço válido exibe um resultado gerado localmente e move o foco para esse resultado. A opção “Usar outro endereço” limpa o formulário, remove o estado de inválido e devolve o foco ao campo; não há indicação de uma inscrição assíncrona. 1. Envie um endereço vazio ou malformado e leia o erro do campo. 2. Informe um endereço de exemplo e veja a confirmação local. 3. Use “Usar outro endereço” para redefinir o formulário e devolver o foco ao campo. ## Mozilla Protocol Controles editoriais acessíveis do sistema de design ### Dê funções diferentes à ilustração e aos controles A ilustração é um elemento com função de imagem e texto alternativo conciso. Os botões de densidade, o elemento de divulgação e a ação de envio são controles reais. O campo de e-mail referencia a nota e o erro por meio de aria-describedby. Um contorno de foco visível complementa os estilos nativos para uso com teclado. ### Mantenha a ordem significativa quando o layout for empilhado A ordem do documento é título, prévia de leitura, explicação e formulário. No celular, a ordem permanece igual; CSS não antecipa o formulário ao contexto. A ilustração móvel de 180px é um complemento editorial, não um obstáculo de largura fixa que provoque rolagem horizontal na página. ## Mozilla Protocol Integração do sistema de design CSS ### Inclua os recursos publicados no pacote do exemplo O ponto de entrada fornecido importa um tema compilado, protocol.css e protocol-components.css, seguidos pela folha de estilos do aplicativo. Protocol 22 exige as propriedades personalizadas do tema em :root; simplesmente adicionar uma classe de marca legada deixa a tipografia sem definição. Compile protocol-theme.scss antes de iniciar o Vite. Um empacotador com suporte a módulos resolve as URLs das fontes e imagens. Os blocos HTML, JavaScript e CSS abaixo contêm todo o código-fonte do exemplo; não há backend oculto para boletins nem provedor de estado específico de pacote. ### Amplie o formulário somente quando houver um serviço de inscrição real Em produção, substitua o resultado local por uma solicitação verificada e defina o comportamento de consentimento, processamento, inscrição duplicada e erro do servidor conforme o serviço. Mantenha a apresentação de Protocol separada desses requisitos do aplicativo. Não rotule a confirmação local como inscrição bem-sucedida apenas porque o e-mail passou pela validação de sintaxe. ## Mozilla Protocol Exemplos de componentes do sistema de design ### index.html — página editorial completa Artigo semântico, controles de densidade, divulgação e formulário local de boletim com uma ilustração original de 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.

``` Referência de código - Salve como index.html na raiz do projeto. Os dois blocos seguintes são src/main.js e src/protocol.css. ### main.js — recursos nativos e comportamento local Importa os estilos oficiais e implementa a seleção de densidade, a validação, o foco e a redefinição sem enviar dados. ``` 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"); }), ); ``` Referência de código - Esse comportamento pertence ao aplicativo JavaScript, não a um serviço de boletins de Protocol. ### protocol.css — composição original Layout responsivo da página, preferências de leitura e ilustração circular original. ``` [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; } } ``` Referência de código - As escolhas de densidade e layout do aplicativo são identificadas separadamente dos tokens Sass publicados. ### protocol-theme.scss — tema raiz obrigatório da Mozilla Compile este arquivo em src/protocol-theme.css antes de iniciar o aplicativo. ``` @use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla'); @use '@mozilla-protocol/core/protocol/css/includes/themes'; ``` Referência de código - A configuração Sass seleciona a marca; não se trata de uma alternância de classe em tempo de execução. ## Mozilla Protocol Configuração de agente do sistema de design ### Ponto de partida para implementação Os recursos nativos de CSS/fonts e o script original foram incluídos no pacote da prévia local. Use uma versão do Node.js compatível com a versão do Vite. Mantenha a licença do pacote e os créditos dos recursos em qualquer versão redistribuída. ``` 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 ``` ### Um prompt para seu projeto ``` Crie uma página editorial com Mozilla Protocol 22.0.0. Consulte as referências reais de fontes, espaçamento e contêineres. Use como ponto de partida a composição completa fornecida de HTML/CSS/JS, preserve os títulos semânticos e os rótulos visíveis dos campos e diferencie as escolhas originais de ilustração e densidade dos tokens oficiais. Seja transparente sobre a validação local; integre uma inscrição real somente depois de definir os requisitos do serviço e de consentimento. ``` ## Fontes e escopo do sistema de design Mozilla Protocol Guia de aplicativo OpenDesign para Mozilla Protocol 22.0.0. O exemplo usa o CSS publicado e as fontes incluídas no pacote, com textos, ilustração e comportamento de formulário local originais. Não é um produto, boletim ou serviço de inscrição da Mozilla; os direitos da marca e dos recursos permanecem com seus respectivos proprietários. - Tipografia de Protocol Combinações tipográficas da marca e utilitários de títulos. - Exportação de tokens publicados Espaçamento, layout, larguras de conteúdo e pilhas de fontes. - Uso de CSS Protocol Integração da folha de estilos. - Código-fonte de Protocol Implementação, recursos e licenciamento MPL. ## Recursos relacionados ao sistema de design Mozilla Protocol ### Nord sistema de design Inspecione os tokens do tema Therapy do Nord e os contratos de Web Components por meio de um rascunho de solicitação de sala: funções de cor reais, dimensionamento responsivo de campos, validação explícita e resultados preparados localmente. ### Oracle Redwood Conheça a paleta, as funções semânticas, o espaçamento e os limites de densidade reais do Oracle JET 19 Redwood por meio de uma planilha original e completa para revisão de estoque. ### Orange OUDS Web Inspecione os tokens semânticos reais, os pacotes de tema e o comportamento nativo de Offcanvas do Orange OUDS 1.4 em um estudo comparativo responsivo completo. - [Referência de implementação](https://protocol.mozilla.org/docs/usage/framework) - [Fonte](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Fonte](https://protocol.mozilla.org/docs/fundamentals/typography) - [Referência de código](https://protocol.mozilla.org/components/detail/example-form) - [Referência de código](https://protocol.mozilla.org/docs/usage/framework) - [Referência de código](https://protocol.mozilla.org/docs/fundamentals/design-tokens) - [Tipografia de Protocol Combinações tipográficas da marca e utilitários de títulos.](https://protocol.mozilla.org/docs/fundamentals/typography) - [Exportação de tokens publicados Espaçamento, layout, larguras de conteúdo e pilhas de fontes.](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Uso de CSS Protocol Integração da folha de estilos.](https://protocol.mozilla.org/docs/usage/framework) - [Código-fonte de Protocol Implementação, recursos e licenciamento MPL.](https://github.com/mozilla/protocol)