# Typografie- & Brand-Regelwerk

> Quelle: das ratifizierte ZZ Typography System (CI Guide v1, `discord.zabazingo.eu/typography.html`). Diese Seite rendert die Regeln mit den **echten** ZABAZINGO-Schriften (lokal ausgeliefert, keine CDN-Substitute). Body min. 16px. Wortmarken einfarbig — Akzent läuft ausschließlich über Gewicht, nie über Farbe.

## Zwei Stimmen, scharfe Rollen

**Display trägt die Brand-Stimme** — Headlines, Wortmarken, Heros.
**Sans trägt den Body** — UI, Text, Editorial. Es gibt keine dritte Schrift im System.

| | Display · Serif | Sans · Neo-Grotesque |
|---|---|---|
| Schrift | Noto Serif Display ExtraCondensed | PP Neue Montreal |
| Cuts | ExtraLight 200 · Regular 400 · Bold 700 | Light 300 · Regular 400 · Semibold 600 · Bold 700 |
| Einsatz | Headlines, Wortmarken, Brand-Elemente | UI, Body, Editorial, Captions, Buttons, Labels |
| Tracking | −0.05em (default) | −0.015em (Headlines) · 0 (Body) · +0.14em (Caps-Labels) |
| Leading | 1.05 (display) · 1.02 (extreme tight) | 1.2 (Headlines) · 1.5–1.65 (Body) |
| Case | siehe Wortmark-Regeln | Headlines lowercase · UPPERCASE nur in Labels |
| Min. Größe | 22px — darunter Sans verwenden | — |

## Der Slogan — eine Regel, keine Ausnahme

Der Brand-Slogan ist **kein** Headline und folgt **nicht** der Display-Cap-Akzent-Regel. Er hat seine eigene Setting: Mantel ExtraLight 200, Akzent **«given.»** und **«chosen.»** in Bold 700. Sentence Case (R, I groß **ohne** Weight-Akzent). Tracking −0.05em, Leading 1.02. Apostroph typografisch ’ (U+2019). Der Slogan steht **immer alleine** — 2 oder 3 Zeilen, nie 1, nie 4+.

<div style="font-family:var(--sans);text-transform:none;font-weight:200;font-size:clamp(2rem,6vw,4.5rem);line-height:1.02;letter-spacing:-0.05em;color:var(--ink);margin:2rem 0;padding:2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)">Reality isn’t <b style="font-weight:700">given.</b><br>It’s <b style="font-weight:700">chosen.</b></div>

**Verboten** (Auswahl aus §04 Don’ts): Cap-Akzent auf R + I · Title Case · All Caps · komplett Bold · Italic (Noto Serif Display hat keinen Italic-Cut — Italic ist im ZZ-System nur PP Neue Montreal vorbehalten) · zweifarbig · Random-Weight-Mix · falsche Apostrophe (´ Akut oder gerade ' sind falsch).

## Wortmarken (Brand Elements)

Jedes Brand-Element hat **exakt eine** Setting. Nicht improvisieren, nicht über andere Weights skalieren. Brand-Name immer UPPERCASE — niemals lowercase, niemals Mixed-Case, niemals nur eine Hälfte. Mantel = ExtraLight 200, Akzent (Z · & · Z) = Bold 700, einfarbig.

<div style="display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-end;margin:2rem 0;padding:2rem;background:var(--bg-2);border:1px solid var(--line);border-radius:14px">
  <div>
    <div style="font-family:var(--serif);text-transform:uppercase;font-weight:200;font-size:3.4rem;line-height:1;letter-spacing:-0.044em;color:var(--ink)"><b style="font-weight:700">Z</b>ABA&nbsp;<b style="font-weight:700">&amp;</b>&nbsp;<b style="font-weight:700">Z</b>INGO</div>
    <div style="font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-top:.6rem">01 · mit Ampersand · −44</div>
  </div>
  <div>
    <div style="font-family:var(--serif);text-transform:uppercase;font-weight:200;font-size:3.4rem;line-height:1;letter-spacing:-0.044em;color:var(--ink)"><b style="font-weight:700">Z</b>ABA&nbsp;<b style="font-weight:700">Z</b>INGO</div>
    <div style="font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-top:.6rem">02 · kompakt · −44</div>
  </div>
  <div>
    <div style="font-family:var(--serif);text-transform:uppercase;font-weight:700;font-size:3.4rem;line-height:1;letter-spacing:-0.2em;color:var(--ink)">ZZ</div>
    <div style="font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-top:.6rem">04 · Monogram · −200</div>
  </div>
</div>

## DBE / GFYS-Familie

Alle vier Varianten sind **dieselbe** Schrift (Display Serif). Der Unterschied liegt nur in **Weight + Case**: Caps + Bold = laut, lowercase + ExtraLight = leise.

| Mark | Weight | Case | Bedeutung / Einsatz |
|---|---|---|---|
| **DBE** | Regular 400 | UPPERCASE | Akronym "Don’t Believe Everything" · Sub-Brand-Labels, Tags, Footer |
| **dbe** | ExtraLight 200 | lowercase | leiseste Form · Editorial / Captions / Body-Mentions |
| **GFYS** | Bold 700 | UPPERCASE | lautester Zustand · Statement-Walls, Merch, Single-Word-Heros |
| **gfys** | ExtraLight 200 | lowercase | Editorial-Annotation, Inline-Reference |

Tracking durchgehend −0.05em, Leading 1.0. Niemals in einer anderen Schrift.

## Display Type-Scale (H1 → H4)

Display Serif folgt der Brand-Regel: ExtraLight 200 als Mantel, der erste Buchstabe jedes groß geschriebenen Wortes Regular 400 (Cap-Akzent). Tracking einheitlich −0.05em, Leading 1.05. Display stoppt bei **H4 (40px)** — kleiner wird Extra-Condensed unleserlich, ab H5 übernimmt PP Neue Montreal.

<div style="margin:2rem 0;display:flex;flex-direction:column;gap:1rem">
  <div style="font-family:var(--sans);font-weight:200;font-size:4rem;line-height:1.05;letter-spacing:-0.05em;color:var(--ink)"><span style="font-weight:400">T</span>he <span style="font-weight:400">S</span>ignal <span style="font-weight:400">N</span>oise <span style="font-weight:400">R</span>atio</div>
  <div style="font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim)">H1 · 96px · lh 1.05 · ls −0.05em</div>
  <div style="font-family:var(--sans);font-weight:200;font-size:2.6rem;line-height:1.05;letter-spacing:-0.05em;color:var(--ink)"><span style="font-weight:400">M</span>ore signal, less noise</div>
  <div style="font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim)">H3 · 54px · lh 1.05 · ls −0.05em</div>
</div>

## Sans Type-Scale (H1 → Caption)

PP Neue Montreal trägt die UI-Hierarchie und übernimmt unterhalb H4. Tracking einheitlich −0.015em, Leading 1.2 über alle Headline-Größen, Body 1.5–1.65. **Lowercase** in allen Sans-Headlines, kein Cap-Akzent. UPPERCASE nur für Labels (+0.14em).

| Stufe | Cut | Größe / Setting | Beispiel |
|---|---|---|---|
| H1 Sans | Light 300 | 72px · lh 1.2 · lowercase | reality is built by those who refuse it. |
| H4 Sans | Light 300 | 30px · lh 1.2 · lowercase | promo headline / card title |
| H6 Sans | Regular 400 | 18px · lh 1.3 · lowercase | ui sub-header |
| Body L | Light 300 | 16px · lh 1.6 | Default Body — Mindestgröße im Web, sobald Inhalt kein UI ist. |
| Body S | Light 300 | 13px · lh 1.5 | Captions, Metadaten, Footnotes — sparsam. |
| Caption | Regular 400 caps | 11px · lh 1.4 · ls +140 | EYEBROW · LABEL · KATEGORIE · TAG |

## Palette

| Token | Wert | Rolle |
|---|---|---|
| `--bg` (dark) | `#22201f` | warm-dunkler Hintergrund |
| `--bg` (light) | `#fffada` | creme Hintergrund |
| `--ink` | `#22201f` / `#f3eee4` | Text |
| `--accent` / Terra | `#A53A2A` | einziger Akzent (CTA, Live, Links) |

> Diese Doku selbst ist in der ZABAZINGO CI gesetzt: Display = Noto Serif Display ExtraCondensed, Sans = PP Neue Montreal, Akzent = Terra #A53A2A. Theme-Toggle oben rechts (dunkel ↔ creme).