# Sistema de diseño de Mozilla Protocol ## Vista previa de la interfaz del sistema de diseño de Mozilla Protocol Compara la densidad de lectura, amplía los detalles explicativos y prueba los estados de correo electrónico no válido y válido sin suscribirte. ## Referencia de diseño del sistema de diseño de Mozilla Protocol JSON de tokens publicados de Mozilla Protocol 22.0.0 y CSS nativo. Los nombres con prefijo de dólar son tokens de Sass. El ejemplo original usa el tema tipográfico de Mozilla; los controles de densidad y la ilustración circular son decisiones de la aplicación. ### Familias tipográficas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $font-stack-base | Inter, X-LocaleSpecific, sans-serif | Elige explícitamente la familia de Mozilla o la de Firefox; no uses una fuente para titulares en textos largos. | | $font-stack-firefox | Metropolis, X-LocaleSpecific, sans-serif | Elige explícitamente la familia de Mozilla o la de Firefox; no uses una fuente para titulares en textos largos. | | $font-stack-mozilla-headline | 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Elige explícitamente la familia de Mozilla o la de Firefox; no uses una fuente para titulares en textos largos. | | $font-stack-mozilla-text | 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Elige explícitamente la familia de Mozilla o la de Firefox; no uses una fuente para titulares en textos largos. | | $font-stack-mono | Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace | Elige explícitamente la familia de Mozilla o la de Firefox; no uses una fuente para titulares en textos largos. | ### Espaciado de los componentes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $spacing-xs | 4px | Espacio dentro de un componente o entre elementos estrechamente relacionados. | | $spacing-sm | 8px | Espacio dentro de un componente o entre elementos estrechamente relacionados. | | $spacing-md | 16px | Espacio dentro de un componente o entre elementos estrechamente relacionados. | | $spacing-lg | 24px | Espacio dentro de un componente o entre elementos estrechamente relacionados. | | $spacing-xl | 32px | Espacio dentro de un componente o entre elementos estrechamente relacionados. | | $spacing-2xl | 48px | Espacio dentro de un componente o entre elementos estrechamente relacionados. | ### Ritmo de diseño a gran escala | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $layout-2xs | 16px | Usa separaciones mayores entre secciones editoriales; son distintas del espaciado entre componentes. | | $layout-xs | 24px | Usa separaciones mayores entre secciones editoriales; son distintas del espaciado entre componentes. | | $layout-sm | 32px | Usa separaciones mayores entre secciones editoriales; son distintas del espaciado entre componentes. | | $layout-md | 48px | Usa separaciones mayores entre secciones editoriales; son distintas del espaciado entre componentes. | | $layout-lg | 64px | Usa separaciones mayores entre secciones editoriales; son distintas del espaciado entre componentes. | | $layout-xl | 96px | Usa separaciones mayores entre secciones editoriales; son distintas del espaciado entre componentes. | | $layout-2xl | 192px | Usa separaciones mayores entre secciones editoriales; son distintas del espaciado entre componentes. | ### Anchos del contenido | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $content-xs | 304px | Elige un ancho máximo legible para el contenido real en lugar de estirar cada bloque de texto hasta el contenedor más grande. | | $content-sm | 432px | Elige un ancho máximo legible para el contenido real en lugar de estirar cada bloque de texto hasta el contenedor más grande. | | $content-md | 688px | Elige un ancho máximo legible para el contenido real en lugar de estirar cada bloque de texto hasta el contenedor más grande. | | $content-lg | 928px | Elige un ancho máximo legible para el contenido real en lugar de estirar cada bloque de texto hasta el contenedor más grande. | | $content-xl | 1152px | Elige un ancho máximo legible para el contenido real en lugar de estirar cada bloque de texto hasta el contenedor más grande. | | $content-max | 1440px | Elige un ancho máximo legible para el contenido real en lugar de estirar cada bloque de texto hasta el contenedor más grande. | ### Puntos de interrupción de pantalla | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $screen-xs | 320px | Anchos de vista publicados. Los mixins de cada componente pueden adaptarse en puntos seleccionados. | | $screen-sm | 480px | Anchos de vista publicados. Los mixins de cada componente pueden adaptarse en puntos seleccionados. | | $screen-md | 768px | Anchos de vista publicados. Los mixins de cada componente pueden adaptarse en puntos seleccionados. | | $screen-lg | 1024px | Anchos de vista publicados. Los mixins de cada componente pueden adaptarse en puntos seleccionados. | | $screen-xl | 1312px | Anchos de vista publicados. Los mixins de cada componente pueden adaptarse en puntos seleccionados. | ### Radio de esquina | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $border-radius-xs | 2px | Usa el radio adecuado para el componente y mantén la ilustración creada por separado de las formas de la interfaz. | | $border-radius-sm | 4px | Usa el radio adecuado para el componente y mantén la ilustración creada por separado de las formas de la interfaz. | | $border-radius-md | 8px | Usa el radio adecuado para el componente y mantén la ilustración creada por separado de las formas de la interfaz. | | $border-radius-lg | 16px | Usa el radio adecuado para el componente y mantén la ilustración creada por separado de las formas de la interfaz. | ### Utilidades tipográficas y selección de tema | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $brand-theme: mozilla | Mozilla Headline + Mozilla Text | Contenido editorial con el tema de Mozilla; la vista previa carga las fuentes del paquete oficial. | | $brand-theme: firefox | Metropolis + Inter | La tipografía con el tema de Firefox es una opción de marca independiente. | | mzp-u-title-lg | Responsive title utility | Úsala en el titular editorial principal; no deduzcas la semántica del encabezado a partir de su tamaño visual. | | mzp-u-title-xs | Small title utility | Las dos secciones complementarias aplican esta clase a elementos h2 semánticos. | | mzp-u-title-2xs | Compact title utility | El artículo breve aplica esta clase a su h3. | | Comfortable / Compact sample | 16px / 1.6 and 14px / 1.4 | Preferencia de lectura original; no son dos temas oficiales de Protocol. | ## Guía completa del sistema de diseño de Mozilla Protocol Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Composición editorial del sistema de diseño de Mozilla Protocol ### Empieza con una jerarquía editorial legible > Protocol se usa en superficies editoriales y de marketing, además de ofrecer compatibilidad con la interfaz de usuario. El ejemplo comienza con un titular grande y una ilustración circular original, y luego pasa a la vista previa de un artículo y a un formulario para recibir novedades. Esta composición deja espacio para el mensaje antes de pedir al lector que interactúe con los controles. Es distinta de un panel de administración denso. ### Distingue el tema de marca de la propuesta de la aplicación El ejemplo usa mzp-t-mozilla y la tipografía nativa de Protocol. El artículo, la ilustración y la preferencia de densidad son contenido original de la aplicación. Ni los nombres de clases nativas ni los archivos de fuentes convierten el servicio en uno oficial de Mozilla. El pie de página aclara el alcance y la acción para recibir novedades solo muestra una confirmación de ejemplo. ## Fuentes y utilidades para títulos del sistema de diseño de Mozilla Protocol ### Elige la combinación tipográfica específica de la marca Protocol 22 exporta las familias Mozilla Headline y Mozilla Text para Mozilla, y Metropolis e Inter para Firefox. El ejemplo carga las fuentes incluidas en el paquete. Mantén separados los roles de titular y cuerpo: usar una fuente de exhibición en todos los párrafos elimina el contraste que hace útil la jerarquía editorial. ### Mantén la semántica de los encabezados independiente de su tamaño visual El encabezado principal es un h1 con mzp-u-title-lg. Las secciones complementarias son h2 con mzp-u-title-xs, y el título del artículo es h3 con mzp-u-title-2xs. Las utilidades adaptables pueden cambiar la escala visual sin alterar esa estructura. El control de densidad de lectura solo modifica los párrafos de ejemplo; no cambia el tamaño de toda la página ni de sus controles. - h1 introduce la página. - h2 divide la vista previa de lectura y el formulario. - h3 identifica el fragmento del artículo. ## Color e ilustración del sistema de diseño de Mozilla Protocol ### Usa la ilustración como contenido editorial El degradado circular es una ilustración original de CSS con una descripción accesible breve. Su transición de tonos cálidos al morado no se presenta como un nuevo logotipo oficial de Mozilla ni como un token exportado por Protocol. El resto de la página usa superficies neutras y sobrias para que la ilustración y la acción principal conserven un papel claro. ### Da un significado propio al estado del formulario El error local del correo electrónico incluye una explicación escrita y un borde de error visible. El éxito se muestra en un bloque de confirmación independiente que incluye la dirección de ejemplo introducida e indica que no se envió ningún correo. Una imagen principal colorida no debe competir con el estado de error ni hacer que resulte ambiguo si el formulario se envió correctamente. ## Mozilla Protocol Escalas de componentes y diseño de página del sistema de diseño ### Usa deliberadamente las dos escalas de espaciado Los intervalos de espaciado publicados para los componentes son 4, 8, 16, 24, 32 y 48px. Una escala de diseño de página independiente se extiende hasta 64, 96 y 192px. Usa la escala menor dentro de formularios y tarjetas, y el ritmo más amplio entre secciones editoriales. Aumentar cada espacio pequeño hasta alcanzar un valor de diseño de página debilitaría la relación entre una etiqueta y su campo. ### Limita la longitud de línea antes de añadir más columnas Protocol ofrece anchos de contenido desde 304px hasta un máximo de 1440px. El ejemplo usa un contenedor editorial de 1152px con dos columnas cuando hay espacio suficiente. Por debajo del punto de ruptura de la aplicación, el artículo de lectura y el formulario se apilan. El titular, el artículo y el formulario conservan cada uno una longitud de línea adecuada en lugar de extenderse sin límite. ## Mozilla Protocol Botones, detalles y formulario del sistema de diseño ### Conserva la estructura real del formulario El ejemplo del boletín es un formulario nativo con una etiqueta visible, un campo de correo electrónico, una nota explicativa, un texto de error y un botón de envío. Protocol aplica estilos a los componentes; la aplicación valida y muestra el resultado local. La acción principal usa un enlace porque lleva a una sección de la página, mientras que el envío se realiza con un botón. ### Usa un elemento desplegable sencillo para la explicación complementaria El elemento desplegable «Qué cambia» es un par nativo de details/summary. Explica los valores personalizados de párrafo cómodo y compacto sin interrumpir el artículo principal. No es una pestaña de navegación ficticia ni un requisito oculto; el formulario y los controles de densidad siguen siendo utilizables tanto si el elemento está abierto como cerrado. ## Mozilla Protocol Estados de lectura y validación del sistema de diseño ### Cambia una preferencia de lectura a la vez Los dos botones de densidad forman un grupo con etiqueta y exponen aria-pressed. Al cambiar a Compacto, solo se modifican en el artículo el tamaño de fuente, la altura de línea y el espaciado inferior de los párrafos. El texto, el título y el campo del formulario permanecen en su sitio. El ejemplo distingue deliberadamente esta preferencia del cambio entre los temas de marca Mozilla y Firefox. ### Haz predecible la recuperación del formulario local Una dirección no válida muestra el error y enfoca el campo. Al editarla, se borra el error obsoleto y se oculta cualquier confirmación anterior. Una dirección válida muestra un resultado generado localmente y enfoca ese resultado. «Probar otra dirección» borra el formulario, elimina el estado de error y devuelve el foco al campo; esto no implica una suscripción asíncrona. 1. Envía una dirección vacía o con formato incorrecto y lee el error del campo. 2. Introduce una dirección de ejemplo y previsualiza la confirmación local. 3. Usa «Probar otra dirección» para restablecer el formulario y devolver el foco al campo. ## Mozilla Protocol Controles editoriales accesibles del sistema de diseño ### Asigna funciones distintas a la ilustración y a los controles La ilustración es un elemento con función de imagen y texto alternativo conciso. Los botones de densidad, el elemento desplegable y la acción de envío son controles reales. El campo de correo electrónico hace referencia tanto a la nota como al error mediante aria-describedby. Un contorno de foco visible complementa los estilos nativos para el uso con teclado. ### Mantén un orden significativo cuando se apile el diseño El orden del documento es: titular, vista previa de lectura, explicación y formulario. En móviles se mantiene el mismo orden; CSS no adelanta el formulario al contexto. La ilustración móvil de 180px es un apoyo editorial decorativo, no un obstáculo de ancho fijo que provoque desplazamiento horizontal. ## Mozilla Protocol Integración del CSS del sistema de diseño ### Incluye los recursos publicados con el ejemplo El archivo de entrada proporcionado importa un tema compilado, protocol.css y protocol-components.css, y después la hoja de estilos de la aplicación. Protocol 22 requiere las propiedades personalizadas del tema en :root; añadir únicamente una clase de marca heredada deja la tipografía sin resolver. Compila protocol-theme.scss antes de iniciar Vite. Un empaquetador que admita módulos resuelve las URL de fuentes e imágenes. Los bloques HTML, JavaScript y CSS de abajo incluyen el código fuente completo del ejemplo; no hay un backend de boletín oculto ni un proveedor de estado específico del paquete. ### Amplía el formulario solo cuando exista un servicio de suscripción real En producción, sustituye el resultado local por una solicitud verificada y define el comportamiento para el consentimiento, el estado pendiente, las suscripciones duplicadas y los errores del servidor según corresponda a tu servicio. Mantén la presentación de Protocol separada de esos requisitos de la aplicación. No presentes la confirmación local como una suscripción completada solo porque el correo electrónico supere la validación de sintaxis. ## Mozilla Protocol Ejemplos de componentes del sistema de diseño ### index.html — página editorial completa Artículo semántico, controles de densidad, elemento desplegable y formulario local para el boletín con una ilustración 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.

``` Referencia de código - Guárdalo como index.html en la raíz del proyecto. Los dos bloques siguientes corresponden a src/main.js y src/protocol.css. ### main.js — recursos nativos y comportamiento local Importa los estilos oficiales e implementa la selección de densidad, la validación, el foco y el restablecimiento sin enviar datos. ``` 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"); }), ); ``` Referencia de código - Este comportamiento forma parte de la aplicación JavaScript, no de un servicio de boletín de Protocol. ### protocol.css — composición original Diseño adaptable de página, preferencias de lectura e ilustración 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; } } ``` Referencia de código - Las decisiones de densidad y diseño de página de la aplicación se identifican por separado de los tokens Sass publicados. ### protocol-theme.scss — tema raíz de Mozilla obligatorio Compílalo en src/protocol-theme.css antes de iniciar la aplicación. ``` @use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla'); @use '@mozilla-protocol/core/protocol/css/includes/themes'; ``` Referencia de código - La configuración de Sass selecciona la marca; esto no es un cambio de clase en tiempo de ejecución. ## Mozilla Protocol Configuración del agente del sistema de diseño ### Punto de partida para la implementación Las fuentes nativas de CSS y el script original se empaquetaron para la vista previa local. Usa una versión de Node.js compatible con tu versión de Vite. Si redistribuyes una compilación, conserva la licencia del paquete y la atribución de los recursos. ``` 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 ``` ### Una instrucción para tu proyecto ``` Crea una página editorial con Mozilla Protocol 22.0.0. Consulta las referencias reales de tipografía, espaciado y contenedores. Usa la composición completa suministrada de HTML/CSS/JS como punto de partida, conserva los encabezados semánticos y las etiquetas de formulario visibles, y distingue las decisiones originales de ilustración y densidad de los tokens oficiales. Mantén una validación local transparente; integra un servicio de suscripción real solo cuando se hayan definido los requisitos del servicio y del consentimiento. ``` ## Fuentes y alcance del sistema de diseño Mozilla Protocol Guía de aplicación de OpenDesign para Mozilla Protocol 22.0.0. El ejemplo utiliza CSS publicado y las fuentes incluidas, con texto, ilustración y comportamiento de formulario local originales. No es un producto, boletín ni servicio de suscripción de Mozilla; los derechos de marca y de los recursos pertenecen a sus respectivos titulares. - Tipografía de Protocol Combinaciones tipográficas de marca y utilidades para títulos. - Exportación de tokens publicada Espaciado, disposición, anchos de contenido y pilas de fuentes. - Uso de CSS Protocol Integración de hojas de estilo. - Código fuente de Protocol Implementación, recursos y licencia MPL. ## Recursos relacionados con el sistema de diseño Mozilla Protocol ### Nord sistema de diseño Examina los tokens del tema Therapy de Nord y los contratos de Web Component mediante un borrador de solicitud de sala: roles de color reales, campos de tamaño adaptable, validación explícita y resultados preparados localmente. ### Oracle Redwood Estudia la paleta real, los roles semánticos, el espaciado y los límites de densidad de Oracle JET 19 Redwood con una hoja de revisión de existencias editable y original. ### Orange OUDS Web Examina los tokens semánticos reales, los paquetes de temas y el comportamiento nativo de Offcanvas de Orange OUDS 1.4 mediante un estudio comparativo adaptable completo. - [Referencia de implementación](https://protocol.mozilla.org/docs/usage/framework) - [Fuente](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Fuente](https://protocol.mozilla.org/docs/fundamentals/typography) - [Referencia de código](https://protocol.mozilla.org/components/detail/example-form) - [Referencia de código](https://protocol.mozilla.org/docs/usage/framework) - [Referencia de código](https://protocol.mozilla.org/docs/fundamentals/design-tokens) - [Tipografía de Protocol Combinaciones tipográficas de marca y utilidades para títulos.](https://protocol.mozilla.org/docs/fundamentals/typography) - [Exportación de tokens publicada Espaciado, disposición, anchos de contenido y pilas de fuentes.](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Uso de CSS Protocol Integración de hojas de estilo.](https://protocol.mozilla.org/docs/usage/framework) - [Código fuente de Protocol Implementación, recursos y licencia MPL.](https://github.com/mozilla/protocol)