# UI-System für C3-Werkzeuge (c3-ui)

*Stand: 2026-09-30 · v1.0 · Pflege: Creative Strategy Studio · Vorlage: C3 Play*

Gilt für jede digitale Oberfläche, die C3 baut und betreibt, außer der Website myc3.com: C3 Play (Drop & Play, Kontext), Charakter Check, Beileger-Planer, OLAF und alle weiteren internen oder kundennahen Werkzeuge. Für Decks, Print und Dokumente gilt weiter `c3-os.css`.

- Stylesheet: `design/c3-ui.css` (einbinden oder in das Werkzeug kopieren, nicht verändern)
- Alle Assets, Farben und Schriften im aktuellen Stand: https://os.c3brandos.com (Abschnitt 03 Assets)
- Tokens: `design/tokens.json` → `ui`

## Einbinden

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;600;800&family=Funnel+Sans:wght@300;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="c3-ui.css">
```

Dunkle Seite: `<body class="dunkel">` (Fläche #000, Schrift Offwhite). Logo `assets/logos/logo_long_black.svg`, auf dunkel `logo_long_white.svg`. Nie per CSS-Filter umfärben.

## Die sechs Regeln

1. **Jede Farbe hat eine Aufgabe.** Farben werden über ihre Rolle angesprochen, nicht über den Namen:
   | Token | Farbe | Aufgabe | Nie |
   |---|---|---|---|
   | `--flaeche` | Offwhite | Grund jeder Seite, auch Felder und Karten | Reinweiß als Seitenfläche (Weiß nur auf der Bühne mit fremden Inhalten, `.buehne`) |
   | `--text` | Schwarz | Schrift, Linien, aktive Auswahl | Fast-Schwarz (#0b0b0b, #111) |
   | `--weiter` | Gelb | die eine Hauptaktion, Fokus, aktueller Tab, Fortschritt, Ablage, Hinweis | Schriftfarbe, große Fläche, „erledigt" |
   | `--erledigt` | Türkis | Bestätigung, Prüfung bestanden, erledigter Kommentar | Knöpfe, Schriftfarbe |
   | `--achtung` | Koralle | Fehler, passt nicht, offener Kommentar, Löschen | Schriftfarbe, weiße Schrift darauf, Deko |
2. **Klickbar hat Fläche, Zustand hat Rahmen.** Knöpfe (`.knopf`) sind gefüllt und in Funnel Sans. Zustände (`.chip`) haben nur einen Rahmen und stehen in IBM Plex Mono, versal. Keine Rahmen-Knöpfe, keine gefüllten Chips.
3. **Ein gelber Knopf pro Ansicht.** Alle anderen: `.knopf.sekundaer` (Schwarz 8 %) oder `.knopf.gefahr` (Koralle, schwarze Schrift). Keinen türkisen Knopf.
4. **Farbe sagt nie etwas allein.** Ampel ✓ Türkis · ! Gelb · × Koralle, immer mit Zeichen oder Wort („Passt", „Hinweis", „Passt nicht"). Kein Grün, kein Rot.
5. **Rund heißt Mensch oder Status.** Ecken sind 0. Rund nur Personenfotos (Kreis), Signet, Statuspunkte, Ampeln, Pins.
6. **Ein Ding, ein Name.** Begriffe aus dem Glossar unten, in allen Werkzeugen gleich.

## Schwarz-Stufen statt Grau

Abstufungen sind Transparenzen von Schwarz (auf dunkel: von Offwhite), keine eigenen Farben. Keine Hex-Grautöne (#666, #999, #ddd …).

| Token | Stufe | Wofür |
|---|---|---|
| `--text` | 100 | Schrift, Titel |
| `--ink-60` | 60 % | Nebentext, Labels, Metadaten (5,6 : 1 auf Offwhite) |
| `--ink-25` | 25 % | Feld- und Chip-Rahmen, gestrichelte Leerflächen |
| `--ink-12` | 12 % | Trennlinien |
| `--ink-08` | 8 % | Sekundärknopf, Kopflinie |
| `--ink-04` | 4 % | Hover |

Schrift nur in 100 oder 60. Koralle, Türkis und Gelb nie als Schriftfarbe: Status kommt über Randstrich, Punkt oder Ampel.

## Schriftrollen

- **Funnel Display 800** = Namen der Dinge: Seitentitel, Abschnitte, Tabs, Eintragsnamen.
- **Funnel Sans** = lesen und handeln: Fließtext (300), Knöpfe (700), Felder.
- **IBM Plex Mono** = Maschine und Zustand: Labels, Kicker, Chips (versal), Links, Kürzel, Zahlen, Datum.

## Kopf

Links Wort-Bild-Marke (`.firmenlogo`) plus Werkzeugname als Text (`.werkzeugname`), rechts Person und Abmelden (sekundär). Mehrere Bereiche = `.seitentabs`, aktiver Tab mit gelber Linie. Neue Werkzeuge heißen „C3 <Name>".

## Glossar

| So heißt es | So nicht |
|---|---|
| C3 Play · Drop & Play · Kontext | c3share · Dropboard (nur URL) · Kontext-Editor |
| Entwurf | Drop, Upload, Datei |
| Link | Freigabe (nur im Code), Share, URL |
| Kürzel | Slug, ID |
| Fassung | Version, Update |
| Kampagne · Motiv · Kanal | Set, Asset, Creative, Plattform, Placement |
| Kommentar | Note, Ticket |
| Konto | Account, Profil |
| Ablage | Dropzone |
| Laufzeit | Ablaufdatum, TTL |
| Rollen: Admin · Team · Kunde | Studio (nur intern), User, Nutzer, Gast, Viewer |

## Texte in Werkzeugen

- Knopf = Verb im Infinitiv, bei Bedarf mit Objekt: „Kopieren", „Konto anlegen", „Link löschen". Nach dem Klick kurz „Kopiert".
- Umschalten über `.schalter` (Kästchen mit Satz) oder einen Knopf, der die Handlung nennt („Erledigte zeigen", „Passwort entfernen"). Nie „an"/„aus" auf dem Knopf.
- Warten: immer „Einen Moment".
- Meldung (`.meldung`): ganzer Satz mit Punkt, sagt, was passiert ist. Fehler sagt, was nicht geht und wie es doch geht.
- Rückfragen auf der Seite am Element, keine `alert()`/`confirm()`/`prompt()`.
- Team-Oberflächen „du", Kunden-Oberflächen „Sie", nie gemischt auf einer Seite.
- Deutsch geschrieben: 30.09.2026 · 14:05 Uhr · 1080 × 1920 px · 4,2 MB.

## Abgleich eines bestehenden Werkzeugs

1. `c3-ui.css` einbinden, eigene Farb-/Schriftvariablen darauf umstellen.
2. Nur die fünf Hex-Werte im C3-Rahmen (`grep -oE '#[0-9a-fA-F]{3,6}\b'`). Simulierte Fremdumfelder (Feeds, Plattformen) sind Bühne und ausgenommen.
3. Grautöne durch Schwarz-Stufen ersetzen, Text nur 100/60.
4. Jede Farbe auf ihre Rolle prüfen.
5. Ein gelber Knopf pro Ansicht.
6. Zustände als Chips.
7. `border-radius` auf 0 außer Mensch/Status.
8. Kopf nach Muster, Logo aus `assets/logos/`.
9. Begriffe gegen das Glossar (User, Upload, Dashboard, Settings, Share …).
10. Knopftexte, Meldungen, „Einen Moment".
11. Browser-Dialoge ersetzen.
12. Anrede prüfen.

Änderungen an Farben und Schriften nur über `design/tokens.json` und `c3-os.css`. Änderungen an `c3-ui.css` nur hier, dann in die Werkzeuge kopieren. Laufende Werkzeuge (Vercel) übernehmen Änderungen erst beim nächsten Deploy.