Styleguide
Design-System BBW IT
Diese Seite dokumentiert alle Bausteine des BBW-IT-Erscheinungsbilds: Farben, Typografie, Komponenten und Motive, so wie sie tatsächlich auf der Website verwendet werden.
Farben
Farbpalette
Typografie
IBM Plex Sans & IBM Plex Mono
H1 · 300 · 40px
Wir betreiben, was andere nur verkaufen.
H2 · 300 · 26–36px
Alles aus einer Hand.
H3 · 600 · 16px
Server & Infrastruktur
Body · 400 · 15px · line-height 1.7
Vollständige IT-Verantwortung für den Berliner Mittelstand: Server, Netzwerk, E-Mail. Kein Reseller, kein Callcenter.
Label · 600 · 11px · Uppercase · 0.16em Tracking
Managed Service Provider · Berlin
Mono · IBM Plex Mono · 700 · 28px
03:17 Uhr
Buttons
Primär & Outline
Buttons auf Orange-Hintergrund
Kontrast-Regel: umgekehrte Farben
Auf orangem Grund (CTA-Bänder) würde ein orangener Button verschwinden. Deshalb kehrt sich die Farbgebung dort um: Anthrazit-Hintergrund, weiße Schrift, sowohl im Standard- als auch im Hover-Zustand.
Karten
bbw-card & bbw-card–accent
Standard-Abstand zwischen Karten im Raster: 14px.
Ohne Akzent
.bbw-card: weiße Fläche, Hairline-Rand, dezenter Hover-Schatten.
Mit Akzent
.bbw-card–accent: zusätzlich 3px orange Linie links, das Signature-Element.
Diagonal-Motiv
Drei Varianten
Hell: für Hero & Referenzen
Dunkel: für Differenzierungs-CTA
Orange: für Kontakt-CTA
Claim-Stil
Wir betreiben, was andere nur verkaufen.
.bbw-claim: 300 Weight, orange Bold-Akzent im letzten Wort. .bbw-section-claim umrahmt den Bereich mit Hairline oben/unten.
Trennelement
.bbw-separator
3px orange Linie, volle Breite. Trennt Bänder ohne Farbwechsel.
Icons
Lucide Outline · 1.5px Stroke
Laufbanner
Hersteller-Laufband
Automatisch scrollende Liste eingesetzter Hersteller/Tools, pausiert bei Hover. Aktuell verwendet auf: Leistungen (Abschnitt „Digitale Souveränität“). Textbasierte Wordmarks statt echter Markenlogos (keine Bildrechte an Fremdlogos).
Formulare
Gravity Forms: zwei Varianten
Auf hellem Grund
Kontaktformular (Seite Kontakt): Eingaben orange umrandet, Button orange mit anthrazitfarbenem Text.
Auf orangem Grund
Rückruf-Formular (Startseite): Button anthrazit mit weißem Text, sonst orange auf orange, kein Kontrast.
DSGVO-Einwilligung
Beide Formulare: Pflicht-Checkbox mit Link zur Datenschutzerklärung, Absenden ohne Häkchen nicht möglich.
Header & Footer
Konfiguriert über Blocksy (kein Custom-Code)
- Header: 90px hoch, weiß, Logo (dunkle Variante) + Menü, 1px Trennlinie zum Content (Design → Customizer → Header → Mittlere Zeile)
- Footer: Anthrazit, Logo (helle Variante) + kursiver Claim links, Rechtsmenü + Firmendaten rechts (Design → Customizer → Footer)
- Favicon: aus dem Signet generiert, als Website-Icon hinterlegt (Design → Customizer → Website-Icon)
Cookie-Banner
Borlabs Cookie: markenkonform gestylt
Design ausschließlich über Borlabs’ eigene Konfiguration (kein Custom-CSS): Primär-Buttons und aktive Registerkarten in Orange mit weißer Schrift, Sekundär-Button (Nur essenzielle) in Anthrazit, Schrift IBM Plex Sans, Radien 2px (Buttons) / 4px (Dialog & Karten). Borlabs-Eigenwerbung im Banner ist deaktiviert.
Buttons
Orange (#e95110), Text weiß bei Standard & Hover.
Registerkarten
Aktiver Tab: Orange-Hintergrund, weiße Schrift.
Branding
„Borlabs Cookie“-Eigenwerbung im Dialog ausgeblendet.
Ankermenü
Mitlaufendes Widget für lange Seiten
Weiße Karte, Hairline-Rahmen, 3px orange Linie links. Die Einträge entstehen automatisch aus den Überschriften der Seite, die Anker werden beim Ausliefern gesetzt. Der gerade sichtbare Abschnitt wird mit oranger Linie und Anthrazit-Schrift markiert.
Zwei Einbauarten
Auf Seiten mit durchlaufendem Text (Impressum, Datenschutz, AGB) sitzt es als 280px breite Spalte neben dem Inhalt, beginnend unterhalb des Heros. Auf Seiten mit vollflächigen Bändern wie dieser hier läuft es als fixiertes Panel am rechten Rand mit, eingeblendet ab 1500px Fensterbreite.
Sprungpunkt
Abschnitte werden 130px unterhalb der Fensterkante angesteuert, damit die Überschrift frei steht. Die Markierung im Menü rechnet mit demselben Wert.
Nach-oben-Button
Sechseck aus der Logo-Marke
Der Button unten rechts übernimmt die Kontur der Logo-Marke: spitze Ecke oben, Seitenverhältnis 48 zu 55. Weiße Fläche mit Hairline-Kontur und oranger Pfeil, beim Hover umgekehrt in Anthrazit mit weißem Pfeil. Weiß statt Orange, weil der Button je nach Seite auf Papier, auf einem orangen CTA-Band oder auf dem anthraziten Footer steht.
Rechtstexte
Dezimalgliederung und Hinweiskasten
In AGB und vergleichbaren Texten steht die Klauselnummer als eigene Zeile über dem Absatz: IBM Plex Mono, 12px, 600, in Orange. Abschnittsüberschriften bleiben H2 in 22px/500. Für besonders wichtige Regelungen dient eine Karte mit oranger Linie links.
8.3
BBW IT weist darauf hin, dass eine Sicherung eine Wiederherstellungschance und keine Wiederherstellungsgarantie ist.
8.4
Vor Beginn größerer Arbeiten hat der Kunde eine vollständige Datensicherung durchzuführen oder zu beauftragen.
Wichtiger Hinweis · Haftungsbeschränkung
Die Haftung ist für den Fall der einfachen Fahrlässigkeit je Schadensfall auf die in den letzten zwölf Monaten gezahlte Nettovergütung begrenzt.