Design-Tokens

Alle Oberflächen teilen sich eine Datei mit CSS-Variablen. Wer dort eine Farbe ändert, ändert sie im Inventar, im Telefon, im HUD und im Pausenmenü gleichzeitig.

Datei: packages/ui/src/tokens.css

#Die Variablen

:root {
  /* Flächen */
  --5mc-bg: #0b0b0d;
  --5mc-bg-deep: #070708;
  --5mc-panel: rgba(19, 19, 22, 0.96);
  --5mc-panel-raised: rgba(31, 31, 36, 0.97);

  /* Ränder */
  --5mc-border: rgba(255, 255, 255, 0.07);
  --5mc-border-strong: rgba(139, 92, 246, 0.35);

  /* Text */
  --5mc-text: #f4f4f5;
  --5mc-text-muted: rgba(228, 228, 231, 0.55);

  /* Marke */
  --5mc-accent: #8b5cf6;
  --5mc-accent-hot: #c084fc;
  --5mc-accent-soft: rgba(139, 92, 246, 0.12);
  --5mc-gradient: linear-gradient(135deg, #7c3aed, #6d28d9);

  /* Form */
  --5mc-radius: 14px;
  --5mc-gap: 12px;
}

#Eigene Markenfarbe

Für die meisten Server reicht es, --5mc-accent und die davon abgeleiteten Werte zu tauschen. Lass die Flächen dabei neutral: das Zusammenspiel aus grauen Panels und einem gezielt gesetzten Akzent ist der Grund, warum die Oberflächen ruhig wirken. Eingefärbte Flächen und farbige Akzente zusammen sind zu viel.

#Zwei Regeln aus der Praxis

Kein backdrop-filter. In der Chromium-Einbettung von FiveM rendert er über einer transparenten Seite als schwarzer Kasten. Die Panels arbeiten deshalb mit hoher Deckkraft statt mit Weichzeichnung.

Kein Hintergrund auf html und body. Eine NUI liegt über dem laufenden Spiel. Setzt das Dokument eine Hintergrundfarbe, verdeckt sie den Bildschirm.

#Neue Oberflächen

Wenn du eine eigene NUI baust, importiere die Tokens und arbeite mit den Variablen statt mit festen Farben. Dann zieht deine Oberfläche jede spätere Designänderung automatisch mit. Wie eine NUI aufgebaut ist, steht unter NUI-Oberflächen.