Corporate Design

Diese Seite bündelt die visuellen Grundlagen von git.nrw für Folien, Videos, Thumbnails und Druckmaterialien. Sie richtet sich an alle, die Materialien über git.nrw erstellen – an Hochschulen, in der Community oder im Projektteam. Grundlage ist das Designsystem der Website: professionell, institutionell und zugänglich.

Logo

Das git.nrw-Logo ist als SVG verfügbar und eignet sich damit für Folien, Dokumente, Video-Exporte und Web gleichermaßen.

Logo (SVG) Avatar (PNG)

Bitte beachten:

• Proportionen beibehalten und ausreichend Schutzraum lassen – das Logo nicht mit Text oder anderen Logos bedrängen.
• Das Logo bevorzugt auf weißen oder sehr hellen Hintergründen einsetzen; auf Primärblau in einem hellen Feld platzieren.
• Das Logo nicht umfärben, verzerren, drehen, beschneiden oder mit Effekten versehen.

Avatar und Favicon

Für quadratische Platzierungen stehen ein Avatar und das Favicon bereit. Avatar-Grafiken nicht als dekorative Hintergrundmuster verwenden.

Avatar

Quadratische Platzierungen: Profilbilder, Plattform-Avatare, Kanal-Icons

PNG · 1000 × 1000

Favicon

Browser-Tabs und App-Icon-Kontexte

SVG

Farben

Die Palette entspricht den Farb-Tokens der Website (definiert in assets/css/base/colors.css).

• Basis ist Weiß oder Primärblau, Akzentgelb dient der Hervorhebung.
• Gelb sparsam einsetzen – für Linien, Marker und einzelne Begriffe, nicht für große Textblöcke.
• Dunkler Text auf hellem Grund oder sehr heller Text auf Primärblau; auf starken Kontrast achten.
• Keine zusätzlichen dominanten Farbwelten einführen, außer das Material gehört klar zu einer Partnerinstitution oder Veranstaltungsreihe.

Typografie

Die Website nutzt zwei selbst gehostete variable Schriften: Inter für Überschriften und Noto Sans für Fließtext. Beide sind frei verfügbar (SIL Open Font License) und können für Folien und Videos lokal installiert werden.

• Große, kurze Titel statt dichter Textfolien; kurze Zeilen auf Titelkarten.
• Sentence case (normale Groß-/Kleinschreibung) für gut lesbares Bildungsmaterial.
• Keine dekorativen Schriften – sie schwächen den institutionellen Charakter.

Medien und Vorlagen

Für Folien, Videos und Thumbnails gilt: 16:9-Format, großzügige Ränder, ein klarer Fokuspunkt, hoher Kontrast. Thumbnails funktionieren am besten mit Primärblau als Hintergrund, sehr großem Inter-Titel (ein bis drei Wörter pro Zeile) und einem einzelnen gelben Icon oder Marker.

Im Repository liegen außerdem die editierbaren Quellen:

• assets/img/thumbnail-template.svg – Thumbnail-Vorlage (SVG)
• assets/img/thumbnail-template.afdesign – editierbare Quelldatei
• static/images/og-default.svg – Standard-Vorschaubild für Social Media

Partner- und Förderlogos

Logos von Hochschulen, DH.NRW und dem MKW NRW liegen im Repository unter static/images/icons/logos/, stehen aber nicht zur freien Verwendung: Sie sind ausschließlich für dieses Projekt lizenziert (Details in der LICENSE-Datei im selben Verzeichnis). Für eigene Materialien müssen die Rechte bei der jeweiligen Institution eingeholt werden.

Wenn Partner- oder Förderlogos eingesetzt werden:

• Logos in ihren Originalfarben belassen und auf einer gemeinsamen Grundlinie ausrichten.
• Partnerlogos mehr Weißraum geben als normalen UI-Icons.
• Keine neuen Logo-Kombinationen bilden, die nicht abgestimmt sind.