// our_look_and_feel

42 Berlin
-Markenrichtlinien.

Das visuelle System: Farbe, Farbverläufe, Oberflächen, Schriftarten, Layout, Symbole und der Aufbau von Folien. Alles hier basiert auf bereits veröffentlichten Arbeiten – wenn Sie diese also nachahmen, liegen Sie genau richtig.

v3.2 · 2026 Betreut von brand & comms Fragen → vlad@42berlin.de
5 Spielsteine, keine anderen // 01_colour

die Palette.

Tinte und Papier bilden die Grundlage der Seite. Lila sorgt für Zusammenhalt. Akzente setzen Akzente, höchstens einer pro Folie. Es gibt keine sechste Farbe, und außerhalb dieser fünf gibt es keine rohen Hex-Werte.

primär
Tinte
#0A0A0A · rgb(10, 10, 10)

Die Eingabetaste und die einzige durchgehende Taste. Außerdem das dunkle Feld, mit dem sich ein Deck öffnen und schließen lässt.

primär
lila
#8E44AE · rgb(142, 68, 174)

Augenbrauen, Markierungen, Haaransätze. Das Bindegewebe zwischen den Elementen und der Mittelpunkt des charakteristischen Farbverlaufs.

primär
zartes Flieder
#C9B6E4 · rgb(201, 182, 228)

Farbverlaufsfelder und dezente Füllungen. Der helle Rand fast jeder Fläche. Verleihe ihm auf dem Papier eine Kontur, sonst verschwindet er.

Akzent
Fuchsia
#ED3491 · rgb(237, 52, 145)

Links und jeweils ein animiertes Element pro Layout. Niemals ein Hintergrundfeld, niemals zwei Akzente auf derselben Folie.

Akzent
Cyan
#00E5D4 · rgb(0, 229, 212)

Nur auf dunklem Untergrund zeichnen. Auf Papier wirkt es kreidig und verliert seine Wirkung völlig, daher sollte man es auf Tinte zeichnen.

die vier Regeln

  • Pro Folie nur ein Akzent, niemals zwei.
  • Akzente sind niemals nur eine Nebensache.
  • Außer diesen fünf darf kein rohes Hexadezimalzeichen vorkommen.
  • Dunkle Schiebefenster öffnen und schließen sich.

tun

  • Lassen wir Tinte und Papier die strukturelle Arbeit übernehmen.
  • Verwende Lila für die // Augenbraue und den Haaransatz.
  • Verwenden Sie zarte Fliederfarben in Farbverläufen und dezenten Füllfarben.
  • Verwenden Sie Cyan nur auf dunklem Hintergrund, wo es tatsächlich auffällt.
  • Verleihen Sie jeder hellen Oberfläche eine feine Kante, damit sie ihre Form behält.

nicht

  • Füge die Farben Fuchsia und Cyan auf derselben Folie ein.
  • Füllen Sie einen Hintergrund mit einem Akzent aus.
  • Cyanfarbene Schrift auf Papier setzen. Sie wirkt dann kreidig.
  • Führen Sie eine sechste Farbe ein, auch wenn sie nur in geringem Umfang zum Einsatz kommt.
  • Verwenden Sie die Farben „Fresh Sky“ oder „Royal Blue“ aus Wolfsburg für ein Objekt in Berlin.
// 02_gradients

der Gradientensatz.

Sechs äußerst lebendige, zielgerichtete Farbverläufe, die die Ästhetik von 42 Berlin prägen. Sie verlaufen alle auf derselben Diagonale, zwischen 135° und 140°, wodurch sie als Familie wahrgenommen werden und nicht als zusammenhangslose Füllfarben. Jeder Farbwert ist genau angegeben, sodass ein Farbverlauf in Slides, Figma oder CSS perfekt nachgebildet werden kann.

01
Signaturfeld
Die Farbe verläuft vom Kern in Lila bis hin zu zartem Flieder. Seiten-Highlights, Kampagnenüberschriften und Titelbilder. Wenn es einen Berliner Farbverlauf gibt, den jeder kennt, dann ist es dieser.
#0A0A0A · rgb(10, 10, 10)
#8E44AE · rgb(142, 68, 174)
#C9B6E4 · rgb(201, 182, 228)
02
Tiefraum
Dunkle Einblendungen und Abschlussbilder. Ein leuchtendes Violett, das aus tiefem Schwarz hervortritt. Es sorgt für Struktur, ohne in reines Schwarz überzugehen.
#0A0A0A · rgb(10, 10, 10)
#3B1B4E · rgb(59, 27, 78)
#8E44AE · rgb(142, 68, 174)
03
die Piscine
Energiegeladen, Cyberpunk und laut. Von Lila über Fuchsia bis hin zu Cyan. Wird für die „Piscine“-Seite, intensive Akzente und große Kampagnen-Highlights verwendet.
#8E44AE · rgb(142, 68, 174)
#ED3491 · rgb(237, 52, 145)
#00E5D4 · rgb(0, 229, 212)
04
lila Schwung
Für kleine Flächen, auf denen ein dreistufiger Verlauf keinen Platz findet: Diagrammbalken, Symbolfüllungen, Hervorhebungslinien und sekundäre UI-Karten.
#8E44AE · rgb(142, 68, 174)
#C9B6E4 · rgb(201, 182, 228)
05
fliederfarbene Waschung
Papierweiß in zartes Lila übergehend. Wird für helle Folien mit viel Text und für Übergänge zwischen Abschnitten verwendet. Das lilafarbene Ende sollte in einer Ecke liegen.
#FFFFFF · rgb(255, 255, 255)
#E4DAF1 · rgb(228, 218, 241)
#C9B6E4 · rgb(201, 182, 228)
06
live accent EINGESCHRÄNKT
Fuchsia trifft auf Cyan. Das einzige dynamische Element in einem Layout: primäre CTAs, aktive Hover-Zustände und hervorgehobene Links. Niemals ein Hintergrundfeld.
#ED3491 · rgb(237, 52, 145)
#00E5D4 · rgb(0, 229, 212)

Gebäude eins

  • Stellen Sie den Winkel auf 135° bis 140° ein . Das gilt für alle Neigungen in diesem Set.
  • Dunkler Stop oben links, heller Stop unten rechts. Der Text kommt auf die dunkle Seite.
  • In Google Präsentationen: Hintergrund → Farbverlauf → Benutzerdefiniert, dann die oben genannten Zwischenfarben eingeben.
  • Verwenden Sie ein vorgefertigtes Hintergrundbild, bevor Sie ein neues Feld erstellen.

niemals

  • Füge einen Stopp ein, der nicht zu den Markentokens gehört.
  • Führen Sie einen Farbverlauf vertikal oder horizontal aus. Er wird sofort abgeflacht.
  • Setze den weißen Lauftext über den hellen Teil des lila Farbverlaufs.
  • Verwenden Sie die Farbverläufe „Piscine“ oder „Live Accent“ hinter Text, der besonders intensiv gelesen wird.
// 03_surfaces

vorgefertigte Hintergründe.

Vier vorgefertigte Farbverlaufsfelder im Format 1920 × 1080. Fügen Sie eines davon hinter eine Folie, einen Social-Media-Beitrag oder einen Bildschirm ein, anstatt jedes Mal einen neuen Farbverlauf zu erstellen. Da sie zur selben Familie gehören, fügt sich eine aus einem beliebigen dieser Farbverläufe erstellte Präsentation dennoch harmonisch zusammen.

Violetter Farbverlauf mit einer dunklen Lücke in der Mitte
gradient-background-01
Dunkles Zentrum, helle Ränder. Gut geeignet, wenn der Text in der Mitte platziert werden soll.
Zarter Farbverlauf aus Flieder und Violett – der hellste Farbton des Sets
gradient-background-02
Am leichtesten und am weichsten. Trennwände und leiser laufende Schienen.
Charakteristischer violetter Schwung
gradient-background-03
Der klassische Sweep. Im Zweifelsfall die Standardwahl für ein Cover.
Ein fast schwarzes Feld mit einem violetten Rand auf der rechten Seite
gradient-background-04
Fast ausschließlich Tinte. Die textfreundlichste der vier.
// 04_typography

Zwei Gesichter, ein System.

Swiza ist der Markenname. Space Mono ist die zugrunde liegende Schriftart. Space Grotesk springt für Swiza ein, wo Swiza nicht installiert werden kann, was in der Praxis Google Slides, Docs und die Website bedeutet.

01 / Anzeige
swiza schwarz.

Das charakteristische Gesicht von 42berlin.de. Jede Überschrift, auf jeder Fläche. Selbstbewusst in Display-Schriftgrößen, dezent und gut lesbar in Textgrößen.

  • Nur das höchste Gewicht: 900.
  • Der Zeichenabstand wurde auf -0,03 em bzw. -0,04 em verringert.
  • Die Groß- und Kleinschreibung hängt vom Kontext ab. Siehe die folgenden Regeln.
02 / Fallback + Hauptinhalt
Space Grotesk

Die Open-Source-Alternative. Da Google Slides keine benutzerdefinierten Schriftarten einbetten kann, wird diese Schriftart in jeder Präsentation verwendet. Sie weist denselben geometrischen Charakter wie Swiza auf.

  • Kostenlos bei Google Fonts, sodass es auch beim Teilen erhalten bleibt.
  • 400 für den Haupttext, 500 für hervorgehobene Überschriften, 700 für Ersatzüberschriften.
  • Der Fließtext wird immer in Satzschreibung verfasst.
03 / System
SPACE MONO_

Die oberste Ebene. Etiketten, Augenbrauen, Zeitstempel, Code, Daten und Zahlen. Das ist es, was die Marke eher als technisch durchdacht denn als stilistisch gestaltet erscheinen lässt.

  • Stellen Sie den Namen der Augenbrauen mit // voran und verwenden Sie „snake_case“.
  • Strichstärke 700, Abstand 1,5 px bis 2 px.
  • Auf keinen Fall für Einzelfiguren. Das sind Swiza.

casing: Die Stimmung einschätzen.

Die Verwendung von Kleinbuchstaben ist ein gestalterisches Mittel, keine allgemeingültige Regel. An der richtigen Stelle verleiht sie dem Text künstlerisches Gewicht, an der falschen Stelle untergräbt sie hingegen die Glaubwürdigkeit.

// lowercase · brand moments
Softwareentwickler werden.

Website-Heroes, Kampagnen-Header, Abschnittsüberschriften, Grafiken für soziale Medien, Veranstaltungsbildschirme. Überall dort, wo die Schrift eher eine ausdrucksstarke als eine informative Funktion erfüllt. Enger Zeichenabstand, Schriftstärke 900, mit einem Punkt am Ende.

// title or sentence case · formal
Partnerschaftsübersicht 2026

Präsentationen, Berichte, Vorschläge, Unterlagen für Partner und den Vorstand, Dokumentenkopfzeilen, Tagesordnungen, Zertifikate. Hier sind die Schreibweise „Standard Title Case“ oder „Sentence Case“ korrekt und erwartet. Die Lesbarkeit hat Vorrang vor dem Stil.

Regeln festlegen

  • Der Fließtext darf maximal 65 bis 70 Zeichen pro Zeile umfassen.
  • Zeilenhöhe 1,6 für den Fließtext, 0,95 bis 1,1 für die Anzeige.
  • Je größer die Schriftgröße, desto enger der Zeichenabstand.
  • Passen Sie die Schriftstärke so an, dass die Lesbarkeit gewährleistet ist. Die Lesbarkeit hat immer Vorrang.
  • Wählen Sie pro Dokument eine Schreibweise für Groß- und Kleinschreibung aus und halten Sie sich daran.

vermeiden

  • Kleinbuchstaben in einem Partnervorschlag oder einer Präsentation für den Vorstand.
  • Kombination von „Swiza“ und „Space Grotesk“ in einem Dokument.
  • „Space Mono“ für Absätze. Es handelt sich um eine Beschriftungsschrift, nicht um eine Leseschrift.
  • Der Fließtext wird zentriert. Überschriften können zentriert werden, Absätze jedoch nicht.
  • Alles, was länger als eine kurze Bezeichnung ist, wird in Großbuchstaben geschrieben.
// 05_type_scale

Größen und Gewichte.

Der Arbeitsmaßstab, gemessen anhand der Live-Website. Bei Webgrößen wird eine Klemme verwendet, sodass sie sich zwischen Mobilgeräten und Desktop-Computern anpassen. Die pt-Äquivalente basieren auf einer Folie mit den Maßen 13,33 × 7,5 Zoll.

Anzeige.
H1 / HERO
clamp(3rem, 7vw, 5,8rem)
weight 900 · tracking -0,045em
line-height 0,95 · slides 60–76pt
Abschnittsüberschrift
H2 / ABSCHNITT
clamp(2,2 rem, 4,5 vw, 3,8 rem)
weight 900 · tracking -0,03 em
line-height 1,05 · slides 36–44 pt
Kartentitel
H3 / CARD
1,3 rem bis 1,6 rem
Schriftstärke 800–900 · Zeichenabstand -0,02 em
Zeilenhöhe 1,25 · Folien 20–24 pt
Fließtext. Die gängigste Schriftgröße, die für komfortables Lesen ausgelegt ist und auf etwa siebzig Zeichen pro Zeile begrenzt ist.
BODY
1,05 rem lede · 0,93 rem dense
Schriftstärke 400–500 · Zeichenabstand 0
Zeilenhöhe 1,65 · Folien 14–16 pt
// eyebrow_label
EYEBROW
0,78 rem bis 0,85 rem
Space Mono 700 · Zeichenabstand +2 px
Großbuchstaben · Folien 10–12 pt
META · 12. August · 04 / 15
META / BILDUNTERSCHRIFT
0,66 rem bis 0,72 rem
Space Mono 700 · Zeichenabstand +1,2 bis +1,4 px
Seitenzahlen, Datumsangaben, Fußzeilen · Folien 9–10 pt
600+
STAT / ABBILDUNG
3,5 rem bis 4,5 rem
Swiza 900, niemals mono · Abstand -0,04 em
Beschriftung darunter in mono bei 0,7 rem
// 06_layout

Raster & Abstände.

Ein Container, eine Rinne, ein Rhythmus. Fast jedes Layout-Problem entsteht dadurch, dass jemand eine neue Breite erfindet, anstatt die bereits vorhandene zu verwenden.

px 1200 Maximale Breite des Containers. Diese darf niemals vergrößert werden.
px · Desktop / Mobil 40/24 Regenrinne auf beiden Seiten des Containers.
px 110 Absatzabstand, der auf Mobilgeräten auf 74 sinkt.
px 20 Rasterabstand zwischen den Karten an jedem Breakpoint.

Spaltenanzahl

  • Vier für Statistik- und Kurzbeschreibungskarten.
  • Drei für Karten, auf denen ein Absatz steht.
  • Zwei für alles, was ein Bild oder eine lange Liste enthält.
  • Auf zwei bei 991px und eine bei 700px reduzieren.

Ausrichtung

  • Standardmäßig linksbündig. Das ist die Standardposition.
  • Augenbraue, Überschrift und Fließtext haben einen gemeinsamen linken Rand.
  • Beschränken Sie sich ausschließlich auf abschließende Sätze und kurze Aussagen.
  • Ein Absatz, der länger als zwei Zeilen ist, darf niemals zentriert werden.

Atemraum

  • Abstand zwischen Überschrift und Unterüberschrift: 18 bis 20 px.
  • Schriftgröße des Haupttextes: 16 bis 22 px.
  • Abstand zum darunterliegenden Raster: 44 bis 56 px.
  • Kartenabstand: 34px, auf Mobilgeräten 26px.
// 07_icons

Symbole und Glyphen.

Zwei Familien. Linien-Symbole haben eine Bedeutung, Endzeichen haben Charakter. Keines von beiden dient nur der Zierde: Wenn ein Symbol seinen Zweck nicht erfüllt, sollte man es entfernen.

Zeilensymbole

Nur Kontur, niemals ausgefüllt. ViewBox 24 × 24, 2-Pixel-Kontur, abgerundete Enden und Verbindungsstellen. Die Farbe ergibt sich aus dem umgebenden Text, sodass ein Symbol auf hellem Hintergrund die Farbe „Lila“ und auf dunklem Hintergrund die Farbe „Cyan“ annimmt.

Terminal
Suche
erweitern
weiter
Datum
Ort

Terminal-Zeichen

In der Schriftart „Space Mono“ gesetzt, nicht gezeichnet. Das sind die Zeichen, durch die ein Element innerhalb einer halben Sekunde als „42“ erkannt wird.

//Augenbraue
>Listenelement
>_Eingabeaufforderung
_Cursor
→cta
↗extern

tun

  • Verwenden Sie pro Asset jeweils nur eine Icon-Familie.
  • Passen Sie die Strichstärke an die daneben angegebene Textstärke an.
  • Verwende → für interne Links und ↗ für externe Links.
  • Ein abschließendes „_“ soll in Überschriften ein aktives Terminal kennzeichnen.

nicht

  • Verwenden Sie Icon-Sets mit ausgefüllten oder zweifarbigen Symbolen.
  • Füge Emojis zu Folien, Beiträgen oder der Website hinzu.
  • Färbe ein Symbol bernsteinfarben ein.
  • Füge neben jeder Überschrift ein Symbol ein. Dadurch verlieren sie ihre Bedeutung.
// sister_campuses

Berlin und Wolfsburg.

Zwei Standorte, ein Verband, ein Konzept. Die Systeme sind bewusst gleich aufgebaut und bewusst unterschiedlich farblich gestaltet, sodass ein Objekt zunächst als „42“ und erst in zweiter Linie als Zugehörigkeit zu einem Standort wahrgenommen wird.

Der schnellste Test: Lila steht für Berlin. Blau steht für Wolfsburg. Wenn ein Layout beides enthält, ist es falsch.

42 Berlin.

// purple_system · this document
Akzent
Lila #8E44AE mit zartem Flieder #C9B6E4
Oberfläche
Papierweiß über Tinte #0A0A0A
Farbverlauf
Tinte in „Soft Lilac“, violetter Mittelwert, 135°
Aktion
Die einzige Schaltfläche mit einfarbiger Schrift. Fuchsia für Links.
Signal
Cyan #00E5D4, nur auf dunklem Hintergrund
fühlen
Wärmer und kontrastreicher. Glas, Unschärfe und Umgebungsverschiebung.

42 Wolfsburg.

// blue_system · reference only
Akzent
„Fresh Sky“ #64B2E2 mit „Royal Blue“ #5467DE
Oberfläche
Lavendelnebel #F7F0F5 über Tintenschwarz #001011
Farbverlauf
„Ink to Fresh Sky“, königlicher Mittelpunkt, 140°
Aktion
Amber Flame #FFB30F, nur auf Schaltflächen anwenden.
Signal
Frischer Himmel auf dunklem Hintergrund
fühlen
Cool und durchdacht. Flache Karten, klare, feine Linien.

Was die beiden gemeinsam haben und auch weiterhin gemeinsam haben müssen

  • Swiza und Space Mono. Gleiche Zeichenformen, gleiche Schriftstärken, gleicher enger Zeichenabstand.
  • Space Grotesk als Ausweichschriftart, falls Swiza nicht geladen werden kann.
  • Die oberste Ebene. // Augenbrauen, Bezeichnungen im Snake-Case-Stil, Cursor, Klammern.
  • Kleinbuchstaben für Überschriften zu Markenereignissen, Groß- und Kleinschreibung für formelle Dokumente.
  • Pro Layout nur ein Akzent, niemals zwei.
  • Akzente sind niemals nur eine Nebensache.
  • Zahlen in „Swiza“, Beschriftungen einfarbig, beidseitig.
  • Linksbündige Ausrichtung als Standardposition für alles.

Wenn sich Campusse begegnen

  • Gemeinsames Kapital, gemeinsames Publikum: neutrale Tinte und Papier – und beide Logos sollen die Farbe tragen.
  • Publikum in Berlin: immer das lila System.
  • Behalte die gemeinsame Struktur bei und tausche nur die Farbpalette aus.
  • Geben Sie den vollständigen Namen des Vereins für rechtliche Zwecke oder Förderanträge an.

niemals

  • Kombinieren Sie violette und blaue Akzente in einem einzigen Layout.
  • Ändern Sie die Farbe des Wolfsburg-Logos in Lila oder die des Berlin-Logos in Blau.
  • Verwende ein Wolfsburg-Design wieder, indem du das Logo austauschst und die Farbpalette beibehältst.
  • Verwende die Farbe Bernstein für ein Berliner Objekt. Das ist die Aktionsfarbe von Wolfsburg, nicht unsere.
  • Beschreiben Sie die Campusse als Konkurrenten. Sie bilden einen Verband.