Das Design-System des Technorama auf einen Blick — die Bausteine im Überblick, jedes Thema mit eigener Detailseite. Dort stehen die vollständigen Werte, live aus dem CMS und per Klick kopierbar.

In diesem Kapitel

Logo, T-Shape, Farb- und Schrifteinsatz, Raster, Spacing & Motion, Illustrationen sowie Symbole — jede Detailseite zeigt ihren Baustein in der Anwendung und liefert die Werte.

Zwei DomänenAnalog oder digital — welches Regelwerk wann gilt und warum derselbe Begriff zwei Werte hat.Ansehen LogoBildmarke, Lockup und T-Shape — Aufbau, Schutzraum und Anwendung.Ansehen T-ShapeDas T als Gestaltungselement — Formen, Farbflächen und Anschnitt.Ansehen FarbeinsatzDie vier Markenfarben in der Praxis — eine Farbe pro Anwendung.Ansehen SchrifteinsatzES Allianz im Einsatz — Komposition, Satzweise und Schrift auf Farbe.Ansehen GestaltungsrasterDas 12×12-Raster — modulare Unterteilung und Ausrichtung aller Elemente.Ansehen Spacing & MotionAbstände, Radien und Motion — das unsichtbare Mass- und Timing-System.Ansehen Illustrationen & IconsIcons und Illustrationen — offene Linie, eine Markenfarbe als Akzent.Ansehen Symbole & SignaletikSignaletik-Piktogramme und das Symbolset für Beschilderung und Betrieb — jedes Zeichen als SVG und PNG.Ansehen

Grundprinzipien

Drei Regeln tragen jeden Auftritt. Auf den Detailseiten werden sie zu konkreten Tokens.

Eine Farbe pro Anwendung

Ein Auftritt trägt genau einen Markenakzent — konsequent durchgehalten, nie kombiniert.

Linksbündig, nie Versalien

ES Allianz durchgängig linksbündig gesetzt. Hervorhebungen stehen sparsam in Bold.

Knappe Radien, ruhige Motion

0–4 px Radien, zwei Kurven, drei Dauern — präzise und zurückhaltend statt verspielt.

Die Bausteine im Überblick

Ein kurzer Blick auf jeden Baustein. Palette, Skala und alle kopierbaren Werte stehen auf der jeweiligen Detailseite.

Farben

Zum Farbeinsatz
black
white
red
orange
blue
green
bg
bg-alt
fg
fg-invert
muted
muted-2
muted-invert
rule
rule-invert
rule-strong
surface-1
surface-2
surface-3

Typografie

Zum Schrifteinsatz
ES Allianz · Extrabold bis Light
Neugierde wird zur Handlung.

Spacing & Motion

Zu Spacing & Motion
s-0 · 0
s-1 · 4px
s-2 · 8px
s-3 · 12px
s-4 · 16px
s-5 · 24px

Gestaltungsraster

Zum Gestaltungsraster

Tokens exportieren

Der vollständige Token-Satz — live aus dem CMS — als CSS-Variablen, JSON oder Tailwind-Preset.

CSSJSONTailwind-Preset

Richtlinien