Ein einheitlicher Auftritt sorgt dafür, dass die GDS auf allen Kanälen sofort wiedererkannt wird: auf der Website, in Angeboten, auf Visitenkarten, in Präsentationen und auf Messen. Dieser Styleguide legt dafür die verbindlichen Grundlagen fest.

Der vorliegende erste Teil beschränkt sich bewusst auf die Basiselemente: das Logo mit seinen Abständen und Größen, die Unternehmensfarben sowie die Hausschrift Titillium Web mit Einsatzbeispielen. Weitere Themen wie Bildsprache, Icons, Gestaltungsraster oder Vorlagen für einzelne Medien können in späteren Teilen ergänzt werden.

Grundlage dieses Dokuments

• Logo-Originaldatei „GDS_Logo_Final_3Zeilen_LA-B-GAP_Pantone_RTM.pdf“ (Adobe Illustrator, Sonderfarben Pantone)
• Aktueller Auftritt der Website www.gdsinfo.de (Startseite und Unterseite IT-Infrastruktur)
• Festlegung der Hausschrift Titillium Web (Google Fonts)

Verbindlichkeit

Die Vorgaben in den Kapiteln 2 bis 4 (Logo, Farben, Typografie) sind verbindlich. Kapitel 5 zeigt Anwendungen als Beispiele und Empfehlungen. Für diese Medien gibt es bereits bestehende Lösungen, die noch geprüft und abgeglichen werden.

Fassungen dieses Styleguides

Der Styleguide liegt als Webseite und als PDF in zwei Varianten vor: für die Ansicht am Bildschirm und für den Druck mit Beschnitt und Schnittmarken. Alle drei Fassungen entstehen aus derselben Quelle. Änderungen werden nur an einer Stelle vorgenommen und erscheinen überall gleich (siehe Kapitel 6.2).

2.1 Aufbau

Das GDS-Logo besteht aus der Wortmarke „GDS®“ und dem dreizeiligen Claim mit den Standorten. Zusammen bilden sie das Hauptlogo. Für kleine Formate gibt es zusätzlich die Wortmarke ohne Claim (Kapitel 2.2).

2.2 Hauptlogo und Wortmarke

Das Hauptlogo ist der Standard. Die Wortmarke kommt dort zum Einsatz, wo der Claim zu klein würde, um lesbar zu sein, oder wo der Absender bereits bekannt ist – etwa auf Folgeseiten, Inhaltsfolien oder in der Navigation einer Website.

• Solange das Hauptlogo seine Mindestbreite erreicht, hat es Vorrang.
• Die Wortmarke wird nicht durch einen selbst gesetzten Claim oder Standorttext ergänzt.
• Beide Fassungen gibt es als Original für helle und als Negativ für dunkle Hintergründe (Kapitel 2.7).

2.3 Gestaltungseinheit X

Alle Abstände und Größen rund um das Logo werden aus einer einzigen Maßeinheit abgeleitet, die direkt aus dem Logo stammt: X entspricht der Strichstärke des „G“. Diese Einheit wächst und schrumpft mit dem Logo; die Abstände bleiben dadurch in jeder Größe stimmig.

Die Wortmarke ist genauso breit wie das Hauptlogo. Bei gleicher Breite ist X deshalb in beiden Fassungen gleich groß, und alle Werte dieses Kapitels gelten für beide.

Faustformel: Schutzzone = Breite ÷ 8. Das ist ein Mindestmaß; mehr Freiraum ist jederzeit erlaubt und wirkt meist hochwertiger.

2.5 Mindestgrößen

Beim Hauptlogo begrenzt der Claim die Größe: Seine Versalhöhe beträgt nur etwa 4,3 % der Logobreite. Die Wortmarke kommt ohne diese feine Schrift aus und kann deutlich kleiner eingesetzt werden.

Die Abbildungen zeigen die Mindestgrößen in Originalgröße (80 px entsprechen bei 96 dpi etwa 21 mm).

2.6 Empfohlene Größen und Platzierung

Die folgenden Werte sind Richtgrößen für häufige Anwendungen. Das Logo steht bevorzugt oben links oder oben rechts und hält zur Formatkante mindestens die Schutzzone ein, in Drucksachen besser den Seitenrand.

2.7 Farbvarianten und Hintergründe

Beide Fassungen – Hauptlogo und Wortmarke – gibt es in denselben Farbvarianten:
Originalfassung (Rot und Anthrazit): Standard für alle Anwendungen auf Weiß oder sehr hellen, ruhigen Flächen.
Negativfassung (komplett Weiß): auf GDS-Rot, Schwarz, GDS-Anthrazit und dunklen, ruhigen Fotos.
Einfarbige Fassung (komplett Schwarz oder Anthrazit): für Fax, Stempel, Gravur oder Einfarbdruck. Sie sollte bei Bedarf als Datei angelegt werden.

Hauptlogo

Wortmarke

Negativfassungen und Wortmarke wurden für diesen Styleguide aus der Originaldatei abgeleitet. Für den Druck sollten reinzeichnungsfähige Dateien angelegt werden (Kapitel 6.1).

2.8 Unzulässige Anwendungen

Hauptlogo und Wortmarke werden ausschließlich aus den Originaldateien verwendet und nicht verändert. Die folgenden Beispiele zeigen typische Fehler.

• Den Claim nicht neu setzen, kürzen, allein verwenden oder in einer anderen Schrift schreiben.
• Keine Teile weglassen oder neu kombinieren. Einzige erlaubte Kurzform ist die Wortmarke ohne Claim (Kapitel 2.2).
• Hauptlogo und Wortmarke nicht gemeinsam auf derselben Fläche verwenden.
• Keine Umrisslinien, Verläufe oder Transparenzen anwenden und nicht auf unruhige Hintergründe setzen.
• Keine Elemente in die Schutzzone setzen und das Logo nicht in Fließtext einbauen.

Die Farbwelt der GDS ist klar und reduziert: Ein kräftiges Rot setzt Akzente, ein ruhiges Anthrazit trägt Text und Struktur, viel Weiß sorgt für Übersicht. Beide Hauptfarben stammen direkt aus der Logo-Originaldatei.

3.1 Primärfarben

3.2 Abgleich mit der Website

Die Website verwendet für Bänder, Überschriften, Linien und Buttons den Rotton #C2002F. Er weicht vom berechneten Logo-Rot #C20430 nur minimal ab; der Unterschied ist mit bloßem Auge nicht erkennbar. Das Rot der Website ist also korrekt.

Empfehlung: Für alle neuen digitalen Anwendungen gilt #C20430 als verbindlicher Wert. Die Website kann bei der nächsten Überarbeitung angeglichen werden, zwingend ist das nicht.

3.3 Ergänzungsfarben

3.4 Tonwertabstufungen

Für Diagramme, Tabellen oder Flächen können beide Primärfarben in Abstufungen verwendet werden. Die Werte entstehen durch Aufhellen mit Weiß.

GDS-Rot

GDS-Anthrazit

3.5 Farbverhältnis

Rot ist eine Akzentfarbe und wirkt umso stärker, je gezielter sie eingesetzt wird. Als Orientierung für die Flächenanteile auf einer Seite oder einem Bildschirm:

• Weiß und Hellgrau, ca. 65 %: Grundflächen, Weißraum
• Anthrazit, ca. 20 %: Fließtext, Überschriften, Strukturelemente
• Rot, ca. 10 %: Akzente wie Zwischenüberschriften, Linien, Buttons, Farbbänder
• Schwarz, ca. 5 %: Footer, dunkle Flächen

Rot wird nicht für längere Fließtexte verwendet. Volltonflächen in Rot eignen sich für kurze, wichtige Botschaften – etwa das Band mit Kernaussage auf der Website – und für Kapitel- oder Titelseiten wie in diesem Styleguide.

3.6 Kontraste und Barrierefreiheit

Die Kontrastwerte wurden nach WCAG 2.1 berechnet. Für normalen Text ist ein Kontrast von mindestens 4,5 : 1 erforderlich, für große Schrift (ab 18 pt bzw. 14 pt fett) 3 : 1.

3.7 Gestaltungselement Wellen

Transparente, sich überlagernde Wellenbänder in den CI-Farben ergänzen das Logo als ruhiges Gestaltungselement – auf Titel- und Kapitelseiten, Präsentationen, Bannern oder Drucksachen. Sie ersetzen nie das Logo und tragen keine Information.

• Auf Inhaltsseiten liegen die Wellen am Seitenrand und so zart, dass Text ohne hinterlegte Kästen lesbar bleibt.
• Richtung, Größe und Lage dürfen von Seite zu Seite wechseln; Farben und Transparenz bleiben gleich.
• Die Wellen liegen als Vektorgrafiken (SVG) vor und sind damit in jeder Größe scharf.

3.8 Farbwerte für die Umsetzung im Web

Für Website und andere digitale Anwendungen sind die Farben als CSS-Variablen festgelegt. Dieser Styleguide verwendet sie selbst.

:root {
  --gds-rot:        #C20430;  /* Pantone 200 C  */
  --gds-anthrazit:  #4A4F55;  /* Pantone 7540 C */
  --gds-weiss:      #FFFFFF;
  --gds-hellgrau:   #F2F2F3;
  --gds-schwarz:    #000000;
  --gds-font: "Titillium Web", Arial, Helvetica, sans-serif;
}

4.1 Hausschrift Titillium Web

Die Hausschrift der GDS ist die Titillium Web: eine klare, technisch anmutende Groteskschrift mit leicht eckigen Rundungen. Auch der Claim im Logo ist in Titillium gesetzt – die Hausschrift schließt so direkt an das Logo an.

ABCDEFGHIJKLMNOPQRSTUVWXYZ ÄÖÜ
abcdefghijklmnopqrstuvwxyz äöüß
0123456789 „“ – € § @ % & ®

4.2 Schrifthierarchie

Die Hierarchie orientiert sich am Aufbau der Website: kräftige Hauptüberschriften, rote Zwischenüberschriften mit feiner roter Linie darunter und gut lesbarer Fließtext in Anthrazit.

4.3 Einsatzbeispiele

Die folgenden Beispiele zeigen die Hierarchie im Zusammenspiel. Die roten Beschriftungen nennen jeweils Element, Schnitt und Größe im Druck.

4.4 Ersatzschriften

Wo Titillium Web technisch nicht verfügbar ist, wird auf eine Systemschrift ausgewichen. Das betrifft vor allem E-Mails, Dokumente, die Empfänger bearbeiten, und fremde Systeme.

4.5 Satzregeln

• Texte werden linksbündig im Flattersatz gesetzt. Zentriert nur bei kurzen Überschriften und Bändern, wie auf der Website.
• Hervorhebungen erfolgen über SemiBold oder Rot, nicht über Unterstreichungen oder Großbuchstaben.
• Versalien nur für kurze Auszeichnungen und dann leicht gesperrt.
• Light-Schnitte erst ab 12 pt bzw. 18 px verwenden; darunter wirken sie zu dünn.
• Eine Zeile sollte etwa 60 bis 80 Zeichen lang sein. Das sorgt für angenehmes Lesen.
• Korrekte Zeichen nutzen: deutsche Anführungszeichen „ “, Gedankenstrich – und geschützte Leerzeichen zwischen Zahl und Einheit.

5.1 Briefbogen Empfehlung, in Prüfung

5.3 Website-Abschnitt Empfehlung, in Prüfung

Das rote Band mit weißer Kernaussage und weißem Button ist ein prägendes Element der Website und kann auch in Flyern oder Präsentationen eingesetzt werden.

Band in GDS-Rot, Überschrift Bold in Weiß, Text Regular in Weiß, Button Weiß mit roter Schrift

5.4 E-Mail-Signatur Empfehlung, in Prüfung

Die Signatur wird in Arial gesetzt, da Titillium in den meisten E-Mail-Programmen nicht angezeigt wird. Das Logo wird als Bild mit 200 px Breite eingebunden und für eine scharfe Darstellung als 400-px-Datei hinterlegt.

Geschäftliche E-Mails müssen dieselben Pflichtangaben enthalten wie Geschäftsbriefe.

6.1 Logodateien

Das Logo liegt als Druckdatei mit Pantone-Sonderfarben vor. Für den Alltag empfiehlt es sich, folgende Dateien reinzeichnen zu lassen:

Die SVG-, PNG- und PDF-Fassungen von Hauptlogo und Wortmarke wurden aus der Originaldatei abgeleitet. Sie eignen sich für Web, Bildschirm und Digitaldruck; für Offsetdruck mit Pantone sollten sie reingezeichnet werden.

6.2 Die Fassungen dieses Styleguides

Beide PDFs werden aus der Webseite erzeugt. Inhalte und Gestaltung werden deshalb nur in der Webseite gepflegt; danach werden die PDFs neu erzeugt.

6.3 Hinweise zum Druck

• Digitaldruck: Das Druck-PDF enthält 3 mm Beschnitt rundum, Schnittmarken sowie die passenden Seitenrahmen (Endformat und Beschnitt). Es liegt in RGB vor; die meisten Digitaldruckereien wandeln das selbst um.
• Offsetdruck mit Pantone: Für Sonderfarben oder ein streng gefordertes PDF/X in CMYK wird das Dokument in InDesign aufbereitet.
• Bürodrucker: Randlose Ausgabe ist meist nicht möglich. Hierfür eignet sich das Bildschirm-PDF; an den Kanten bleibt ein schmaler weißer Rand.

6.4 Versionsverlauf

Ansprechpartner für Fragen zum Corporate Design: [Name, E-Mail]