Visuelle Konsistenz über Kartenvarianten hinweg

Wie du ein Kartensystem aufbaust, bei dem unterschiedliche Kartentypen zusammenpassen — durch Größe, Farbe und Typografie.

8 Min Anfänger März 2026

Designsystem mit verschiedenen Kartenvarianten nebeneinander, zeigt konsistente Elemente und Stilregeln

Warum Kartenkonsistenz wichtig ist

Karten sind überall. Sie zeigen Produkte, Artikel, Team-Mitglieder oder Zahlungen an. Das Problem: Wenn du mehrere Kartenvarianten brauchst, wird’s schnell chaotisch. Eine Karte für Artikel sieht anders aus als eine für Preise. Die Benutzer merken, dass etwas nicht stimmt — aber sie wissen nicht, warum.

Konsistenz ist nicht nur schön. Sie schafft Vertrauen. Wenn alle Karten einer Familie ähneln — auch wenn sie unterschiedliche Inhalte haben — wirkt die ganze Seite zusammenhängend. Nutzer verstehen schneller, wie das System funktioniert. Und das ist der erste Schritt zu guter User Experience.

Designer arrangiert Kartenvarianten auf einem digitalen Whiteboard, vergleicht Farben und Größen

Typografische Skala zeigt konsistente Schriftgrößen und Abstände für verschiedene Kartentypen

Die drei Säulen der Kartenkonsistenz

Gute Kartensysteme basieren auf drei klaren Regeln: Größe, Farbe und Typografie. Das klingt einfach, aber es ist der Unterschied zwischen “sieht okay aus” und “sieht professionell aus”.

Größe: Definiere Standardgrößen für Karten. Nicht jede Karte muss gleich groß sein — aber wenn du eine “kleine” Karte brauchst, sollte sie immer die gleiche Größe haben. Wir arbeiten gerne mit drei Größen: kompakt (200250px), standard (320380px) und groß (400500px). Das macht Gitter vorhersehbar.

Farbe: Nutze die gleiche Farbpalette für alle Karten. Wenn eine Karte weiß ist mit dunklem Text, sollten alle es sein — es sei denn, du hast einen guten Grund. Akzentfarben können sich ändern, aber der Hintergrund bleibt stabil.

Typografie: Das Fundament

Typografie ist der Schlüssel. Du könntest fünf verschiedene Schriftarten für fünf Kartenvarianten verwenden — das würde aber furchtbar aussehen. Stattdessen nutzt du eine oder zwei Schriftfamilien und variierst nur Größe, Gewicht und Farbe.

Hier ein praktisches System: Überschriften immer in Bold (700er Gewicht), Body-Text in Regular (400er Gewicht), kleine Labels in Medium (500er Gewicht). Die Schrift bleibt gleich — nur das Gewicht ändert sich. Das ist subtil, aber es funktioniert.

Überschrift: 16-18px, Bold, dunkle Farbe
Body-Text: 13-14px, Regular, mittlere Grautöne
Labels: 11-12px, Medium, helle Farbtöne
Absätze: 1.5em Zeilenabstand für Lesbarkeit

Vier Kartenvarianten nebeneinander zeigen unterschiedliche typografische Hierarchien aber einheitliche Schriftfamilie

Detaillierte Abstands-Messungen zwischen Kartenelementen mit Maßstab und Richtlinien

Abstände schaffen Ordnung

Abstände sind unterschätzt. Viele Designer werfen einfach Inhalte in eine Karte — und wundern sich, warum’s eng wirkt. Das Problem: Es gibt keine Regeln für den Abstand.

Nutze ein Spacing-System. Das könnte so aussehen: 8px als Basisunit. Alle Abstände sind dann Vielfache davon (8px, 16px, 24px, 32px). Innen einer Karte? Immer 16px Padding. Zwischen Elementen? 12px. Das ist konsistent und funktioniert auf allen Kartenvarianten.

“Konsistente Abstände machen eine Seite nicht nur schöner — sie machen sie auch vorhersehbar. Nutzer verstehen instinktiv, wie sie sich bewegen können.”

Praktische Checkliste für dein Kartensystem

Größen festlegen

Definiere 2-3 Standard-Kartengröße. Klein, Mittel, Groß. Dokumentiere die genauen Pixel-Dimensionen. Keine Variationen dazwischen.

Farbpalette anlegen

Begrenzte Farben für alle Kartenvarianten. Hintergrund (meist weiß), Text (dunkel oder Grau), Akzente (ein oder zwei Farben). Fertig.

Schriftfamilie wählen

Eine oder zwei Schriftfamilien maximal. Nutze verschiedene Gewichte (Light, Regular, Bold) statt verschiedene Schriften.

Abstände definieren

8px Basisunit. Alle Abstände sind Vielfache davon: 8, 16, 24, 32px. Dokumentiere interne Padding und externe Margin.

Schatten & Ecken

Subtile Schatten (8px Unschärfe, 10% Opazität) für alle Karten. Gleiche Border-Radius auf allen Varianten (meist 8-12px).

Dokumentieren & testen

Schreib deine Regeln auf. Teste alle Kartenvarianten nebeneinander. Sie sollten sich wie eine Familie anfühlen.

Zusammenfassung: Konsistenz ist kein Zufall

Kartenkonsistenz entsteht nicht von selbst. Es braucht Planung, Dokumentation und Disziplin. Aber wenn du die Zeit investierst, zahlt sich’s aus. Deine Seite wirkt zusammenhängend. Nutzer verstehen intuitiv, wie sie funktioniert. Und dein Design-Team spart Zeit bei neuen Kartenvarianten.

Die gute Nachricht: Du brauchst keine komplexe Design-System-Software. Eine einfache Dokumentation (Größen, Farben, Abstände, Typografie) reicht völlig aus. Drei, vier Regeln. Konsequent angewendet. Das ist alles.

Starte heute. Schreib deine Kartengröße auf. Wähle deine Schrift. Definiere deine Abstände. Dann bau deine erste Kartenvariante. Und die nächste wird automatisch besser aussehen.

Fertig gestaltetes Kartensystem mit fünf verschiedenen Varianten, alle optisch konsistent und harmonisch

Hinweis zu diesem Artikel

Dieser Artikel vermittelt allgemeine Designprinzipien und Best Practices für Kartensysteme. Die Regeln und Richtlinien basieren auf bewährten Methoden aus der UX/UI-Design-Praxis. Jedes Projekt ist unterschiedlich — deine konkreten Anforderungen könnten andere Lösungen erfordern. Nutze diese Prinzipien als Ausgangspunkt und passe sie an deine spezifische Situation an.