# Mozilla Protocol-Designsystem ## Mozilla Protocol-Designsystem – Schnittstellenvorschau Vergleichen Sie die Lesedichte, klappen Sie die Erläuterungen auf und probieren Sie ungültige und gültige E-Mail-Zustände aus, ohne ein Abonnement abzuschließen. ## Mozilla Protocol-Designsystem – Designreferenz Veröffentlichte Token-JSON-Datei für Mozilla Protocol 22.0.0 und natives CSS. Namen mit vorangestelltem Dollarzeichen sind Sass-Tokens. Das eigenständige Beispiel verwendet das Mozilla-Typografiethema; seine Dichtesteuerung und die kreisförmige Illustration sind anwendungsspezifische Entscheidungen. ### Schriftfamilien | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $font-stack-base | Inter, X-LocaleSpecific, sans-serif | Wählen Sie ausdrücklich die Schriftfamilie der Marke Mozilla oder Firefox. Verwenden Sie keine Schrift für Überschriften in längeren Fließtexten. | | $font-stack-firefox | Metropolis, X-LocaleSpecific, sans-serif | Wählen Sie ausdrücklich die Schriftfamilie der Marke Mozilla oder Firefox. Verwenden Sie keine Schrift für Überschriften in längeren Fließtexten. | | $font-stack-mozilla-headline | 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Wählen Sie ausdrücklich die Schriftfamilie der Marke Mozilla oder Firefox. Verwenden Sie keine Schrift für Überschriften in längeren Fließtexten. | | $font-stack-mozilla-text | 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Wählen Sie ausdrücklich die Schriftfamilie der Marke Mozilla oder Firefox. Verwenden Sie keine Schrift für Überschriften in längeren Fließtexten. | | $font-stack-mono | Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace | Wählen Sie ausdrücklich die Schriftfamilie der Marke Mozilla oder Firefox. Verwenden Sie keine Schrift für Überschriften in längeren Fließtexten. | ### Komponentenabstände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $spacing-xs | 4px | Abstände innerhalb einer Komponente oder zwischen eng zusammengehörigen Elementen. | | $spacing-sm | 8px | Abstände innerhalb einer Komponente oder zwischen eng zusammengehörigen Elementen. | | $spacing-md | 16px | Abstände innerhalb einer Komponente oder zwischen eng zusammengehörigen Elementen. | | $spacing-lg | 24px | Abstände innerhalb einer Komponente oder zwischen eng zusammengehörigen Elementen. | | $spacing-xl | 32px | Abstände innerhalb einer Komponente oder zwischen eng zusammengehörigen Elementen. | | $spacing-2xl | 48px | Abstände innerhalb einer Komponente oder zwischen eng zusammengehörigen Elementen. | ### Rhythmus des großflächigen Layouts | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $layout-2xs | 16px | Verwenden Sie größere Abstände zwischen redaktionellen Abschnitten. Diese unterscheiden sich von den Abständen innerhalb einer Komponente. | | $layout-xs | 24px | Verwenden Sie größere Abstände zwischen redaktionellen Abschnitten. Diese unterscheiden sich von den Abständen innerhalb einer Komponente. | | $layout-sm | 32px | Verwenden Sie größere Abstände zwischen redaktionellen Abschnitten. Diese unterscheiden sich von den Abständen innerhalb einer Komponente. | | $layout-md | 48px | Verwenden Sie größere Abstände zwischen redaktionellen Abschnitten. Diese unterscheiden sich von den Abständen innerhalb einer Komponente. | | $layout-lg | 64px | Verwenden Sie größere Abstände zwischen redaktionellen Abschnitten. Diese unterscheiden sich von den Abständen innerhalb einer Komponente. | | $layout-xl | 96px | Verwenden Sie größere Abstände zwischen redaktionellen Abschnitten. Diese unterscheiden sich von den Abständen innerhalb einer Komponente. | | $layout-2xl | 192px | Verwenden Sie größere Abstände zwischen redaktionellen Abschnitten. Diese unterscheiden sich von den Abständen innerhalb einer Komponente. | ### Inhaltsbreiten | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $content-xs | 304px | Wählen Sie für den tatsächlichen Inhalt eine gut lesbare maximale Breite, statt jeden Textblock auf die größte Containerbreite auszudehnen. | | $content-sm | 432px | Wählen Sie für den tatsächlichen Inhalt eine gut lesbare maximale Breite, statt jeden Textblock auf die größte Containerbreite auszudehnen. | | $content-md | 688px | Wählen Sie für den tatsächlichen Inhalt eine gut lesbare maximale Breite, statt jeden Textblock auf die größte Containerbreite auszudehnen. | | $content-lg | 928px | Wählen Sie für den tatsächlichen Inhalt eine gut lesbare maximale Breite, statt jeden Textblock auf die größte Containerbreite auszudehnen. | | $content-xl | 1152px | Wählen Sie für den tatsächlichen Inhalt eine gut lesbare maximale Breite, statt jeden Textblock auf die größte Containerbreite auszudehnen. | | $content-max | 1440px | Wählen Sie für den tatsächlichen Inhalt eine gut lesbare maximale Breite, statt jeden Textblock auf die größte Containerbreite auszudehnen. | ### Bildschirm-Breakpoints | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $screen-xs | 320px | Veröffentlichte Viewport-Stufen. Einzelne Komponenten-Mixins können sich an ausgewählten Stufen anpassen. | | $screen-sm | 480px | Veröffentlichte Viewport-Stufen. Einzelne Komponenten-Mixins können sich an ausgewählten Stufen anpassen. | | $screen-md | 768px | Veröffentlichte Viewport-Stufen. Einzelne Komponenten-Mixins können sich an ausgewählten Stufen anpassen. | | $screen-lg | 1024px | Veröffentlichte Viewport-Stufen. Einzelne Komponenten-Mixins können sich an ausgewählten Stufen anpassen. | | $screen-xl | 1312px | Veröffentlichte Viewport-Stufen. Einzelne Komponenten-Mixins können sich an ausgewählten Stufen anpassen. | ### Eckenradius | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $border-radius-xs | 2px | Verwenden Sie den zur Komponente passenden Radius. Halten Sie die eigens gestaltete Illustration von den Formen der Benutzeroberfläche getrennt. | | $border-radius-sm | 4px | Verwenden Sie den zur Komponente passenden Radius. Halten Sie die eigens gestaltete Illustration von den Formen der Benutzeroberfläche getrennt. | | $border-radius-md | 8px | Verwenden Sie den zur Komponente passenden Radius. Halten Sie die eigens gestaltete Illustration von den Formen der Benutzeroberfläche getrennt. | | $border-radius-lg | 16px | Verwenden Sie den zur Komponente passenden Radius. Halten Sie die eigens gestaltete Illustration von den Formen der Benutzeroberfläche getrennt. | ### Typografie-Hilfsklassen und Themenauswahl | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $brand-theme: mozilla | Mozilla Headline + Mozilla Text | Redaktionelle Inhalte im Mozilla-Thema; die Vorschau lädt Schriftarten aus dem offiziellen Paket. | | $brand-theme: firefox | Metropolis + Inter | Typografie im Firefox-Thema ist eine separate Markenentscheidung. | | mzp-u-title-lg | Responsive title utility | Für die redaktionelle Hauptüberschrift verwenden. Die Bedeutung als Überschrift lässt sich nicht aus der visuellen Größe ableiten. | | mzp-u-title-xs | Small title utility | Die beiden ergänzenden Abschnitte verwenden diese Klasse für semantische h2-Elemente. | | mzp-u-title-2xs | Compact title utility | Der kurze Artikel verwendet diese Klasse für sein h3-Element. | | Comfortable / Compact sample | 16px / 1.6 and 14px / 1.4 | Eigenständige Leseeinstellung, keine von zwei offiziellen Protocol-Themen. | ## Mozilla Protocol-Designsystem – vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Mozilla Protocol-Designsystem – redaktionelle Gestaltung ### Beginnen Sie mit einer gut lesbaren redaktionellen Hierarchie > Protocol unterstützt neben der Benutzeroberfläche auch redaktionelle und Marketing-Oberflächen. Das Beispiel beginnt mit einer großen Überschrift und einer eigenständigen kreisförmigen Illustration und geht dann zu einer Artikelvorschau und einem Digest-Formular über. So bekommt die Botschaft genügend Raum, bevor die Lesenden zur Bedienung von Steuerelementen aufgefordert werden. Diese Gestaltung unterscheidet sich von einem dicht belegten Verwaltungs-Dashboard. ### Markenthema und Anwendungskonzept voneinander trennen Das Beispiel verwendet mzp-t-mozilla und die native Protocol-Typografie. Artikel, Illustration und Einstellung für die Lesedichte sind eigene Anwendungsinhalte. Weder die nativen Klassennamen noch die Schriftdateien machen daraus einen offiziellen Mozilla-Dienst. Die Fußzeile erläutert den Umfang, und die Digest-Aktion zeigt lediglich eine Bestätigungsvorschau an. ## Mozilla Protocol Schriftarten und Titel-Utilities des Designsystems ### Das markenspezifische Schriftduo auswählen Protocol 22 stellt für Mozilla die Schriftfamilien Mozilla Headline und Mozilla Text sowie für Firefox Metropolis und Inter bereit. Das Beispiel lädt die vom Paket bereitgestellten Schriftarten. Überschriften und Fließtext sollten getrennte Rollen haben: Eine Display-Schrift in jedem Absatz beseitigt den Kontrast, der die redaktionelle Hierarchie wirkungsvoll macht. ### Überschriftensemantik unabhängig von der visuellen Größe beibehalten Der Hero-Bereich ist eine h1 mit mzp-u-title-lg. Die nachfolgenden Abschnitte sind h2 mit mzp-u-title-xs, der Artikeltitel ist eine h3 mit mzp-u-title-2xs. Responsive Utilities können die visuelle Größe ändern, ohne die Gliederung zu verändern. Die Einstellung für die Lesedichte wirkt sich nur auf die Beispielabsätze aus; die gesamte Seite und ihre Bedienelemente werden dadurch nicht skaliert. - h1 leitet die Seite ein. - h2 unterteilt die Lesevorschau und das Formular. - h3 bezeichnet den Artikelauszug. ## Mozilla Protocol Farben und Illustrationen des Designsystems ### Illustrationen als redaktionelle Inhalte verwenden Der kreisförmige Farbverlauf ist ein eigenes CSS-Kunstwerk mit einer kurzen barrierefreien Beschreibung. Der warme Verlauf bis hin zu Violett wird weder als neues offizielles Mozilla-Logo noch als von Protocol exportiertes Design-Token dargestellt. Der Rest der Seite nutzt zurückhaltende neutrale Hintergründe, damit die Illustration und die primäre Aktion klar hervortreten. ### Dem Formularstatus eine eigene Bedeutung geben Der lokale E-Mail-Fehler wird durch eine Erklärung und einen sichtbaren Rahmen für ungültige Eingaben kenntlich gemacht. Der Erfolg erscheint in einem separaten Bestätigungsfeld, das die eingegebene Beispieladresse enthält und darauf hinweist, dass keine E-Mail gesendet wurde. Ein farbenfroher Hero-Bereich sollte nicht mit dem Fehlerstatus konkurrieren oder Zweifel daran aufkommen lassen, ob das Formular erfolgreich war. ## Mozilla Protocol Abstände und Layout-Skalen des Designsystems ### Die beiden Abstandsskalen gezielt einsetzen Die veröffentlichten Abstände für Komponenten betragen 4, 8, 16, 24, 32 und 48px. Eine separate Layout-Skala reicht bis 64, 96 und 192px. Die kleinere Skala eignet sich für Formulare und Karten, der größere Rhythmus für Abstände zwischen redaktionellen Abschnitten. Werden alle kleinen Abstände auf Layout-Werte vergrößert, leidet die visuelle Verbindung zwischen einer Beschriftung und dem zugehörigen Feld. ### Die Zeilenlänge begrenzen, bevor weitere Spalten hinzukommen Protocol bietet Inhaltsbreiten von 304px bis zu einem Maximum von 1440px. Das Beispiel nutzt einen 1152px breiten redaktionellen Container mit zwei Spalten, sofern genügend Platz vorhanden ist. Unterhalb des Anwendungs-Breakpoints werden Artikel und Formular untereinander angeordnet. Überschrift, Artikel und Formular behalten jeweils eine angemessene Zeilenlänge, statt sich unbegrenzt auszudehnen. ## Mozilla Protocol Schaltflächen, Details und Formulare des Designsystems ### Die tatsächliche Struktur des Formulars beibehalten Das Digest-Beispiel ist ein natives Formular mit sichtbarer Beschriftung, E-Mail-Eingabefeld, erläuterndem Hinweis, Fehlermeldung und Absenden-Schaltfläche. Protocol gestaltet die Komponenten; die Anwendung prüft die Eingabe und meldet das lokale Ergebnis. Für die Aktion im Hero-Bereich kommt ein Link zum Einsatz, da er zu einem Abschnitt auf derselben Seite führt. Zum Absenden dient dagegen eine Schaltfläche. ### Ergänzende Erläuterungen mit einem einfachen Aufklappelement bereitstellen Das Aufklappelement „Was ändert sich?“ ist ein natives details/summary-Paar. Es erläutert die benutzerdefinierten Absatzwerte für die komfortable und kompakte Darstellung, ohne den Hauptartikel zu unterbrechen. Dabei handelt es sich weder um einen vorgetäuschten Navigations-Tab noch um eine versteckte Voraussetzung. Formular und Steuerelemente für die Lesedichte bleiben unabhängig davon bedienbar, ob das Element geöffnet oder geschlossen ist. ## Mozilla Protocol Lese- und Validierungsstatus des Designsystems ### Jeweils nur eine Leseeinstellung ändern Die beiden Schaltflächen zur Lesedichte bilden eine beschriftete Gruppe und stellen aria-pressed bereit. Beim Wechsel zur kompakten Ansicht ändern sich im Artikel ausschließlich Schriftgröße, Zeilenhöhe und unterer Absatzabstand. Text, Titel und Formulareingabe bleiben unverändert. Das Beispiel unterscheidet diese Einstellung bewusst vom Wechsel zwischen den Markenthemen von Mozilla und Firefox. ### Die lokale Fehlerbehebung im Formular vorhersehbar gestalten Bei einer ungültigen Adresse wird eine Fehlermeldung angezeigt und das Eingabefeld fokussiert. Durch Bearbeiten wird der veraltete Fehler entfernt und eine vorherige Bestätigung ausgeblendet. Bei einer gültigen Adresse wird ein lokal erzeugtes Ergebnis angezeigt und fokussiert. „Andere Adresse testen“ leert das Formular, entfernt den Status für ungültige Eingaben und setzt den Fokus zurück auf das Eingabefeld. Es wird kein asynchrones Abonnement eingerichtet. 1. Eine leere oder fehlerhafte Adresse absenden und die Fehlermeldung des Felds lesen. 2. Eine Beispieladresse eingeben und die lokale Bestätigung anzeigen lassen. 3. Mit „Andere Adresse testen“ das Formular zurücksetzen und den Fokus auf das Eingabefeld legen. ## Mozilla Protocol Barrierefreie redaktionelle Steuerelemente des Designsystems ### Illustrationen und Bedienelementen unterschiedliche Rollen zuweisen Die Illustration ist ein Element mit der Rolle „image“ und einem knappen Alternativtext. Die Schaltflächen für die Lesedichte, das Aufklappelement und die Absendeaktion sind echte Steuerelemente. Das E-Mail-Feld verweist über aria-describedby sowohl auf den Hinweis als auch auf die Fehlermeldung. Eine sichtbare Fokusumrandung ergänzt die native Gestaltung für die Tastaturbedienung. ### Eine sinnvolle Reihenfolge beim Stapeln des Layouts beibehalten Die Dokumentreihenfolge lautet: Überschrift, Lesevorschau, Erläuterung und Formular. Auf Mobilgeräten bleibt diese Reihenfolge bestehen; CSS zieht das Formular nicht vor den Kontext. Die 180px große mobile Illustration ergänzt den redaktionellen Inhalt, statt als festbreites Hindernis horizontales Scrollen zu erzwingen. ## Mozilla Protocol Integration des Designsystems CSS ### Die veröffentlichten Assets mit dem Beispiel bündeln Der bereitgestellte Einstiegspunkt importiert ein kompiliertes Theme, protocol.css und protocol-components.css und anschließend das Anwendungs-Stylesheet. Bei Protocol 22 müssen die benutzerdefinierten Theme-Eigenschaften auf :root gesetzt sein; allein eine veraltete Markenklasse anzuhängen, löst die Typografie nicht auf. protocol-theme.scss muss vor dem Start von Vite kompiliert werden. Ein bundler mit Modulunterstützung verarbeitet die URLs der Schrift- und Bilddateien. Die folgenden Blöcke HTML, JavaScript und CSS enthalten den vollständigen Quellcode des Beispiels; es gibt weder ein verborgenes Backend für den Newsletter noch einen zustandsverwaltenden Provider, der an ein bestimmtes Paket gebunden ist. ### Das Formular nur dann erweitern, wenn ein echter Abonnementdienst vorhanden ist Ersetzen Sie für den Produktiveinsatz das lokale Ergebnis durch eine verifizierte Anfrage und legen Sie für Ihren Dienst fest, wie Einwilligung, ausstehende Anfragen, doppelte Abonnements und Serverfehler behandelt werden. Trennen Sie die Darstellung von Protocol von diesen Anwendungsanforderungen. Bezeichnen Sie die lokale Bestätigung nicht als erfolgreiches Abonnement, nur weil die E-Mail-Adresse die Syntaxprüfung besteht. ## Mozilla Protocol-Designsystem-Komponentenbeispiele ### index.html — vollständige redaktionelle Seite Semantischer Artikel, Steuerelemente für die Lesedichte, Offenlegungsbereich und lokales Digest-Formular mit einer eigens erstellten CSS-Illustration. ``` 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.

``` Code-Referenz - Speichern Sie die Datei im Projektstammverzeichnis als index.html. Die nächsten beiden Blöcke sind src/main.js und src/protocol.css. ### main.js — native Assets und lokales Verhalten Importiert die offiziellen Styles und implementiert die Auswahl der Lesedichte, Validierung, Fokussteuerung und Zurücksetzen, ohne Daten zu senden. ``` 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"); }), ); ``` Code-Referenz - Dieses Verhalten gehört zur Anwendung JavaScript, nicht zu einem Protocol-Newsletterdienst. ### protocol.css — eigens erstelltes Layout Responsives Seitenlayout, Leseeinstellungen und eine eigens erstellte kreisförmige Illustration. ``` [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; } } ``` Code-Referenz - Anwendungsspezifische Entscheidungen zu Dichte und Layout sind getrennt von den veröffentlichten Sass-Design-Tokens ausgewiesen. ### protocol-theme.scss — erforderliches Mozilla-Stamm-Theme Kompilieren Sie diese Datei vor dem Start der App zu src/protocol-theme.css. ``` @use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla'); @use '@mozilla-protocol/core/protocol/css/includes/themes'; ``` Code-Referenz - Die Sass-Konfiguration legt die Marke fest; hierfür wird keine Laufzeit-Klasse umgeschaltet. ## Mozilla Protocol-Designsystem-Agent-Einrichtung ### Ausgangspunkt für die Implementierung Die nativen CSS/fonts und das eigens erstellte Skript wurden für die lokale Vorschau gebündelt. Verwenden Sie eine von Ihrer Vite-Version unterstützte Node.js-Version. Legen Sie bei einer Weitergabe der Build-Datei die Paketlizenz und die Quellenangaben zu den Assets bei. ``` 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 ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie mit Mozilla Protocol 22.0.0 eine redaktionelle Seite. Ermitteln Sie die tatsächlichen Referenzwerte für Schriftarten, Abstände und Container. Verwenden Sie die bereitgestellte vollständige HTML/CSS/JS-Komposition als Ausgangspunkt, behalten Sie semantische Überschriften und sichtbare Formularbeschriftungen bei und unterscheiden Sie eigens erstellte Illustrationen und Dichteoptionen von offiziellen Design-Tokens. Gestalten Sie die lokale Validierung transparent; integrieren Sie ein echtes Abonnement erst, wenn die Anforderungen des Dienstes und an die Einwilligung festgelegt sind. ``` ## Mozilla Protocol-Designsystem: Quellen und Geltungsbereich OpenDesign-Anwendungsleitfaden für Mozilla Protocol 22.0.0. Das Beispiel verwendet das veröffentlichte CSS und gebündelte Schriftarten sowie eigens erstellte Texte, Illustrationen und lokales Formularverhalten. Es ist weder ein Mozilla-Produkt noch ein Newsletter- oder Abonnementdienst; Marken- und Asset-Rechte verbleiben bei den jeweiligen Inhabern. - Protocol-Typografie Markenschrift-Kombinationen und Titel-Hilfsklassen. - Veröffentlichter Design-Token-Export Abstände, Layout, Inhaltsbreiten und Schriftstapel. - Verwendung von Protocol CSS Einbindung des Stylesheets. - Protocol-Quellcode Implementierung, Assets und MPL-Lizenzierung. ## Verwandte Ressourcen zum Mozilla Protocol-Designsystem ### Nord Designsystem Untersuchen Sie die Token des Nord-Therapy-Themes und die Web-Component-Verträge anhand eines Entwurfs für eine Raumanfrage: echte Farbrollen, responsive Feldgrößen, explizite Validierung und lokal vorbereitete Ergebnisse. ### Oracle Redwood Untersuchen Sie die tatsächliche Farbpalette, semantische Rollen sowie Grenzen für Abstände und Dichte von Oracle JET 19 Redwood anhand eines vollständigen, eigenständigen und bearbeitbaren Arbeitsblatts zur Aktienanalyse. ### Orange OUDS Web Untersuchen Sie in einer vollständigen responsiven Vergleichsstudie die tatsächlichen semantischen Tokens, Theme-Pakete und das native Offcanvas-Verhalten von Orange OUDS 1.4. - [Implementierungsreferenz](https://protocol.mozilla.org/docs/usage/framework) - [Quelle](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Quelle](https://protocol.mozilla.org/docs/fundamentals/typography) - [Code-Referenz](https://protocol.mozilla.org/components/detail/example-form) - [Code-Referenz](https://protocol.mozilla.org/docs/usage/framework) - [Code-Referenz](https://protocol.mozilla.org/docs/fundamentals/design-tokens) - [Protocol-Typografie Markenschrift-Kombinationen und Titel-Hilfsklassen.](https://protocol.mozilla.org/docs/fundamentals/typography) - [Veröffentlichter Design-Token-Export Abstände, Layout, Inhaltsbreiten und Schriftstapel.](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Verwendung von Protocol CSS Einbindung des Stylesheets.](https://protocol.mozilla.org/docs/usage/framework) - [Protocol-Quellcode Implementierung, Assets und MPL-Lizenzierung.](https://github.com/mozilla/protocol)