# moviefriends Designsystem · Stil A „Kinosaal“

> Vollständige Designregeln von moviefriends als Markdown – für Menschen und für KI-Agenten (LLMs).
> Online: https://brand.moviefriends.app/design-system.md · Tokens: https://brand.moviefriends.app/tokens.json · Index: https://brand.moviefriends.app/llms.txt
> Quelle im Repository: `packages/design-tokens/design-system.md` (Regeln) und `packages/design-tokens/tokens.json` (Werte, W3C Design Tokens). Die Tabellen im Abschnitt „Tokens“ werden aus `tokens.json` generiert.

moviefriends (moviefriends.app) ist ein Online-Filmstudio: Freunde und Familie verschenken gemeinsam einen KI-Kurzfilm, in dem ihre Liebsten die Hauptrolle spielen. Der KI-Produzent **Leo Lux** führt die Crew durch Drehbuch, Casting, Storyboard und Dreh bis zur Premiere. Gestaltung: **Stil A „Kinosaal“** – ein dunkler Kinosaal, Kinogold nur für Licht und Handlung.

## Kurzfassung – harte Regeln

1. **Name:** immer `moviefriends` – ein Wort, klein geschrieben, auch am Satzanfang und in Überschriften. Nie „MovieFriends“, „Moviefriends“, „MOVIEFRIENDS“ oder „movie friends“.
2. **Wortmarke:** „movie“ in Elfenbein `#F3ECE2`, „friends“ in Kinogold `#F0B24A`, Schrift Big Shoulders 800, Laufweite 0,01 em, **nie** `text-transform: uppercase`. Auf hellem Grund: „movie“ `#2A2118`, „friends“ `#A86A10`.
3. **Zusatz** (z. B. „HQ“, „Brand“): Instrument Sans 600, Versalien, Laufweite 0,14 em, Elfenbein `#F3ECE2`, halbe Schriftgröße der Wortmarke (mindestens 12 px), Abstand ⅓ der Wortmarken-Schriftgröße. Nie in Gold, nie in Big Shoulders.
4. **Tagline:** „Dein Film. Deine Freunde.“
5. **Hintergrund** ist Nachtschwarz `#0F0D0B`. Karten `#1A1714`, erhöhte Flächen `#241F1A`, Rahmen `#3A322A`.
6. **Kinogold** `#F0B24A` nur für Licht und Handlung: Hauptbutton, Links, aktive Zustände, Fokusring, Filmrollen, „friends“. Höchstens ein goldener Hauptbutton pro Ansicht. Text auf Gold immer `#1C1405`.
7. **Schriften:** Überschriften und große Zahlen in Big Shoulders (800, Versalien), Text und UI in Instrument Sans (400–700). Selbst gehostet – keine Requests an Google Fonts.
8. **Barrierefreiheit:** Text mindestens WCAG AA (4,5 : 1), sichtbarer Fokusring 2 px Kinogold, Klickflächen mindestens 44 × 44 px, Farbe nie allein (Ampel immer mit Text: „● Grün“), alles per Tastatur bedienbar, ab 390 px Breite ohne horizontales Scrollen.
9. **Sprache:** Deutsch, warm, filmisch, klar. Die App duzt („Wie gefällt dir Kapitel 3?“), die Crew heißt „ihr“. Studio-Wörter statt Technik-Wörter.
10. **KI-Bilder** immer kennzeichnen; keine Franchise-Namen, Logos, Figuren oder Originalmusik.

## Marke

| | |
|---|---|
| Name | moviefriends (klein, ein Wort) |
| Domain | moviefriends.app |
| Tagline | Dein Film. Deine Freunde. |
| Versprechen | Euer eigener Kinofilm – gemeinsam verschenkt, mit euren Liebsten in der Hauptrolle |
| Persona | Leo Lux, der KI-Produzent – warm, humorvoll, erfahren, offen als KI erkennbar |
| Stil | A „Kinosaal“: dunkel, filmisch, warmes Licht, Kinogold als Scheinwerfer |

### Tonalität

- **Deutsch, warm, filmisch, klar.** Kurze Sätze, konkrete Zahlen, Preise vorher nennen („ca. 0,50 €“).
- **Ansprache:** Die App duzt die einzelne Person („Wie gefällt dir Kapitel 3?“) und spricht die Crew mit „ihr“ an („Ihr seid euch einig …“); die Website spricht die Schenkenden mit „ihr“ an.
- **Studio-Wörter statt Technik-Wörter:** Muster, Take, Rohschnitt, Feinschnitt, Grünes Licht, Premiere, Filmrollen (Bewertung mit 1–5 Filmrollen: „1 Filmrolle“, „4 Filmrollen“).
- **Fehler** freundlich und lösungsorientiert: „Bei Lisa fehlen noch drei Profilfotos – dann ist sie auch grün.“
- Humor ja, Ironie über Nutzer nein.

| Kontext | Beispiel |
|---|---|
| Warteliste | „Klappe, die Erste.“ |
| Lobby | „Willkommen zurück im Studio, Anna.“ |
| Budget | „Budget freigeben & loslegen“ |
| Gespräch | „Erzähl einfach drauflos …“ |
| Casting | „GRÜN · Bereit für den Dreh“ |
| Storyboard | „Grünes Licht ab 4 Filmrollen in jedem Kapitel“ |
| Website | „Ihr legt zusammen. Ihr dreht zusammen. Und am Ende staunen alle.“ |
| Fehler | „Bitte gib eine gültige E-Mail-Adresse ein, zum Beispiel name@beispiel.de.“ |

## Logo

### Bestandteile

- **Bildmarke „Filmstern“:** goldener Stern mit Filmstreifen-Schweif. Der Stern steht für den Star des Films, der Filmstreifen fürs Kino. SVG `viewBox="0 0 64 50"`.
- **Wortmarke:** „movie“ + „friends“ in Big Shoulders 800, klein geschrieben.
- **Horizontales Logo:** Bildmarke links, Wortmarke rechts, vertikal zentriert.

### Varianten und Dateien

| Variante | Datei | Einsatz |
|---|---|---|
| Horizontal, dunkler Grund | `logo-horizontal-dark.svg`, `logo-horizontal-dark@2x.png` | Kopfzeilen, Präsentationen, Social Media |
| Horizontal, heller Grund | `logo-horizontal-light.svg`, `logo-horizontal-light@2x.png` | Dokumente, Briefpapier, Druck |
| Bildmarke, dunkler Grund | `logo-mark.svg` | große Flächen, Studio-Intro, Profilbilder |
| Bildmarke, heller Grund | `logo-mark-light.svg` | heller Grund |
| Bildmarke klein (ohne Perforation) | `logo-mark-small.svg` | 24–39 px, Footer, farbige Hintergründe |
| Favicon (nur Stern) | `favicon.svg`, `favicon-32.png`, `favicon-180.png` | Browser-Tab, Apple-Touch-Icon |
| App-Icon | `app-icon.svg`, `app-icon-1024.png`, `app-icon-512.png` | Homescreen, App Store, PWA |

Alle Dateien: https://brand.moviefriends.app/downloads (einzeln) oder als Paket https://brand.moviefriends.app/downloads/moviefriends-brand-kit.zip, Manifest mit Prüfsummen: https://brand.moviefriends.app/brand-kit.json.

### Farben des Logos

| Teil | Dunkler Grund | Heller Grund |
|---|---|---|
| Stern | `#F0B24A` | `#D8962A` |
| Schweif, „movie“ | `#F3ECE2` | `#2A2118` |
| Perforation | `#0F0D0B` (= Hintergrund) | `#F3ECE2` (= Hintergrund) |
| „friends“ | `#F0B24A` | `#A86A10` |

Die Perforation ist in der Hintergrundfarbe gezeichnet, nicht ausgestanzt. Auf anderen Hintergründen als `#0F0D0B` bzw. `#F3ECE2` die Variante ohne Perforation verwenden.

### Proportionen in der Benutzeroberfläche

- Breite der Bildmarke = **1,66 × Schriftgröße** der Wortmarke (Kopfzeile: 30 px Schrift → 50 px Bildmarke).
- Abstand Bildmarke ↔ Wortmarke = **⅓ der Schriftgröße** (Kopfzeile: 10 px).
- Die Logo-Dateien (`logo-horizontal-*.svg`) folgen dem Logo-Board A7: Wortmarke 150 px, 36 px Abstand.

### Schutzzone

Rund um das Logo bleibt auf allen Seiten mindestens **x = ½ Höhe der Bildmarke** frei – keine Texte, Kanten oder anderen Logos. Beim horizontalen Logo mit 50 px hoher Bildmarke also 25 px.

### Mindestgrößen

| Element | Mindestens |
|---|---|
| Bildmarke mit Perforation | 40 px Breite |
| Bildmarke ohne Perforation | 24 px Breite (darunter nur der Stern) |
| Stern allein (Favicon) | 16 px |
| Wortmarke | 16 px Schriftgröße |
| Horizontales Logo | 120 px Breite digital, 30 mm im Druck |

### Zusatz-Regel (Bereiche wie „HQ“)

Bereiche und Unterseiten der Marke (HQ, Brand, später z. B. Studio) zeigen **Filmstern + Wortmarke + Zusatz**. Der Zusatz steht rechts neben der Wortmarke auf ihrer Grundlinie: **Instrument Sans 600, Versalien, Laufweite 0,14 em, Elfenbein `#F3ECE2`, ½ der Wortmarken-Schriftgröße (mindestens 12 px), Abstand ⅓ der Wortmarken-Schriftgröße.** Gold bleibt „friends“ vorbehalten; eine zweite Schrift trennt den Zusatz klar vom Namen („moviefriends HQ“, nie „moviefriendsHQ“).

### Do

- Logo auf Nachtschwarz `#0F0D0B` oder Elfenbein `#F3ECE2` setzen.
- In Kopfzeilen das horizontale Logo, auf quadratischen Flächen die Bildmarke oder die gestapelte Variante (Bildmarke über der Wortmarke).
- Auf Fotos nur mit dunklem Overlay (`color.overlay.caption`) oder in einer ruhigen, dunklen Bildzone.
- Die Dateien aus dem Brand-Kit verwenden, nie nachbauen.

### Don't

- Die Wortmarke in Versalien („MOVIEFRIENDS“), mit großem Anfangsbuchstaben oder getrennt („movie friends“) setzen.
- Farben tauschen (z. B. „movie“ in Gold) oder andere Farben als die oben genannten verwenden.
- Eine andere Schrift für die Wortmarke verwenden.
- Logo verzerren, drehen, spiegeln, mit Schatten, Glühen, Kontur oder Verlauf versehen.
- Die Perforation auf farbigem Grund zeigen (die Löcher erscheinen dann als Punkte).
- Das Logo auf unruhige Bilder ohne Overlay oder zu nah an andere Elemente setzen (Schutzzone).

## Farben

Kinosaal-Prinzip: Flächen von dunkel nach hell (`bg` → `surface` → `surface-2`), Text von hell nach gedämpft (`fg` → `fg-soft` → `fg-2` → `fg-muted` → `fg-3`), **Gold nur für Licht und Handlung**. Status: Grün `ok`, Gelb `warn`, Rot `danger` – immer zusammen mit Text oder Symbol. Die helle Papierwelt (`paper.*`) gibt es nur für das Drehbuch als Buch. Alle Werte und Kontraste stehen unten im Abschnitt „Tokens“.

## Typografie

- **Big Shoulders** (600/700/800): Überschriften, große Zahlen („92 / 100“), Preise, Wortmarke. Überschriften in Versalien, Zeilenhöhe 0,95, `text-wrap: balance`.
- **Instrument Sans** (400/500/600/700): Fließtext, Navigation, Buttons, Formulare.
- **Grundschrift** 16 px in der App (Zeilenhöhe 1,5), 17 px auf der Website (1,6). Nie unter 12 px.
- **Versal-Labels** („Eyebrow“) 12 px, Instrument Sans 700, Laufweite 0,14 em, z. B. „02 · LÄUFT“.
- Zahlen in Tabellen und Preisen mit `font-variant-numeric: tabular-nums`.
- Fallbacks: „Arial Narrow“, „Roboto Condensed“ bzw. „Segoe UI“, system-ui. Schriften selbst hosten (Web: @fontsource; iOS: TTF im App-Bundle). Lizenz: SIL Open Font License 1.1.

## Abstände, Radien, Layout

- **4-px-Raster** (`space.*` = Tailwind-Standardskala). Innenabstand Karten 24–28 px, Abstand zwischen Abschnitten 56 px (App) bzw. 96 px (Website).
- **Seitenrand:** 16 px mobil, 32 px Desktop. Inhaltsbreite höchstens 1360 px (App) bzw. 1200 px (Website).
- **Radien eher knapp:** Buttons und Felder 6 px, Listen-Karten 8 px, Karten und Panels 10 px, Chips und Avatare rund (`pill`). Sprechblasen 14 px mit einer spitzen Ecke (4 px) zum Absender.
- **Tiefe** entsteht über Flächenfarben und 1-px-Rahmen (`line`), Schatten nur für schwebende Elemente (`shadow.lift`).
- Mobil ab **390 px** ohne horizontales Scrollen; Entwürfe für 1440 px Breite.

## Komponenten-Grundsätze

### Buttons

| Art | Aussehen | Einsatz |
|---|---|---|
| Hauptbutton | Fläche `gold`, Schrift `gold-ink` 16 px/700, Höhe 48–50 px, Radius 6 px, Hover `gold-button-hover` | die eine Hauptaktion der Ansicht („Budget freigeben & loslegen“) |
| Zweitbutton | Rahmen 1 px `gold`, Schrift `fg`, transparent, Hover `surface-2` | Alternativen („Beispielfilm ansehen“) |
| Leise Aktion | nur Text `fg-2`, Hover `fg` | Abbrechen, Zurück |
| Deaktiviert | Rahmen gestrichelt `line-disabled`, Schrift `fg-3`, `cursor: not-allowed`, Grund als Hinweis | „Folgt in einem späteren Schritt“ |

Beschriftung als Verb im Imperativ oder Ergebnis („Look freigeben“, „Lisa erinnern“). Mindestens 44 × 44 px Klickfläche. Ladezustand: Beschriftung bleibt, `cursor: progress`, `aria-busy`.

### Karten und Panels

Fläche `surface`, Rahmen 1 px `line`, Radius 10 px (Listen-Karten 8 px), Innenabstand 24–28 px. Aktive Karte: Rahmen 2 px `gold`; fertig/freigegeben: Rahmen 2 px `ok`; Platzhalter: Rahmen 1 px gestrichelt `line-strong`. Titel in Big Shoulders 700, 20 px, Versalien.

### Formulare

Feld: Höhe 48–50 px, Innenabstand 16 px, Radius 6 px, Rahmen 1 px `line`, Fläche `bg`, Schrift `fg` 16 px (verhindert Zoom auf iOS). Jedes Feld hat ein sichtbares Label (nicht nur Platzhalter). Fehler: Text in `danger` unter dem Feld, mit `aria-describedby` verbunden, konkret und freundlich („Bitte gib eine gültige E-Mail-Adresse ein, zum Beispiel name@beispiel.de.“). Pflichtfelder kennzeichnen.

### Fokus

Jedes bedienbare Element zeigt bei Tastaturbedienung einen Fokusring: `outline: 2px solid #F0B24A; outline-offset: 2px` (Website 3 px), über `:focus-visible`. Fokus nie entfernen, Reihenfolge folgt dem Lesefluss, „Zum Inhalt springen“-Link am Seitenanfang.

### Status, Ampel und Bewertung

- Ampel im Casting: **Grün** `ok`, **Gelb** `warn`, **Rot** `danger` – immer mit Text („● Grün“).
- Bewertung mit 1–5 **Filmrollen** in Gold; Zahl zusätzlich als Text.
- Chips: Radius `pill`, 12–14 px, Fläche `surface-2` oder Status-Fläche (`ok-surface`, `warn-surface`).

### Bewegung

Ruhig, wie ein Vorhang: Hover/Fokus 120 ms, Ein-/Ausblenden 200 ms, große Flächen 400 ms, Kurve `cubic-bezier(0.2, 0, 0, 1)`. Bei `prefers-reduced-motion: reduce` keine Animationen (Lauflicht steht).

## Bildsprache

- **Kinolicht, warm, filmisch:** Scheinwerfer, goldene Stunde, Kerzenlicht, tiefe Schwarztöne.
- **Menschen als Stars:** Porträts im Kostüm und Genre-Licht, Filmstills, Filmplakate.
- **Storyboard-Skizzen** sind erkennbar Skizzen (Bleistift, „Bilder in Entwurfsqualität“).
- **KI-Bilder kennzeichnen:** „Beispiel mit erfundenen Figuren. Alle Bilder sind KI-generiert.“ Echte Gesichter nur mit Einwilligung.
- **Alt-Texte** beschreiben das Bild konkret („Storyboard-Skizze: Werner hält den Jahrgang 1966 triumphierend hoch“).
- Keine Franchise-Figuren, Logos oder Nachahmungen bekannter Studio-Intros.

## Social Media

Formate und Sicherheitsbereiche stehen unten in der Tabelle „Social-Media-Formate“. Grundregeln für Vorlagen:

- Hintergrund Nachtschwarz oder ein dunkles Filmbild mit Overlay; Kinogold nur für eine Aussage oder den Aufruf.
- Logo, Text und Gesichter **nur im Sicherheitsbereich**; das Logo mit Schutzzone, bevorzugt unten links oder oben links.
- Überschrift in Big Shoulders 800 Versalien (mind. 64 px bei 1080 px Breite), Text in Instrument Sans (mind. 32 px).
- Profilbild: Bildmarke auf Nachtschwarz, mittig mit großzügiger Schutzzone (runder Zuschnitt).
- KI-Bilder kennzeichnen, Tagline „Dein Film. Deine Freunde.“ und Adresse moviefriends.app.

## Umsetzung in den Apps

| Plattform | So nutzen |
|---|---|
| Next.js + Tailwind 4 (Website, Studio, HQ, Brand) | `@import "tailwindcss"; @import "@moviefriends/design-tokens/tailwind-theme.css";` → `bg-surface`, `text-gold`, `font-display`, `rounded-mf-xl`, `text-mf-ui` … |
| CSS ohne Tailwind | `@import "@moviefriends/design-tokens/tokens.css";` → `var(--color-gold)`, `var(--font-family-display)` … |
| TypeScript | `import { tokens } from "@moviefriends/design-tokens"` → `tokens.color.gold` |
| React-Logo | `import { FilmStar, Wordmark } from "@moviefriends/brand-react"` → `<Wordmark suffix="HQ" />` |
| iPhone/iPad (SwiftUI) | `dist/tokens.swift` ins Xcode-Projekt → `MFColor.gold`, `MFFont.display(34)`, `MFTypography.heading` |
| Cloud, andere Tools, KI | https://brand.moviefriends.app/tokens.json (CORS offen) |

Tailwinds Standardskalen bleiben unverändert; die Skalen von moviefriends haben das Präfix `mf-`. Abstände nutzen Tailwinds 4-px-Raster (`p-1` = 4 px).

## Tokens

<!-- tokens:start – generiert mit pnpm tokens:build, nicht von Hand ändern -->

### Farben (`color.*`)

Farben. Dunkler Kinosaal, Kinogold nur für Licht und Handlung (Akzent, Hauptaktion, aktive Zustände).

| Token | Wert | RGB | CSS-Variable | Tailwind | Kontrast auf `bg` | Verwendung |
|---|---|---|---|---|---|---|
| `color.bg` | `#0F0D0B` | 15, 13, 11 | `--color-bg` | `bg-/text-/border-bg` | 1,00 : 1 | Nachtschwarz – Seitenhintergrund (Kinosaal) |
| `color.surface` | `#1A1714` | 26, 23, 20 | `--color-surface` | `bg-/text-/border-surface` | 1,09 : 1 | Sitzreihe – Karten, Panels |
| `color.surface-2` | `#241F1A` | 36, 31, 26 | `--color-surface-2` | `bg-/text-/border-surface-2` | 1,19 : 1 | Bühnenboden – erhöhte Flächen, Chips, Bildplatzhalter |
| `color.surface-sunken` | `#15120F` | 21, 18, 15 | `--color-surface-sunken` | `bg-/text-/border-surface-sunken` | 1,04 : 1 | Eingelassene Flächen, z. B. Chat-Verlauf (A3) |
| `color.line` | `#3A322A` | 58, 50, 42 | `--color-line` | `bg-/text-/border-line` | 1,54 : 1 | Holz – Standard-Rahmen von Karten, Buttons, Eingabefeldern |
| `color.line-subtle` | `#2A2520` | 42, 37, 32 | `--color-line-subtle` | `bg-/text-/border-line-subtle` | 1,28 : 1 | Trennlinien, z. B. unter der Kopfzeile |
| `color.line-strong` | `#4A4035` | 74, 64, 53 | `--color-line-strong` | `bg-/text-/border-line-strong` | 1,92 : 1 | Gestrichelte Platzhalter („Rolle hinzufügen“), Ränder von Farbfeldern |
| `color.line-disabled` | `#6B5F50` | 107, 95, 80 | `--color-line-disabled` | `bg-/text-/border-line-disabled` | 3,12 : 1 | Gestrichelte Rahmen deaktivierter Aktionen |
| `color.fg` | `#F3ECE2` | 243, 236, 226 | `--color-fg` | `bg-/text-/border-fg` | 16,54 : 1 | Elfenbein – Haupttext, Leinwand, „movie“ in der Wortmarke |
| `color.fg-soft` | `#D9CFC1` | 217, 207, 193 | `--color-fg-soft` | `bg-/text-/border-fg-soft` | 12,60 : 1 | Heller Sekundärtext (Bildunterschriften, Fließtext in Karten) |
| `color.fg-2` | `#C9BEAE` | 201, 190, 174 | `--color-fg-2` | `bg-/text-/border-fg-2` | 10,58 : 1 | Gedämpfter Text (Website, Navigation) |
| `color.fg-muted` | `#B8AC9A` | 184, 172, 154 | `--color-fg-muted` | `bg-/text-/border-fg-muted` | 8,69 : 1 | Sekundärtext, Meta-Infos, inaktive Navigation (Screens) |
| `color.fg-3` | `#A89C8A` | 168, 156, 138 | `--color-fg-3` | `bg-/text-/border-fg-3` | 7,19 : 1 | Notizen, Kleingedrucktes |
| `color.gold` | `#F0B24A` | 240, 178, 74 | `--color-gold` | `bg-/text-/border-gold` | 10,32 : 1 | Kinogold – Akzent, Hauptbutton, aktive Zustände, Links, Fokusring, „friends“ in der Wortmarke |
| `color.gold-hover` | `#FFD088` | 255, 208, 136 | `--color-gold-hover` | `bg-/text-/border-gold-hover` | 13,51 : 1 | Link-Hover |
| `color.gold-button-hover` | `#F6C46A` | 246, 196, 106 | `--color-gold-button-hover` | `bg-/text-/border-gold-button-hover` | 12,03 : 1 | Hauptbutton Hover |
| `color.gold-ink` | `#1C1405` | 28, 20, 5 | `--color-gold-ink` | `bg-/text-/border-gold-ink` | 1,06 : 1 | Text auf Gold |
| `color.gold-tint` | `#3B2A12` | 59, 42, 18 | `--color-gold-tint` | `bg-/text-/border-gold-tint` | 1,41 : 1 | Gold getönte Fläche – eigene Sprechblasen, Avatar mit Goldrand |
| `color.ok` | `#74D19B` | 116, 209, 155 | `--color-ok` | `bg-/text-/border-ok` | 10,47 : 1 | Grünes Licht – fertig, bestanden, Ampel „Grün“ |
| `color.ok-soft` | `#B9E8CB` | 185, 232, 203 | `--color-ok-soft` | `bg-/text-/border-ok-soft` | 14,29 : 1 | Text in grünen Chips |
| `color.ok-surface` | `#1F3A2C` | 31, 58, 44 | `--color-ok-surface` | `bg-/text-/border-ok-surface` | 1,57 : 1 | Grüne Fläche (Kommentar-Marker, Status) |
| `color.ok-surface-2` | `#16251C` | 22, 37, 28 | `--color-ok-surface-2` | `bg-/text-/border-ok-surface-2` | 1,22 : 1 | Grüne Karte „Gesamt: Grün“ (A4) |
| `color.warn` | `#F2994A` | 242, 153, 74 | `--color-warn` | `bg-/text-/border-warn` | 8,71 : 1 | Hinweis/Warnung – Ampel „Gelb“, z. B. unscharfes Foto |
| `color.warn-soft` | `#F2B98A` | 242, 185, 138 | `--color-warn-soft` | `bg-/text-/border-warn-soft` | 11,16 : 1 | Text auf Warn-Fläche |
| `color.warn-surface` | `#2E1C12` | 46, 28, 18 | `--color-warn-surface` | `bg-/text-/border-warn-surface` | 1,19 : 1 | Warn-Fläche (Foto-Hinweis) |
| `color.danger` | `#EF6F6C` | 239, 111, 108 | `--color-danger` | `bg-/text-/border-danger` | 6,61 : 1 | Fehler – Ampel „Rot“ |
| `color.danger-surface` | `#3A2424` | 58, 36, 36 | `--color-danger-surface` | `bg-/text-/border-danger-surface` | 1,35 : 1 | Rote Avatar-/Statusfläche |
| `color.filmstrip` | `#2E2822` | 46, 40, 34 | `--color-filmstrip` | `bg-/text-/border-filmstrip` | 1,33 : 1 | Perforation im Produktions-Fortschrittsband (A2–A6) |
| `color.paper.bg` | `#EFE6D6` | 239, 230, 214 | `--color-paper-bg` | `bg-/text-/border-paper-bg` | 15,66 : 1 | Papier |
| `color.paper.bg-2` | `#E2D5BE` | 226, 213, 190 | `--color-paper-bg-2` | `bg-/text-/border-paper-bg-2` | 13,39 : 1 | Papier, Rand/Bildfläche |
| `color.paper.fold` | `#D8CBB4` | 216, 203, 180 | `--color-paper-fold` | `bg-/text-/border-paper-fold` | 12,12 : 1 | Eselsohr |
| `color.paper.ink` | `#2A2118` | 42, 33, 24 | `--color-paper-ink` | `bg-/text-/border-paper-ink` | 1,23 : 1 | Schrift auf Papier |
| `color.paper.ink-muted` | `#6E5D47` | 110, 93, 71 | `--color-paper-ink-muted` | `bg-/text-/border-paper-ink-muted` | 3,07 : 1 | Sekundärtext auf Papier |
| `color.paper.ink-gold` | `#8A5A12` | 138, 90, 18 | `--color-paper-ink-gold` | `bg-/text-/border-paper-ink-gold` | 3,28 : 1 | Gold-Überschrift auf Papier |
| `color.track.1` | `#4E6A8C` | 78, 106, 140 | `--color-track-1` | `bg-/text-/border-track-1` | 3,48 : 1 | Spur 1 |
| `color.track.2` | `#6A4E8C` | 106, 78, 140 | `--color-track-2` | `bg-/text-/border-track-2` | 2,85 : 1 | Spur 2 |
| `color.track.3` | `#4E8C6A` | 78, 140, 106 | `--color-track-3` | `bg-/text-/border-track-3` | 4,88 : 1 | Spur 3 |
| `color.brand.star` | `#F0B24A` | 240, 178, 74 | `--color-brand-star` | `bg-/text-/border-brand-star` | 10,32 : 1 | Stern / „friends“ auf dunklem Grund |
| `color.brand.tail` | `#F3ECE2` | 243, 236, 226 | `--color-brand-tail` | `bg-/text-/border-brand-tail` | 16,54 : 1 | Filmstreifen-Schweif / „movie“ auf dunklem Grund |
| `color.brand.star-on-light` | `#D8962A` | 216, 150, 42 | `--color-brand-star-on-light` | `bg-/text-/border-brand-star-on-light` | 7,68 : 1 | Stern auf hellem Grund |
| `color.brand.friends-on-light` | `#A86A10` | 168, 106, 16 | `--color-brand-friends-on-light` | `bg-/text-/border-brand-friends-on-light` | 4,37 : 1 | „friends“ auf hellem Grund |
| `color.brand.ink-on-light` | `#2A2118` | 42, 33, 24 | `--color-brand-ink-on-light` | `bg-/text-/border-brand-ink-on-light` | 1,23 : 1 | Schweif und „movie“ auf hellem Grund |
| `color.brand.light-bg` | `#F3ECE2` | 243, 236, 226 | `--color-brand-light-bg` | `bg-/text-/border-brand-light-bg` | 16,54 : 1 | Heller Grund (Elfenbein), zugleich Perforation der hellen Variante |
| `color.brand.muted-on-light` | `#5C4E3D` | 92, 78, 61 | `--color-brand-muted-on-light` | `bg-/text-/border-brand-muted-on-light` | 2,41 : 1 | Sekundärtext auf hellem Grund |
| `color.overlay.caption` | `rgba(15, 13, 11, 0.78)` | 15, 13, 11 · 78 % | `--color-overlay-caption` | `bg-/text-/border-overlay-caption` | 1,00 : 1 | Bild-Overlay für Labels auf Fotos |
| `color.overlay.header` | `rgba(15, 13, 11, 0.92)` | 15, 13, 11 · 92 % | `--color-overlay-header` | `bg-/text-/border-overlay-header` | 1,00 : 1 | Sticky-Kopfzeile (mit backdrop-filter: blur(8px)) |

### Zugesicherte Kontraste (WCAG 2.2)

Text nur in diesen Paaren setzen. AA = 4,5 : 1 für Fließtext, „AA groß“ = 3 : 1 für Schrift ab 24 px (fett ab 18,66 px) und für Grafiken.

| Vordergrund | Hintergrund | Kontrast | Stufe | Verwendung |
|---|---|---|---|---|
| `color.fg` `#F3ECE2` | `color.bg` `#0F0D0B` | 16,54 : 1 | AAA | Haupttext auf Nachtschwarz |
| `color.fg` `#F3ECE2` | `color.surface` `#1A1714` | 15,22 : 1 | AAA | Haupttext auf Karten |
| `color.fg-soft` `#D9CFC1` | `color.surface` `#1A1714` | 11,60 : 1 | AAA | Fließtext in Karten |
| `color.fg-2` `#C9BEAE` | `color.bg` `#0F0D0B` | 10,58 : 1 | AAA | Gedämpfter Text, Navigation |
| `color.fg-muted` `#B8AC9A` | `color.surface` `#1A1714` | 7,99 : 1 | AAA | Meta-Infos auf Karten |
| `color.fg-3` `#A89C8A` | `color.bg` `#0F0D0B` | 7,19 : 1 | AAA | Kleingedrucktes |
| `color.fg-3` `#A89C8A` | `color.surface-2` `#241F1A` | 6,06 : 1 | AA | Kleingedrucktes auf Chips |
| `color.gold` `#F0B24A` | `color.bg` `#0F0D0B` | 10,32 : 1 | AAA | Links, aktive Navigation, „friends“ |
| `color.gold` `#F0B24A` | `color.surface` `#1A1714` | 9,50 : 1 | AAA | Akzent auf Karten |
| `color.gold-ink` `#1C1405` | `color.gold` `#F0B24A` | 9,70 : 1 | AAA | Beschriftung des Hauptbuttons |
| `color.gold-ink` `#1C1405` | `color.gold-button-hover` `#F6C46A` | 11,31 : 1 | AAA | Hauptbutton im Hover |
| `color.fg` `#F3ECE2` | `color.gold-tint` `#3B2A12` | 11,74 : 1 | AAA | Eigene Sprechblase |
| `color.ok` `#74D19B` | `color.bg` `#0F0D0B` | 10,47 : 1 | AAA | Status „Grün“ |
| `color.ok-soft` `#B9E8CB` | `color.ok-surface` `#1F3A2C` | 9,10 : 1 | AAA | Text in grünen Chips |
| `color.warn` `#F2994A` | `color.bg` `#0F0D0B` | 8,71 : 1 | AAA | Status „Gelb“ |
| `color.warn-soft` `#F2B98A` | `color.warn-surface` `#2E1C12` | 9,36 : 1 | AAA | Text auf Warn-Fläche |
| `color.danger` `#EF6F6C` | `color.bg` `#0F0D0B` | 6,61 : 1 | AA | Status „Rot“, Fehlermeldungen |
| `color.paper.ink` `#2A2118` | `color.paper.bg` `#EFE6D6` | 12,76 : 1 | AAA | Schrift im Drehbuch-Buch |
| `color.paper.ink-muted` `#6E5D47` | `color.paper.bg` `#EFE6D6` | 5,11 : 1 | AA | Sekundärtext im Buch |
| `color.paper.ink-gold` `#8A5A12` | `color.paper.bg` `#EFE6D6` | 4,77 : 1 | AA | Gold-Überschrift im Buch |
| `color.brand.ink-on-light` `#2A2118` | `color.brand.light-bg` `#F3ECE2` | 13,47 : 1 | AAA | „movie“ auf hellem Grund |
| `color.brand.friends-on-light` `#A86A10` | `color.brand.light-bg` `#F3ECE2` | 3,78 : 1 | AA groß | „friends“ der Wortmarke auf hellem Grund – nur groß (ab 24 px) |

### Schriften (`font.*`)

Schriften: Big Shoulders für Überschriften, Zahlen und die Wortmarke; Instrument Sans für Text und UI. Selbst gehostet (keine Requests an Google Fonts).

| Token | Wert | CSS-Variable | Tailwind | Verwendung |
|---|---|---|---|---|
| `font.family.display` | `"Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif` | `--font-family-display` | `font-display` | Überschriften, Wortmarke, große Zahlen – Überschriften in Versalien, die Wortmarke immer klein |
| `font.family.body` | `"Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif` | `--font-family-body` | `font-body` | Fließtext, UI |
| `font.weight.regular` | `400` | `--font-weight-regular` | – | Instrument Sans – Fließtext |
| `font.weight.medium` | `500` | `--font-weight-medium` | – | Instrument Sans – Navigation |
| `font.weight.semibold` | `600` | `--font-weight-semibold` | – | Instrument Sans – Labels; Big Shoulders klein |
| `font.weight.bold` | `700` | `--font-weight-bold` | – | Instrument Sans – Buttons; Big Shoulders – Abschnittstitel |
| `font.weight.extrabold` | `800` | `--font-weight-extrabold` | – | Big Shoulders – Headlines, Wortmarke |
| `font.size.2xs` | `11px` | `--font-size-2xs` | `text-mf-2xs` | Winzige Labels (Zeitstrahl) |
| `font.size.xs` | `12px` | `--font-size-xs` | `text-mf-xs` | Versal-Labels (Eyebrow), Badges |
| `font.size.sm` | `13px` | `--font-size-sm` | `text-mf-sm` | Kleingedrucktes, Chips |
| `font.size.ui` | `14px` | `--font-size-ui` | `text-mf-ui` | Häufigste UI-Größe (Meta, Chips, Tabs) |
| `font.size.md` | `15px` | `--font-size-md` | `text-mf-md` | Navigation |
| `font.size.base` | `16px` | `--font-size-base` | `text-mf-base` | Grundschrift App |
| `font.size.body-web` | `17px` | `--font-size-body-web` | `text-mf-body-web` | Grundschrift Website |
| `font.size.lg` | `18px` | `--font-size-lg` | `text-mf-lg` | Hervorgehobener Text |
| `font.size.lead-web` | `19px` | `--font-size-lead-web` | `text-mf-lead-web` | Lead-Absatz Website |
| `font.size.xl` | `20px` | `--font-size-xl` | `text-mf-xl` | Big Shoulders 700: Karten-/Phasentitel |
| `font.size.2xl` | `28px` | `--font-size-2xl` | `text-mf-2xl` | Big Shoulders 800: Panel-Titel |
| `font.size.3xl` | `34px` | `--font-size-3xl` | `text-mf-3xl` | Big Shoulders 700: Abschnittstitel (H2) |
| `font.size.4xl` | `40px` | `--font-size-4xl` | `text-mf-4xl` | Big Shoulders 800: Seitentitel mobil |
| `font.size.5xl` | `56px` | `--font-size-5xl` | `text-mf-5xl` | Big Shoulders 800: große Headline |
| `font.size.6xl` | `72px` | `--font-size-6xl` | `text-mf-6xl` | Big Shoulders 800: Seiten-Headline (H1, A1) |
| `font.size.logo-header` | `30px` | `--font-size-logo-header` | `text-mf-logo-header` | Wortmarke in der Kopfzeile |
| `font.size.logo-board` | `150px` | `--font-size-logo-board` | `text-mf-logo-board` | Wortmarke auf dem Logo-Board (A7) |
| `font.line-height.display` | `0.95` | `--font-line-height-display` | `leading-mf-display` | Headlines (0,9–1,0) |
| `font.line-height.tight` | `1.1` | `--font-line-height-tight` | `leading-mf-tight` | Kurze Titel, Zahlen |
| `font.line-height.body` | `1.5` | `--font-line-height-body` | `leading-mf-body` | Fließtext App |
| `font.line-height.body-web` | `1.6` | `--font-line-height-body-web` | `leading-mf-body-web` | Fließtext Website |
| `font.letter-spacing.eyebrow` | `0.14em` | `--font-letter-spacing-eyebrow` | `tracking-mf-eyebrow` | Versal-Labels 12 px, z. B. „STUDIO-LOBBY“, „02 · LÄUFT“; auch der Zusatz neben der Wortmarke („HQ“) |
| `font.letter-spacing.eyebrow-wide` | `0.2em` | `--font-letter-spacing-eyebrow-wide` | `tracking-mf-eyebrow-wide` | Weite Versal-Labels 13–14 px |
| `font.letter-spacing.heading` | `0.03em` | `--font-letter-spacing-heading` | `tracking-mf-heading` | Big Shoulders H2 |
| `font.letter-spacing.display` | `0.01em` | `--font-letter-spacing-display` | `tracking-mf-display` | Big Shoulders H1, Wortmarke |

### Textstile (`typography.*`)

CSS-Kurzform für `font:`; Laufweite separat (`letter-spacing`).

| Token | Schrift | Größe | Schnitt | Zeilenhöhe | Laufweite | Verwendung |
|---|---|---|---|---|---|---|
| `typography.wordmark` | Big Shoulders | 30px | 800 | 1 | 0.01em | Wortmarke „moviefriends“ – immer klein, „movie“ Elfenbein, „friends“ Kinogold |
| `typography.wordmark-suffix` | Instrument Sans | 15px | 600 | 1 | 0.14em | Zusatz neben der Wortmarke („HQ“, „Brand“): Versalien, Elfenbein, halbe Wortmarken-Größe |
| `typography.display` | Big Shoulders | 72px | 800 | 0.95 | 0.01em | Seiten-Headline (H1), Versalien |
| `typography.heading` | Big Shoulders | 34px | 700 | 1.1 | 0.03em | Abschnittstitel (H2), Versalien |
| `typography.title` | Big Shoulders | 20px | 700 | 1.1 | 0.03em | Karten- und Phasentitel (H3), Versalien |
| `typography.eyebrow` | Instrument Sans | 12px | 700 | 1.1 | 0.14em | Versal-Label über Überschriften („02 · LÄUFT“) |
| `typography.body` | Instrument Sans | 16px | 400 | 1.5 | 0em | Fließtext App |
| `typography.body-web` | Instrument Sans | 17px | 400 | 1.6 | 0em | Fließtext Website |
| `typography.ui` | Instrument Sans | 14px | 500 | 1.5 | 0em | UI-Text: Meta, Chips, Tabs |
| `typography.button` | Instrument Sans | 16px | 700 | 1 | 0em | Beschriftung von Buttons |

### Abstände (`space.*`)

Abstände im 4-px-Raster (entspricht der Tailwind-Standardskala: p-1 = 4 px, p-1.5 = 6 px …)

| Token | Wert | CSS-Variable | Tailwind | Verwendung |
|---|---|---|---|---|
| `space.1` | `4px` | `--space-1` | – | – |
| `space.2` | `8px` | `--space-2` | – | – |
| `space.3` | `12px` | `--space-3` | – | – |
| `space.4` | `16px` | `--space-4` | – | Seitenrand mobil |
| `space.5` | `20px` | `--space-5` | – | – |
| `space.6` | `24px` | `--space-6` | – | Innenabstand Karten |
| `space.8` | `32px` | `--space-8` | – | Seitenrand Screens |
| `space.10` | `40px` | `--space-10` | – | – |
| `space.14` | `56px` | `--space-14` | – | Abstand zwischen Abschnitten |
| `space.1.5` | `6px` | `--space-1_5` | – | – |
| `space.2.5` | `10px` | `--space-2_5` | – | – |
| `space.3.5` | `14px` | `--space-3_5` | – | – |

### Radien (`radius.*`)

Eckenradien – eher knapp, wie Kinokarten und Leinwände

| Token | Wert | CSS-Variable | Tailwind | Verwendung |
|---|---|---|---|---|
| `radius.xs` | `3px` | `--radius-xs` | `rounded-mf-xs` | Fortschrittsbalken, Zeitstrahl-Clips |
| `radius.sm` | `4px` | `--radius-sm` | `rounded-mf-sm` | Thumbnails, kleine Flächen, Sprechblasen-Spitze |
| `radius.md` | `6px` | `--radius-md` | `rounded-mf-md` | Buttons, Eingabefelder, Bilder |
| `radius.lg` | `8px` | `--radius-lg` | `rounded-mf-lg` | Listen-Karten, Chat-Eingabe, Farbfelder |
| `radius.xl` | `10px` | `--radius-xl` | `rounded-mf-xl` | Karten und Panels |
| `radius.bubble` | `14px` | `--radius-bubble` | `rounded-mf-bubble` | Sprechblasen; die Ecke zum Absender hat radius.sm (Leo: oben links, eigene: oben rechts) |
| `radius.pill` | `999px` | `--radius-pill` | `rounded-mf-pill` | Chips, Avatare, Badges, runde Buttons |

### Größen (`size.*`)

Feste Größen für Bedienelemente und Layout

| Token | Wert | CSS-Variable | Tailwind | Verwendung |
|---|---|---|---|---|
| `size.control-sm` | `36px` | `--size-control-sm` | `h-/w-/p-mf-control-sm` | Kleiner Button/Chip |
| `size.control` | `40px` | `--size-control` | `h-/w-/p-mf-control` | Standard-Button/Chip-Höhe |
| `size.touch` | `44px` | `--size-touch` | `h-/w-/p-mf-touch` | Mindest-Klickfläche, Avatar |
| `size.control-lg` | `48px` | `--size-control-lg` | `h-/w-/p-mf-control-lg` | Großer Button, Eingabefeld |
| `size.button-web` | `50px` | `--size-button-web` | `h-/w-/p-mf-button-web` | Website-CTA |
| `size.focus-ring` | `2px` | `--size-focus-ring` | `h-/w-/p-mf-focus-ring` | Breite des Fokusrings (Kinogold) |
| `size.focus-offset` | `2px` | `--size-focus-offset` | `h-/w-/p-mf-focus-offset` | Abstand des Fokusrings (Website: 3 px) |
| `size.content-max` | `1360px` | `--size-content-max` | `h-/w-/p-mf-content-max` | Max. Inhaltsbreite App |
| `size.content-max-web` | `1200px` | `--size-content-max-web` | `h-/w-/p-mf-content-max-web` | Max. Inhaltsbreite Website |
| `size.screen-width` | `1440px` | `--size-screen-width` | `h-/w-/p-mf-screen-width` | Entwurfsbreite Desktop |
| `size.screen-width-mobile` | `390px` | `--size-screen-width-mobile` | `h-/w-/p-mf-screen-width-mobile` | Kleinste unterstützte Breite |

### Rahmen (`border.*`)

Rahmen

| Token | Wert | CSS-Variable | Tailwind | Verwendung |
|---|---|---|---|---|
| `border.default` | `1px solid #3A322A` | `--border-default` | – | Karten, Buttons, Felder |
| `border.subtle` | `1px solid #2A2520` | `--border-subtle` | – | Trennlinien |
| `border.active` | `2px solid #F0B24A` | `--border-active` | – | Aktive Karte/Phase |
| `border.ok` | `2px solid #74D19B` | `--border-ok` | – | Freigegeben, grün |
| `border.placeholder` | `1px dashed #4A4035` | `--border-placeholder` | – | Platzhalter / noch offen |

### Schatten (`shadow.*`)

Schatten – sparsam; Tiefe entsteht vor allem über Flächenfarben

| Token | Wert | CSS-Variable | Tailwind | Verwendung |
|---|---|---|---|---|
| `shadow.lift` | `0px 24px 60px 0px rgba(0, 0, 0, 0.55)` | `--shadow-lift` | `shadow-mf-lift` | Schwebendes Element – Drehbuch als Buch (A5), Dialoge |
| `shadow.gold-glow` | `0px 0px 12px 0px #F0B24A` | `--shadow-gold-glow` | `shadow-mf-gold-glow` | Leuchtpunkt im Lauflicht (Website) |

### Bewegung (`motion.*`)

Bewegung – ruhig, wie ein Vorhang. Bei prefers-reduced-motion: reduce alle Animationen aus, Übergänge höchstens 1 ms.

| Token | Wert | CSS-Variable | Tailwind | Verwendung |
|---|---|---|---|---|
| `motion.duration.fast` | `120ms` | `--motion-duration-fast` | – | Hover, Fokus, Farbwechsel |
| `motion.duration.base` | `200ms` | `--motion-duration-base` | – | Aufklappen, Ein-/Ausblenden |
| `motion.duration.slow` | `400ms` | `--motion-duration-slow` | – | Seitenwechsel, große Flächen, Vorhang |
| `motion.duration.marquee` | `38s` | `--motion-duration-marquee` | – | Ein Durchlauf des Lauflichts (Website) |
| `motion.easing.standard` | `cubic-bezier(0.2, 0, 0, 1)` | `--motion-easing-standard` | `ease-mf-standard` | Standard für fast alles |
| `motion.easing.enter` | `cubic-bezier(0, 0, 0.2, 1)` | `--motion-easing-enter` | `ease-mf-enter` | Elemente erscheinen |
| `motion.easing.exit` | `cubic-bezier(0.4, 0, 1, 1)` | `--motion-easing-exit` | `ease-mf-exit` | Elemente verschwinden |
| `motion.easing.linear` | `cubic-bezier(0, 0, 1, 1)` | `--motion-easing-linear` | `ease-mf-linear` | Lauflicht, Fortschritt |

### Logo (`logo.*`)

Regeln für Bildmarke „Filmstern“ und Wortmarke (Details: design-system.md, Abschnitt Logo)

| Token | Wert | CSS-Variable | Tailwind | Verwendung |
|---|---|---|---|---|
| `logo.mark-min-perforation` | `40px` | `--logo-mark-min-perforation` | – | Bildmarke mit Perforation ab dieser Breite |
| `logo.mark-min` | `24px` | `--logo-mark-min` | – | Bildmarke ohne Perforation ab dieser Breite; darunter nur der Stern (Favicon) |
| `logo.star-min` | `16px` | `--logo-star-min` | – | Stern allein (Favicon) ab dieser Breite |
| `logo.wordmark-min` | `16px` | `--logo-wordmark-min` | – | Kleinste Schriftgröße der Wortmarke (digital) |
| `logo.horizontal-min` | `120px` | `--logo-horizontal-min` | – | Kleinste Breite des horizontalen Logos (digital) |
| `logo.mark-ratio` | `1.66` | `--logo-mark-ratio` | – | Breite der Bildmarke = 1,66 × Schriftgröße der Wortmarke |
| `logo.gap-ratio` | `0.33` | `--logo-gap-ratio` | – | Abstand Bildmarke ↔ Wortmarke und Wortmarke ↔ Zusatz = ⅓ der Schriftgröße |
| `logo.suffix-ratio` | `0.5` | `--logo-suffix-ratio` | – | Zusatz neben der Wortmarke („HQ“) = ½ der Wortmarken-Schriftgröße |
| `logo.suffix-min` | `12px` | `--logo-suffix-min` | – | Kleinste Schriftgröße des Zusatzes |
| `logo.clearspace-ratio` | `0.5` | `--logo-clearspace-ratio` | – | Schutzzone auf allen Seiten = ½ Höhe der Bildmarke |
| `logo.app-icon-radius-ratio` | `0.224` | `--logo-app-icon-radius-ratio` | – | Eckenradius des App-Icons = 22,4 % der Kantenlänge (iOS rundet selbst ab) |

### Social-Media-Formate (`social.*`)

Social-Media-Formate mit Sicherheitsbereichen (Grundlage für Vorlagen). Wichtige Inhalte – Logo, Text, Gesichter – nur innerhalb des Sicherheitsbereichs.

| Format | Größe (px) | Sicherheitsbereich oben / unten / seitlich (px) | Einsatz |
|---|---|---|---|
| `social.square` | 1080 × 1080 | 80 / 80 / 80 | Beitrag quadratisch 1:1 (Instagram, Facebook, LinkedIn) |
| `social.story` | 1080 × 1920 | 250 / 340 / 64 | Story/Reel/Short 9:16 (Instagram, TikTok, YouTube Shorts) – oben Profilzeile, unten Antwortfeld und Bedienelemente |
| `social.link` | 1200 × 630 | 40 / 40 / 60 | Link-Vorschau 1,91:1 (Open Graph, X, LinkedIn, Messenger) – manche Dienste schneiden quadratisch aus der Mitte |

<!-- tokens:end -->