Themes und Branding

Das Erscheinungsbild einer Scorecard besteht aus zwei unabhängigen Schichten.

Das Theme bestimmt die Persönlichkeit: Typografie, Eckenradien, Schatten, Oberflächenstrukturen und Animationen. Die Markenfarbpalette definiert die Farben. Die Wahl eines Themes schränkt die Palette nicht ein, und das Anpassen der Palette verändert nicht die Typografie – wählen Sie das Theme passend zu Ihrer Zielgruppe und stimmen Sie die Farben auf Ihre Marke ab.

Die vier Themes

default

Neutrale System-Sans-Serif, moderate Radien, konventionelle Kartenschatten. Hält sich optisch zurück.

Ideal, wenn die Scorecard in eine bestehende Website eingebettet wird und nicht mit dem umgebenden Design konkurrieren soll, oder wenn Ihre Markenpalette die visuelle Führung übernimmt.

playground

Lebendig und farbenfroh. Nunito und Quicksand, großzügige Radien, schwebende, weichgezeichnete Emojis im Hintergrund, federnde Übergänge.

Geeignet für Endverbraucher-Zielgruppen, spielerische Selbsteinschätzungen und Inhalte, die in sozialen Netzwerken geteilt werden sollen. Dies ist die Standardeinstellung für neue Scorecards.

Vermeiden Sie es bei ernsten Themen – Finanzen, Gesundheit, Risiken oder Krisen. Der spielerische Ton wirkt dort deplatziert.

obsidian

Redaktionell und exklusiv. Instrument Serif als Display-Schrift über DM Sans im Fließtext, Glassmorphism-Karten, dezente Körnung, zurückhaltende Bewegung.

Optimal für Diagnose-Assessments auf Führungsebene, Beratungen und anspruchsvolles B2B – überall dort, wo der Leser prüft, ob Sie seine Zeit wert sind.

Vermeiden Sie es bei einem rein technischen Publikum, das auf alles allergisch reagiert, was nach Broschüre aussieht.

brutalist

Klar, roh und kontraststark. Space Mono und JetBrains Mono, Eckenradius null, harte schwarze Versatzschatten, neongrüner Akzent, sofortige Übergänge ohne Easing.

Ideal für Entwickler-Tools, Sicherheits- und Infrastruktur-Audits sowie Agenturen mit prägnanter visueller Haltung – Zielgruppen, für die Monospace-Schriften ein Zeichen von Substanz sind.

Vermeiden Sie es, wenn Ihre eigene Markenpalette im Vordergrund stehen muss: Dieses Theme fixiert eigene Kartenoberflächen und Akzente.

Die richtige Wahl treffen

Überlegen Sie, was der Teilnehmer dreißig Sekunden vor dem Start und dreißig Sekunden nach dem Abschluss tut. Ein CTO, der ein Beratungsunternehmen evaluiert, und ein Marketer, der auf einen LinkedIn-Link klickt, erwarten unterschiedliche Atmosphären.

Im Zweifel empfiehlt sich das dezentere Theme. Die Fragen tragen das Erlebnis, nicht das Beiwerk.

Theme-Verfügbarkeit nach Tarif

Die Themes sind tarifabhängig freigeschaltet. Wenn Sie ein Theme wählen, das in Ihrem Tarif nicht enthalten ist, wird der Schreibvorgang abgewiesen und die Fehlermeldung benennt die verfügbaren Optionen. Ein KI-Assistent, der scorecard_design_guide abfragt, erhält Auskunft über die in Ihrem Account verfügbaren Themes und schlägt keine unzulässigen vor.

Die Markenfarbpalette

Zehn Farben als Hexadezimalwerte:

Schlüssel	Verwendung
primary	Schaltflächen, Fortschrittsanzeige, zentraler Akzent
primaryForeground	Text und Icons auf primary
accent	Sparsam eingesetzte Hervorhebungen
background / backgroundDark	Seitenhintergrund
surface / surfaceDark	Karten und hervorgehobene Bereiche
text / textDark	Fließtext
muted	Sekundärtexte

Die *Dark-Werte gelten im Dark Mode. Definieren Sie diese gezielt, statt die helle Palette einfach zu invertieren – invertierte Werte wirken meist trüb.

Wichtig für die Lesbarkeit: primaryForeground muss auf primary und text auf background in Standardlesegröße gut lesbar sein.

Konfiguration

Im Admin-Bereich finden sich beide Einstellungen in der Bearbeitungsansicht der Scorecard.

Über einen KI-Assistenten erfolgt die Anpassung via update_scorecard_config:

{
  "slug": "leadership-check",
  "theme": "obsidian",
  "branding": {
    "colors": { "primary": "#2563eb", "primaryForeground": "#ffffff" }
  }
}

Fragen Sie danach nach der previewUrl – jeder Entwurf liefert eine solche Vorschau, die das echte Ergebnis vor der Veröffentlichung darstellt. Der MCP-Prompt choose_theme führt Sie dialogbasiert durch diese Gestaltung.