# Mozilla Protocol Sistema di progettazione ## Sistema di design Mozilla Protocol Anteprima dell’interfaccia del sistema di progettazione Confronta la densità di lettura, espandi i dettagli esplicativi e prova gli stati di email non valida e valida senza creare un’iscrizione. ## Sistema di design Mozilla Protocol Riferimento di progettazione del sistema di progettazione JSON dei token pubblicati di Mozilla Protocol 22.0.0 e CSS nativo. I nomi preceduti dal simbolo del dollaro sono token Sass. L’esempio originale usa il tema tipografico Mozilla; i controlli di densità e l’illustrazione circolare sono scelte dell’applicazione. ### Famiglie tipografiche | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $font-stack-base | Inter, X-LocaleSpecific, sans-serif | Scegli esplicitamente la famiglia di brand Mozilla o Firefox; non usare un carattere da titoli per lunghi testi correnti. | | $font-stack-firefox | Metropolis, X-LocaleSpecific, sans-serif | Scegli esplicitamente la famiglia di brand Mozilla o Firefox; non usare un carattere da titoli per lunghi testi correnti. | | $font-stack-mozilla-headline | 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Scegli esplicitamente la famiglia di brand Mozilla o Firefox; non usare un carattere da titoli per lunghi testi correnti. | | $font-stack-mozilla-text | 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Scegli esplicitamente la famiglia di brand Mozilla o Firefox; non usare un carattere da titoli per lunghi testi correnti. | | $font-stack-mono | Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace | Scegli esplicitamente la famiglia di brand Mozilla o Firefox; non usare un carattere da titoli per lunghi testi correnti. | ### Spaziatura dei componenti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $spacing-xs | 4px | Spazio all’interno di un componente o tra elementi strettamente correlati. | | $spacing-sm | 8px | Spazio all’interno di un componente o tra elementi strettamente correlati. | | $spacing-md | 16px | Spazio all’interno di un componente o tra elementi strettamente correlati. | | $spacing-lg | 24px | Spazio all’interno di un componente o tra elementi strettamente correlati. | | $spacing-xl | 32px | Spazio all’interno di un componente o tra elementi strettamente correlati. | | $spacing-2xl | 48px | Spazio all’interno di un componente o tra elementi strettamente correlati. | ### Ritmo di layout su larga scala | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $layout-2xs | 16px | Usa spazi più ampi tra le sezioni editoriali, distinti dalla spaziatura dei componenti. | | $layout-xs | 24px | Usa spazi più ampi tra le sezioni editoriali, distinti dalla spaziatura dei componenti. | | $layout-sm | 32px | Usa spazi più ampi tra le sezioni editoriali, distinti dalla spaziatura dei componenti. | | $layout-md | 48px | Usa spazi più ampi tra le sezioni editoriali, distinti dalla spaziatura dei componenti. | | $layout-lg | 64px | Usa spazi più ampi tra le sezioni editoriali, distinti dalla spaziatura dei componenti. | | $layout-xl | 96px | Usa spazi più ampi tra le sezioni editoriali, distinti dalla spaziatura dei componenti. | | $layout-2xl | 192px | Usa spazi più ampi tra le sezioni editoriali, distinti dalla spaziatura dei componenti. | ### Larghezze dei contenuti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $content-xs | 304px | Scegli una larghezza massima leggibile per il contenuto effettivo, invece di estendere ogni blocco di testo fino al contenitore più grande. | | $content-sm | 432px | Scegli una larghezza massima leggibile per il contenuto effettivo, invece di estendere ogni blocco di testo fino al contenitore più grande. | | $content-md | 688px | Scegli una larghezza massima leggibile per il contenuto effettivo, invece di estendere ogni blocco di testo fino al contenitore più grande. | | $content-lg | 928px | Scegli una larghezza massima leggibile per il contenuto effettivo, invece di estendere ogni blocco di testo fino al contenitore più grande. | | $content-xl | 1152px | Scegli una larghezza massima leggibile per il contenuto effettivo, invece di estendere ogni blocco di testo fino al contenitore più grande. | | $content-max | 1440px | Scegli una larghezza massima leggibile per il contenuto effettivo, invece di estendere ogni blocco di testo fino al contenitore più grande. | ### Breakpoint dello schermo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $screen-xs | 320px | Intervalli di viewport pubblicati. I mixin dei singoli componenti possono adattarsi a intervalli specifici. | | $screen-sm | 480px | Intervalli di viewport pubblicati. I mixin dei singoli componenti possono adattarsi a intervalli specifici. | | $screen-md | 768px | Intervalli di viewport pubblicati. I mixin dei singoli componenti possono adattarsi a intervalli specifici. | | $screen-lg | 1024px | Intervalli di viewport pubblicati. I mixin dei singoli componenti possono adattarsi a intervalli specifici. | | $screen-xl | 1312px | Intervalli di viewport pubblicati. I mixin dei singoli componenti possono adattarsi a intervalli specifici. | ### Raggio degli angoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $border-radius-xs | 2px | Scegli il raggio adatto al componente; mantieni l’illustrazione realizzata separata dalle forme dell’interfaccia. | | $border-radius-sm | 4px | Scegli il raggio adatto al componente; mantieni l’illustrazione realizzata separata dalle forme dell’interfaccia. | | $border-radius-md | 8px | Scegli il raggio adatto al componente; mantieni l’illustrazione realizzata separata dalle forme dell’interfaccia. | | $border-radius-lg | 16px | Scegli il raggio adatto al componente; mantieni l’illustrazione realizzata separata dalle forme dell’interfaccia. | ### Utility tipografiche e scelta del tema | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $brand-theme: mozilla | Mozilla Headline + Mozilla Text | Contenuti editoriali con tema Mozilla; l’anteprima carica i font dal pacchetto ufficiale. | | $brand-theme: firefox | Metropolis + Inter | La tipografia con tema Firefox è una scelta di brand distinta. | | mzp-u-title-lg | Responsive title utility | Usa sul titolo editoriale principale; non dedurre la semantica dell’intestazione dalle dimensioni visive. | | mzp-u-title-xs | Small title utility | Le due sezioni di supporto usano questa classe su elementi h2 semantici. | | mzp-u-title-2xs | Compact title utility | L’articolo breve usa questa classe sul proprio h3. | | Comfortable / Compact sample | 16px / 1.6 and 14px / 1.4 | Preferenza di lettura originale, non due temi ufficiali di Protocol. | ## Sistema di design Mozilla Protocol Guida completa al sistema di progettazione Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Mozilla Protocol Composizione editoriale del sistema di progettazione ### Inizia con una gerarchia editoriale leggibile > Protocol è pensato per le superfici editoriali e di marketing, oltre che per le interfacce di supporto. L’esempio si apre con un titolo grande e un’illustrazione circolare originale, per poi passare a un’anteprima di un articolo e a un modulo per la newsletter. Questa composizione lascia spazio al messaggio prima di chiedere al lettore di interagire con i controlli. È diversa da una dashboard amministrativa densa. ### Separa il tema del brand dall’idea dell’applicazione L’esempio usa mzp-t-mozilla e la tipografia nativa di Protocol. L’articolo, l’illustrazione e la preferenza per la densità sono contenuti originali dell’applicazione. Né i nomi delle classi native né i file dei font ne fanno un servizio ufficiale Mozilla. Il piè di pagina ne chiarisce l’ambito e l’azione relativa alla newsletter mostra soltanto un’anteprima della conferma. ## Mozilla Protocol Font e utility per i titoli del sistema di design ### Scegli la coppia tipografica specifica del brand Protocol 22 esporta gli stack Mozilla Headline e Mozilla Text per Mozilla, e Metropolis con Inter per Firefox. L’esempio carica i font forniti dal pacchetto. Mantieni distinti i ruoli di titoli e corpo del testo: usare un carattere da esposizione in ogni paragrafo elimina il contrasto che rende efficace la gerarchia editoriale. ### Mantieni indipendenti la semantica dei titoli e la loro dimensione visiva L’hero è un h1 con mzp-u-title-lg. Le sezioni di supporto sono h2 con mzp-u-title-xs e il titolo dell’articolo è un h3 con mzp-u-title-2xs. Le utility responsive possono modificare la scala visiva senza alterare la struttura. Il controllo della densità di lettura modifica solo i paragrafi di esempio, non ridimensiona l’intera pagina né i suoi controlli. - h1 introduce la pagina. - h2 suddivide l’anteprima di lettura e il modulo. - h3 dà il titolo all’estratto dell’articolo. ## Mozilla Protocol Colori e illustrazioni del sistema di design ### Usa l’illustrazione come contenuto editoriale Il gradiente circolare è un’opera originale di CSS accompagnata da una breve descrizione accessibile. La sfumatura dai toni caldi al viola non viene presentata come un nuovo logo ufficiale di Mozilla né come un token esportato da Protocol. Il resto della pagina usa superfici neutre e sobrie, così l’illustrazione e l’azione principale mantengono un ruolo ben definito. ### Attribuisci alla convalida del modulo un significato distinto L’errore locale dell’indirizzo email è spiegato per iscritto e indicato da un bordo ben visibile. Il messaggio di esito positivo appare in un blocco di conferma separato, che include l’indirizzo di esempio inserito e specifica che non è stata inviata alcuna email. Un hero colorato non dovrebbe competere con lo stato di errore né rendere ambiguo l’esito del modulo. ## Mozilla Protocol Spaziatura dei componenti e scale di layout del sistema di design ### Usa con criterio le due scale di spaziatura Gli intervalli di spaziatura pubblicati per i componenti sono 4, 8, 16, 24, 32 e 48px. Una scala di layout separata si estende fino a 64, 96 e 192px. Usa la scala più contenuta nei moduli e nelle schede, e quella più ampia tra le sezioni editoriali. Portare ogni piccolo spazio a un valore della scala di layout indebolirebbe il legame tra un’etichetta e il relativo campo. ### Limita la lunghezza delle righe prima di aggiungere altre colonne Protocol offre larghezze di contenuto da 304px fino a un massimo di 1440px. L’esempio usa un contenitore editoriale da 1152px, con due colonne quando lo spazio lo consente. Al di sotto del breakpoint dell’applicazione, l’articolo e il modulo si dispongono uno sotto l’altro. Titolo, articolo e modulo mantengono ciascuno una lunghezza di riga adeguata, senza estendersi all’infinito. ## Mozilla Protocol Pulsanti, dettagli e moduli del sistema di design ### Mantieni la struttura effettiva del modulo L’esempio della newsletter è un modulo nativo con un’etichetta visibile, un campo email, una nota esplicativa, un messaggio di errore e un pulsante di invio. Protocol applica lo stile ai componenti; l’applicazione convalida i dati e comunica l’esito locale. L’azione dell’hero è un link perché porta a una sezione della pagina, mentre l’invio avviene tramite un pulsante. ### Usa un elemento di espansione semplice per le spiegazioni di supporto L’elemento a espansione «Cosa cambia» è una coppia nativa details/summary. Spiega i valori personalizzati dei paragrafi, comodo e compatto, senza interrompere l’articolo principale. Non è una finta scheda di navigazione né un requisito nascosto: il modulo e i controlli di densità restano utilizzabili sia con l’elemento aperto sia con quello chiuso. ## Mozilla Protocol Stati di lettura e convalida del sistema di design ### Modifica una preferenza di lettura alla volta I due pulsanti di densità formano un gruppo con etichetta e usano aria-pressed. La modalità Compatta modifica solo nei paragrafi dell’articolo la dimensione del font, l’altezza della riga e lo spazio inferiore. Il testo, il titolo e il campo del modulo restano invariati. L’esempio distingue intenzionalmente questa preferenza dal passaggio tra i temi del brand Mozilla e Firefox. ### Rendi prevedibile il recupero dagli errori del modulo Un indirizzo non valido mostra l’errore e porta il focus sul campo. Quando l’utente modifica il campo, l’errore non più aggiornato viene cancellato e l’eventuale conferma precedente viene nascosta. Un indirizzo valido mostra un risultato generato localmente e porta il focus su quel risultato. «Prova un altro indirizzo» cancella il modulo, rimuove lo stato di errore e riporta il focus sul campo; non implica alcuna iscrizione asincrona. 1. Invia un indirizzo vuoto o non valido e leggi l’errore del campo. 2. Inserisci un indirizzo di esempio e visualizza l’anteprima della conferma locale. 3. Usa «Prova un altro indirizzo» per ripristinare il modulo e riportare il focus sul campo. ## Mozilla Protocol Controlli editoriali accessibili del sistema di design ### Assegna ruoli diversi alle immagini e ai controlli L’illustrazione è un elemento con ruolo immagine e un testo alternativo conciso. I pulsanti di densità, l’elemento a espansione e l’azione di invio sono controlli effettivi. Il campo email fa riferimento sia alla nota sia all’errore tramite aria-describedby. Un contorno di focus visibile completa lo stile nativo e facilita l’uso da tastiera. ### Mantieni significativo l’ordine quando gli elementi si dispongono in colonna L’ordine del documento è: titolo, anteprima di lettura, spiegazione e modulo. Su dispositivi mobili l’ordine resta lo stesso; CSS non sposta il modulo prima del contesto. L’illustrazione mobile da 180px è un supporto editoriale decorativo, non un ostacolo a larghezza fissa che costringe a scorrere la pagina orizzontalmente. ## Mozilla Protocol Integrazione del sistema di design CSS ### Includi nel bundle dell’esempio le risorse pubblicate Il punto di ingresso fornito importa un tema compilato, protocol.css e protocol-components.css, quindi il foglio di stile dell’applicazione. Protocol 22 richiede le proprietà personalizzate del tema su :root; aggiungere semplicemente una vecchia classe del brand lascia irrisolta la tipografia. Compila protocol-theme.scss prima di avviare Vite. Un bundler consapevole dei moduli gestisce gli URL dei font e delle immagini. I blocchi HTML, JavaScript e CSS qui sotto contengono tutto il codice sorgente dell’esempio: non ci sono backend nascosti per la newsletter né gestori di stato specifici del pacchetto. ### Estendi il modulo solo se esiste un vero servizio di iscrizione Per la produzione, sostituisci il risultato locale con una richiesta verificata e definisci i comportamenti relativi a consenso, attesa, iscrizione duplicata ed errori del server in base al servizio. Mantieni la presentazione di Protocol separata da questi requisiti dell’applicazione. Non presentare la conferma locale come un’iscrizione completata solo perché l’indirizzo email supera la convalida sintattica. ## Mozilla Protocol Esempi di componenti del sistema di design ### index.html — pagina editoriale completa Articolo semantico, controlli di densità, elemento a espansione e modulo locale per la newsletter con un’illustrazione originale di 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.

``` Riferimento del codice - Salva come index.html nella radice del progetto. I due blocchi successivi sono src/main.js e src/protocol.css. ### main.js — risorse native e comportamento locale Importa gli stili ufficiali e gestisce selezione della densità, convalida, focus e ripristino senza inviare dati. ``` 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"); }), ); ``` Riferimento del codice - Questo comportamento fa parte dell’applicazione JavaScript, non è un servizio per newsletter di Protocol. ### protocol.css — composizione originale Layout responsive della pagina, preferenze di lettura e illustrazione circolare originale. ``` [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; } } ``` Riferimento del codice - Le scelte di densità e layout dell’applicazione sono indicate separatamente dai token Sass pubblicati. ### protocol-theme.scss — tema radice Mozilla richiesto Compilalo in src/protocol-theme.css prima di avviare l’app. ``` @use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla'); @use '@mozilla-protocol/core/protocol/css/includes/themes'; ``` Riferimento del codice - La configurazione Sass seleziona il brand; non si tratta di un cambio di classe in fase di esecuzione. ## Mozilla Protocol Configurazione dell’agent per il sistema di design ### Punto di partenza per l’implementazione I font nativi CSS/fonts e lo script originale sono inclusi nel bundle per l’anteprima locale. Usa una versione di Node.js supportata dalla tua versione di Vite. In caso di ridistribuzione, conserva la licenza del pacchetto e l’attribuzione delle risorse. ``` 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 ``` ### Un prompt per il tuo progetto ``` Crea una pagina editoriale con Mozilla Protocol 22.0.0. Consulta i riferimenti effettivi per font, spaziatura e contenitori. Usa come punto di partenza la composizione completa fornita in HTML/CSS/JS, mantieni titoli semantici ed etichette visibili per i campi del modulo, e distingui le scelte originali per illustrazione e densità dai token ufficiali. Rappresenta correttamente la convalida locale; integra un servizio di iscrizione reale solo dopo averne definito i requisiti di servizio e consenso. ``` ## Mozilla Protocol Fonti e ambito del sistema di design Guida dell’applicazione OpenDesign a Mozilla Protocol 22.0.0. L’esempio usa CSS pubblicato e i font inclusi nel bundle, con testo, illustrazione e comportamento locale del modulo originali. Non è un prodotto, una newsletter o un servizio di iscrizione Mozilla; i diritti sui brand e sulle risorse restano ai rispettivi titolari. - Tipografia di Protocol Coppie tipografiche dei brand e utility per i titoli. - Esportazione dei token pubblicati Spaziatura, layout, larghezze dei contenuti e stack di font. - Uso di Protocol CSS Integrazione dei fogli di stile. - Codice sorgente di Protocol Implementazione, risorse e licenza MPL. ## Mozilla Protocol Risorse correlate al sistema di design ### Nord sistema di design Esamina i token del tema Therapy di Nord e i contratti dei Web Component attraverso una bozza di richiesta per una sala: ruoli cromatici reali, dimensionamento responsive dei campi, convalida esplicita e risultati preparati localmente. ### Oracle Redwood Esamina la palette effettiva, i ruoli semantici, le spaziature e i limiti di densità di Oracle JET 19 Redwood attraverso un foglio di lavoro originale, completo e modificabile per la revisione delle scorte. ### Orange OUDS Web Esamina i token semantici effettivi, i pacchetti tema e il comportamento nativo di Offcanvas di Orange OUDS 1.4 attraverso uno studio comparativo completo e responsive. - [Riferimento per l’implementazione](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) - [Riferimento del codice](https://protocol.mozilla.org/components/detail/example-form) - [Riferimento del codice](https://protocol.mozilla.org/docs/usage/framework) - [Riferimento del codice](https://protocol.mozilla.org/docs/fundamentals/design-tokens) - [Tipografia di Protocol Coppie tipografiche dei brand e utility per i titoli.](https://protocol.mozilla.org/docs/fundamentals/typography) - [Esportazione dei token pubblicati Spaziatura, layout, larghezze dei contenuti e stack di font.](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Uso di Protocol CSS Integrazione dei fogli di stile.](https://protocol.mozilla.org/docs/usage/framework) - [Codice sorgente di Protocol Implementazione, risorse e licenza MPL.](https://github.com/mozilla/protocol)