Corporate Design Manual
Version 1.0 · 2026
Brand System

Verbindung.
Präzision.
Fortschritt.

Ein klares Erscheinungsbild für einen Systemlieferanten, der technische Kompetenz, partnerschaftliche Beratung und zuverlässige Infrastruktur sichtbar verbindet.

Marke: fiber4net
Primärschrift: Poppins
Leitfarbe: #E52F42
01 · Markenkern

Technische Stärke mit menschlicher Nähe.

fiber4net steht für strukturierte Beratung, präzise Lösungen und verlässliche Umsetzung im Glasfaserausbau. Die Marke verbindet die Klarheit technischer Systeme mit einer partnerschaftlichen, direkten Kommunikation.

01

Kompetenz

Fachwissen wird verständlich, lösungsorientiert und ohne unnötige Komplexität vermittelt.

02

Partnerschaft

Beratung und Planung entstehen gemeinsam mit Kunden, Projektpartnern und Fachstellen.

03

Präzision

Klare Prozesse, definierte Komponenten und nachvollziehbare Informationen schaffen Sicherheit.

04

Fortschritt

Die Marke denkt in leistungsfähigen Netzen, langfristiger Infrastruktur und nachhaltiger Entwicklung.

03 · Farbwelt

Rot aktiviert. Graphit stabilisiert.

Die Farbwelt verbindet technische Seriosität mit klarer Energie. Rot führt, markiert Interaktion und schafft Wiedererkennbarkeit. Dunkle Neutraltöne geben der Marke Ruhe und Gewicht.

Signal Red
#E52F42
RGB 229 / 47 / 66
Core Black
#222222
RGB 34 / 34 / 34
Charcoal
#333333
RGB 51 / 51 / 51
White
#FFFFFF
Flächen & Kontrast
Soft Gray
#F5F5F6
Sekundärflächen

60 % Weiß

Grundfläche, großzügiger Raum, klare Informationshierarchie.

30 % Graphit

Text, Navigation, technische Tiefe und starke Kontrastflächen.

10 % Rot

CTA, aktive Zustände, Zahlen, Highlights und navigierende Elemente.

04 · Typografie

Poppins — geometrisch, offen, präzise.

Aa 01→

Poppins unterstützt die technische Klarheit der Marke mit runden, modernen Formen und hoher Lesbarkeit. Headlines dürfen großzügig, reduziert und deutlich skaliert auftreten.

Light · 300
Ihr Systemlieferant für den Glasfaserausbau
Regular · 400
Beratung, Planung und Logistik aus einer Hand
Medium · 500
Kundenspezifische Lösungen
SemiBold · 600
Fiber to the Home
05 · Grafische Formsprache

Flächen, Linien und Bewegung.

Das visuelle System übersetzt Infrastruktur in klare Module: lineare Verbindungen, präzise Kanten, große Zahlen und rote Flächen erzeugen eine eigenständige technische Dynamik.

Signalfläche

Ein starker visueller Impuls für zentrale Botschaften.

4
1Beratung & Planung
2Logistik
3Sonderlösungen
4Schulungen
06 · Bildsprache

Infrastruktur sichtbar machen.

Bilder zeigen Geschwindigkeit, Vernetzung und technische Präzision. Lichtspuren, urbane Netze, Rechenzentren und reale Infrastrukturräume bilden die visuelle Grundlage.

fiber4net Website mit Stadt und roten Lichtspuren

Primärmotiv: urbane Infrastruktur mit markentypischen roten Lichtlinien.

fiber4net Website mit Rechenzentrum

Sekundärmotiv: technische Räume, Server, Verteilersysteme und reale Projektumgebungen.

Do

Klare Perspektiven, echte Infrastruktur, technische Details, kontrollierte Kontraste und rote Lichtakzente.

Don’t

Beliebige Business-Stockfotos, übertriebene Sci-Fi-Effekte, diffuse Neonwelten oder austauschbare Handschlagmotive.

07 · Iconografie

Reduzierte Linien. Eindeutige Funktion.

Icons werden als lineare, technisch präzise Zeichen aufgebaut. Sie unterstützen Orientierung und Klassifikation, ohne zum dekorativen Selbstzweck zu werden.

Fiber to the Home

Hausanschluss und Zugangsnetz.

City Networks

Netzwerkkomponenten und aktive Systeme.

Data Center

Verteilung, Kapazität und Verbindung.

08 · Raster & Layout

Asymmetrie mit System.

Layouts arbeiten mit einem flexiblen Zwölf-Spalten-Raster, großen Weißräumen und deutlichen Achsen. Inhalt und Bild dürfen bewusst unterschiedlich gewichtet werden.

Desktop

12 Spalten, 24 px Steg, maximale Inhaltsbreite 1240 px.

Tablet

8 Spalten, reduzierte Randabstände, modulare Umbrüche.

Mobile

4 Spalten, 20 px Seitenrand, klare vertikale Reihenfolge.

09 · Digital UI

Interface mit klarer Führung.

fiber4net Logo
Hero Copy

Ihr Systemlieferant für den Glasfaserausbau

Headlines werden in kurzen Sinnabschnitten aufgebaut. Rot markiert die inhaltliche Schlüsselaussage.

Mehr erfahren
Website-Hero von fiber4net

Navigation

Weißer Header, schwarze Textnavigation, rote aktive Linie, großflächiger Kontakt-CTA.

Interaktion

Primäraktionen rot; sekundäre Aktionen als dunkler Kreis oder lineare Textaktion.

Flächen

Weiße Hauptflächen, rote Funktionsmodule und graphitfarbene Kontrastbereiche.

10 · Komponenten

Produkte und Services modular strukturieren.

Komponenten folgen klaren wiederkehrenden Mustern. Nummern strukturieren Leistungen, Akkordeons reduzieren Komplexität und rote Flächen markieren aktive Bereiche.

Service-Module

1Beratung und Planungsunterstützung
2Logistikleistungen
3Kundenspezifische Lösungen
4Schulungen

Produkt-Akkordeon

Microducts und Zubehör+
Glasfaserkabel+
Konfektionierte Kabel+
Racks und Patchmodule+
Kabelverteiler+
Indoor- und Outdoor-Schränke+
11 · Responsive Design

Die Markenlogik bleibt auf jedem Screen erhalten.

Mobile Layouts verdichten Inhalte konsequent. Bild, Kernaussage und rote Funktionsmodule werden in eine klare vertikale Erzählung übersetzt.

fiber4net mobile Herofiber4net mobile Servicebereich

Navigation

Logo links, roter Menüblock rechts, keine zusätzlichen visuellen Ebenen.

Reihenfolge

Headline, Text, Bild und Funktionsmodule in einer klaren Informationskette.

Touch

Interaktive Flächen mindestens 44 × 44 px, ausreichend Abstand zwischen Aktionen.

12 · Anwendungen

Vom Logo bis zur digitalen Plattform.

fiber4net Website Showcase
fiber4net Logo auf Visitenkarte
fiber4net Produktseite
fiber4net Footer und Zertifikat
13 · Tonalität

Klar, kompetent und partnerschaftlich.

Die Sprache erklärt Technik verständlich, bleibt verbindlich und fokussiert auf konkrete Lösungen. Sie wirkt sicher, aber nie überheblich.

DirektKurze Sätze, klare Verben, konkrete Aussagen.
FachlichTechnische Begriffe werden korrekt und mit sinnvollem Kontext eingesetzt.
Partnerschaftlich„Gemeinsam“, „wir beraten“ und „für Ihr Projekt“ stehen im Vordergrund.
ZukunftsorientiertFortschritt wird mit realen Nutzenargumenten verbunden, nicht mit abstrakten Superlativen.

Passend

„Wir begleiten Ihren Glasfaserausbau von der Planung bis zur Logistik.“

Vermeiden

„Wir revolutionieren mit disruptiver High-End-Technologie die Welt von morgen.“

14 · Accessibility & Governance

Konsistenz ist Teil der Qualität.

Das Designsystem wird zentral gepflegt und bei neuen Anwendungen kontrolliert erweitert. Barrierefreiheit, Lesbarkeit und klare Zustände sind verbindliche Qualitätskriterien.

Kontrast

Fließtext auf Weiß mindestens in #333333. Weißer Text nur auf ausreichend dunklen Flächen oder Primärrot in größerer Schrift.

Interaktion

Hover, Fokus und aktive Zustände müssen visuell eindeutig sein. Informationen dürfen nie ausschließlich über Farbe vermittelt werden.

Bildzugang

Alle relevanten Bilder benötigen präzise Alt-Texte. Dekorative Bilder werden semantisch ausgeblendet.

Dateien

Logos werden als SVG für Digital und als PDF/EPS für professionelle Druckanwendungen bereitgestellt.

Freigabe

Neue Templates, Kampagnen und UI-Komponenten werden vor Veröffentlichung auf Marken- und Kontrastregeln geprüft.

Versionierung

Änderungen am System werden dokumentiert. Veraltete Dateien werden eindeutig archiviert und nicht parallel verteilt.