Thema’s en branding

Het uiterlijk van een scorekaart bestaat uit twee onafhankelijke lagen.

Het thema bepaalt het karakter: typografie, afronding van hoeken, schaduwen, textuur en animaties. Het merkpalet bepaalt de kleuren. Het kiezen van een thema legt de kleuren niet vast, en het instellen van een kleurenpalet verandert niets aan de typografie — kies het thema dat aansluit bij je doelgroep en stem vervolgens de kleuren af op je merk.

De vier thema’s

default

Neutrale systeem-sans, gematigde afronding en conventionele kaartschaduwen. Een rustige, terughoudende uitstraling.

Ideaal wanneer de scorekaart wordt ingesloten in een bestaande website en niet mag vloeken met het omringende ontwerp, of wanneer je merkpalet de visuele toon zet.

playground

Speels en energiek. Nunito- en Quicksand-lettertypen, royale afrondingen, onscherpe zwevende emoji’s op de achtergrond en veerkrachtige animaties.

Geschikt voor consumentendoelgroepen, luchtige zelfevaluaties en content die bedoeld is om op sociale media te delen. Dit is de standaardinstelling voor nieuwe scorekaarten.

Vermijd dit thema bij serieuze onderwerpen — financiën, gezondheid, risicobeheer of reorganisaties — waar een speelse toon ongepast is.

obsidian

Redactioneel en hoogwaardig. Instrument Serif voor koppen boven DM Sans voor de lopende tekst, kaarten met matglaseffect (glassmorphism), subtiele korrel en ingetogen bewegingen.

Uitstekend geschikt voor leiderschapsdiagnoses, adviesbureaus en hoogwaardige B2B-diensten: situaties waarin de lezer beoordeelt of jij zijn tijd waard bent.

Niet aan te raden voor een strikt technische doelgroep die wars is van alles wat op een reclamebrochure lijkt.

brutalist

Rauw en contrastrijk. Space Mono en JetBrains Mono, rechte hoeken zonder afronding, harde zwarte schaduwen met offset, gifgroen accent en directe overgangen zonder easing.

Zeer geschikt voor developer tools, beveiligings- en infrastructuuraudits en bureaus met een uitgesproken visueel profiel: doelgroepen die monospace associëren met inhoudelijke diepgang.

Vermijd dit als je eigen merkpalet exact moet worden gevolgd: dit thema legt zijn eigen oppervlakken en accenten dwingend vast.

Een keuze maken

Vraag jezelf af wat de deelnemer dertig seconden vóór aanvang van de scorekaart deed, en wat hij dertig seconden na afloop zal doen. Een CTO die een adviesbureau beoordeelt en een marketeer die via LinkedIn binnenkomt, verwachten een heel andere sfeer.

Kies bij twijfel voor de rustigste optie. De vragen dragen de ervaring, niet de visuele opsmuk.

Beschikbaarheid per abonnement

Thema’s zijn gekoppeld aan je abonnement. Als je een thema instelt dat niet binnen je pakket valt, wordt de opslag geweigerd met vermelding van de beschikbare thema’s. Een AI-assistent die scorecard_design_guide raadpleegt, weet welke thema’s op jouw account actief zijn en stelt geen niet-ondersteunde opties voor.

Het merkpalet

Tien kleuren in hexadecimaal formaat:

Sleutel	Toepassing
primary	Knoppen, voortgangsindicatoren en het leidende accent
primaryForeground	Tekst en pictogrammen op primary
accent	Incidentele accentuering
background / backgroundDark	Achtergrond van de gehele pagina
surface / surfaceDark	Kaarten en panelen
text / textDark	Lopende tekst
muted	Secundaire toelichtingen

De *Dark-waarden worden gebruikt in de donkere modus. Stel deze bewust in in plaats van het lichte palet simpelweg te inverteren — inverteren levert doorgaans fletse tinten op.

Belangrijk voor de leesbaarheid: zorg dat primaryForeground uitstekend leesbaar is op primary, en text op background, op normale tekstgrootte.

Instellen

In het beheerpaneel bevinden beide instellingen zich in het bewerkingsscherm van de scorekaart.

Vanuit een AI-assistent stel je ze in via update_scorecard_config:

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

Vraag daarna om de previewUrl — elk concept levert zo’n link op, waarmee je het resultaat kunt beoordelen vóór publicatie. De MCP-prompt choose_theme begeleidt je desgewenst stap voor stap door deze configuratie.