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.
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.
Die Eingabetaste und die einzige durchgehende Taste. Außerdem das dunkle Feld, mit dem sich ein Deck öffnen und schließen lässt.
Augenbrauen, Markierungen, Haaransätze. Das Bindegewebe zwischen den Elementen und der Mittelpunkt des charakteristischen Farbverlaufs.
Farbverlaufsfelder und dezente Füllungen. Der helle Rand fast jeder Fläche. Verleihe ihm auf dem Papier eine Kontur, sonst verschwindet er.
Links und jeweils ein animiertes Element pro Layout. Niemals ein Hintergrundfeld, niemals zwei Akzente auf derselben Folie.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
clamp(3rem, 7vw, 5,8rem)
weight 900 · tracking -0,045em
line-height 0,95 · slides 60–76pt
clamp(2,2 rem, 4,5 vw, 3,8 rem)
weight 900 · tracking -0,03 em
line-height 1,05 · slides 36–44 pt
1,3 rem bis 1,6 rem
Schriftstärke 800–900 · Zeichenabstand -0,02 em
Zeilenhöhe 1,25 · Folien 20–24 pt
1,05 rem lede · 0,93 rem dense
Schriftstärke 400–500 · Zeichenabstand 0
Zeilenhöhe 1,65 · Folien 14–16 pt
0,78 rem bis 0,85 rem
Space Mono 700 · Zeichenabstand +2 px
Großbuchstaben · Folien 10–12 pt
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
3,5 rem bis 4,5 rem
Swiza 900, niemals mono · Abstand -0,04 em
Beschriftung darunter in mono bei 0,7 rem
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.
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.
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-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.
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.
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.
42 Berlin.
42 Wolfsburg.
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.