C12 · Componentes

Stat

Destaque numérico grande para superfícies de impacto: métricas, resultados, KPIs. Valor em Display extra-grande, rótulo em mono caixa-alta, legenda opcional.

Anatomia

Três elementos hierárquicos:

Elemento	Tipografia	Tamanho
Valor	Space Grotesk 600	`--t-8xl` ou `--t-6xl`
Rótulo	Mono caixa-alta espaçada	`--t-sm`
Legenda	Inter 400	`--t-sm`

<div class="stat">
  <p class="stat-value">42k</p>
  <p class="stat-label">Membros ativos</p>
  <p class="stat-caption">+12% no último trimestre.</p>
</div>

Layouts

Layout	Uso
Single Stat	Hero focal, capa de seção.
Grid 3 cols	Resultados em destaque (A2 Site).
Grid 4 cols	Dashboard de overview (A1).

Faça e não faça

Faça

Use cor de acento no valor para métricas de melhoria/sucesso.
Acompanhe sempre de rótulo e legenda — número solto não comunica.
Padronize unidades: '42k' ou '42.000', não misture.

Não faça

Não use mais de 4 stats lado a lado — perde impacto.
Não meça em cores múltiplas — uma escolha por bloco.
Não inclua moeda/unidade no valor se for óbvio pelo rótulo.