Design System v4.0 · §84

Storybook de Estados

Catálogo vivo dos componentes e seus estados (claro/escuro pelo botão ☾/☀). Fonte única: assets/css/start-v4.css?v=e51bba39. Referência para validação e produção — se um estado não está aqui, não está definido.

Cores semânticas

Tokens da paleta — todos calibrados AA em texto grande/normal.

Marca

--sp-orange

orange-ink

Superfície

--sp-bg

--sp-mat

Texto

--sp-ink

--sp-mut

Estado

ok

warn

danger

Tipografia

Família única (§40). Escala e pesos.

EYEBROW · rótulo

Título display

Subtítulo de seção

Cabeçalho de card

Corpo de texto — legível, ~65 caracteres por linha, cor --sp-ink-2.

Texto auxiliar / meta em --sp-mut.

Botões

CTA sólido mantém o Start Orange (Decisão A); botão com texto branco usa o laranja de botão (#7A5B00, AA 4.5).

Primário

Branco em laranja (AA)

Fantasma

Desabilitado

Pills & badges

Temperatura de lead · prioridade · status do asset.

Temperatura

FRIOMORNOQUENTEMISTONEUTRO

Prioridade

P1P2P3

Status do asset

na filaem revisãopublicável

Materiais & vidro

§23-24: conteúdo em material sólido; vidro só em controle/nav/orb.

.sp-mat (conteúdo)

Card de conteúdo, sólido.

.sp-mat-2 (elevado)

Card elevado.

.sp-glass (controle)

Vidro — só em nav/chips/orb.

Estados de tela

A regra de ouro: vazio ≠ erro. Cada um tem tratamento próprio, e nenhum some em silêncio.

Vazio (honesto)

Nada aqui ainda. Quando houver conteúdo, aparece aqui.

Erro (com retry)

Não consegui carregar agora.

Carregando

Cheio

3 itens

com dados reais (nunca número fabricado).

Honestidade do DS: "cheio" mostra dado real ou seed rotulado [demo] — nunca número inventado. Estados vazio/erro/carregando são distintos por design (§62/§64). Gate de contraste: deploy/rendercheck/gate.js.