Corporate Design
Marke & Logo
Das GFK/tec Logo ist das zentrale Markenelement. Es steht für Präzision, Qualität und technische Kompetenz.
Auf Weiß
Auf Brand-Gelb
Auf Dunkel
✓ Do — So verwenden
- → Logo immer in Original-Proportionen
- → Mindestabstand: 1× Logo-Höhe rundum
- → Nur auf Weiß, Gelb oder Dunkelgrau
- → Schreibweise immer: GFK/tec GmbH
✗ Don't — Nicht verwenden
- → Kein Strecken oder Verzerren
- → Keine anderen Farben außer Brand-Palette
- → Nicht auf bunten Hintergründen
- → Keine Schatten oder Effekte
Farben
Die GFK/tec Farbpalette ist klar definiert. Brand-Gelb ist die Primärfarbe und dominiert alle Kommunikationsmittel.
Primärfarben
Brand Yellow
#E6A800
Pantone 116 C
Brand Dark
#C99200
Schwarz
#1A1A1A
Pantone Black C
Weiß
#FFFFFF
Sekundärfarben
Gray 800
#3A3A3A
Gray 100
#F3F4F6
Gray 200
#E5E7EB
Gray 500
#6B7280
Verwendungsregeln
Typografie
GFK/tec verwendet Nunito Sans. Überschriften sind immer uppercase und letter-spaced. Fließtext ist klar und lesbar.
Display / Hero
GFK-Lösungen mit System
font-black · text-5xl · tracking-widest · uppercase · text-[#e6a800]
H1 / Seitenüberschrift
Kanalsanierung
font-black · text-3xl · tracking-widest · uppercase · bg-[#e6a800] · text-white
H2 / Sektionsüberschrift
Einsatzbereich
font-black · text-xl · tracking-widest · uppercase · text-[#e6a800]
Body / Fließtext
GFK/tec GmbH wurde im Jahr 2006 gegründet und ist spezialisiert auf die Verarbeitung von Glasfaserkunststoffen für technische, industrielle sowie wasser- und abwassertechnische Anwendungen.
text-gray-700 · leading-relaxed · text-base · Nunito Sans 400
Small / Captions
Gültig bis 07.10.2027 · DIBt-Zulassung Z-42.3-593
text-sm · text-gray-500 · Nunito Sans 400
Karten
Karten strukturieren Inhalte. Brand-Karten für Hauptinhalte, White-Karten für Auflistungen, Dark für kontrastierende Bereiche.
Brand Karte
Sanierung und Instandsetzung zur Wiederherstellung von Dichtheit und Tragfähigkeit.
Mehr erfahren ›White Karte
Sanierung und Instandsetzung zur Wiederherstellung von Dichtheit und Tragfähigkeit.
Mehr erfahren ›Dark Karte
Sanierung und Instandsetzung zur Wiederherstellung von Dichtheit und Tragfähigkeit.
Mehr erfahren ›{{< card titel="Kanalsanierung" typ="brand" url="/anwendungen/kanalsanierung/" >}}
Sanierung erdverlegter Abwasserleitungen.
{{< /card >}}
{{< card titel="Produkte" typ="white" icon="arrow" >}}
GFK-Platten und Systemkomponenten.
{{< /card >}}Badges & Labels
Badges markieren Status, Kategorien oder Eigenschaften. Sparsam einsetzen.
{{< badge label="DIBt-zugelassen" >}}
{{< badge label="Neu" typ="success" >}}
{{< badge label="Z-42.3-593" typ="outline" >}}Alerts & Hinweise
Für wichtige Hinweise, Warnungen und Erfolgsmeldungen. Nicht für dekorative Zwecke nutzen.
Hinweis
Diese Zulassung gilt für öffentliche Bauvorhaben und kommunale Auftraggeber.
Bestätigt
Die DIBt-Zulassung Z-42.3-593 ist gültig bis 07.10.2027.
Wichtig
Einzelprodukte sind nicht unabhängig vom System zugelassen.
Nicht möglich
Für diesen Untergrund ist das System nicht zugelassen.
{{< alert typ="info" titel="Hinweis" >}}
Diese Zulassung gilt für öffentliche Bauvorhaben.
{{< /alert >}}
{{< alert typ="warning" titel="Wichtig" >}}
Einzelprodukte sind nicht unabhängig vom System zugelassen.
{{< /alert >}}Checkliste
Für Leistungsübersichten, Vorteile und Feature-Listen. Immer mit Brand-Gelb-Haken.
- DIBt-zugelassenes System
- Geprüfte Materialien
- Eigene Fertigung seit 2006
- Erfahrung in öffentlichen Projekten
- DIBt-zugelassenes System
- Geprüfte Materialien
- Eigene Fertigung seit 2006
- Erfahrung in öffentlichen Projekten
{{< checklist items="DIBt-zugelassenes System,Geprufte Materialien,Eigene Fertigung seit 2006" >}}
{{< checklist-block >}}
- Kanalsanierung
- Schachtsanierung
- Behälter- und Bauwerksanierung
{{< /checklist-block >}}Bildgalerie
Masonry-Archiv für Bilder. Für Projekte, Referenzen, Baustellen und interne Sammlungen. Einheitliche Karten, saubere Dateipfade, responsive Spalten.
{{/* Rekursives Archiv aus static/app */}}
{{ $images := slice }}
{{ $images = partial "images/archive-collect.html" (dict
"path" "static/app"
"base" "app"
"images" $images
) }}
{{ if gt (len $images) 0 }}
<div class="image-masonry">
{{ range sort $images "url" }}
<a href="{{ .url | relURL }}" class="image-card" target="_blank" rel="noopener">
<img src="{{ .url | relURL }}" alt="{{ .name }}" loading="lazy" />
</a>
{{ end }}
</div>
{{ end }}Videos
Archivansicht für lokale Videos mit Posterbild, Play-Overlay, Dateiformat und Dateigröße. Geeignet für Demo-, Projekt- und Schulungsvideos.
{{ $videos := slice }}
{{ $videos = partial "videos/archive-collect.html" (dict
"path" "static/videos"
"base" "videos"
"videos" $videos
) }}
{{ if gt (len $videos) 0 }}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{{ range sort $videos "url" }}
<div x-data="{ playing: false }">…</div>
{{ end }}
</div>
{{ end }}Team-Layouts
Teamseiten kombinieren Hero, Profilfoto, Inhaltsbereich, Sidebar und Kontakt-CTA. Bilder werden klar, ruhig und mit Fokus auf Person und Funktion eingesetzt.
Max Mustermann
Projektleitung
Über Max
Kurzprofil mit Aufgabenfeld, Erfahrung und Rolle im Unternehmen. Teamseiten sollen persönlich, klar und funktional wirken.
Verantwortungsbereiche
Teamkarten im Einsatz
{{/* Team-Detailseite */}}
<section class="relative w-full h-48 md:h-72 overflow-hidden bg-gray-800">…</section>
<div class="max-w-5xl mx-auto px-4 py-10">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
<main class="lg:col-span-8">…</main>
<aside class="lg:col-span-4">…</aside>
</div>
</div>
{{/* Teamkarten */}}
{{ partial "team-cards.html" (dict
"title" "Ihre Ansprechpartner"
"members" .Pages.ByParam "weight"
) }}Call-to-Action Sektionen
CTA-Blöcke schließen Inhaltsbereiche ab und leiten zur nächsten Aktion. Jede Seite sollte genau einen primären CTA haben.
IHR PROJEKT MIT GFK/TEC
Gerne beraten wir Sie zu Ihrem Vorhaben und den passenden Lösungen.
Anfrage stellenLEHRGANG ANFRAGEN
Gerne beraten wir Sie zu Inhalten, Ablauf und Terminen unserer Lehrgänge.
Jetzt anfragen{{< cta
titel="IHR PROJEKT MIT GFK/TEC"
text="Gerne beraten wir Sie zu Ihrem Vorhaben."
label="Anfrage stellen"
url="/kontakt/"
typ="light"
>}}
{{< cta
titel="LEHRGANG ANFRAGEN"
label="Jetzt anfragen"
url="/kontakt/"
typ="brand"
>}}Abstände & Grid
Konsistente Abstände sind das Fundament des Layouts. Wir nutzen Tailwinds 4px-Basis-Grid.
Sektion-Abstand
py-16
= 64px
Container
max-w-6xl px-4
= max 1152px · 16px Rand
Karten-Gap
gap-4
= 16px
Element-Spacing
space-y-3
= 12px
Icon-Text-Gap
gap-2
= 8px
Nutzungsrichtlinien
Für Marketingmaterialien, Partnerunternehmen und externe Agenturen.
Partnerunternehmen
Dürfen Logo und Farben für gemeinsame Marketingmaterialien nutzen — mit schriftlicher Genehmigung.
Agenturen
Nutzen dieses Design-System als Basis für Web- und Printmaterialien. Abweichungen nur nach Abstimmung.
Entwickler
Shortcodes und Partials sind dokumentiert. Neue Komponenten folgen denselben Konventionen.
Design-Prinzipien
Klarheit vor Dekoration
Jedes Element hat eine Funktion. Dekoratives wird weggelassen.
Brand-Gelb gezielt nutzen
Gelb zieht Aufmerksamkeit. Nur für das Wichtigste verwenden.
Konsistenz über Seiten
Gleiche Komponenten, gleiche Abstände, gleiche Sprache.
Mobile first
Alle Layouts funktionieren ab 320px Breite.
Fragen zum Corporate Design?
Kontaktieren Sie uns unter info@gfk-tec.de — wir stellen auf Anfrage Druckdaten, Vektordateien und Bildmaterial zur Verfügung.