German Cargo. Simulated on vAMSYS.

Die Marke

BOX Virtual simuliert AeroLogic — das Joint Venture von DHL Express und Lufthansa Cargo. Eine Flotte, ein Muster, eine Mission: Fracht, pünktlich, weltweit. Die Marke ist so klar wie ihr Vorbild — hell, technisch, auf den Punkt.

Logo

Die offizielle Wortmarke ist das kursive „BoxVirtual“ mit dem gelben Slash davor — „Box“ in Slate, „Virtual“ in Cargo-Gelb, 12° Neigung. Sie wird immer komplett eingesetzt und nie neu gesetzt oder getrennt.

Primär — Slash und „Virtual“ Gelb, „Box“ Slate · auf Weiß und hellen Flächen

Weiß — „Box“ wird Weiß, Gelb bleibt · auf Tarmac, Fotos, dunklen Flächen

Kanal-Avatar — das Profilbild für alle Kanäle: Discord, Instagram, Favicon · die volle Wortmarke auf Cargo-Gelb, ein eigenständiges Quadrat

Farben

Cargo-Gelb auf viel Weiß — dazu Slate aus der Wortmarke und Tarmac für die Nacht. Klick kopiert den Hex-Wert.

Typografie

Eine Schrift, alle Gewichte: Mulish — dieselbe Schrift wie beim Vorbild, frei lizenziert (SIL OFL 1.1) und deshalb komplett im Repo. Hierarchie entsteht über Gewicht, Größe und Versalien.

Grafikelemente

Fünf Elemente, ein Winkel: Alles Diagonale im System steht bei 12° — dem Winkel der Wortmarke.

1 · Der Slash — Marker vor Headlines, Aufzählungen, als Staffel (100 % / 45 % / 18 % Deckkraft)

Frankfurt Friday Freight

2 · Cargo-Band — gelbes 12°-Band als Titelträger auf Fotos, läuft links aus dem Bild. Bewusst schmal: Bauhöhe ≤ 15 % der Bildhöhe — das Foto ist der Held, das Band trägt nur den Titel.

Nightshift

3 · ULD-Grid — feines Raster (72 px, Line-Dark) auf Tarmac-Flächen, Deckkraft ≤ 35 %

BOX · German CargoMTOW 347 t

4 · Stencil-Tags — Fracht-Labels: 1,5 px Rahmen, 800, Versalien, Tracking 0.22em

5 · Der Tail — das Original-Tail der echten BOX-Livery (tail_box.png), unverändert einsetzen

Tail-Wasserzeichen — Höhe 68 % der Bildhöhe, Deckkraft 7 %, unten rechts, ~45 % laufen aus dem Bild

Social & Event-Templates

Zwei definierte Template-Stile — Slash für Event-Banner und Nightshift für dunkle Posts — plus Focus Airport und Monats-Cover. Alle Vorlagen in echten Pixeln: ../social-templates/templates.html.

Focus Airport — finale Vorlage

Foto als Held mit den Nightshift-Overlays: umrandetes „FOCUS AIRPORT“, Stadtname in Gelb, ICAO und Monat. Kein Tail — Absender ist das weiße Logo. Pixel-Board: ../social-templates/templates.html.

Monats-Cover (Deckblatt)

Gleiche Vorlage wie bei LH und LX, für BOX bewusst reduziert: flacher Tarmac mit ULD-Grid, „FOCUS AIRPORT“ als Wortbild, Monats-Chip und der Swipe-Hinweis im gelben Stencil-Rahmen.

Reel / Story (9:16) — bewegt

Dasselbe Nightshift-Design, aber getaktet — damit das Overlay in Story oder Reel auf einem Videoclip liegen kann. Der schräge Tarmac-Keil mit gelber Schnittkante ist die bewegte Fassung der Slash-Geste; darunter das ULD-Grid, darüber das weiße Logo. Kein Tail — BOX hat keinen Tail als Absender. Die Loop-Vorschau spielt exakt die Timeline aus der Tabelle.

Platzhalter & Generator

Export: PNG, sRGB. Canvas: Event-Banner 1800×1200 (3:2), Feed 1080×1350 (4:5), Story 1080×1920.

Focus-Generator — Referenzcode

FOCUS_AIRPORT = {
  "brand": "boxv", "design": "nightshift-photo",
  "colors": { "accent": "#FFCC00", "on_accent": "#212529", "scrim_base": [20, 24, 27], "text": "#FFFFFF" },
  "fonts":  { "head": "Mulish-800", "transform": "uppercase" },
  "canvas": { "feed": [1080, 1350], "banner": [1800, 1200] },
  "layers": [
    { "id": "photo",   "fit": "cover", "min_width": 2400, "focus": "center" },
    { "id": "scrim",   "angle_deg": { "feed": 8, "banner": 5 },
      "gradient": [[0.12, 0.94], [0.52, 0.35], [0.78, 0]] },                  # rgba(scrim_base, a)
    { "id": "logo",    "asset": "BOXV_Logo_White.png", "feed": [70, 70, 78], "banner": [84, 76, 84] },
    { "id": "eyebrow", "text": "FOCUS AIRPORT", "style": "stencil",
      "border": "3px accent", "size": { "feed": 24, "banner": 26 },
      "pad": { "feed": [12, 26], "banner": [12, 28] }, "tracking": 0.26, "fill": "accent" },
    { "id": "city",    "text": "{CITY}", "size": { "feed": 120, "banner": 140 },
      "fill": "accent", "line_height": 1.0, "transform": "uppercase" },
    { "id": "meta",    "text": "{ICAO} · {MONTH} {YEAR}", "size": { "feed": 32, "banner": 34 },
      "fill": "#FFFFFF", "tracking": 0.20, "margin_top": { "feed": 26, "banner": 24 } },
    { "id": "block",   "note": "Eyebrow/City/Meta als Block unten links — feed x70/b96, banner x84/b84. KEIN Tail." }
  ],
  "export": { "format": "png", "colorspace": "sRGB" }
}

Discord — ein Bild, ein Text

Discord ist nicht Instagram. Anhänge werden in der Timeline auf rund 550 px skaliert, und Hochformat wird im Raster beschnitten — vom 4:5-Cover blieb nur „AIRPORT" senkrecht stehen, und zehn Briefmarken tippt niemand einzeln an. Der Channel bekommt deshalb ein eigenes Format: eine Übersichtsgrafik im Querformat, 1600 × 1000.

Der Text ist für den Channel geschrieben, nicht aus Instagram kopiert: Überschrift, je Airport eine Zeile mit ICAO, Stadt und den Focus-Punkten sowie einer Begründung aus vier bis acht Wörtern. Diese Begründungen schreibt Mistral in einem Aufruf für den ganzen Monat — so unterscheiden sie sich voneinander, statt neunmal derselbe Satzbau zu sein; ICAO, Stadt, Punkte und Struktur bleiben in der Vorlage, das Modell kann also keine Fakten verbiegen. Ohne API-Key oder bei unbrauchbarer Antwort bleibt die schlichte Liste — der Beitrag geht immer raus. Keine Hashtags (im Channel wirkungslos), und der Link steht in spitzen Klammern, damit Discord keine zweite Vorschaukarte unter das Bild hängt.

Profilbild & Social-Media-Assets

Profilbilder sind im Alltag winzig — 32 px als Discord-Icon, 48 px in der X-Timeline. Cargo-Gelb trägt auch in dieser Größe. Ein Bild für alle Kanäle: Discord, Instagram, Facebook, TikTok, YouTube, X.

Profilbild — „one fits all"

150 px · 80 px · 44 px · und eckig. Die Wortmarke bleibt bis zur Icon-Größe erkennbar.

Banner & Header

Ein durchgehendes Bühnenbild — Tarmac-Verlauf mit Slash-Motiv und ULD-Raster — mit weißer Wortmarke, gelber Akzentlinie und Tagline mittig. Ein Layout, in jedem Kanalformat ausgespielt.

Anwendungen

vAMSYS

vAMSYS ist das Crew-System, auf dem der Betrieb läuft — Buchung, Dispatch, PIREPs, Ränge. Es ist eine gemietete Halle, keine eigene: einrichten geht, umbauen nicht. Dieses Kapitel hält fest, was sich dort einrichten lässt, mit welchen Mitteln, und wo die Plattform die Marke stoppt. Alles hier folgt den Regeln der Kapitel 03 bis 05 — dieselbe Marke, fremdes Markup.

Was gebrandet werden kann

Zwei Formulare in Orwell steuern alles: Settings → Design → Logo Settings (vier Logo-Slots plus Login-Hintergründe) und Style Settings (zwölf Farb-Paare plus ein eigenes Stylesheet). Ihre Reichweite ist begrenzt.

Drei Hebel, in dieser Reihenfolge

Von stabil nach fragil. Wer bei 3 anfängt, schreibt dutzende !important-Regeln für etwas, das eine Zeile in 2 erledigt hätte.

Die Rampen — und warum Gelb nicht auf 600 liegt

vAMSYS baut auf Filament auf, und Filament färbt alles über sechs Variablen-Rampen mit je elf Stufen, geschrieben als RGB-Tripel ohne rgb()-Wrapper — nur so funktionieren Tints wie rgba(var(--BOXYellow), .14). Filaments Konvention: 600 ist die Vollton-Fläche, 700 der Hover, 400 Text und Ring im Dunkelmodus.

Gelb im Interface — wohin es darf

Kapitel 03 in einem Satz: Auf Hell ist die Marke Fläche oder Linie, niemals Text; auf Dunkel darf sie auch Text und Icon sein. Die Kontrastwerte aus box.json gelten in vAMSYS unverändert: Ink auf Gelb 10,2:1, Gelb auf Ink 10,2:1, Gelb auf Tarmac 11,6:1 — Gelb auf Weiß 1,5:1, verboten. Das ist genau umgekehrt zu LX, wo Rot auf Dunkel einen helleren Tint brauchte.

Die zwei Regeln, an denen alles hängt

Form — 4 px und 8 px, und der Slash

Die zwei Radius-Stufen aus Kapitel 03 gelten auch in vAMSYS: 4 px für Chips, Buttons, Inputs und Badges, 8 px für Cards, Sections und Modals. Bewusst weder die 2-px-Kante von LX noch die 14-px-Rundung von LH. Bewusst runde Elemente bleiben rund: Avatare, Toggles, Radio und Checkbox. Und alles Diagonale steht bei 12° — --BOXSkew: skewX(-12deg) ist ein Token im Stylesheet, damit kein Winkel je nach Augenmaß entsteht.

Topbar und Sidebar — flach, kein Verlauf

LH und LX tragen einen Drei-Stopp-Verlauf. BOX ist die Ausnahme in der Familie (box.json, gradient.canvas): Die Bühne ist flaches Tarmac. Der Hellmodus ist die Heimat — weiße Topbar, Muted-Items, Ink auf aktiv. Der Dunkelmodus ist Tarmac mit gelben Items. Die Farbwähler können ohnehin nur Volltonfarben; wer einen Verlauf wollte, müsste die vier Background-Felder leer lassen und ihn im CSS über html[data-topbar-color=…] setzen. Wir wollen keinen.

Logo-Slots

Vier Slots, 1800 × 400 px PNG mit Transparenz (SVG wird abgelehnt). Slot 0/1 und 2/3 sind getrennte Uploads — wer nur Phoenix ändert, hat in E-Mails und Orwell weiterhin das alte Logo. Das ist hier der häufigste Fehler. BOXV_Logo.png misst 1779 × 311, wird also mittig auf die 1800 × 400 gesetzt, nie gestreckt.

Typografie — Mulish darf mit

Hier hat BOX den Vorteil gegenüber LX. Die Lufthansa-Schnitte dürfen nicht weitergegeben werden, das LX-Stylesheet darf deshalb nur einen Stack deklarieren. Mulish steht unter der SIL Open Font License 1.1 und darf mitgeliefert werden — die Marke trägt ihre echte Hausschrift auch in vAMSYS. Kapitel 04 verlangt Selbsthosting (kein Google-Fonts-CDN, DSGVO), und eine data:-URI ist die konsequenteste Form davon: kein Fremdserver, keine IP-Übertragung. Der @font-face-Block steht deshalb am Dateiende, damit der lesbare Teil beim Patchen in der Konsole oben bleibt. Ohne ihn fällt der Stack sauber auf Segoe UI / Arial zurück — nichts bricht.

Die typografische Hierarchie wandert mit: Überschriften 800, die große Seiten-Headline in Versalien, Labels und Tabellenköpfe 800 in Versalien mit Tracking, Fließtext 400. Ein Vorbehalt, teuer gelernt: .fi-ta-text-item-label ist in Filament kein Spaltenkopf, sondern der Inhalt jeder Textzelle. In v1.0.0 stand die Klasse in der Eyebrow-Regel und zog jeden Zellinhalt auf Versalien, 800 und breites Tracking — im schmalen NOTAM-Widget lief die Tabelle dadurch über den rechten Rand.

Die Markensignatur, drei Anker

Wo LX seine Alpen hat, hat BOX zwei Elemente aus Kapitel 05 — als inline-SVG oder CSS-Verlauf in einem ::after, ganz ohne Bild-Upload. Weil die Style Settings nur Phoenix erreichen, hängen sie an drei geprüften Phoenix-Ankern: Dashboard (.page-content:has(.swiper)), leere Zustände (.fi-ta-empty-state) und Map-Loader (.map-loader-modal).

Nicht wieder einführen

Bekannte Grenzen

• Orwell bleibt blau. Nur über einen Feature-Request an vAMSYS lösbar.
• Diagramme sind nicht per CSS brandbar — bei LX verifiziert. Die Phoenix-Statistiken nutzen Chart.js, die Orwell-Histogramme ApexCharts; beide malen in ein <canvas> mit Werten, die fest im JavaScript stehen. Ein Umbau der Rampen ändert daran nichts.
• Schmale Dashboard-Blöcke. Das NOTAM-Widget sitzt in einem Drittel-Block und trägt fünf Spalten — das ist auch ohne Branding zu eng. Das Stylesheet fängt es kosmetisch auf (Innenabstände, Zeilenumbruch, 94 px Mindestbreite auf der Datumsspalte), und zwar nur dort. Die strukturelle Lösung wäre ein Zwei-Drittel-Block oder eine Spalte weniger, unter HQ → Pages → Phoenix Dashboard.
• Dekorative Nutzung von Statusfarben. Phoenix färbt den Flug-Fortschrittsbalken mit .bg-success — der meldet keinen Erfolg, er zeigt den zurückgelegten Anteil. Nur diese eine Ausprägung wird auf Cargo-Gelb gedreht, die --success-Rampe bleibt unangetastet. Zulässig, weil der Balken eine Linie ist und keinen Text trägt — dieselbe Begründung wie beim Rank Tracker.

Wartung

Ein CSS-File je VA; ein neuer Upload ersetzt das alte. Die Datei liegt unter https://cdn.vamsys.xyz/stylesheets/<ULID>.css (26 Zeichen, Crockford-Base32), und der ULID wechselt bei jedem Speichern. Die alte Datei bleibt erreichbar — das, und nur das, ist der Weg zurück. Einen Undo-Knopf gibt es nicht: Ein Revert ist immer ein erneuter Upload.

1. Das Live-CSS vom CDN holen — diese Datei ist die einzige Wahrheit, nie blind eine lokale.
2. Patchen, den Versionsmarker im Kopfkommentar hochzählen, neue Kommentare ASCII-only halten.
3. Style Settings öffnen und prüfen, dass im Kopf „BOX VIRTUAL" steht — das Formular sieht für jede VA gleich aus.
4. Das FilePond-Feld hydrieren (Maus darüber bewegen und warten). Ohne Hydration erscheint der native „Datei auswählen"-Fallback — in diesem Zustand nicht speichern.
5. Speichern, den neuen ULID und den alten notieren, eine lokale Kopie als box-virtual-vX.Y.Z.css ablegen.
6. In Hell und Dunkel prüfen: Dashboard, Flight Centre, Buchungskarte, Dispatch-Seite, Buchungsdetail, PIREPs, Leaderboard, Profil, ACARS. Dropdowns wirklich öffnen, und Paginierung, Filter-Chips und Spalten-Umschalter kontrollieren — dort sitzen die unauffälligen Icon-Buttons.

// Gelb auf Hell — muss auf jeder hellen Seite ein leeres Ergebnis liefern
[...document.querySelectorAll('*')].filter(e => {
  const c = getComputedStyle(e);
  return /^rgb\(25[0-5], ?2[0-1][0-9], ?[0-9]{1,2}\)$/.test(c.color)
      && e.innerText && e.innerText.trim().length;
}).map(e => ({ tag: e.tagName, cls: e.className, txt: e.innerText.slice(0,30) }));

Stand

BOX Virtual, ICAO BOX / IATA 3S. Stylesheet v1.0.3, gebaut auf Brandbook v1.8 und design-tokens/box.json, nach dem markenunabhängigen Leitfaden aus der LX-Umsetzung. Der ULID der Live-Datei wird beim Upload protokolliert, zusammen mit dem Vorgänger — dieses Paar ist der Weg zurück.

Rechtliches

BOX Virtual ist ein non-kommerzielles Fan- und Community-Projekt und steht in keiner Verbindung zur AeroLogic GmbH, zur DHL Group oder zur Lufthansa Cargo AG.

© 2026 Box-Virtual.com · Brandbook Version 1.9 · Fragen an das Team im Discord.