# Mozilla Protocol Tasarım Sistemi

## Mozilla Protocol Tasarım Sistemi Arayüz Önizlemesi

Abonelik oluşturmadan okuma yoğunluğunu karşılaştırın, açıklayıcı ayrıntıları genişletin ve geçersiz/geçerli e-posta durumlarını deneyin.

## Mozilla Protocol Tasarım Sistemi Tasarım Başvurusu

Mozilla Protocol 22.0.0 yayımlanmış belirteç JSON'u ve yerel CSS. Dolar işaretiyle başlayan adlar Sass belirteçleridir. Özgün örnek, Mozilla tipografi temasını kullanır; yoğunluk denetimleri ve dairesel illüstrasyon uygulamaya özgü tercihlerdir.

### Yazı tipi yığınları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $font-stack-base | Inter, X-LocaleSpecific, sans-serif | Mozilla veya Firefox marka yığınını açıkça seçin; uzun gövde metinlerinde başlık yazı tipini kullanmayın. |
| $font-stack-firefox | Metropolis, X-LocaleSpecific, sans-serif | Mozilla veya Firefox marka yığınını açıkça seçin; uzun gövde metinlerinde başlık yazı tipini kullanmayın. |
| $font-stack-mozilla-headline | 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Mozilla veya Firefox marka yığınını açıkça seçin; uzun gövde metinlerinde başlık yazı tipini kullanmayın. |
| $font-stack-mozilla-text | 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Mozilla veya Firefox marka yığınını açıkça seçin; uzun gövde metinlerinde başlık yazı tipini kullanmayın. |
| $font-stack-mono | Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace | Mozilla veya Firefox marka yığınını açıkça seçin; uzun gövde metinlerinde başlık yazı tipini kullanmayın. |
### Bileşen aralıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $spacing-xs | 4px | Bir bileşenin içindeki veya birbiriyle yakından ilişkili öğeler arasındaki boşluk. |
| $spacing-sm | 8px | Bir bileşenin içindeki veya birbiriyle yakından ilişkili öğeler arasındaki boşluk. |
| $spacing-md | 16px | Bir bileşenin içindeki veya birbiriyle yakından ilişkili öğeler arasındaki boşluk. |
| $spacing-lg | 24px | Bir bileşenin içindeki veya birbiriyle yakından ilişkili öğeler arasındaki boşluk. |
| $spacing-xl | 32px | Bir bileşenin içindeki veya birbiriyle yakından ilişkili öğeler arasındaki boşluk. |
| $spacing-2xl | 48px | Bir bileşenin içindeki veya birbiriyle yakından ilişkili öğeler arasındaki boşluk. |
### Geniş ölçekli yerleşim ritmi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $layout-2xs | 16px | Editoryal bölümler arasında daha geniş boşluklar kullanın; bunlar bileşen aralıklarından farklıdır. |
| $layout-xs | 24px | Editoryal bölümler arasında daha geniş boşluklar kullanın; bunlar bileşen aralıklarından farklıdır. |
| $layout-sm | 32px | Editoryal bölümler arasında daha geniş boşluklar kullanın; bunlar bileşen aralıklarından farklıdır. |
| $layout-md | 48px | Editoryal bölümler arasında daha geniş boşluklar kullanın; bunlar bileşen aralıklarından farklıdır. |
| $layout-lg | 64px | Editoryal bölümler arasında daha geniş boşluklar kullanın; bunlar bileşen aralıklarından farklıdır. |
| $layout-xl | 96px | Editoryal bölümler arasında daha geniş boşluklar kullanın; bunlar bileşen aralıklarından farklıdır. |
| $layout-2xl | 192px | Editoryal bölümler arasında daha geniş boşluklar kullanın; bunlar bileşen aralıklarından farklıdır. |
### İçerik genişlikleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $content-xs | 304px | Her metin bloğunu en geniş kapsayıcıya yaymak yerine, gerçek içerik için okunabilir bir maksimum genişlik belirleyin. |
| $content-sm | 432px | Her metin bloğunu en geniş kapsayıcıya yaymak yerine, gerçek içerik için okunabilir bir maksimum genişlik belirleyin. |
| $content-md | 688px | Her metin bloğunu en geniş kapsayıcıya yaymak yerine, gerçek içerik için okunabilir bir maksimum genişlik belirleyin. |
| $content-lg | 928px | Her metin bloğunu en geniş kapsayıcıya yaymak yerine, gerçek içerik için okunabilir bir maksimum genişlik belirleyin. |
| $content-xl | 1152px | Her metin bloğunu en geniş kapsayıcıya yaymak yerine, gerçek içerik için okunabilir bir maksimum genişlik belirleyin. |
| $content-max | 1440px | Her metin bloğunu en geniş kapsayıcıya yaymak yerine, gerçek içerik için okunabilir bir maksimum genişlik belirleyin. |
### Ekran kırılma noktaları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $screen-xs | 320px | Yayımlanmış görünüm alanı adımları. Bileşen karışımları seçili adımlarda uyarlanabilir. |
| $screen-sm | 480px | Yayımlanmış görünüm alanı adımları. Bileşen karışımları seçili adımlarda uyarlanabilir. |
| $screen-md | 768px | Yayımlanmış görünüm alanı adımları. Bileşen karışımları seçili adımlarda uyarlanabilir. |
| $screen-lg | 1024px | Yayımlanmış görünüm alanı adımları. Bileşen karışımları seçili adımlarda uyarlanabilir. |
| $screen-xl | 1312px | Yayımlanmış görünüm alanı adımları. Bileşen karışımları seçili adımlarda uyarlanabilir. |
### Köşe yarıçapı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $border-radius-xs | 2px | Bileşene uygun köşe yarıçapını kullanın; özgün illüstrasyonu arayüz şekillerinden ayrı tutun. |
| $border-radius-sm | 4px | Bileşene uygun köşe yarıçapını kullanın; özgün illüstrasyonu arayüz şekillerinden ayrı tutun. |
| $border-radius-md | 8px | Bileşene uygun köşe yarıçapını kullanın; özgün illüstrasyonu arayüz şekillerinden ayrı tutun. |
| $border-radius-lg | 16px | Bileşene uygun köşe yarıçapını kullanın; özgün illüstrasyonu arayüz şekillerinden ayrı tutun. |
### Tipografi yardımcı sınıfları ve tema seçimi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $brand-theme: mozilla | Mozilla Headline + Mozilla Text | Mozilla temalı editoryal içerik; önizleme yazı tiplerini resmî paketten yükler. |
| $brand-theme: firefox | Metropolis + Inter | Firefox temalı tipografi ayrı bir marka tercihidir. |
| mzp-u-title-lg | Responsive title utility | Ana editoryal başlıkta kullanın; görsel boyutundan başlık anlamı çıkarmayın. |
| mzp-u-title-xs | Small title utility | Destekleyici iki bölümde bu sınıf, anlamsal h2 öğelerinde kullanılır. |
| mzp-u-title-2xs | Compact title utility | Kısa makalede bu sınıf h3 öğesinde kullanılır. |
| Comfortable / Compact sample | 16px / 1.6 and 14px / 1.4 | İki resmî Protocol temasından biri değil, özgün bir okuma tercihi. |
## Mozilla Protocol Tasarım Sistemi Eksiksiz Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Mozilla Protocol Tasarım Sistemi Editoryal Düzeni

### Okunabilir bir editoryal hiyerarşiyle başlayın

> Protocol, destekleyici arayüzlerin yanı sıra yayın ve pazarlama sayfalarında da kullanılır. Örnek, büyük bir başlık ve özgün dairesel bir illüstrasyonla açılır; ardından bir makale önizlemesine ve özet bülten formuna geçer. Bu düzen, okuyucudan kontrolleri kullanmasını istemeden önce mesaja alan tanır. Yoğun bir yönetim panelinden farklıdır.

### Marka temasını uygulama fikrinden ayrı tutun

Örnekte mzp-t-mozilla ve Protocol’ün yerel tipografisi kullanılır. Makale, illüstrasyon ve okuma yoğunluğu tercihi uygulamaya özgü içeriklerdir. Yerel sınıf adları ve yazı tipi dosyaları, bunu resmî bir Mozilla hizmeti hâline getirmez. Alt bilgi kapsamı açıklar; özet bülten eylemi ise yalnızca bir onay mesajını önizler.

## Mozilla Protocol Tasarım Sistemi Yazı Tipleri ve Başlık Yardımcıları

### Markaya özgü yazı tipi çiftini seçin

Protocol 22, Mozilla için Mozilla Headline ve Mozilla Text yazı tipi yığınlarını; Firefox içinse Metropolis ve Inter yazı tiplerini sunar. Örnekte, paketle birlikte sağlanan yazı tipleri yüklenir. Başlık ve gövde rollerini ayrı tutun: Her paragrafta ekran yazı karakteri kullanmak, editoryal hiyerarşiyi işlevsel kılan karşıtlığı ortadan kaldırır.

### Başlıkların anlamsal yapısını görsel boyutlarından bağımsız tutun

Hero alanındaki başlık, mzp-u-title-lg sınıfını kullanan bir h1’dir. Destekleyici bölümlerde mzp-u-title-xs sınıfını kullanan h2, makale başlığında ise mzp-u-title-2xs sınıfını kullanan h3 bulunur. Duyarlı yardımcı sınıflar, bu sıralamayı değiştirmeden görsel boyutu değiştirebilir. Okuma yoğunluğu kontrolü yalnızca örnek paragrafları değiştirir; sayfanın tamamını veya kontrolleri yeniden boyutlandırmaz.

- h1 sayfayı tanıtır.

- h2, okuma önizlemesiyle formu birbirinden ayırır.

- h3, makale alıntısına başlık verir.

## Mozilla Protocol Tasarım Sistemi Renk ve İllüstrasyon

### İllüstrasyonu editoryal içerik olarak kullanın

Dairesel degradeli görsel, kısa ve erişilebilir bir açıklamayla sunulan özgün bir CSS çalışmasıdır. Sıcaktan mora uzanan renk geçişi, yeni ve resmî bir Mozilla logosu ya da Protocol tarafından sunulan bir belirteç olarak tanıtılmaz. Sayfanın geri kalanında, illüstrasyonun ve birincil eylemin rolünü belirginleştiren ölçülü, nötr yüzeyler kullanılır.

### Form durumlarının anlamını ayrı ayrı belirtin

Yerel e-posta hatası, yazılı bir açıklama ve belirgin bir geçersiz alan kenarlığıyla gösterilir. Başarı durumu, girilen örnek adresi içeren ve e-posta gönderilmediğini belirten ayrı bir onay bloğunda görünür. Renkli bir hero görseli hata durumuyla yarışmamalı veya formun başarılı olup olmadığını belirsizleştirmemelidir.

## Mozilla Protocol Tasarım Sistemi Bileşen ve Yerleşim Aralıkları

### İki aralık ölçeğini amacına uygun kullanın

Yayımlanmış bileşen aralığı adımları 4, 8, 16, 24, 32 ve 48px’tir. Ayrı bir yerleşim ölçeği ise 64, 96 ve 192px’e kadar uzanır. Formların ve kartların içinde daha küçük ölçeği, editoryal bölümler arasındaki ritim içinse daha büyük ölçeği kullanın. Her küçük aralığı yerleşim ölçeğindeki değerlere çıkarmak, etiketle alan arasındaki ilişkiyi zayıflatır.

### Daha fazla sütun eklemeden önce satır uzunluğunu sınırlayın

Protocol, 304px’ten 1440px’lik üst sınıra kadar içerik genişlikleri sunar. Örnekte, alan elverdiğinde iki sütuna ayrılan 1152px’lik editoryal bir kapsayıcı kullanılır. Uygulamanın kırılma noktasının altında makale ve form alt alta dizilir. Başlık, makale ve formun her biri, sınırsızca uzamak yerine okunabilir genişliğini korur.

## Mozilla Protocol Tasarım Sistemi Düğmeler, Ayrıntılar ve Form

### Formun gerçek yapısını koruyun

Özet bülten örneği; görünür bir etiketi, e-posta alanı, açıklama notu, hata metni ve gönder düğmesi olan yerel bir formdur. Bileşenleri Protocol biçimlendirir; yerel sonucu doğrulama ve bildirme işini uygulama yapar. Hero eyleminde sayfa içindeki bir bölüme gittiği için bağlantı, gönderim işleminde ise düğme kullanılır.

### Destekleyici açıklamalar için basit bir açılır bölüm kullanın

“Ne değişiyor?” açılır bölümü, yerel bir details/summary ikilisidir. Ana makale akışını bölmeden özel rahat ve kompakt paragraf değerlerini açıklar. Bu, sahte bir gezinme sekmesi veya gizli bir ön koşul değildir; açılır bölüm açık ya da kapalı olsa da form ve yoğunluk kontrolleri kullanılabilir.

## Mozilla Protocol Tasarım Sistemi Okuma ve Doğrulama Durumları

### Her seferinde tek bir okuma tercihini değiştirin

İki yoğunluk düğmesi etiketli bir grup oluşturur ve aria-pressed niteliğini sunar. “Kompakt” seçildiğinde yalnızca makaledeki paragrafların yazı tipi boyutu, satır yüksekliği ve alt boşluğu değişir. Metin, başlık ve form alanı yerinde kalır. Örnek, bu tercihi Mozilla ve Firefox marka temaları arasında geçiş yapmaktan özellikle ayrı tutar.

### Yerel formun hatadan kurtarma davranışını öngörülebilir kılın

Geçersiz bir adres girildiğinde hata görünür ve odak giriş alanına geçer. Alan düzenlendiğinde eski hata temizlenir ve önceki onay mesajı gizlenir. Geçerli bir adres girildiğinde yerel olarak oluşturulan sonuç gösterilir ve odak bu sonuca geçer. “Başka bir adres dene” formu temizler, geçersiz durumunu kaldırır ve odağı giriş alanına geri getirir; eşzamansız bir abonelik işlemi olduğu ima edilmez.

1. Boş veya hatalı biçimlenmiş bir adres gönderip alan hata mesajını okuyun.

2. Bir örnek adres girip yerel onay mesajını önizleyin.

3. Formu sıfırlamak ve odağı giriş alanına geri getirmek için “Başka bir adres dene”yi kullanın.

## Mozilla Protocol Tasarım Sistemi Erişilebilir Editoryal Kontroller

### Görsele ve kontrollere farklı roller verin

İllüstrasyon, kısa alternatif metne sahip bir görsel öğesidir. Yoğunluk düğmeleri, açılır bölüm ve gönderme eylemi gerçek kontrollerdir. E-posta alanı, aria-describedby aracılığıyla hem nota hem de hataya bağlanır. Klavyeyle kullanımı desteklemek için yerel stillere görünür bir odak çerçevesi eklenir.

### Yerleşim alt alta dizildiğinde de sıralamayı anlamlı tutun

Belge sıralaması başlık, okuma önizlemesi, açıklama ve form şeklindedir. Mobilde de aynı sıralama korunur; CSS formu bağlamından önceye taşımaz. Mobilde 180px boyutundaki illüstrasyon, sayfanın yatay kaymasına neden olan sabit genişlikli bir engel değil, editoryal içeriği destekleyen bir öğedir.

## Mozilla Protocol Tasarım Sistemi CSS Entegrasyonu

### Yayımlanmış varlıkları örnekle birlikte derleyin

Sağlanan giriş dosyası, derlenmiş bir temayı, protocol.css ve protocol-components.css dosyalarını, ardından da uygulama stil dosyasını içe aktarır. Protocol 22, tema özel özelliklerinin :root üzerinde tanımlanmasını gerektirir; yalnızca eski bir marka sınıfı eklemek tipografiyi tanımlamaz. Vite’ı başlatmadan önce protocol-theme.scss dosyasını derleyin. Modül uyumlu bir paketleyici, yazı tipi ve görsel URL’lerini izler. Aşağıdaki HTML, JavaScript ve CSS blokları örneğin tüm kaynak kodunu içerir; gizli bir bülten arka ucu veya pakete özgü bir durum sağlayıcısı yoktur.

### Formu yalnızca gerçek bir abonelik hizmeti varsa genişletin

Üretim ortamında yerel sonucu doğrulanmış bir istekle değiştirin; hizmetinize uygun izin, bekleme, yinelenen abonelik ve sunucu hatası davranışlarını tanımlayın. Protocol’ün sunumunu bu uygulama gereksinimlerinden ayrı tutun. E-postanın sözdizimi denetiminden geçmesi, yerel onay mesajını başarılı abonelik olarak adlandırmak için yeterli değildir.

## Mozilla Protocol Tasarım Sistemi Bileşen Örnekleri

### index.html — eksiksiz editoryal sayfa

Anlamsal makale, yoğunluk kontrolleri, açılır bölüm ve özgün bir CSS illüstrasyon içeren yerel özet bülten formu.

```
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading specimen</title></head>
<body>
<main class="reading-example mzp-t-mozilla">
  <header class="reading-top">
    <strong>MOZILLA PROTOCOL · EDITORIAL SPECIMEN</strong
    ><span>Original example by OpenDesign</span>
  </header>
  <section class="reading-hero">
    <div>
      <h1 class="mzp-u-title-lg">A little more room to read.</h1>
      <p>
        Make space for useful ideas, quieter pages, and a reading rhythm that
        feels like yours.
      </p>
      <a class="mzp-c-button" href="#reading-controls"
        >Explore the reading preview</a
      >
    </div>
    <div
      class="orb"
      role="img"
      aria-label="Original warm-to-purple circular illustration"
    ></div>
  </section>
  <div class="reading-main">
    <section id="reading-controls">
      <h2 class="mzp-u-title-xs">Choose your reading rhythm</h2>
      <p>
        Compare two application-defined densities using the same short article.
      </p>
      <div class="density-options" role="group" aria-label="Reading density">
        <button
          class="mzp-c-button mzp-t-secondary"
          data-density="comfortable"
          aria-pressed="true"
        >
          Comfortable</button
        ><button
          class="mzp-c-button mzp-t-secondary"
          data-density="compact"
          aria-pressed="false"
        >
          Compact
        </button>
      </div>
      <article id="article-sample">
        <h3 class="mzp-u-title-2xs">The open page</h3>
        <p>
          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.
        </p>
        <p>
          Changing density should preserve the story. This preview adjusts
          paragraph size and spacing without replacing the article or changing
          your place in the task.
        </p>
      </article>
      <details>
        <summary>What changes in this example?</summary>
        <p>
          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.
        </p>
      </details>
    </section>
    <aside class="signup">
      <h2 class="mzp-u-title-xs">Preview a reading digest</h2>
      <p>
        Try the form styling and local validation. No subscription is created.
      </p>
      <form id="reading-form" novalidate>
        <label for="email">Email address</label
        ><input
          id="email"
          type="email"
          autocomplete="email"
          aria-describedby="email-note email-error"
        />
        <p class="note" id="email-note">
          Use an example address. Nothing will be sent.
        </p>
        <p id="email-error" class="error" role="alert" hidden>
          Enter an email address, such as reader@example.com.
        </p>
        <button class="mzp-c-button" type="submit">Preview confirmation</button>
      </form>
      <div id="confirmation" tabindex="-1" role="status" hidden>
        Local preview confirmed for <strong></strong>. No email was sent.<button
          id="reset"
          class="mzp-c-button mzp-t-secondary"
          type="button"
        >
          Try another address
        </button>
      </div>
    </aside>
  </div>
  <footer class="reading-footer">
    Native Mozilla Protocol 22.0.0 CSS and fonts. Original illustration, copy
    and JavaScript; not an official Mozilla service.
  </footer>
</main>
<script type="module" src="/src/main.js"></script>
</body></html>
```

Kod referansı

- Proje kök dizinine index.html adıyla kaydedin. Sonraki iki blok src/main.js ve src/protocol.css dosyalarıdır.

### main.js — yerel varlıklar ve davranış

Veri göndermeden yoğunluk seçimini, doğrulamayı, odağı ve sıfırlamayı uygular; resmî stil dosyalarını içe aktarır.

```
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");
  }),
);
```

Kod referansı

- Bu davranış uygulamaya özgü bir JavaScript örneğidir; Protocol’ün bülten hizmeti değildir.

### protocol.css — özgün düzen

Duyarlı sayfa düzeni, okuma tercihleri ve özgün dairesel illüstrasyon.

```
[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;
  }
}
```

Kod referansı

- Uygulamanın yoğunluk ve yerleşim tercihleri, yayımlanmış Sass belirteçlerinden ayrı olarak tanımlanmıştır.

### protocol-theme.scss — gerekli Mozilla kök teması

Uygulamayı başlatmadan önce bunu src/protocol-theme.css dosyasına derleyin.

```
@use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla');
@use '@mozilla-protocol/core/protocol/css/includes/themes';
```

Kod referansı

- Markayı Sass yapılandırması seçer; bu, çalışma zamanında sınıf değiştirme yöntemi değildir.

## Mozilla Protocol Tasarım Sistemi Ajan Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel önizleme için yerel CSS/fonts ve özgün betik pakete eklendi. Vite sürümünüzün desteklediği bir Node.js sürümü kullanın. Derlemeyi yeniden dağıtırken paket lisansını ve varlık atıflarını koruyun.

```
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
```

### Projeniz İçin Bir İstem

```
Mozilla Protocol 22.0.0 ile editoryal bir sayfa oluşturun. Yazı tipleri, aralıklar ve kapsayıcılara ilişkin gerçek referansları inceleyin. Sağlanan eksiksiz HTML/CSS/JS düzenlemesini başlangıç noktası olarak kullanın; anlamsal başlıkları ve görünür form etiketlerini koruyun; özgün illüstrasyon ve yoğunluk tercihlerini resmî belirteçlerden ayırın. Yerel doğrulamanın ne yaptığını doğru biçimde belirtin; gerçek abonelik entegrasyonunu ancak hizmetin gereksinimleri ve izin koşulları tanımlandıktan sonra ekleyin.
```

## Mozilla Protocol Tasarım Sistemi Kaynakları ve Kapsamı

Mozilla Protocol 22.0.0 sürümüne yönelik OpenDesign uygulama kılavuzu. Örnekte yayımlanmış CSS ve paketlenmiş yazı tipleri; özgün metin, illüstrasyon ve yerel form davranışıyla birlikte kullanılır. Bu, bir Mozilla ürünü, bülteni veya abonelik hizmeti değildir; marka ve varlık hakları ilgili sahiplerine aittir.

- Protocol Tipografisi Markaya özgü yazı tipi çiftleri ve başlık yardımcı sınıfları.

- Yayımlanmış Belirteç Dışa Aktarımı Aralıklar, yerleşim, içerik genişlikleri ve yazı tipi yığınları.

- Protocol CSS Kullanımı Stil dosyası entegrasyonu.

- Protocol Kaynak Kodu Uygulama, varlıklar ve MPL lisanslama.

## Mozilla Protocol Tasarım Sistemi İlgili Kaynaklar

### Nord tasarım sistemi

Bir oda talebi taslağı üzerinden Nord’un Therapy tema belirteçlerini ve Web Component sözleşmelerini inceleyin: gerçek renk rolleri, duyarlı alan boyutları, açık doğrulama ve yerel olarak hazırlanan sonuçlar.

### Oracle Redwood

Eksiksiz ve özgün, düzenlenebilir bir stok inceleme çalışma sayfası üzerinden Oracle JET 19 Redwood’un gerçek paletini, anlamsal rollerini, aralıklarını ve yoğunluk sınırlarını inceleyin.

### Orange OUDS Web

Eksiksiz ve duyarlı bir karşılaştırma incelemesi üzerinden Orange OUDS 1.4’ün gerçek anlamsal belirteçlerini, tema paketlerini ve yerel Offcanvas davranışını inceleyin.


- [Uygulama başvurusu](https://protocol.mozilla.org/docs/usage/framework)
- [Kaynak](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json)
- [Kaynak](https://protocol.mozilla.org/docs/fundamentals/typography)
- [Kod referansı](https://protocol.mozilla.org/components/detail/example-form)
- [Kod referansı](https://protocol.mozilla.org/docs/usage/framework)
- [Kod referansı](https://protocol.mozilla.org/docs/fundamentals/design-tokens)
- [Protocol Tipografisi Markaya özgü yazı tipi çiftleri ve başlık yardımcı sınıfları.](https://protocol.mozilla.org/docs/fundamentals/typography)
- [Yayımlanmış Belirteç Dışa Aktarımı Aralıklar, yerleşim, içerik genişlikleri ve yazı tipi yığınları.](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json)
- [Protocol CSS Kullanımı Stil dosyası entegrasyonu.](https://protocol.mozilla.org/docs/usage/framework)
- [Protocol Kaynak Kodu Uygulama, varlıklar ve MPL lisanslama.](https://github.com/mozilla/protocol)