Brand System

00 · System verstehen

Wie dieses Designsystem zu lesen ist

Dieses Kapitel definiert Zweck, Prioritäten und Statuslogik des Master-Designsystems – für Menschen ebenso wie für Werkzeuge, die daraus Anwendungen ableiten.

Zweck

Eine verbindliche Referenz für alle Kanäle

Das Designsystem ist die verbindliche Referenz für Marke, Redaktion, digitale Produkte, Unternehmenskommunikation, Medienproduktion, Accessibility und technische Implementierung. Es beschreibt Regeln, Muster und Beispiele – es ist kein Universallayout und kein Produktionsauftrag.

Prioritätsregel

Konflikte werden in dieser Reihenfolge entschieden

Recht, Sicherheit und Datenschutz
Accessibility
Verbindliche Markenregeln
Funktionale Anforderungen
Anwendungsmuster
Optionale Gestaltung
Exemplarische Darstellung

Konsequenz

Was die Prioritätsregel bedeutet

Eine gestalterische Empfehlung darf niemals eine rechtliche, sicherheitsrelevante oder barrierefreie Anforderung verdrängen.
Verbindliche Markenregeln gehen optionalen Effekten und exemplarischen Darstellungen immer vor.
Beispiele stehen am Ende der Prioritätskette: Sie zeigen, wie etwas aussehen kann – nicht, was produziert werden muss.

Statussystem

Jede Regel und jedes Beispiel trägt einen Status

Verbindlich Empfohlen Optional Beispiel Produktion erforderlich Nicht zulässig Veraltet

Bedeutung der Statusstufen
Status	Bedeutung	Handlung
Verbindlich	Muss in jeder Anwendung eingehalten werden.	Immer umsetzen; Abweichung nur mit Freigabe.
Empfohlen	Bewährtes Muster mit klarem Qualitätsvorteil.	Standardmäßig übernehmen; Abweichung begründen.
Optional	Zulässige Gestaltung ohne Verpflichtung.	Nach Kontext und Anwendungsmatrix entscheiden.
Beispiel	Demonstriert Gestaltung oder Funktion.	Nicht als Produktionsauftrag interpretieren.
Produktion erforderlich	Reales Asset muss noch erstellt werden.	Nur nach Briefing und Freigabeprozess produzieren.
Nicht zulässig	Verstößt gegen Marken- oder Qualitätsregeln.	Nicht verwenden; bestehende Fälle ablösen.
Veraltet	Wird mit Frist durch einen Ersatz abgelöst.	Nicht neu einsetzen; Migration einplanen.

Verbindliche Interpretationsregel: Beispiele demonstrieren Gestaltung oder Funktion. Sie sind keine Aufforderung zur Erzeugung neuer Assets. Medien dürfen nur produziert werden, wenn sie ausdrücklich als „Produktion erforderlich“ gekennzeichnet sind und data-generation-allowed="true" tragen.

01 · Markenstrategie

Orientierung in einer Branche im Wandel

VTM übersetzt technologische, regulatorische und organisatorische Veränderungen in belastbare Einordnung für Entscheiderinnen und Entscheider der Versicherungswirtschaft.

Purpose

Komplexität in Handlungsfähigkeit übersetzen

VTM macht technologische Entwicklungen verständlich, bewertet ihre Relevanz für Versicherungsunternehmen und schafft eine fundierte Grundlage für strategische Entscheidungen.

Brand Promise

Relevanz ohne Rauschen

Jeder Beitrag soll entweder erklären, einordnen, belegen oder eine Entscheidung besser machen.

Mission

Technologie verständlich machen

VTM verbindet journalistische Sorgfalt mit technischer Tiefe und der praktischen Realität von Versicherungsunternehmen.

Vision

Die Referenz für Versicherungstechnologie

VTM wird zur verlässlichsten deutschsprachigen Informationsplattform für die technologische Transformation der Versicherungswirtschaft.

Positionierung

Das digitale B2B-Fachmagazin an der Schnittstelle von Versicherung, Technologie und Transformation

VTM richtet sich an Menschen, die Systeme verantworten, Transformation gestalten, Risiken bewerten und Investitionsentscheidungen vorbereiten.

Zielgruppen

Drei Perspektiven, ein gemeinsamer Informationsraum

01 · Leadership

Vorstand & C-Level

CIO, CTO, CDO, COO und strategische Entscheider benötigen belastbare Einordnung, wirtschaftliche Konsequenzen und klare Handlungsoptionen.

Strategische Relevanz
Investitionslogik
Risiken und Abhängigkeiten
Markt- und Wettbewerbsvergleich

02 · Technology

Architektur & IT

Enterprise Architects, Plattformverantwortliche und Engineering-Leads erwarten technische Substanz, nachvollziehbare Modelle und praktische Erfahrungen.

Zielarchitekturen
Integration und Daten
Cloud und Plattformen
Modernisierungspfade

03 · Business

Fachbereich & Transformation

Produkt-, Operations-, Schaden- und Transformationsbereiche benötigen verständliche Auswirkungen auf Prozesse, Kundenerlebnis und Organisation.

Prozesswirkung
Umsetzbarkeit
Regulatorischer Kontext
Veränderung der Rollen

Persönlichkeit

So tritt VTM auf

Präzise: konkrete Aussagen statt Allgemeinplätze.
Souverän: ruhig, klar und ohne Übertreibung.
Technisch fundiert: Substanz vor Buzzwords.
Kritisch: Behauptungen werden geprüft und eingeordnet.
Zugänglich: Komplexität wird erklärt, nicht verborgen.
Meinungsstark: Haltung basiert auf Argumenten und Evidenz.

Brand Boundaries

Was VTM nicht ist

Keine unkritische Bühne für Produktversprechen.
Kein austauschbares Technologie-Newsportal.
Keine futuristische Cyber- oder Hologramm-Marke.
Keine visuelle Inszenierung ohne inhaltliche Funktion.
Keine künstliche Exklusivität durch unnötige Fachsprache.
Keine Vermischung von Redaktion und Werbung.

02 · Logo

Klar erkennbar in jedem Kontext

Die Wortmarke ist der konstante Absender des Systems. Effekte finden in ihrem Umfeld statt – das Logo selbst wird nicht animiert, verzerrt oder dekorativ verändert.

Primärlogo · Farbe

Für helle Flächen

Standardvariante auf Weiß, Off-White und sehr hellen neutralen Hintergründen.

Inverslogo · Weiß

Für dunkle Flächen

Ausschließlich auf Cobalt, dunklen Bildern oder ausreichend kontrastreichen Brand-Verläufen verwenden.

Schutzraum

Die Marke braucht Abstand

Der minimale Schutzraum entspricht der optischen Höhe des Buchstabens „V“ der Wortmarke. Innerhalb dieses Bereichs stehen keine Texte, Linien, Bilder oder Bedienelemente.

Verbindliche Regeln

Anwendung

Mindestbreite im digitalen Einsatz: 140 CSS-Pixel.
Seitenverhältnis immer beibehalten; niemals stauchen, strecken oder drehen.
Keine Schatten, Konturen, Glows oder Animationen direkt auf das Logo anwenden.
Nur die freigegebenen Farb- und Weißvarianten verwenden.
Auf Bildern muss der Hintergrund ruhig und ausreichend kontrastreich sein.

Zulässig

Ruhig und unverändert

Farbvariante auf hellen Flächen
Weißvariante auf Cobalt
Ausreichender Schutzraum
Originales Seitenverhältnis
Freigegebene Originaldatei

Nicht zulässig

Verfremdet oder kontrastarm

Eigene Umfärbungen oder Verläufe
Animation einzelner Logobestandteile
Schlagschatten, Glow oder 3D-Effekt
Platzierung auf unruhigen Motiven
Veränderung der Proportionen

Produktionshinweis: Für archivierte, offline verfügbare und produktive Fassungen werden die Logos lokal unter ./assets/logos/ gespeichert. Die externen URLs in diesem Guide dienen der portablen Vorschau.

03 · Signature System

Editorial Signal Intelligence

Der VTM-Signature-Code verbindet redaktionelle Autorität mit digitaler Bewegung: Electric aktiviert, Cobalt strukturiert und Brass kennzeichnet Evidenz.

Signature 01 · Signal Line

Eine Linie mit Bedeutung

Die Signal Line verbindet Themen, Kapitel und Datenpunkte. Der Lichtimpuls bewegt sich langsam und selten – nicht als Dekoration, sondern als Zeichen für Weiterleitung und Erkenntnis.

Signature 02 · Index

Redaktionelle Ordnung

Kapitelnummern, Datencodes und Metainformationen erzeugen eine wiedererkennbare publizistische Systematik.

03 · Signatur VTM / 4.2 Research

Electric Signal

Bewegung & Interaktion

Electric Blue markiert Links, Fokus, aktive Navigation, Primäraktionen und technologische Datenverbindungen.

Cobalt Anchor

Autorität & Struktur

Deep Cobalt verankert Navigation, Typografie, Footer und redaktionelle Hierarchie.

Research Glint

Evidenz & Original Research

Brass erscheint nur für VTM-eigene Studien, exklusive Daten, Methodikhinweise und Research-Markierungen.

Verlaufslogik

Drei Verläufe, drei Aufgaben

Brand Gradient

Cobalt → Electric

Für Hero-Flächen, Report-Cover, Footer, Keyvisuals und ausgewählte Kapitelaufmacher.

Atmospheric Gradient

Licht statt Fläche

Sehr leichte radiale Lichtfelder schaffen Tiefe auf Weiß, ohne die Flächenbalance zu dominieren.

Signature Gradient

Brass als Herkunftszeichen

Ausschließlich für Research, eigene Daten und hochwertige redaktionelle Markierungen.

VTM

Kontrollierte Leuchtkraft

Ein dominanter Lichtmoment pro Viewport
Langsame atmosphärische Bewegung
Kurzer Glint bei relevanter Interaktion
Effekte unterstützen Hierarchie und Bedeutung
Reduzierte Bewegung wird respektiert

Nicht VTM

Effekte ohne Funktion

Leuchtende Ränder an jeder Komponente
Dauerhaft wandernde Verläufe im Fließtext
Glassmorphism als universeller Card-Stil
Partikel, Mouse-Follower oder 3D-Tilt
Animation des Logos

04 · Farbe

Helle Redaktion, elektrische Akzente

Weißraum bleibt die Grundlage. Cobalt schafft Autorität, Electric signalisiert Interaktion und Brass kennzeichnet redaktionelle Evidenz.

Kernpalette

Verbindliche Markenfarben

Deep Cobalt #121E39 oklch(22% 0.05 260) Text · Navigation · Anker

Editorial White #FFFFFF oklch(100% 0 0) Primäre redaktionelle Fläche

Signal Electric #123FA6 Produktionswert für Text & UI Links · Buttons · Fokus

Research Brass #C99B32 Akzentwert Research · Signatur · Daten

Flächenbalance

Die Helligkeit bleibt Teil der Marke

85–92 % Neutral

5–10 %

2–5 %

<1 %

85–92 %

Neutral

Weiß, Paper und sehr helle blaue Flächen.

5–10 %

Cobalt

Navigation, Footer und strategische Ankerflächen.

2–5 %

Electric

Interaktion, Signale und primäre Datenreihen.

<1 %

Brass

Original Research und redaktionelle Herkunft.

Kontrastrollen

Freigabe nach Anwendungsfall

Verbindliche Farbkombinationen für digitale Anwendungen
Vordergrund	Hintergrund	Einsatz	Status
Deep Cobalt	Editorial White	Fließtext, Überschriften, Meta	Freigegeben
Signal Electric #123FA6	Editorial White	Links, Buttons, UI-Text	Freigegeben
Weiß	Deep Cobalt	Navigation, Footer, dunkle Cards	Freigegeben
Research Brass #C99B32	Editorial White	Große Akzente, Linien, Icons	Kein Kleinsttext
Dunkles Brass #9B7017	Editorial White	Research-Text nach finaler Prüfung	Einzeln prüfen
Weiß	Signal Electric #123FA6	Primärbutton	Freigegeben

05 · Typografie

Vier Rollen, eine Stimme

Plus Jakarta Sans führt, Inter erklärt, Source Serif 4 gibt der redaktionellen Stimme Tiefe und IBM Plex Mono strukturiert Daten und Metainformationen.

Display · Plus Jakarta Sans · 600–800

Technologie verändert Versicherung.

Einsatz: H1–H3, Masthead, Claim, Report-Titel, Kampagnenmotive und prägnante Zahlen.

Body & UI · Inter · 400–700

Kernsystemmodernisierung ist kein isoliertes IT-Projekt. Sie verändert Datenflüsse, Produktlogik, Verantwortlichkeiten und die Fähigkeit eines Versicherers, auf neue Marktanforderungen zu reagieren. Gute redaktionelle Typografie macht diese Zusammenhänge auch in längeren Beiträgen zugänglich.

Standard für Fließtext: 16–18 Pixel, Zeilenhöhe 1,65–1,75 und eine Lesebreite von ungefähr 60–68 Zeichen.

Editorial · Source Serif 4 · 400/600/Italic

„Technologische Erneuerung beginnt nicht mit einer Plattform, sondern mit einer klaren Entscheidung über Verantwortung.“

Einsatz: Pull-Quotes, Essays, Interviews und ausgewählte Meinungsformate – nicht für Navigation oder Formulare.

Meta & Data · IBM Plex Mono · 500–600

VTM Research / Modernisierungsindex 2026 / n=84 / Datenstand 30.06.2026 / Version 4.2

Einsatz: Rubriken, Datum, Datenlabels, Quellen, Code und technische Statusinformationen.

Typografische Hierarchie

Inhalt zuerst scannbar machen

H1 nur einmal pro Dokument oder Seite.
H2 eröffnet Hauptabschnitte, H3 strukturiert Teilthemen.
Lead erklärt Relevanz und Perspektive.
Fließtext bleibt linksbündig; kein Blocksatz im Web.
Meta-Typografie wird sparsam und nicht als Fließtext verwendet.
Versalien nur für kurze Labels und Statusangaben.

Font Loading

Markenkonsistenz ohne Datenschutzrisiko

Produktivschriften lokal als WOFF2 hosten.
font-display: swap einsetzen.
Nur tatsächlich benötigte Schnitte ausliefern.
Variable Fonts für Display, Body und Serif bevorzugen.
Fallback-Metriken auf Layoutstabilität prüfen.
Lizenzdateien gemeinsam mit dem Font-Paket archivieren.

Typografische Skala

Empfohlene Rollen

Rolle	Familie	Gewicht	Zeilenhöhe	Einsatz
Hero / H1	Plus Jakarta Sans	800	0,94–1,02	Seiten- und Report-Aufmacher
H2	Plus Jakarta Sans	700	1,05–1,12	Kapitelüberschrift
H3	Plus Jakarta Sans	700	1,12–1,22	Komponenten und Teilthemen
Lead	Inter	400–500	1,55–1,68	Einleitung und Zusammenfassung
Body	Inter	400	1,65–1,75	Fließtext und UI
Quote	Source Serif 4	400 Italic	1,30–1,45	Pull-Quote und Essay
Meta	IBM Plex Mono	500–600	1,40–1,60	Datum, Quelle und Status

06 · Editorial Experience

Inhalt ist das zentrale Produkt

VTM verbindet Nachricht, Analyse, Praxiswissen und Original Research in einer nachvollziehbaren redaktionellen Hierarchie.

Story-System

Formate bleiben vor dem Öffnen erkennbar

Analyse 8 Min.

Warum Datenentkopplung vor dem Core-Replacement kommt

Eine Einordnung technologischer Abhängigkeiten und realistischer Modernisierungspfade.

IT-Praxis Architektur

API-Schichten zwischen Übergangslösung und Zielarchitektur

Welche Integrationsmuster kurzfristig helfen und langfristig neue Abhängigkeiten erzeugen können.

VTM Research Index 2026

Modernisierungsindex: Prioritäten verschieben sich

Exklusive Daten zu Architektur, Cloud-Betrieb und Erneuerungsstrategien in der Versicherungswirtschaft.

Artikeltemplate

Vollständiger redaktioneller Aufbau

Analyse Kernsysteme

Architektur / Transformation / VTM Analyse

Kernsystemmodernisierung beginnt außerhalb des Kernsystems

Wer technologische Erneuerung ausschließlich als Austausch einer zentralen Plattform versteht, unterschätzt Daten, Prozesse und organisatorische Abhängigkeiten.

Von VTM Redaktion 10. Juli 2026 8 Minuten Lesezeit Aktualisiert: 10. Juli 2026

Kontext

Versicherer modernisieren ihre Systemlandschaften nicht auf einer leeren Fläche. Produktlogik, Vertragsdaten, Bestandsprozesse und regulatorische Anforderungen sind über Jahre miteinander verwachsen. Eine tragfähige Strategie muss diese Beziehungen sichtbar machen.

„Nicht der Austausch eines Systems ist das Ziel, sondern die kontrollierte Reduktion kritischer Abhängigkeiten.“
VTM Analyse · Kernsystemmodernisierung

Abhängigkeiten

Datenentkopplung, API-Governance und klare fachliche Verantwortlichkeiten können die Veränderungsfähigkeit bereits verbessern, bevor eine vollständige Plattformmigration beschlossen wird.

Konsequenz

Die entscheidende Frage lautet daher nicht nur, welches Kernsystem künftig eingesetzt wird. Entscheidend ist, welche Fähigkeiten unabhängig vom Kernsystem verfügbar sein müssen.

Research-Daten ansehen Transparenzstandard

Data Intelligence

Daten werden erklärt, nicht nur dargestellt

VTM Modernisierungsindex 2026

Prioritäten bei der Kernsystemmodernisierung

Anteil der befragten Unternehmen, die das jeweilige Handlungsfeld als hohe oder sehr hohe Priorität einstufen.

Datenentkopplung

82 %

API-Schicht

74 %

Cloud-Betrieb

58 %

Komplettaustausch

31 %

Prioritäten bei der Kernsystemmodernisierung
Handlungsfeld	Anteil
Datenentkopplung	82 Prozent
API-Schicht	74 Prozent
Cloud-Betrieb	58 Prozent
Komplettaustausch	31 Prozent

Quelle: VTM Modernisierungsindex 2026 · n = 84 · Mehrfachnennungen möglich · Beispieldaten zur Darstellung des Designsystems.

Chart-Regeln

Jede Grafik bleibt nachvollziehbar

Titel beschreibt die Aussage, nicht nur das Thema.
Einheit, Zeitraum und Grundgesamtheit werden genannt.
Achsen beginnen bei Balkendiagrammen grundsätzlich bei null.
Werte werden direkt beschriftet, wenn dies die Lesbarkeit erhöht.
Farbe wird durch Text, Marker oder Muster ergänzt.
Eine zugängliche Datentabelle steht zusätzlich bereit.

Original Research

Brass dokumentiert Herkunft

Brass nur für VTM-eigene Erhebung oder Analyse.
Methodik und Einschränkungen offenlegen.
Stichprobengröße und Erhebungszeitraum nennen.
Keine Scheingenauigkeit durch ungeeignete Dezimalstellen.
Korrelation und Kausalität sprachlich unterscheiden.
Downloadbare Daten nur nach rechtlicher Freigabe anbieten.

07 · Bildsprache

Dokumentarisch statt dekorativ

VTM zeigt reale Menschen, technologische Zusammenhänge und die Arbeitswirklichkeit der Versicherungsbranche. Bilder schaffen Glaubwürdigkeit und Kontext – nicht bloß Atmosphäre.

Porträt · 4:5 Menschen mit Kontext

Redaktionelle Porträts

Natürliche Haltung, glaubwürdige Arbeitsumgebung und kontrolliertes Licht. Die Person wird nicht als austauschbares Symbolmotiv inszeniert.

Echte Gesprächspartner und Verantwortliche zeigen.
Negativraum für redaktionelle Crops einplanen.
Hauttöne und Materialfarben natürlich wiedergeben.
Name, Funktion, Unternehmen und Bildnachweis erfassen.

Technologie · 16:9 Systeme sichtbar machen

Technologie & Infrastruktur

Architektur, Geräte, Schnittstellen und Arbeitsprozesse werden konkret gezeigt. Generische Serverräume und Science-Fiction-Klischees sind zu vermeiden.

Reale Nutzung vor symbolischen Stockmotiven.
Details nur einsetzen, wenn sie zum Inhalt beitragen.
Sensible Daten und Zugangsinformationen entfernen.
Keine künstliche Blauüberlagerung als Standardfilter.

Research · 3:2 Evidenz visualisieren

Research & Illustration

Illustrationen erklären Daten, Systeme oder Beziehungen. Brass kennzeichnet ausschließlich VTM-eigene Analysen, Studien und redaktionell verantwortete Research-Inhalte.

Informationsgehalt vor dekorativer Wirkung.
Diagramme benötigen Titel, Einheit und Quelle.
Farbunterschiede durch Form oder Text ergänzen.
Generative Inhalte transparent kennzeichnen.

VTM · Empfohlen

Authentisch und fachlich

Reale Personen und überprüfbare Situationen
Ruhige Bildkomposition mit klarer Hierarchie
Natürliche Farben und glaubwürdige Materialien
Konsistente Angaben zu Urheber und Nutzungsrechten
Varianten für 16:9, 4:5, 1:1 und 9:16

Nicht VTM

Austauschbar oder künstlich

Handschlag-, Puzzle- oder Roboter-Klischees
Unbegründete Neon-, Cyber- oder Hologramm-Ästhetik
Übermäßige Retusche und unrealistische Hauttöne
KI-Bilder ohne Kennzeichnung oder Zweck
Text im Bild ohne barrierefreie Alternative

Bildhierarchie

Formate nach Funktion

Format	Verhältnis	Einsatz
Hero	16:9 oder 3:2	Artikel- und Themeneinstieg
Porträt	4:5	Interview, Profil, Autorenschaft
Social	1:1 und 4:5	LinkedIn und Kampagnen
Story	9:16	Mobile Kurzformate
Research	3:2	Studien, Reports und Datenteaser

Accessibility

Alternativtexte

Informative Bilder erhalten einen knappen, kontextbezogenen Alternativtext.
Rein dekorative Bilder verwenden ein leeres alt="".
Text im Bild wird zusätzlich als echter HTML-Text angeboten.
Diagramme erhalten Beschreibung und zugängliche Datentabelle.
Der Alternativtext wiederholt keine unmittelbar benachbarte Bildunterschrift.

08 · Voice & Tone

Präzise. Souverän. Verständlich.

VTM spricht fachlich fundiert und direkt. Die Sprache ordnet Komplexität ein und unterscheidet konsequent zwischen Fakten, Prognosen, Positionen und Meinungen.

01 · Präzise

Konkrete Aussagen

Zahlen, Zeiträume, Verantwortlichkeiten und Quellen werden genannt. Unbestimmte Superlative werden vermieden.

02 · Souverän

Ruhige Autorität

VTM argumentiert nachvollziehbar und ohne werbliche Übertreibung. Unsicherheiten werden sichtbar gemacht.

03 · Zugänglich

Fachsprache mit Maß

Branchenbegriffe sind erlaubt, werden aber bei Bedarf erklärt. Abkürzungen werden beim ersten Auftreten ausgeschrieben.

04 · Kritisch

Unabhängige Einordnung

Aussagen von Unternehmen und Verbänden werden geprüft, kontextualisiert und als solche kenntlich gemacht.

VTM

Belegt und differenziert

„Laut der veröffentlichten Studie verkürzt sich die durchschnittliche Bearbeitungszeit im untersuchten Prozess um 18 Prozent. Ob sich der Wert auf andere Bestände übertragen lässt, bleibt offen.“

Nicht VTM

Werblich und absolut

„Die revolutionäre Lösung transformiert die gesamte Versicherungsbranche und garantiert maximale Effizienz.“

Schreibregeln

Redaktioneller Standard

Aktive, möglichst kurze Sätze bevorzugen.
Zahlen in Datenreihen als Ziffern darstellen.
Deutsche Datumsform: 10. Juli 2026.
Prozentwerte im Fließtext: 18 %.
Abkürzungen bei der ersten Nennung erklären.
Personen mit Name, Funktion und Organisation nennen.
Nachricht, Analyse, Meinung und Werbung unterscheiden.

Ansprache

Respektvoll und inklusiv

Nach Möglichkeit neutrale Begriffe wie „Beschäftigte“, „Fachkräfte“ oder „Team“ verwenden.
Personenbezeichnungen konsistent formulieren.
Direkte Ansprache sparsam und situationsgerecht einsetzen.
Keine abwertenden Zuschreibungen oder Stereotype.
Zitate nicht sprachlich verfälschen.
Kürzungen und redaktionelle Ergänzungen kennzeichnen.

Transparenzstandard

Jeder Beitrag macht seine Herkunft nachvollziehbar

Angabe	Status	Umsetzung
Autorenschaft	Pflicht	Name, Funktion und verlinktes Profil
Veröffentlichung	Pflicht	Datum und gegebenenfalls Uhrzeit
Aktualisierung	Bei Änderung	Datum und wesentliche Änderung dokumentieren
Quellen	Pflicht	Primärquellen bevorzugen und direkt verlinken
Methodik	Bei Daten	Stichprobe, Zeitraum, Methode und Einschränkungen
Sponsored Content	Pflicht	Vor Titel und Teaser eindeutig kennzeichnen
KI-Unterstützung	Bei Relevanz	Art und Umfang der Unterstützung offenlegen
Korrekturen	Pflicht	Inhaltliche Korrekturen transparent protokollieren

09 · Interaktion

Klar vor spektakulär

Interaktionen bestätigen eine Handlung, erklären den nächsten Schritt und bleiben in allen Zuständen verständlich. Bewegung dient der Orientierung, nicht der Inszenierung.

Button-System

Eine dominante Aktion

Pro Inhaltsbereich soll es höchstens eine visuell dominante Primäraktion geben.

Buttons lösen Aktionen aus; Links öffnen Ziele.
Beschriftungen beschreiben das konkrete Ergebnis.
Touch-Ziele grundsätzlich mindestens 44 × 44 Pixel.
Fokus, Hover, Active und Disabled unterscheiden.
Icons ergänzen Text, ersetzen ihn aber nicht automatisch.

Statussystem

Zustände bleiben eindeutig

Standard Aktiv Research Erfolgreich Prüfen Fehler

Status nie ausschließlich durch Farbe vermitteln.
Fehlermeldungen direkt dem Feld zuordnen.
Ladezustände ankündigen und Mehrfachauslösung verhindern.
Erfolgsmeldungen konkret formulieren.
Wichtige Meldungen nicht automatisch zu schnell ausblenden.

Formularmuster

Newsletter-Anmeldung

Motion Language

Bewegung mit Bedeutung

Standarddauer: 160–320 Millisekunden.
Atmosphärische Bewegung darf deutlich langsamer sein.
Primär transform und opacity animieren.
Keine automatisch laufenden, hektischen Animationen.
prefers-reduced-motion respektieren.
Inhalte nie dauerhaft durch Reveal-Skripte verbergen.

Motion Semantics

Drei Bewegungsrollen

Signal: horizontaler Lichtimpuls für Verbindung und Navigation.
Reveal: kurze, ruhige Bewegung beim Eintritt in den Viewport.
Research Glint: einmaliger Brass-Schimmer bei eigener Evidenz.
Atmosphere: langsame, nicht interaktionskritische Hintergrundbewegung.

Motion-Prinzip

Die Oberfläche reagiert – sie führt keine Show auf

Animationen sollen Orientierung geben, Hierarchie verdeutlichen oder eine Zustandsänderung bestätigen. Wenn eine Bewegung keine dieser Aufgaben erfüllt, wird sie entfernt.

10 · Technologie

Robust by default

Das visuelle System wird als wartbares Produkt umgesetzt: semantisch, performant, datenschutzfreundlich und unabhängig von einzelnen Plattformen.

Font-Paket

Lokale Produktionsschriften

Die vier verbindlichen Schriftfamilien werden für öffentliche Produktionssysteme lokal als WOFF2 ausgeliefert.

Rolle	Schrift	Gewichte
Display	Plus Jakarta Sans	600–800
Body & UI	Inter	400–700
Editorial	Source Serif 4	400, 600, Italic
Meta & Code	IBM Plex Mono	500–600

Paketstruktur

Empfohlene Ablage

VTM-Brand-System-4.2/
├── VTM-Brand-Design-System-4.2-Final.html
├── README.txt
└── assets/
    ├── fonts/
    │   ├── plus-jakarta-sans-variable.woff2
    │   ├── inter-variable.woff2
    │   ├── source-serif-4-variable.woff2
    │   ├── source-serif-4-italic-variable.woff2
    │   ├── ibm-plex-mono-500.woff2
    │   ├── ibm-plex-mono-600.woff2
    │   └── OFL-LICENSES.txt
    └── logos/
        ├── vtm-logo-color.png
        └── vtm-logo-white.png

Token-Architektur

Primitive → semantisch → Komponente

Komponenten verwenden keine unkommentierten Rohfarben. Semantische Tokens bilden Bedeutung ab und ermöglichen kontrollierte Änderungen über Kanäle und Themes hinweg.

{
  "color": {
    "primitive": {
      "cobalt-950": {
        "value": "#121e39",
        "type": "color"
      },
      "electric-700": {
        "value": "#123fa6",
        "type": "color"
      },
      "brass-700": {
        "value": "#9b7017",
        "type": "color"
      }
    },
    "semantic": {
      "text-primary": {
        "value": "{color.primitive.cobalt-950}",
        "type": "color"
      },
      "action-primary": {
        "value": "{color.primitive.electric-700}",
        "type": "color"
      },
      "editorial-research": {
        "value": "{color.primitive.brass-700}",
        "type": "color"
      }
    }
  }
}

Semantik

Native Elemente zuerst

Landmarks wie header, nav, main und footer verwenden.
Überschriftenhierarchie logisch aufbauen.
Native Elemente vor ARIA-Ersatzlösungen bevorzugen.
Tabellen nur für tabellarische Daten verwenden.
Datum, Zitat und Sprachwechsel semantisch auszeichnen.
Buttons und Links nach ihrer tatsächlichen Funktion wählen.

Progressive Enhancement

Kerninhalte bleiben verfügbar

Kerninhalte funktionieren ohne JavaScript.
Links besitzen echte Zieladressen.
Formulare werden auch serverseitig validiert.
OKLCH-Farben erhalten sRGB-Fallbacks.
Gradient-Text besitzt eine einfarbige Ausgangsfarbe.
Animationen werden nur bei technischer Unterstützung ergänzt.

Qualitätsbudget

Verbindliche Produktziele

Bereich	Ziel	Prüfung
Accessibility	WCAG 2.2, Konformitätsstufe AA	Automatisiert und manuell
LCP	≤ 2,5 Sekunden am 75. Perzentil	Felddaten und Labortest
INP	≤ 200 Millisekunden am 75. Perzentil	Felddaten
CLS	≤ 0,1 am 75. Perzentil	Felddaten und visuelle Prüfung
Reflow	Ohne Inhaltsverlust bei 320 CSS-Pixel Breite	Manueller Responsive-Test
Privatsphäre	Keine unnötigen Drittanbieter-Requests	Netzwerk- und Consent-Audit
Resilienz	Kerninhalte ohne JavaScript erreichbar	Test mit deaktiviertem JavaScript

11 · Governance

Ein System mit Verantwortung

Markenqualität entsteht durch klare Zuständigkeiten, dokumentierte Entscheidungen und wiederholbare Qualitätsprüfungen.

Brand Owner

Marketing & Marke

Verantwortet Positionierung, visuelle Identität, Kampagnenfähigkeit und kanalübergreifende Konsistenz.

Editorial Owner

Chefredaktion

Verantwortet Tonalität, journalistische Standards, Quellen, Kennzeichnungen und redaktionelle Transparenz.

System Owner

Design & Product

Verantwortet Komponenten, Tokens, Figma-Bibliothek, Dokumentation und visuelle Qualitätssicherung.

Technical Owner

Engineering

Verantwortet Implementierung, Accessibility, Performance, Browser-Kompatibilität und Release-Automatisierung.

Definition of Done

Verbindliche Freigabekriterien

Prüfbereich	Kriterium	Nachweis
Marke	Logo, Farben, Typografie und Signature Code regelkonform	Brand Review
Redaktion	Autor, Datum, Quellen, Kennzeichnung und Korrekturweg vorhanden	Editorial QA
Accessibility	WCAG 2.2 AA; Tastatur, Fokus, Zoom und Screenreader geprüft	Automatisierter und manueller Test
Performance	LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1	Monitoring und Labortest
Responsive	320 Pixel bis große Desktop-Breite ohne Inhaltsverlust	Geräte- und Browser-Test
Datenschutz	Fonts, Medien, Tracking und Formulare geprüft	Privacy Review
Visual Regression	Keine unbeabsichtigte Änderung kritischer Komponenten	Screenshot-Vergleich
Dokumentation	Änderung, Verantwortliche und Migration dokumentiert	Changelog

Release-Modell

Vier kontrollierte Statusstufen

Draft: Konzept in Bearbeitung; nicht für Produktion freigegeben.
Beta: Inhaltlich vollständig; nur in kontrollierten Pilotprojekten.
Stable: Dokumentiert, getestet und produktiv freigegeben.
Deprecated: Mit Frist und dokumentiertem Ersatz versehen.

Änderungsprozess

Von der Anforderung zur Freigabe

Anforderung und Problem nachvollziehbar dokumentieren.
Wirkung auf Marke, Redaktion, Accessibility und Technik prüfen.
Änderung in Design und Code prototypisch umsetzen.
Tests und Reviews durch die zuständigen Owner.
Version, Changelog und Migration veröffentlichen.

Freigabestatus

Version 4.2 · Luminous Editorial Edition

Diese Fassung definiert die verbindliche gestalterische, redaktionelle und technische Grundlage für VTM-Markenauftritte. Projektspezifische Abweichungen benötigen eine dokumentierte Freigabe durch den Brand Owner und den betroffenen fachlichen Owner.

Stable Version 4.2 Juli 2026 WCAG 2.2 AA als Ziel Luminous Editorial

12 · Foundations

Layout, Raster, Form und Icons

Vier Layoutmodi, ein responsives Raster, die bestehende Spacing-Skala und kontrollierte Tiefe bilden das Fundament aller VTM-Anwendungen.

Layoutmodi

Vier Breiten mit klarer Aufgabe

Modus	Maximalbreite	Einsatz	Status
Reading	720 px	Artikel-Fließtext und lange Leseformate	Verbindlich
Content	1200 px	Standardinhalte, Cards, Formulare	Verbindlich
Wide	1440 px	Navigation, Dashboards, Datenansichten	Empfohlen
Full Bleed	100 %	Ausschließlich markenprägende Aufmacher und Medienflächen	Optional

Responsive Raster

4 · 6 · 12 Spalten

Mobile: 4 Spalten.
Tablet: 6 Spalten.
Desktop und Wide: 12 Spalten.
Mindestbreite: 320 CSS-Pixel ohne horizontales Scrollen der Seite.

Spacing

Die bestehende Skala bleibt verbindlich

Abstände verwenden ausschließlich die vorhandenen Stufen: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 px (--space-1 bis --space-10).

Formen und Tiefe

Kontrollierte Radien, begründete Schatten

Radius 4

Radius 6

Radius 8

Soft Shadow

Medium Shadow

Electric Glow

Brass Glow

Kleine kontrollierte Radien von 4 bis 8 Pixel; keine universellen Bubble-Radien.
Soft Shadow für normale Cards.
Medium Shadow für hervorgehobene Panels.
Electric Glow ausschließlich für Fokus, Signal und Interaktion.
Brass Glow ausschließlich für Research und Evidenz.
Glassmorphism ist kein universeller VTM-Stil.

Iconografie

Reduzierte geometrische Outline-Icons

Suche

Weiter

Daten

Tabelle

Einheitliche Strichstärke über das gesamte Icon-Set.
SVG und currentColor bevorzugen, damit Icons Text- und Statusfarben erben.
Keine 3D-, Emoji-, Neon- oder beliebige KI-Icon-Ästhetik.
Alleinstehende Icon-Buttons benötigen einen zugänglichen Namen (aria-label oder sichtbaren Text).
Status niemals nur über Icon oder Farbe kommunizieren – immer zusätzlich Text.

13 · Verlaufsregeln

Verläufe sind Markenmomente, keine Füllfarbe

Die bestehenden Cobalt-, Electric-, Brass-, Beam- und atmosphärischen Verläufe bleiben unverändert erhalten. Dieses Kapitel regelt, wo sie eingesetzt werden – und wo nicht.

Brand Gradient · Geeignet

Markenprägende Flächen

Website-Heroes
Präsentationstitel
Report-Cover
Kapiteltrenner
Footer
Ausgewählte Kampagnenmotive

Brand Gradient · Nicht geeignet

Arbeits- und Leseflächen

Lange Textflächen
Jedes beliebige UI-Element
Formularhintergründe
Tabellenzellen
Geschäftsbrief-Fließtext

Signature Gradient

Brass bleibt Herkunftszeichen

Brass-Verläufe sind VTM Research, eigenen Daten, Methodik und Herkunft vorbehalten. Sie sind keine allgemeine Schmuckfarbe und kein Dekor für beliebige Komponenten.

Electric Beam & Brass Beam

Licht- und Bewegungssignale

Die Beam-Verläufe sind Lichtimpulse für Signal Line, Research Glint und verwandte Signaturen. Sie sind keine normalen Flächenfüllungen und werden nicht statisch als Hintergrund eingesetzt.

Hero Atmosphere

Ein vollständiger Markenaufmacher

Die vorhandene helle, code-native Hero-Atmosphäre ist ein vollwertiger Markenaufmacher. Für einen VTM-Hero ist kein Bild und kein Video erforderlich.

code-native Kein Medienauftrag

Bestandsschutz: Die Token --gradient-brand, --gradient-brand-deep, --gradient-signature, --gradient-electric-beam, --gradient-brass-beam und --gradient-hero-atmosphere bleiben unverändert. Abgeleitete Anwendungen dürfen die Verläufe weglassen, wo die Anwendungsmatrix es vorsieht – sie dürfen sie jedoch nicht umdefinieren oder abschwächen.

14 · Medienklassifizierung

Jedes Medium erklärt sich maschinenlesbar

Medien und visuelle Beispiele tragen eindeutige data-*-Attribute. Menschen und Werkzeuge erkennen damit ohne Interpretationsspielraum, was ein Element ist – und ob es reproduziert werden darf.

Konvention

Drei Attributgruppen

Rolle (data-media-role), Status (data-media-status) und Flags kennzeichnen jedes Medium. Zusätzlich verweist data-asset-id auf das Assetregister in der JSON-Spezifikation.

<img
  src="…"
  alt="VersicherungsTech Magazin"
  data-asset-id="vtm-logo-color"
  data-media-role="brand-asset"
  data-media-status="approved-brand-asset"
  data-generation-allowed="false"
  data-required-in-design-system="true"
  data-human-review-required="true"
>

Rollen

Unterstützte Werte für `data-media-role`

brand-asset – Logo, Signaturen, Markenzeichen
editorial-image – redaktionelle Fotografie
documentary-image – dokumentarische Aufnahme
portrait – Personenporträt
research-graphic – Research-Grafik
data-visualization – Datenvisualisierung
illustration – erklärende Illustration
background-video – Hintergrundvideo
editorial-video – redaktionelles Video
motion-graphic – Motion-Grafik
decorative-atmosphere – dekorative Atmosphäre
component-demo – Komponenten-Demonstration
example-placeholder – Beispiel-Platzhalter

Status & Flags

Unterstützte Werte für `data-media-status`

approved-brand-asset
approved-production-asset
code-native
component-demonstration
example-only
optional-pattern
production-required
blocked
deprecated

Flags:

data-example-only
data-generation-allowed
data-required-in-design-system
data-required-in-derived-apps
data-human-review-required

Klassifizierte Elemente

Kennzeichnung in dieser Arbeitsfassung

Medienklassifizierung der Master-Next-Arbeitsfassung
Element	Rolle	Status	Generierung
Farbiges VTM-Logo	`brand-asset`	approved-brand-asset	Verboten
Weißes VTM-Logo	`brand-asset`	approved-brand-asset	Verboten
Hero-Atmosphäre	`decorative-atmosphere`	code-native	Nicht erforderlich
Signal Line	`brand-asset`	code-native	Nicht erforderlich
Research Glint	`brand-asset`	code-native	Nicht erforderlich
Story-Visuals	`component-demo`	component-demonstration	Verboten
Porträt-Platzhalter	`example-placeholder`	example-only	Verboten
Technologie-Platzhalter	`example-placeholder`	example-only	Verboten
Research-Platzhalter	`example-placeholder`	example-only	Verboten
Modernisierungsdiagramm	`data-visualization`	component-demonstration	Verboten
Newsletter-Formular	`component-demo`	component-demonstration	Verboten

Hinweis: In dieser Arbeitsfassung existiert kein Asset mit dem Status production-required. Es besteht daher kein offener Produktionsauftrag für Bilder, Videos oder andere Medien.

Demo-Inhalte

Ausdrücklich als Beispiele gekennzeichnet

Die folgenden Inhalte sind Demonstrationen des Designsystems. Sie dürfen nicht als reale Untersuchungs- oder Unternehmensdaten interpretiert werden.

Modernisierungsindex 2026 (fiktive Beispieldaten)
Stichprobe n = 84 (fiktiver Beispielwert)
Artikel zur Kernsystemmodernisierung (Beispielartikel)
Story Cards (Beispielteaser)
Newsletter-Formular (Muster ohne Datenübertragung)
Angebotssoftware-Ansicht (Beispiel, Kapitel 19)
Bildsprache-Platzhalter (Stilbeispiele, Kapitel 07)

Beispieldaten Beispiel

15 · Video & Motion Media

Video ist ein optionales Medium

Bewegtbild kann markenprägende Einstiege und redaktionelle Dossiers stärken. Es ist nie Voraussetzung für einen funktionierenden VTM-Auftritt – und in Arbeitsanwendungen normalerweise fehl am Platz.

Geeignet

Begründete Markenmomente

Markenprägende Einstiege
Redaktionelle Dossiers
Begründete Kampagnen
Ausgewählte Event- oder Corporate-Seiten

Normalerweise ungeeignet

Arbeits- und Dokumentkontexte

Webanwendungen
Dashboards
Angebotssoftware
Formulare
Geschäftsbriefe und Angebote
E-Mails

Technische Regeln

Verbindlich bei jedem Videoeinsatz

Kein Autoplay mit hörbarem Ton.
Bei Autoplay sind muted und playsinline verpflichtend.
Sichtbarer Pause-Mechanismus.
Poster-Fallback und Fehlerfallback.
Eigener Mobile-Crop.
Reduced-Motion-Still und Save-Data-Still.
Untertitel und Transkript bei gesprochener Sprache.
Keine Kerninformation ausschließlich im Video vermitteln.

Medienbudgets

Verbindliche Obergrenzen

Asset	Maximalgröße
Mobile-Poster	250 KB
Desktop-Poster	450 KB
Mobile-Hintergrundvideo	2,5 MB
Desktop-Hintergrundvideo	5 MB

16 · Motion-System

Drei Motion-Level, eine Nutzerkontrolle

Bewegung wird nach Anwendungstyp dosiert. Ein globaler Schalter gibt Nutzerinnen und Nutzern jederzeit Kontrolle über wiederkehrende dekorative Animationen.

Motion Level 0

Statisch

Keine Animation. Verbindlich für Geschäftsbriefe, Angebote, E-Mails, Print, Reduced Motion, Save Data und kritische Formulare.

Verbindlich im Kontext

Motion Level 1

Funktional

Kurze, funktionale Rückmeldungen: Fokus, Hover, Navigation, Validierung, Statuswechsel sowie Öffnen und Schließen.

Redaktionell

Markensignale: Signal Line, Research Glint, Hero-Atmosphäre, Diagramm-Reveal und ausdrücklich freigegebene Hintergrundvideos.

Optional

Globaler Motion-Schalter

„Bewegung pausieren“ / „Bewegung aktivieren“

Unten rechts steht ein gut sichtbarer globaler Button bereit. Er pausiert die wiederkehrenden dekorativen Animationen: Brand Rail, Hero Orbits, Hero Signal, Hero Nodes, Panel Glint, Signal Pass und Research Glint.

Beschriftung bei laufender Bewegung: „Bewegung pausieren“; bei pausierter Bewegung: „Bewegung aktivieren“.
Dynamisches aria-label und sichtbarer Status (Beschriftung plus Statuspunkt); der tatsächliche Zustand stimmt mit der Beschriftung überein.
Synchronisiert mit prefers-reduced-motion: Ist die Systemeinstellung aktiv, bleiben Animationen deaktiviert und der Schalter meldet dies über die Statusregion.
Die Nutzerentscheidung wird – sofern verfügbar – in localStorage gespeichert; Zugrifffehler werden abgefangen und beschädigen die Seite nicht.
Ohne JavaScript bleiben alle Inhalte sichtbar; der Button erscheint dann nicht.

Abgrenzung: Einmalige funktionale Übergänge (Fokusringe, Hover, Reveal beim ersten Scrollen) gehören zu Level 1 und werden bereits durch prefers-reduced-motion vollständig deaktiviert. Der Schalter steuert zusätzlich die wiederkehrende dekorative Bewegung der Ebene 2.

17 · UI-Komponenten

Muster für produktive Oberflächen

Diese Muster ergänzen Buttons, Tags, Status und Formulare aus dem Kernsystem um Navigation, Datenansichten, Zustände und Dialoge für digitale Produkte.

Verbindliche Regeln

Für alle UI-Komponenten

Links navigieren, Buttons lösen Aktionen aus.
Labels bleiben sichtbar; Placeholder ersetzen keine Labels.
Fehler direkt am betroffenen Feld anzeigen.
Serverseitige Validierung bleibt immer erforderlich.
Währungen und Zahlen sinnvoll (rechtsbündig, tabellarisch) ausrichten.
Farbe nie als einziges Statussignal verwenden.
Kritische Informationen nicht nur als kurzlebiger Toast.
Dialogfokus korrekt verwalten (Fokusfalle im Dialog, Rückgabe beim Schließen).
Leere Zustände erklären Ursache und nächste Handlung.
Keine dekorativen Shimmer-Endlosschleifen.

Navigation & Breadcrumbs

Ort und Weg bleiben erkennbar

App Shell: Cobalt-Seitenleiste, helle Arbeitsfläche.
Aktueller Ort wird markiert (aria-current).
Breadcrumbs ab zwei Hierarchieebenen empfohlen.
Hauptnavigation vollständig tastaturbedienbar.

Formulare & Validierung

Fehler am Feld, Hilfe im Kontext

IBAN

Die IBAN ist unvollständig. Bitte 22 Stellen eingeben.

Mehrstufige Workflows zeigen Fortschritt und Schrittziel.
Zwischenstände speichern oder Verlust ankündigen.
Pflichtfelder klar kennzeichnen, nicht nur mit Farbe.

Tabellen & Datenansichten

Suche, Filter, Sortierung – und lesbare Zahlen

Beispiel: Angebotsliste (Demonstrationsdaten)
Angebot	Kunde	Status	Summe
AN-2026-0142	Beispiel Versicherung AG	In Prüfung	48.600,00 €
AN-2026-0141	Muster Assekuranz	Freigegeben	12.350,00 €
AN-2026-0139	Demo Rück AG	Abgelehnt	7.900,00 €

Sortierbare Spalten kennzeichnen Richtung und Zustand.
Aktive Filter sichtbar machen und einzeln entfernbar halten.
Suche zeigt Treffermenge und Nulltreffer verständlich an.
IDs und Referenzen in IBM Plex Mono.

Ladezustand

Ankündigen statt blockieren

Skeletons sind statisch oder dezent – keine Shimmer-Endlosschleifen. Länger laufende Prozesse nennen den Grund.

Leerzustand

Ursache und nächste Handlung

Noch keine Angebote vorhanden

Für diesen Kunden wurde noch kein Angebot erstellt.

Fehlerzustand & Toast

Konkret und erreichbar

Gespeichert Angebot AN-2026-0142 wurde gespeichert.

Fehlermeldungen nennen Ursache und Lösung. Kritische Meldungen bleiben stehen, bis sie aktiv geschlossen werden.

Dialoge & Overlays

Fokus geführt, Ausstieg klar

Angebot senden?

Das Angebot AN-2026-0142 wird an die hinterlegte Kontaktadresse gesendet und für die Bearbeitung gesperrt.

Fokus springt beim Öffnen in den Dialog und kehrt beim Schließen zurück.
Escape und sichtbare Schließen-Aktion stehen bereit.
Destruktive Aktionen benennen die Konsequenz konkret.
Overlays niemals für Kerninhalte ohne Alternative verwenden.

18 · Websites & Landingpages

Vom Markenauftritt zur Kampagnenseite

Corporate-, Editorial- und Kampagnenseiten teilen Foundations und Signature-Code, unterscheiden sich aber in Aufbau, Medieneinsatz und erlaubter Inszenierung.

Corporate Website

Verbindlicher Seitenaufbau

Header mit Logo und Hauptnavigation
Hero (Hero-Atmosphäre oder Brand Gradient)
Kernbotschaft
Themen oder Leistungen
Evidenz oder Research
Redaktionelle Inhalte
Kontakt beziehungsweise nächste Aktion
Footer mit Pflichtangaben

Editorial Website

Dokumentierte Formate

Story-System (Kapitel 06)
Artikel (Artikeltemplate, Kapitel 06)
Rubrikseite mit klarer Themenführung
Autorenprofil mit Funktion und Kontakt
Suchergebnis mit Treffermenge und Filtern
Dossier als kuratierte Sammlung
Interview mit klar zugeordneten Stimmen
Meinung, deutlich als Meinung gekennzeichnet
Research mit Brass-Kennzeichnung und Methodik
Sponsored Content mit Kennzeichnung vor Titel und Teaser
Korrekturhinweis mit Datum und Änderung

Landingpage · Erlaubt

Fokussierte Inszenierung

Große Display-Typografie
Brand Gradient
Cobalt-Flächen
Dokumentarisches Keyvisual
Optionales Video (nach Kapitel 15)
Begründete Level-2-Motion

Landingpage · Nicht erlaubt

Druck und Klischee

Unbelegte Superlative
Manipulative Countdowns
Aggressive Autoplay-Medien
Cyber- oder Hologramm-Ästhetik

19 · Webanwendungen & Dashboards

Arbeitswerkzeuge statt Showcase

Anwendungen übernehmen Foundations, Farben und Typografie – nicht die redaktionelle Inszenierung. Ruhe, Klarheit und Tastaturbedienung haben Vorrang.

Verbindlich

Für alle VTM-Anwendungen

Inter als primäre UI-Schrift.
Plus Jakarta Sans für Seitentitel.
IBM Plex Mono für IDs, Referenzen und technische Metadaten.
Cobalt für Struktur (Navigation, Kopfbereiche).
Electric für Aktionen und Fokus.
Brass nur bei Research und Evidenz.
Klare Tabellen und Formulare nach Kapitel 17.
Vollständige Tastaturbedienung.
Verständliche Status- und Fehlermeldungen.
Keine dekorative Dauerbewegung.

Nicht automatisch übernehmen

Editorial bleibt Editorial

Cinematic Hero
Hero Orbits
Hintergrundvideo
Research Glint ohne Research-Bezug
Riesige Kapitelnummern
Story Cards
Pull Quotes
Animierte Signal Line in Arbeitsprozessen

Anwendungsbeispiel · Angebotssoftware

Dokumentiertes Beispiel, kein Produktionsauftrag

Die folgende Ansicht demonstriert die Anwendung des Systems auf eine Angebotssoftware mit den Bereichen Dashboard, Angebote, Neues Angebot, Kunden, Produkte und Leistungen, Freigaben, Vorlagen und Einstellungen. Sie ist als component-demonstration gekennzeichnet; innerhalb des Designsystems wird keine vollständige Angebotssoftware entwickelt.

Beispieldaten der Angebotsübersicht
Nr.	Kunde	Status	Summe
AN-0142	Beispiel Versicherung AG	In Prüfung	48.600,00 €
AN-0141	Muster Assekuranz	Freigegeben	12.350,00 €

Beispieldaten · component-demonstration

Beispiel Kein Produktionsauftrag

20 · Präsentationen

Ein Foliensystem, eine Hauptaussage pro Folie

PowerPoint- und Keynote-Vorlagen folgen der Marke: Cobalt und Brand Gradient rahmen, helle Inhaltsfolien tragen die Aussage. Dieses Kapitel dokumentiert das System – es erzeugt keine PPTX-Datei.

Folientypen

Zwölf dokumentierte Folien

VTM · Titel

Technologie verstehen.

01 · Titelfolie

Kapitel 02

Marktüberblick

02 · Kapiteltrenner

Agenda

Drei Themen, 30 Minuten

03 · Agenda

Inhalt

Eine Aussage, drei Belege

04 · Inhaltsfolie

Vergleich

These und Gegenthese

05 · Zwei-Spalten-Folie

Zitat

„Evidenz vor Behauptung.“

06 · Zitatfolie

Bild

Dokumentarisches Motiv

07 · Bildfolie

Daten

Eine Kernzahl, eine Quelle

08 · Datenfolie

Prozess

Vier Schritte zur Freigabe

09 · Prozessfolie

Vergleich

Optionen nebeneinander

10 · Vergleichsfolie

Abschluss

Nächste Schritte

11 · Abschlussfolie

Quellen

Belege und Methodik

12 · Quellenfolie

Gestaltungsregeln

Verbindlich für Folien

Cobalt oder Brand Gradient für Titel- und Kapitelaufmacher.
Helle Inhaltsfolien mit ruhigem Weißraum.
Plus Jakarta Sans für Titel.
Inter für Inhalt.
IBM Plex Mono für Quellen und Daten.
Brass ausschließlich für Research.
Maximal eine Hauptaussage je Folie.

Nicht zulässig

Auf keiner VTM-Folie

3D-Diagramme.
Beliebige Stock-Visuals ohne inhaltliche Funktion.
Komplexe oder verspielte Animationen – Animation bleibt einfach und funktional.
Brass als allgemeine Schmuckfarbe.

21 · Dokumente

Angebote, Reports und Geschäftsbriefe

Geschäftsdokumente sind Motion Level 0: ruhig, drucktauglich und barrierearm. Cobalt strukturiert, Electric bleibt sparsam, Brass bleibt Research vorbehalten. Dieses Kapitel dokumentiert Richtlinien – es erzeugt keine DOCX- oder PDF-Dateien.

Angebote & Reports

Verbindliche Dokumentstruktur

Cover (Cobalt-Fläche oder Brand Gradient zulässig)
Dokumenttitel
Angebotsnummer und Status
Empfänger
Datum
Leistungen
Preise
Summen
Bedingungen
Kapiteltrenner (Verlauf zulässig)
Quellen
Anhänge
Barrierearme PDF-Ausgabe (getaggt, Lesereihenfolge geprüft)

Farb- und Verlaufsregeln

Struktur statt Inszenierung

Cobalt strukturiert Titel, Kopfzeilen und Tabellandeköpfe.
Electric bleibt sparsam: Links, Hervorhebungen, Statussignale.
Brass bleibt Research und Evidenz vorbehalten.
Verläufe sind für Cover und Kapiteltrenner erlaubt – nicht hinter Fließtext oder Preistabellen.
Zahlen und Währungen rechtsbündig mit Tabellenziffern.
Summen deutlich abgesetzt, ohne dekorative Effekte.

Geschäftsbrief

Aufbau und verbindliche Regeln

VersicherungsTech Magazin
Beispielstraße 1
00000 Beispielstadt

Beispiel Versicherung AG
Frau Erika Beispiel
Musterweg 2
00000 Musterstadt

Beispielstadt, 10. Juli 2026

Betreff: Beispielbetreff eines Geschäftsbriefs

Sehr geehrte Frau Beispiel,
dieser Absatz demonstriert den Fließtext eines VTM-Geschäftsbriefs: linksbündig, ruhig gesetzt und ohne Verläufe oder dekorative Effekte hinter dem Text.

Mit freundlichen Grüßen
VTM Redaktion

Farbiges Logo auf Weiß mit vollem Schutzraum.
Absender, Empfänger, Datum, Betreff, Fließtext, Gruß, Footer mit Pflichtangaben.
Office-kompatible Fallback-Schriften: Aptos/Segoe UI/Arial für Inter und Plus Jakarta Sans.
Drucktaugliche Farben; ausreichender Kontrast auch in Graustufen.
Keine Verläufe hinter Fließtext.

22 · E-Mail & Newsletter

E-Mail-Gestaltung ist auf maximale Kompatibilität ausgelegt: Systemschriften als Fallback, keine Animation, kein Inhalt, der nur im Bild existiert. Dieses Kapitel dokumentiert Regeln – es erzeugt keine separate E-Mail-Datei.

E-Mail-Signatur

Verbindliche Regeln

Robuste HTML-Struktur (einfache Blöcke oder Tabellenlayout).
Systemschrift-Fallbacks (Arial, Helvetica, Segoe UI).
Keine Animation.
Keine Hintergrundbilder.
Keine externen Webfonts als Voraussetzung.
Logo mit definierter, fixer Größe.
Telefon, E-Mail und Website als echte Links.
Keine Trackingelemente innerhalb der Designvorlage.

Vorname Nachname
Funktion · VersicherungsTech Magazin

+49 (0)00 000 000 00
redaktion@example.com
www.versicherungstech-magazin.de

Newsletter

Verbindliche Regeln

Kompakter Header mit Logo und Ausgabenbezeichnung.
Klare Absenderidentität (Name und Antwortadresse).
Redaktionelle Inhaltsmodule mit je einer Kernaussage.
Sichtbare, unterstrichene Links.
Kein relevanter Text ausschließlich im Bild.
Dark-Mode-Prüfung vor jedem Versand.
Deutlicher Abmeldelink in jeder Ausgabe.
Pflichtangaben im Footer.

23 · Anwendungsmatrix

Was gehört wohin?

Die Matrix definiert je Anwendungstyp den zulässigen Einsatz von Bildern, Hintergrundvideo und Motion. Sie ist zusätzlich maschinenlesbar in der JSON-Spezifikation hinterlegt.

Verbindliche Matrix

Medien und Motion je Anwendung

Anwendungsmatrix: Bilder, Hintergrundvideo und maximales Motion Level je Anwendungstyp
Anwendung	Bilder	Hintergrundvideo	Maximales Motion Level
Editorial Website	empfohlen	optional	2
Corporate Website	empfohlen	optional	2
Landingpage	optional	optional	2
Webanwendung	selten	nein	1
Dashboard	normalerweise nein	nein	1
PowerPoint	optional	selten	einfach
Angebot	optionales Cover	nein	0
Report	optional	nein	0
Geschäftsbrief	nein	nein	0
E-Mail	optional	nein	0

24 · Accessibility & Performance

Zugänglich und schnell – ohne Ausnahme

Die Qualitätsziele aus Kapitel 10 bleiben bestehen. Dieses Kapitel präzisiert die verbindlichen Prüfpunkte für alle abgeleiteten Anwendungen.

Accessibility

Verbindliche Prüfpunkte (WCAG 2.2 AA)

Textkontrast mindestens 4,5:1.
Großer Text mindestens 3:1.
Bedienelemente und wesentliche Grafiken mindestens 3:1.
Zoom bis 400 Prozent ohne Inhaltsverlust.
Vollständige Tastaturbedienung, keine Tastaturfallen.
Screenreader-Stichprobe je Release.
Forced Colors wird unterstützt.
Reduced Motion wird respektiert.
Reflow bei 320 CSS-Pixel Breite.
Touch-Ziele grundsätzlich mindestens 44 × 44 Pixel.

Performance

Verbindliche Ziele

LCP höchstens 2,5 Sekunden.
INP höchstens 200 Millisekunden.
CLS höchstens 0,1.
Lange Tasks möglichst unter 50 Millisekunden.
Keine unnötigen Drittanbieter-Requests.
Lokale WOFF2-Fonts in Produktionssystemen.
Keine unnötigen Bibliotheken oder Frameworks.

25 · Assetvertrag

Jedes reale Asset hat einen Vertrag

Reale Produktionsassets werden mit vollständigen Metadaten geführt. Unbekannte Werte bleiben null oder pending – erfundene Angaben sind unzulässig.

Pflichtfelder

Mindestangaben je Produktionsasset

Assetvertrag: dokumentierte Mindestfelder
Feld	Inhalt
Asset-ID	Eindeutige Kennung, z. B. `vtm-logo-color`
Titel	Sprechender Name des Assets
Rolle	Wert aus der Rollenliste (Kapitel 14)
Status	Wert aus der Statusliste (Kapitel 14)
Einsatzort	Kanäle und Kontexte
Pflicht im Designsystem	`true` / `false`
Pflicht in abgeleiteten Anwendungen	`true` / `false`
Beispielstatus	Beispiel oder Produktionsasset
Generierung	Erlaubt oder verboten
Menschliche Prüfung	Erforderlich ja/nein, Prüfende
Quelle	Herkunft der Datei
Urheber	Person oder Organisation
Modell und Modellversion	Bei generativen Assets
Promptarchiv	Ablage der Prompts bei generativen Assets
Rechte	Lizenz, Laufzeit, Territorien
Identität	Abgebildete Personen und Einwilligungen
KI-Offenlegung	Kennzeichnungspflicht erfüllt ja/nein
Reviewstatus	Stand im Freigabeprozess
Dateien	Formate, Auflösungen, Ablageorte
Fallbacks	Ersatzdarstellung bei Ausfall
Performance	Dateigrößen und Budgeteinhaltung
Erstellungs- und Freigabedatum	Zeitpunkte im Lebenszyklus

Produktionsprozess

Vom Briefing zur Veröffentlichung

Brief
Production Required
Created
Technical Review
Brand Review
Rights Review
Approved
Published

Zusätzliche Status außerhalb des Hauptpfads:

Revision Required Blocked Rejected Deprecated

Registerhinweis: Das maschinenlesbare Assetregister dieser Arbeitsfassung liegt in der JSON-Spezifikation (Kapitel 27). Unbekannte Produktionsmetadaten sind dort ausnahmslos als null oder "pending" geführt.

26 · Generative KI

Unterstützung ja, Verantwortung beim Menschen

Generative Systeme unterstützen Vorbereitung und Prüfung. Die inhaltliche, rechtliche und markenbezogene Verantwortung bleibt bei benannten Menschen.

Erlaubt nach explizitem Auftrag

Unterstützende Aufgaben

Briefingstruktur
Promptvorbereitung
Klar freigegebene illustrative Inhalte
Technische Metadatenprüfung
Qualitätsdokumentation

Menschlich zu verantworten

Nicht delegierbar

Aussage
Faktenprüfung
Rechteprüfung
Identitätsprüfung
Motivauswahl
Markenfreigabe
Veröffentlichung
Transparenzkennzeichnung

Verboten

Ausnahmslos unzulässig

Logo regenerieren
Reale Personen ohne Zustimmung imitieren
Künstliche Personen als dokumentarisch real ausgeben
Beispielplatzhalter automatisch produzieren
Automatische Retry- oder Variantenschleifen
Rechte oder Produktionsdaten erfinden
Research-Daten erfinden

27 · Claude & Claude Code

Anleitung für maschinelle Anwendung

Dieses Kapitel definiert, wie Claude und Claude Code aus dem Designsystem konkrete Anwendungen ableiten – und welche Fehlinterpretationen ausgeschlossen sind.

Claude muss

Verbindlicher Ableitungsprozess

Den Anwendungstyp bestimmen.
Die passende Zeile der Anwendungsmatrix lesen.
Foundations und Accessibility übernehmen.
Nur relevante Komponenten auswählen.
Beispiele als Beispiele behandeln.
Medienstatus und Generierungsflags prüfen.
Bestehende Markenassets unverändert verwenden.
Fachliche Anforderungen zusätzlich zum Designsystem erfüllen.
Bei fehlenden Fakten klar gekennzeichnete Platzhalter verwenden.
Abweichungen dokumentieren.

Claude darf nicht

Ausgeschlossene Fehlanwendungen

Die Showcase-Dokumentation als Universallayout kopieren.
Automatisch Bilder oder Videos produzieren.
Brass als allgemeine Schmuckfarbe verwenden.
Die Verläufe vollständig entfernen.
Die Typografierollen beliebig ersetzen.
Editorial-Komponenten ungeprüft in Transaktionssoftware übernehmen.
Beispieldaten als reale Daten ausgeben.
Rechteinformationen erfinden.

Maschinenlesbare Spezifikation

JSON als verbindliche Schnittstelle

Die Datei enthält einen eingebetteten JSON-Block mit der ID vtm-design-system-specification. Er umfasst Systemidentität, Interpretationsregeln, die Anwendungsmatrix und das Assetregister. Werkzeuge lesen ihn so:

const spec = JSON.parse(
  document.getElementById(
    "vtm-design-system-specification"
  ).textContent
);

const matrix = spec.applicationMatrix;
const assets = spec.assetRegister;

Bei Widersprüchen zwischen Fließtext und JSON-Spezifikation gilt die Prioritätsregel aus Kapitel 00; die JSON-Fassung dokumentiert den maschinenlesbaren Sollzustand.

Eine verbindliche Referenz für alle Kanäle

Konflikte werden in dieser Reihenfolge entschieden

Was die Prioritätsregel bedeutet

Jede Regel und jedes Beispiel trägt einen Status

Sieben Themenbereiche, ein System

Komplexität in Handlungsfähigkeit übersetzen

Relevanz ohne Rauschen

Technologie verständlich machen

Die Referenz für Versicherungstechnologie

Das digitale B2B-Fachmagazin an der Schnittstelle von Versicherung, Technologie und Transformation

Drei Perspektiven, ein gemeinsamer Informationsraum

Vorstand & C-Level

Architektur & IT

Fachbereich & Transformation

So tritt VTM auf

Was VTM nicht ist

Für helle Flächen

Für dunkle Flächen

Die Marke braucht Abstand

Anwendung

Ruhig und unverändert

Verfremdet oder kontrastarm

Eine Linie mit Bedeutung

Redaktionelle Ordnung

Bewegung & Interaktion

Autorität & Struktur

Evidenz & Original Research

Drei Verläufe, drei Aufgaben

Cobalt → Electric

Licht statt Fläche

Brass als Herkunftszeichen

Kontrollierte Leuchtkraft

Effekte ohne Funktion

Verbindliche Markenfarben

Die Helligkeit bleibt Teil der Marke

Neutral

Cobalt

Electric

Brass

Freigabe nach Anwendungsfall

Inhalt zuerst scannbar machen

Markenkonsistenz ohne Datenschutzrisiko

Empfohlene Rollen

Formate bleiben vor dem Öffnen erkennbar

Warum Datenentkopplung vor dem Core-Replacement kommt

API-Schichten zwischen Übergangslösung und Zielarchitektur

Modernisierungsindex: Prioritäten verschieben sich

Vollständiger redaktioneller Aufbau

Kernsystemmodernisierung beginnt außerhalb des Kernsystems

Kontext

Abhängigkeiten

Konsequenz

Daten werden erklärt, nicht nur dargestellt

Prioritäten bei der Kernsystemmodernisierung

Jede Grafik bleibt nachvollziehbar

Brass dokumentiert Herkunft

Redaktionelle Porträts

Technologie & Infrastruktur

Research & Illustration

Authentisch und fachlich

Austauschbar oder künstlich

Formate nach Funktion

Alternativtexte

Konkrete Aussagen

Ruhige Autorität

Fachsprache mit Maß

Unabhängige Einordnung

Belegt und differenziert

Werblich und absolut

Redaktioneller Standard

Respektvoll und inklusiv

Jeder Beitrag macht seine Herkunft nachvollziehbar

Eine dominante Aktion

Zustände bleiben eindeutig

Newsletter-Anmeldung

VTM Briefing abonnieren

Bewegung mit Bedeutung

Drei Bewegungsrollen

Die Oberfläche reagiert – sie führt keine Show auf

Lokale Produktionsschriften

Unterstützte Werte für `data-media-role`

Unterstützte Werte für `data-media-status`