Design System · v0.4 · Drupal 11 + Bootstrap 5

KROLL Fahrzeugbau

Mobile Technologie für härteste Anforderungen

01 — Foundations

Designprinzipien

Vier Leitplanken übersetzen die Marke in jede UI-Entscheidung. Sie gelten für alle Komponenten und sind die Begründung hinter den Tokens.

Robust & technisch

Hoher Kontrast, klare Kanten, kräftiges Rot. Die Oberfläche spiegelt die Belastbarkeit der Fahrzeuge — nichts Dekoratives ohne Funktion.

Eigenständig & vertraut

Kroll-Rot #E30613 und Schwarz #1D1D1B aus dem Logo — eigenständige Marke im vertrauten Industrie-Look.

Token-first

Jeder Wert ist eine CSS-Variable. Komponenten nutzen nur semantische Tokens — im Drupal-Build auf Bootstraps --bs-* gemappt.

Barrierearm & lizenzfrei

WCAG-Kontraste beachtet, sichtbare Fokus-Ringe. Nur freie OFL-Fonts (Archivo, Inter, IBM Plex Mono) — keine Lizenzprobleme.

03 — Farben

Farbpalette

Klick auf ein Feld kopiert den Hex-Wert. Marke = Rot + Schwarz aus dem Logo; neutrale Grautöne statt blaustichigem Anthrazit.

Marke

Schwarz / Text

Neutrals

Funktional / Signal

04 — Typografie

Schrift & Skala

Logo/Display: Archivo Black · Überschriften: Archivo · Fließtext: Inter · technische Werte: IBM Plex Mono. Alle SIL-OFL-lizenziert.

display / 60HÄRTESTE
h1 / 36 · 800Saug-Spülfahrzeuge
h2 / 30 · 800Mobile Umwelttechnik
h3 / 24 · 700Wasserrückgewinnung
body / 16Robuste, erprobte Technik auf Basis eines standardisierten Baukastens.
mono / 14DN 200 · 18.000 l · 26.000 kg
05 — Spacing & Radius

Raster, Abstände & Radien

4px-Basisraster, deckungsgleich mit Bootstraps Spacing-Logik. Ecken sind standardmäßig scharf (Radius 0) — bewusst kantig, als Parallele zur Rothenberger-CI.

Spacing-Skala

Radien & Schatten

sm
md
lg
06 — Buttons & Tags

Buttons, Varianten & Badges

Primär = Rot (eine Handlung pro Sichtbereich). Outline-Light für rote/dunkle Bänder.

Auf dunklem/rotem Grund:
Standard Neu IFAT 2026 Verfügbar
07 — Formulare

Formular-Bausteine

Für Kontakt-, Anfrage- und Service-Formulare. Fokus-Ring und Labels sind verpflichtend.

Wir antworten in der Regel innerhalb eines Werktags.
09 — Hero

Startseiten-Hero

Anthrazit-Verlauf mit rotem Diagonal-Raster (Industrie-Signatur), eine klare Primäraktion.

Umwelttechnik & Entsorgung

Fahrzeugtechnik für eine Umwelt mit Zukunft

Standardisierter Baukasten oder maßgeschneidert — robuste Spezialfahrzeuge, weltweit im Einsatz.

10 — Content-Bänder

Farb-Bänder

Vollflächige Bänder im Wechsel (rot / anthrazit) strukturieren die Startseite — direkt aus der Bildsprache der Fahrzeuge.

WIR BAUEN FÜR DIE HÄRTESTEN ANFORDERUNGEN

Die hohen Anforderungen unserer Kunden sind Grundlage für jede unserer Leistungen — standardisierte Vielfalt von der Rohrreinigung bis zum Gefahrguttransport.

Unser Unternehmen

Führender Anbieter umwelttechnischer Fahrzeugaufbauten — Werke in Wesel und Hünxe, weltweit im Einsatz.

11 — Kennzahlen

Stat-Kreise auf Punkteraster

Rote Kreise mit Kennzahlen über einem gepunkteten Weltkarten-Raster (aus dem Screendesign).

400produzierte Fahrzeuge
30Länder
2Kontinente
12 — Produktkacheln

Fahrzeugmodelle (Cards)

Konsistentes Bildformat 16:10, kurze Spezifikation, „Mehr erfahren.."-Link — wie im Screendesign.

13 — Tabellen & Hinweise

Technische Daten & Alerts

Spec-Tabellen mit dunklem Kopf und Zebra-Zeilen für gute Lesbarkeit technischer Werte.

Technische Daten — Saug-Spülfahrzeug
ParameterWert
Tankvolumen gesamt18.000 l
Saugleistung4.500 m³/h
Hochdruckpumpe500 bar
Zul. Gesamtgewicht26.000 kg
Hinweis
Datenblatt als PDF verfügbar.
Messe
Besuchen Sie uns auf der IFAT 2026 in München.
Pflichtfeld
Bitte Fahrzeugtyp auswählen.
Kopiert