Verlässlich
Poppins, klare Raster und Schwarz-Weiß-Kontraste tragen Orientierung und Ruhe.
Brandboard 02 / Designsystem
Editorial Atelier
Klar im System.
Lebendig im Ausdruck.
Die offizielle Markenwelt wird als großzügiges Papierlayout übersetzt: Poppins gibt Struktur, Kalam bringt die handschriftliche Energie des Logos ein. Aquarellfelder und unregelmäßige Facetten halten beides zusammen.
01 / Essenz
Gestaltungsidee
Das digitale Atelierblatt.
Die neue Komposition folgt dem Brandboard enger als ein klassisches Schul-Layout: viel Weißraum, starke schwarze Regeln, unregelmäßig überlagerte Polygonlinien und lasierende Farbfelder. Informationen sitzen wie sorgfältig gesetzte Notizen auf einem gemeinsamen Blatt.
Menschlich
Kalam wird nur für große Überschriften eingesetzt und greift die Logoenergie auf.
In Bewegung
Facetten, Versatz und transparente Pigmente zeigen Entwicklung ohne Dekoration um ihrer selbst willen.
02 / Farben
Verbindliche Quelle
Sechs Farben.
Vier Stimmungen.
Orange, Gold, Nebelblau und Taupe stammen exakt aus dem Brandboard. Schwarz und Weiß sind keine Nebenfarben, sondern strukturieren die Marke. Die vier Webpaletten verändern Gewichtung und Intensität, nie die Herkunft.
Orange
#D08828Gold
#E6C463Nebelblau
#BCC1C5Taupe
#967D77Schwarz
#000000Weiß
#FFFFFF60 / 25 / 10 / 5
60 % Papier und Weißraum · 25 % Schwarz bzw. Dunkelton · 10 % Primärpigment · 5 % zweite Akzentfarbe. Fließtext steht nie auf unruhigem Aquarell.
03 / Typografie
Zwei Stimmen
Struktur trifft Handschrift.
Poppins bleibt die verbindliche Schrift für Text, Navigation und UI. Überschriften können als eigenständige, gut lesbare Kalam-Handschrift oder als klare Poppins gesetzt werden. Der Schalter oben demonstriert beide Systeme live.
Kalam · 700
Menschen wachsennicht im Gleichschritt.Nur für H1–H3 und kurze emotionale Aussagen. Zeilenabstand 0,98; keine Versalien; maximal drei Zeilen.
Poppins · 700
Menschen wachsennicht im Gleichschritt.Alternative für sachlichere Anwendungen. Enge Laufweite, klare Zeilenbrüche, nicht unter 28 px.
H164–112 pxHero / Leitidee
H244–72 pxKapitel
H326–38 pxKomponente
Body L18 px / 1,65Einleitung
Body16 px / 1,70Lesetext
Label11 px / +0,16 emNavigation
04 / Formen
Markenkonstruktion
Lasur. Linie.
Facette.
Die Formensprache wird aus der unregelmäßigen, vielfach überlagerten Campus-Form des Brandboards abgeleitet. Kanten bleiben bewusst verschieden; perfekte Kreise und zufällige weiche Verläufe gehören nicht zum System.
Pigmentfelder
8–24 % Deckkraft
8–24 % Deckkraft
Polygonlinien
1 px, 12 Eckpunkte
1 px, 12 Eckpunkte
Bildfensterruhiger Fokus
Aquarellüberlappt als farbige Lasur; nicht als digitaler Regenbogenverlauf.
Polygonbesteht aus zwei bis drei leicht versetzten Konturen.
Bildfenstersetzt ein Motiv klar frei und lässt mindestens 20 % Weißraum.
Logo
Schwarz auf hellem Papier oder Weiß auf ruhigem Dunkelton. Schutzzone: mindestens die Höhe von „CAMPUS“. Nicht nachzeichnen, einfärben, verzerren oder auf ein unruhiges Foto setzen.
05 / Komponenten
Bausteine
Wenige Teile.
Klare Aufgaben.
Aktionen & Links
Eine Primäraktion pro Kontext. Keine voll gerundeten Pills; die abgeschnittene Ecke verweist auf die Facettenform.
Informationskarten
Bildungsweg
Die Welt entdecken
Bild, Kapitelnummer und klare Handlungszeile bilden eine Einheit.
Mehr erfahren →Live-Auswahl
Rechteckige Segmente, sichtbarer Fokus und korrektes aria-pressed.
Sechseck-Aufzählungen
Eine kleine, regelmäßige Facette übersetzt die Geometrie der Hauptbilder in die Inhaltsebene. Gleichwertige Punkte erhalten Sechsecke, aufeinanderfolgende Schritte behalten ihre Nummern.
- 9 × 8 px im Lesetext, 12 × 11 px als Leitbildmarker
- Marker an der ersten Zeile ausrichten; Folgezeilen bündig zum Text
- Textfarbe auf Papier, Gold auf dunklen Leitbildflächen
Raster & Raum
81624406496
Desktop: 12 Spalten, maximal 1240 px, 24 px Steg. Mobil: 4 Spalten, 16 px Steg. Vertikaler Grundrhythmus 8 px; Sektionen 80–128 px.
06 / Bildwelt & Zugang
Echt & zugänglich
Menschen, Material
und Raum.
Die Fotografie zeigt reale Lernorte, handwerkliche Details, Begegnung und Aufführung. Helles Tageslicht, natürliche Materialien und ungestellte Situationen passen zur Marke.
Kontrast
Fließtext mindestens 4,5:1. Weiß auf Orange ist für kleine Schrift nicht freigegeben; dort Schwarz verwenden. Fokusmarkierung bleibt auf allen Paletten sichtbar.
Bedienung
Alle Schalter sind per Tastatur erreichbar, verwenden echte Buttons und geben ihren Zustand über aria-pressed aus.
Bewegung
Keine wichtige Information wird animiert. Bei prefers-reduced-motion entfallen Scroll- und Hoverbewegungen.
Bildtexte
Alternative Texte beschreiben Inhalt und Zweck. Rein dekorative Aquarell- und Polygonfelder bleiben für Screenreader verborgen.