JCNetwork

Der Markenauftritt des JCNetwork — an einem Ort

Dieses Portal bündelt Farben, Typografie, Logo-Regeln und Bildsprache an einem Ort. Es ersetzt das Nachfragen im Vorstands-Chat durch eine nachschlagbare, verbindliche Referenz — in genau demselben Erscheinungsbild wie der Rest von jcnetwork.de.

Grundlage

Grundlage ist der Slide Design Guide des JCNetwork (v1.01), ergänzt um Signalfarben aus dem PowerPoint-Folienmaster sowie Logos, Bildmaterial und Vorlagen aus dem aktuellen Marken-Fundus.

01

Logo

Zwei Farbvarianten je nach Hintergrund.

Varianten

Das Logo ist nur vollfarbig zu verwenden, die Version ist entsprechend der Luminanz des Hintergrundes auszuwählen.

Positiv (dunkelblau)

Für helle Hintergründe, z. B. Weiß oder #f7f7f7.

Negativ (weiß)

Für dunkle Hintergründe, z. B. Dunkelblau #00274e.

Schutzraum

Um sicherzustellen, dass das Logo immer gut erkennbar und lesbar ist, muss ein minimaler Abstand um das Logo herum gewährleistet sein. Der Abstand entspricht ringsum der Größe des Signets — oben, unten, links und rechts jeweils mindestens eine Signet-Breite bzw. -Höhe Platz zu Text, Bildern, Rahmen oder Seitenkanten. Dasselbe gilt für jedes Logo eines JCNetwork Produktes.

Anwendung — Do's & Don'ts

Beispiele für den richtigen und falschen Umgang mit dem Logo.

Richtig

Original-Datei unverändert verwenden, mit ausreichend Freiraum.

Falsch

Nicht strecken, stauchen oder anderweitig verzerren.

Falsch

Nicht umfärben — nur Positiv- oder Negativ-Variante verwenden.

Falsch

Nicht auf einem Hintergrund platzieren, der zu nah an der Logofarbe liegt — das Logo muss immer klar vom Hintergrund abgesetzt sein.

02

Farben

Jeder Wert — RGB, Hex, CMYK — ist per Klick kopierbar. Namen und Gruppierung folgen exakt dem PDF-Guide (Seiten 7–10) — Primär, Sekundär, Signalfarben und die beiden Schattierungs-Skalen „Dunkel" und „Hell". Alle Farbflächen teilen dasselbe Seitenverhältnis — nur die Rasterbreite je Gruppe unterscheidet sich.

Primär

Das neue Farbschema beinhaltet das neue Dunkelblau als Primärfarbe und das neue Hellblau als primäre Akzentfarbe.

Dunkelblau

Primärfarbe. Überschriften, Header/Footer-Flächen, primäre Buttons.

Hellblau

Primäre Akzentfarbe. Links, Call-to-Actions, Eyebrow-Labels.

Sekundär

Darüber hinaus gibt es für besondere Themen eigene Akzentfarben, die entsprechend verwendet werden sollen.

Allgemein / Veranstaltungen

Identisch mit der Akzentfarbe.

Fellowship

Verband

Partner

Projekte

Alumni

Signalfarben (Indikatoren)

Ampel-Set für Status-Indikatoren, z. B. Fortschritts- oder Auswertungswerte. Fläche und Textfarbe gehören als Paar zusammen, beide Werte sind einzeln kopierbar.

Positiv / Grün

Neutral / Gelb

Negativ / Rot

Schattierungen - Dunkel

Die Schattierungen sind Abstufungen der Transparenz. Die Farbcodes gelten für weiße Hintergründe — bei farbigen Hintergründen ist die Transparenzfunktion zu verwenden, um ein stimmiges Produkt zu erhalten.

Dunkel 100% / H1

Entspricht der Primärfarbe — für alle Überschriften H1–H6 verwendet.

Dunkel 90% / H2

Dunkel 80% / H3

Dunkel 70% / H4

Dunkel 60% / Text

Standard-Fließtext auf weißem/hellem Grund (--color-text-secondary).

Dunkel 40% / Small

Kleingedrucktes, sekundäre Hinweise (--color-text-small).

Dunkel 30% / Footer

Text auf dem dunkelblauen Footer (--color-footer-text).

Boxen Hell

Hintergrund heller Sektionen/Boxen (--color-bg-light).

Schattierungen - Hell

Gleiches gilt für die hellen Schattierungen. Die Farbcodes hier gelten für die Verwendung auf dunkelblauen Hintergründen, wobei der dunkelblaue Foliensatz nur nach Bedarf ausschließlich für Plenen auf den JCNetwork Days oder JCNetwork Executive Days zu verwenden ist.

Hell 100% / H1

Hell 90% / H2

Hell 80% / H3

Hell 70% / H4

Hell 60% / Text

Hell 40% / Small

Hell 30% / Footer

Boxen Dunkel

03

Typografie

Satoshi ist das primäre Typeface. Es ist für Überschriften, Unter-Überschriften und Textinhalte zu verwenden.

Satoshi

LightRegularMediumBoldBlack

AaBbCcDdEeFfGgHhIiJjKk

LlMmNnOoPpQqRrSsTtUu

VvWwXxYyZzÄäÖöÜü

1234567890

Bei Fontshare beziehen ↗

Das Playfair Typeface ist ausschließlich für die Nutzung auf Social Media und für Zitate. Die Verwendung dort ist optional und nach Bedarf.

Playfair

Semibold Italic

AaBbCcDdEeFfGgHhIiJjKk

LlMmNnOoPpQqRrSsTtUu

VvWwXxYyZzÄäÖöÜü

1234567890

Bei Google Fonts beziehen ↗

04

Icons

Icons sind nur selektiv, mit dem Ziel Inhalte stärker zu illustrieren, zu nutzen. Folgende Regeln sind bei der Verwendung zu beachten.

Icondatenbank

Für jegliches Icon ist die Lucide Icon Datenbank zu verwenden, um einen menschlichen Ausdruck zu gewährleisten.

Icongröße

Icons sind in kleinen Größen und als…Icons zu verwenden. Bei einer Inline-Anordnung, soll die Größe am dazugehörigen Text angepasst sein.

Farbgebung

Die Farbgebung soll monochromatisch sein & ist an die Farbe des Textes anzupassen, zu welchem das Icon zugehörig ist.

Strichstärke

Die Strichstärke soll grundsätzlich dünn gehalten werden und an der Schriftdicke des dazugehörigen Textes orientiert sein.

Icon-Galerie

Alle herunterladen (16 KB)

Eine Auswahl an Icons für den täglichen Gebrauch — jedes Icon ist per Klick einzeln als SVG herunterladbar, der Lucide-Name steht als Beschriftung darunter und lässt sich damit auf der Plattform wiederfinden.

Icons finden: lucide.dev/icons

05

Bildsprache

Alle Bilder, die in Präsentationen und auf der Website verwendet werden, sollen zu folgenden Schlüsselwörtern passen: „Sympathisch & Authentisch", „Professionell & Entspannt", „Gemeinsam & Vielfältig".