Temas y personalización

El aspecto visual de una scorecard se estructura en dos capas independientes.

El tema define su personalidad: tipografía, radio de curvatura, sombras, texturas y animaciones. La paleta de marca establece los colores. Elegir un tema no limita los colores y ajustar la paleta no modifica la tipografía: escoge el tema adecuado para tu audiencia y adapta los tonos a tu marca.

Los cuatro temas

default

Tipografía sans-serif neutra del sistema, radios moderados y sombras de tarjeta convencionales. No impone un estilo marcado.

Recomendado cuando la scorecard va a incrustarse en un sitio web existente y no debe desentonar con el diseño circundante, o cuando la paleta de tu marca ya asume el protagonismo visual.

playground

Alegre y desenfadado. Tipografías Nunito y Quicksand, bordes generosamente redondeados, emojis desenfocados flotando en el fondo y transiciones elásticas.

Adecuado para audiencias de consumo general, autoevaluaciones distendidas y contenido destinado a compartirse en redes sociales. Es el tema predeterminado al crear una scorecard.

Evítalo en temáticas complejas o delicadas —finanzas, salud, gestión de riesgos o despidos— donde la ligereza estética resultaría inapropiada.

obsidian

Editorial y prémium. Títulos con Instrument Serif sobre texto base en DM Sans, tarjetas con acabado traslúcido (glassmorphism), grano sutil y animaciones contenidas.

Ideal para diagnósticos a nivel directivo, firmas de consultoría y servicios B2B de alto valor: entornos donde el lector evalúa si merece la pena invertir su tiempo.

Desaconsejado para perfiles técnicos reacios a estéticas que recuerden a folletos comerciales.

brutalist

Directo y de alto contraste. Fuentes Space Mono y JetBrains Mono, esquinas sin redondear, sombras negras desplazadas y definidas, acento verde ácido y transiciones instantáneas sin suavizado.

Óptimo para herramientas de desarrollo, auditorías de seguridad e infraestructura y estudios con criterio visual radical: audiencias que asocian la tipografía monoespaciada con rigor técnico.

Evítalo si la exactitud de tu paleta corporativa es crítica: este tema fija el estilo de sus propias superficies y acentos.

Cómo elegir entre ellos

Pregúntate qué estaba haciendo el usuario treinta segundos antes de entrar a tu evaluación y qué hará treinta segundos después de terminarla. Un director de tecnología evaluando una consultora y un profesional de marketing abriendo un enlace de LinkedIn demandan sensaciones muy diferentes.

Ante la duda, opta por la opción más sobria. Lo verdaderamente importante son las preguntas.

Disponibilidad según tu plan

Los temas están vinculados a tu plan de suscripción. Si intentas asignar un tema no incluido en tu plan, el guardado se denegará informando de los temas disponibles. Un asistente de IA que consulte scorecard_design_guide conocerá los temas admitidos en tu cuenta y no te sugerirá opciones bloqueadas.

La paleta de marca

Diez colores en formato hexadecimal:

Clave	Dónde se aplica
primary	Botones, barras de progreso y acento conductor
primaryForeground	Texto e iconos superpuestos en primary
accent	Destacados puntuales
background / backgroundDark	Fondo general de la página
surface / surfaceDark	Tarjetas y contenedores
text / textDark	Cuerpo de texto
muted	Textos secundarios

Los valores *Dark se aplican en el modo oscuro. Configúralos deliberadamente en lugar de invertir los claros de forma automática, lo cual suele dar tonos apagados.

Comprueba siempre el contraste: primaryForeground debe leerse con total claridad sobre primary, y text sobre background, en tamaño estándar.

Configuración

En el panel de administración, ambos ajustes se encuentran en la pantalla de edición de la scorecard.

Desde un asistente de IA, se configuran mediante update_scorecard_config:

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

Pide a continuación la previewUrl: cada borrador genera un enlace para verificar el acabado real antes de su lanzamiento. El comando MCP choose_theme te ayuda a definir esta configuración mediante un diálogo asistido.