Temas e identidade visual

O visual de uma scorecard é estruturado em duas camadas independentes.

O tema define sua personalidade: tipografia, raio de cantos, sombras, textura e animação. A paleta da marca estabelece suas cores. Escolher um tema não restringe as cores, e configurar uma paleta não altera a tipografia — escolha o tema adequado ao seu público e depois ajuste as cores à sua marca.

Os quatro temas

default

Tipografia sans-serif neutra do sistema, cantos com arredondamento moderado e sombras de cartão convencionais. Visual limpo e discreto.

Ideal quando a scorecard é incorporada em um site existente e não deve conflitar com o design ao redor, ou quando as cores da sua marca conduzem a apresentação.

playground

Descontraído e vibrante. Fontes Nunito e Quicksand, cantos amplamente arredondados, emojis desfocados flutuando ao fundo e transições elásticas.

Recomendado para público consumidor, autoavaliações leves e conteúdos com apelo de compartilhamento social. É o padrão inicial de novas scorecards.

Evite em temas delicados — finanças, saúde, avaliação de riscos ou demissões — onde o tom alegre pode soar inadequado.

obsidian

Editorial e sofisticado. Títulos em Instrument Serif sobre corpo de texto em DM Sans, cartões com efeito de vidro (glassmorphism), granulação sutil e movimentos contidos.

Perfeito para diagnósticos com lideranças e executivos, consultorias e vendas B2B de alto valor — situações em que o leitor avalia se você merece a atenção dele.

Evite com públicos estritamente técnicos avessos a qualquer visual que lembre material promocional.

brutalist

Cru e de alto contraste. Fontes Space Mono e JetBrains Mono, cantos retos sem arredondamento, sombras pretas sólidas e deslocadas, realce em verde-ácido e transições instantâneas.

Indicado para ferramentas de desenvolvimento, auditorias de segurança e infraestrutura e marcas com posicionamento visual marcante — perfis que associam fontes monoespaçadas a rigor técnico.

Evite quando a exatidão das suas cores corporativas for mandatória: este tema fixa o acabamento de suas superfícies e realces.

Como escolher o tema ideal

Pense no que o participante estava fazendo trinta segundos antes de chegar à sua avaliação e no que fará trinta segundos após o término. Um CTO avaliando uma consultoria e um profissional de marketing acessando um link do LinkedIn procuram ambientes completamente diferentes.

Na dúvida, fique com a opção mais discreta. São as perguntas que sustentam a experiência.

Disponibilidade conforme o plano

Os temas são liberados de acordo com o plano contratado. Se você definir um tema não contemplado no seu plano, a operação será recusada informando as opções permitidas. Um assistente de IA ao consultar scorecard_design_guide será informado dos temas disponíveis na sua conta e não sugerirá opções bloqueadas.

A paleta de marca

Dez cores em formato hexadecimal:

Chave	Onde é aplicada
primary	Botões, barras de progresso e destaque principal
primaryForeground	Texto e ícones exibidos sobre a cor primary
accent	Destaques pontuais
background / backgroundDark	Fundo geral da página
surface / surfaceDark	Cartões e painéis
text / textDark	Texto principal
muted	Textos secundários

Os valores *Dark aplicam-se no modo escuro. Defina-os deliberadamente em vez de inverter as cores claras automaticamente, o que costuma gerar tons opacos.

Um detalhe importante: certifique-se de que primaryForeground é legível sobre primary, e text sobre background, no tamanho normal de leitura.

Como configurar

No painel administrativo, ambos os ajustes ficam na tela de edição da scorecard.

A partir de um assistente de IA, a configuração é feita via update_scorecard_config:

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

Solicite em seguida a previewUrl — cada rascunho gera um link para conferir o resultado real antes de publicar. O comando MCP choose_theme auxilia nessa definição interativamente.