Thèmes et image de marque

L’apparence d’une scorecard repose sur deux couches indépendantes.

Le thème définit sa personnalité : typographie, rayon des arrondis, ombres, textures et animations. La palette de marque fixe ses couleurs. Choisir un thème ne contraint pas la palette, et définir une palette ne modifie pas la typographie — choisissez d’abord le thème adapté à votre audience, puis ajustez les teintes à votre marque.

Les quatre thèmes

default

Police sans-serif système neutre, arrondis modérés, ombres de cartes conventionnelles. Aucune prise de parti stylistique.

À utiliser lorsque la scorecard est intégrée dans un site existant pour ne pas entrer en conflit avec le design environnant, ou lorsque votre palette de marque porte l’essentiel de l’identité.

playground

Pétillant et coloré. Polices Nunito et Quicksand, arrondis généreux, émojis flottants floutés en arrière-plan, transitions à ressort dynamiques.

Idéal pour le grand public, les auto-évaluations ludiques et tout contenu voué à être partagé sur les réseaux sociaux. C’est le thème par défaut des nouvelles scorecards.

À éviter pour les sujets graves — finance, santé, gestion des risques ou plans sociaux — où le ton sautillant semblerait déplacé.

obsidian

Éditorial et haut de gamme. Titres en Instrument Serif sur corps de texte en DM Sans, cartes en verre dépoli (glassmorphism), grain subtil et animations feutrées.

Parfait pour les diagnostics de direction, le conseil et le B2B à fort panier moyen — partout où le lecteur évalue si vous méritez son temps.

À éviter face à une audience technique hostile à tout ce qui ressemble à une plaquette commerciale.

brutalist

Brut et très contrasté. Polices Space Mono et JetBrains Mono, aucun arrondi, ombres noires décalées et nettes, accent vert acide et transitions instantanées sans easing.

Idéal pour les outils pour développeurs, les audits de sécurité/infrastructure et les agences à forte identité visuelle — un public pour qui le texte à chasse fixe est un gage de rigueur.

À éviter si votre palette de marque doit dominer : ce thème impose ses propres surfaces et son accentuation.

Choisir le bon thème

Posez-vous la question : que faisait le répondant trente secondes avant d’arriver sur votre scorecard, et que fera-t-il trente secondes après l’avoir finie ? Un directeur technique évaluant un cabinet de conseil et un responsable marketing cliquant sur un lien LinkedIn n’ont pas les mêmes attentes.

En cas de doute, privilégiez le thème le plus sobre. Ce sont les questions qui créent la valeur, pas les artifices graphiques.

Disponibilité selon votre forfait

Les thèmes dépendent de votre abonnement. Si vous choisissez un thème non inclus dans votre formule, la sauvegarde est refusée et le message d’erreur liste les thèmes utilisables. Un assistant IA consultant scorecard_design_guide connaît les thèmes accessibles sur votre compte et ne vous proposera pas d’option non disponible.

La palette de marque

Dix couleurs exprimées en code hexadécimal :

Clé	Emplacement
primary	Boutons, progression, accentuation principale du flux
primaryForeground	Texte et icônes affichés sur primary
accent	Mises en valeur ponctuelles
background / backgroundDark	Arrière-plan de la page
surface / surfaceDark	Cartes et panneaux en surélévation
text / textDark	Corps de texte
muted	Textes secondaires

Les valeurs *Dark s’appliquent en mode sombre. Définissez-les intentionnellement plutôt que d’inverser simplement la palette claire, ce qui donne souvent un rendu terne.

Point crucial de lisibilité : primaryForeground doit être parfaitement lisible sur primary, et text sur background, en taille de lecture normale.

Configuration

Dans l’interface d’administration, ces options se trouvent sur l’écran d’édition de la scorecard.

Depuis un assistant IA, la modification s’effectue via update_scorecard_config :

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

Demandez ensuite la previewUrl — chaque brouillon en génère une pour prévisualiser fidèlement le rendu avant toute publication. Le prompt MCP choose_theme vous guide pas à pas dans cette personnalisation.