Logo

Ein Feld, ein Haken, eine Straße.

Das Icon ist ein gelbes Feld mit einem Haken. Sein langer Strich läuft wie eine Straße oben rechts aus dem Feld hinaus: erledigt, und es geht weiter. Die Wortmarke steht immer klein geschrieben, in Inter Tight, eng gesetzt.

dispoklar

Auf Weiß und Grau

dispoklar

Auf Schwarz

dispoklar

Auf Gelb: Icon dunkel

Regeln

Schutzraum rundherum mindestens eine Icon-Höhe.
Mindestgröße Icon 20 px, ganzes Logo 96 px breit.
Auf gelbem Grund immer die dunkle Variante (schwarzes Feld, gelber Haken).
Wortmarke nie groß geschrieben, nie in anderer Schrift.

Nicht so

Gelb auf Gelb

Gedreht

Andere Farbe

Farben

Gelb, Weiß, Grau. Und Tinte.

Weiß und Grau tragen die Seite, Gelb ist das Signal. Schwarz (Tinte) setzen wir als Gegenpol für Ergebnisse und Garantie. Das Gelb ist aus dem Hero-Video abgenommen, damit Video und Fläche ineinander übergehen.

Gelb

#FBBF04

RGB 251 191 4 · --gelb

Markenfarbe. Große Flächen, Hauptaktion auf Schwarz, Markierungen. Nie als Textfarbe auf Weiß.

Tinte

#1B1B1B

RGB 27 27 27 · --tinte

Text, Hauptknöpfe, dunkle Flächen. Einzige Textfarbe auf Gelb.

Weiß

#FFFFFF

RGB 255 255 255 · --weiss

Grundfläche der Seite, Karten auf Grau und Gelb.

Nebel

#F6F6F4

RGB 246 246 244 · --nebel

Zweite Fläche für Abschnitte und Karten.

Nebel 2

#EFEFEC

RGB 239 239 236 · --nebel-2

Hover auf Nebel, Fortschritt inaktiv.

Linie

#E6E6E3

RGB 230 230 227 · --linie

Trennlinien und Rahmen.

Grau

#5B5B5B

RGB 91 91 91 · --grau

Fließtext zweiter Ordnung.

Grau hell

#6F6F6F

RGB 111 111 111 · --grau-hell

Kleine Hinweise, Quellen. Heller geht nicht, sonst reicht der Kontrast nicht (WCAG AA).

Gelb hell

#FFF6CC

RGB 255 246 204 · --gelb-hell

Textmarker-Flächen, Hinweise im Rechner.

Grün

#15803D

RGB 21 128 61 · --gruen

Nur für Status „angelegt“ und Live-Punkte.

Text auf Gelb

Nur Tinte, mindestens 75 % Deckkraft. Kein Grau auf Gelb.

Text auf Schwarz

Weiß, für Nebensachen mindestens 60 % Deckkraft. Gelb für Zahlen.

Kleiner Text auf Weiß

Nicht heller als Grau hell #6F6F6F, sonst Kontrast unter WCAG AA.

Schrift

Inter Tight. Eng, klar, ruhig.

Eine Schrift für alles: Inter Tight von Google Fonts, selbst gehostet über next/font. Überschriften halbfett (600) und eng gesetzt, Fließtext normal (400). Zahlen in Tabellen und Kennzahlen mit gleich breiten Ziffern.

Display

52 bis 148 px · 600 · Zeilenhöhe 0,88 · Laufweite -6 %

Nie wieder abtippen.

Überschrift 2

36 bis 72 px · 600 · Zeilenhöhe 0,98 · Laufweite -3,5 %

Sieben Schritte. Null Abtippen.

Überschrift 3

22 bis 26 px · 600

KI-Auftragserfassung

Einleitung

18 bis 20 px · 400 · Zeilenhöhe 1,6

Aufträge aus Mail und PDF landen automatisch im TMS.

Fließtext

15 bis 17 px · 400

Ist sich die KI nicht sicher, landet der Auftrag mit einem Klick zur Freigabe bei Ihren Disponenten.

Etikett

13 bis 14 px · 500 · mit gelbem Quadrat davor

So läuft ein Auftrag durch

Kennzahl

56 bis 128 px · 600 · Ziffern gleich breit

147 Std.

Bildsprache

Ein Lkw. Viele Orte. Immer derselbe.

Das Fahrzeug

Weiße Zugmaschine, mattschwarzer 40-Fuß-Container, großes gelbes Haken-Logo mit gelber Wortmarke, dünne gelbe Linie an der Unterkante.

Die Welt

Gelbes Studio für Produktmomente, sonst echte Logistik-Orte: Hof, Rampe, Autobahn, Terminal. Klar, ruhig, wenig Text im Bild.

Menschen

Keine KI-Personen. Das einzige Personenfoto ist Ben, echt. Arbeitsplätze zeigen wir leer.

Wichtigste Regel beim Erzeugen

In reiner Seitenansicht ist die Rückseite des Containers nicht sichtbar. Im Prompt ausdrücklich sagen: „the rear door end of the container is NOT visible“, sonst zeichnet die KI eine um 90 Grad gedrehte Türfront ans Heck. Als Vorlage immer das Bild container.jpg mitgeben.

Physically correct editorial photograph: the same truck as the reference (white cab, matte black 40ft corrugated container with yellow checkmark logo and yellow lowercase wordmark dispoklar, thin yellow line on the bottom rail) … seen from the front-left three-quarter angle, the rear door end is NOT visible. … No other text.

container.jpg
Hauptmotiv: Sattelzug im gelben Studio, reine Seitenansicht. Module, Social, Menü.
Herunterladen

hero-poster.webp
Erstes Bild des Hero-Videos (Poster).
Herunterladen

schritt-1.jpg
Ablauf 1: Einfahrt ins Logistikzentrum. Auch CarLo-Seite.
Herunterladen

schritt-2.jpg
Ablauf 2: Umschlaghof von oben, ein schwarzer Container zwischen weißen.
Herunterladen

schritt-3.jpg
Ablauf 3: Rampe mit offenen Türen und Paletten.
Herunterladen

schritt-4.jpg
Ablauf 4: Schranke. Auch WinSped-Seite.
Herunterladen

schritt-5.jpg
Ablauf 5: Autobahn unter dramatischem Himmel.
Herunterladen

schritt-6.jpg
Ablauf 6: Entladung im Abendlicht.
Herunterladen

schritt-7.jpg
Ablauf 7: Kolonne bei Nacht.
Herunterladen

nacht.jpg
Bildband „Läuft auch, wenn einer krank ist“: Kolonne auf Bergstraße.
Herunterladen

hof.jpg
Bildband „Alle haben Lkw“: Reihe weißer Trailer, einer gelb.
Herunterladen

papiere.jpg
Problem-Abschnitt: CMR-Papiere auf Gelb.
Herunterladen

headset.jpg
Telefonassistent: Headset und Handy auf Gelb.
Herunterladen

branche-baustoff.jpg
Branche Baustoff.
Herunterladen

branche-lebensmittel.jpg
Branche Lebensmittel, Kühlcontainer.
Herunterladen

branche-automotive.jpg
Branche Automotive am Werkstor.
Herunterladen

verkehr-kuehl.jpg
Verkehrsart Kühlverkehr bei Nacht.
Herunterladen

verkehr-gefahrgut.jpg
Verkehrsart Gefahrgut am Chemiewerk.
Herunterladen

verkehr-kombi.jpg
Verkehrsart Kombinierter Verkehr am Portalkran.
Herunterladen

ratgeber-disponent.jpg
Ratgeber Personalmangel, leerer Dispo-Platz.
Herunterladen

ratgeber-aiact.jpg
Ratgeber AI Act: Ordner mit Paragraf.
Herunterladen

ratgeber-erfassung.jpg
Ratgeber Auftragserfassung.
Herunterladen

efti.jpg
eFTI: Tablet mit digitalem Frachtbrief im Führerhaus.
Herunterladen

brief.jpg
Branchenbrief: Brief auf Gelb.
Herunterladen

karriere.jpg
Karriere: Büro mit gelber Wand, Lkw vor dem Fenster.
Herunterladen

verfahren.jpg
404-Seite: Lkw am Ende des Feldwegs im Nebel.
Herunterladen

ben-heister.jpg
Ben Heister, Gründer. Einziges Personenfoto, echt, kein KI-Bild.
Herunterladen

Video

Das Hero-Video.

Erzeugt mit Higgsfield (Kling 3.0, Startbild container.jpg), als Hin-und-zurück-Schleife geschnitten, 1280 × 716, ohne Ton. Herunterladen

Icons

Weich, rund, Gelb und Schwarz.

3D-Icons im Ton der Marke: mattes Schwarz, glänzendes Gelb, weiche Schatten, weißer Grund. Auf grauen oder gelben Flächen mit mix-blend-multiply einbinden, dann verschwindet der weiße Grund.

Für UI-Haken nutzen wir kein Bild, sondern den Haken aus dem Logo: gelber Kreis, schwarzer Haken, auf Gelb umgekehrt.

Bausteine

Runde Ecken, klare Knöpfe.

Knöpfe

HauptaktionZweite AktionAuf Schwarz

Immer als Pille. Auf Weiß und Gelb ist der Hauptknopf schwarz, auf Schwarz gelb.

Etiketten und Haken

Etikett über Überschriften

Pille im Hero Haken Haken auf Gelb

Flächen und Ecken

Karte · 24 px

Hervorgehoben · 24 px

Ergebnis · 24 px

Hinweis · gestrichelt

Ecken: Karten 20 bis 28 px, Bildbänder 32 px, Felder 12 px, Knöpfe rund. Schatten nur für schwebende Elemente. Bewegung: weich einblenden (0,7 s), nichts blinkt, Rücksicht auf „Bewegung reduzieren“.

Sprache

Klar wie ein guter Disponent.

So schreiben wir

Wir siezen Kunden. Auf der Karriereseite auch, aber locker.
Kurze Sätze. Zahlen statt Adjektive: „147 Stunden“ statt „enorm viel Zeit“.
Wörter aus der Dispo: abtippen, Statusanfrage, Rampe, TMS, Lkw.
Ehrlich: Schätzungen als Schätzung kennzeichnen, Quellen nennen, nichts versprechen, was nicht in 60 Tagen lieferbar ist.
Keine Gedankenstriche, Punkt oder Doppelpunkt stattdessen.