Diversidade SA

Componentes

UI Kit

Padrões e componentes reutilizáveis do produto Diversidade SA, alinhados à paleta roxo + teal.

Botões

Variantes principais e estados.

Topbar e breadcrumb

Cabeçalho de cliente com contexto do ciclo e filtros.

Logo do Cliente
Ciclo atual: 2026 Ciclo anterior: 2025 N-Size: X.XXX pessoas

Navegação lateral

Menu de produto com grupos, itens ativos e sub-navegação. Duas variantes para comparação.

Versão 01Compacta · grupos em caixa-alta
Densa, ideal para perfis com muitos itens. Item ativo usa bg-sidebar-accent.
Versão 02 · recomendadaTipografia maior · alvo de toque 44px
Inspirada no padrão RSA in company: ícones h-5 w-5, itens com min-h-[44px] e fonte text-sm font-medium. Item ativo em bloco sólido bg-accent.

Cards KPI

Métricas principais com ícone, valor e variação contextual.

Promotores (9-10)

62,4%

+3,1% vs ciclo anterior

Neutros (7-8)

24,8%

-1,2% vs ciclo anterior

Detratores (0-6)

12,8%

-1,9% vs ciclo anterior

N-Size

3.412

+8,5% vs 2025

Gauge de NPS

Indicador semicircular com zonas crítica → excelência.

78.0

Zona de Excelência

Escala NPS

  • 75–100 · Zona de Excelência
  • 50–75 · Zona de Qualidade
  • 0–50 · Zona de Aperfeiçoamento
  • –100–0 · Zona Crítica

Distribuição de notas

Histograma de notas 0–10 categorizado por zona.

0
1
2
3
4
5
6
7
8
9
10
Detratores Neutros Promotores

Barras de favorabilidade

Comparativo Favoráveis / Neutros / Desfavoráveis por dimensão.

Favoráveis Neutros Desfavoráveis
Clima e segurança psicológica
68%
20%
12%
Demandas, organização e controle do trabalho
54%
28%
18%
Apoio social e qualidade da liderança
61%
22%
17%
Sentido, reconhecimento e vínculo com o trabalho
72%
18%
10%

Grupos de diversidade

Chips de recortes utilizados em filtros e resumos.

🧑‍🦱Mulheres🟫Pessoas Negras👩🏾Mulheres NegrasPcD🏳️‍🌈LGBTQIA+🏳️‍⚧️Pessoas Trans👥+ 50 anos

Filtros avançados

Painel lateral com agrupamento e contadores ativos.

Filtros Avançados

6 filtros ativos

Empresa

1
Todos
Todos
Todos
Todos
Todos
Todos

Diversidade

1
Todos
Todos
Todos
Todos
Todos
Todos

Metodologia

1
Todos
Todos
Todos
Todos

Alertas e contexto

Banners informativos no topo de áreas analíticas.

A comparação com benchmarking externo é realizada a partir da base de respostas de clientes da Blend Edu. Serve como parâmetro geral de mercado.

NR-01 · Gerenciamento de Riscos Psicossociais. Esta análise avalia os fatores de risco psicossocial no trabalho.

Catálogo previsto

Próximos componentes a documentar.

  • Inputs · text, select, checkbox, radio, switch
  • Tabs e segmentação de visões
  • Tabela analítica com expand de dimensões
  • Toast, dialog, sheet, tooltip
  • Empty state, skeleton e estados de erro
  • Avatares e badges de status