design system v2.2 · 2026-08-16 · "o bilhete ao meio-dia" · doutrina: DOM_BRANDBOOK_V2.html · parecer de design + revisão do fundador

Referência de implementação do dom (app RN/Expo, web, peças digitais). A doutrina vive no brandbook v2; aqui está o que ela vira em tela. Em conflito, o brandbook vence. Lei-mestra: "a tela é o bilhete: papel claro, tinta escura — e cor, só no que desce na mão." E a régua desta versão: o dom nunca parece parado e nunca parece genérico — tudo que ele faz aparece como o passo real, animado no mesmo batimento.

01Logo e símbolo

A marca é UMA: "hi dom" nunca digitado em fonte — só o logo completo com o d-jabuticaba (P-003). Arquivos em brand/logo/; matriz CorelDRAW.

logo — palco claro

logo — palco escuro

símbolo — palco claro

64px

32px

16px

símbolo — palco escuro

64px

32px

16px

Favicon — inclusive no Chrome escuro

Arquivos e tamanhos de exportação

02Cor — 13 tokens

Papel claro, tinta escura, croma só no que desce na mão. O amarelo é a lata (CTA, um por tela); o sol só sobre jabuticaba.

O palco

As tintas

A lata e o sol

Os funcionais

03Estados interativos — mobile-first

Touch-first: pressed é o estado rei. Hover é cortesia web e nunca carrega informação.

04Movimento — um batimento só

A casa inteira pulsa no mesmo ritmo: 1.4s. Respiração do símbolo, ponto da timeline, caret do streaming, skeleton e badge usam o mesmo período — três ritmos diferentes na mesma tela é bagunça; um só é identidade. Entradas em 200ms ease-out; trocas em 150ms.

"dom pensando" — a respiração do símbolo

o símbolo INTEIRO respira: scale 1→1.06 + opacity .55→1, ciclo 1.4s, alternado. Entra só se a resposta demora >300ms (fade-in 150ms); para no primeiro token do streaming e assenta em 120ms — o d que respirava é o mesmo que assina a resposta.

05O delay pedido→resposta — percepção de agilidade

Velocidade percebida é critério de primeira classe. O comportamento nunca é genérico: sempre o passo real do momento, animado. Orçamento de latência em camadas:

Timeline de tracking — o dom nunca age em silêncio (B1)

Badge de trabalho — ancorada no prompt

Quando o trabalho continua e a timeline saiu de vista (scroll, troca de assunto, volta ao app), o badge aparece acima do campo de texto — referência Runaki adotada, com o passo real e o tempo decorrido:

conferindo sua fatura… · 3s deixa comigo — trabalhando nisso · 12s ✓ feito.

06Componentes de conversa

Interface leve, simples, clara e esclarecedora. Chat-first: texto curto + chips; dado estruturado em tabela; ação proposta antes de executada.

A lei da convivência — botão é atalho do dizível

Bolhas (L6 — o dom escreve, o usuário fala)

dom, como fechou meu mês?

Fechou no azul: sobraram R$ 312,40. A conta de luz veio R$ 48 acima do normal — quer que eu fique de olho?

saldo + R$ 312,40 luz ▲ R$ 48 vence 22 ago

Deixa comigo

feito.

Streaming — o dom escreve ao vivo (3 regras, de olhar)

1 · a prosa nasce na velocidade real do stream — caret de tinta piscando no fim

Conferi as três contas. A fatura do cartão fecha na sexta e

sem delay artificial por caractere; caret 2px × altura da linha, pisca a 1.4s; render com throttle de 30fps

2 · número NUNCA aparece pela metade (INV-1)

Fechou no azul: sobraram

enquanto o valor não fecha no stream: o espaço fica reservado (skeleton inline)…

Fechou no azul: sobraram R$ 312,40. A conta de luz

…e o número entra inteiro, de uma vez, já em mono

"sobraram R$ 3" → "sobraram R$ 31" → "sobraram R$ 312,40" — número errado na tela a cada frame

valor entregue nunca é apagado ou alterado depois — se errou, o dom diz "errei" em mensagem NOVA

3 · apaga-e-reescreve SÓ quando a prosa vira bloco — um crossfade de 150ms, uma única vez

entrou R$ 4.850, saiu R$ 4.537, sobraram R$ 312…

↓ vira tabela — crossfade 150ms, a única substituição permitida na mensagem

Entrou	+ R$ 4.850,00
Saiu	− R$ 4.537,60
Sobrou	R$ 312,40

revisão contínua (escreve-apaga-escreve o tempo todo) — lê como o dom inseguro do que diz

Reduced-motion: sem caret; substituições instantâneas.

Quebra de mensagens — por sentido, nunca por caracteres

Propose-then-approve — nada acontece sem aprovação

Executado, vira registro com ✓ feito. — badge verde só em sucesso (L5). Pendente = sem badge; falha = "!" ferrugem no fato falho.

Card de registro (referência Morphic) + tabela chave-valor

Atenção — a lata avisa antes de furar

SVG explicativo — a lei do diagrama

07Ícones de categoria

O público é gente simples: o ícone de categoria faz bater o olho na transação. A L7 não precisa de emenda — ela veta a metáfora decorativa do dinheiro (porquinho, cofrinho, cifrão); ícone de categoria aponta pro objeto da vida (o mercado, a luz, o ônibus) — é diagrama que explica em miniatura.

Quando e onde — o mapa declarado

Sempre com a palavra junto — o ícone acelera o olho, não substitui (a11y: ícone aria-hidden, o texto lê).

08Gráficos — sob pedido, e quando explicam melhor

Pra quem tem familiaridade: barra e linha, na doutrina (cor só no que importa). Servidos quando a pessoa pede ou quando o dom julga que o desenho explica melhor que a prosa — e aí entra como bilhete ("desenhei pra você ver: …"), nunca como dashboard fixo.

barra — comparação · valores no TOPO das barras · a barra-resposta em lata-fundida

712mai

840jun

781jul

987ago

agosto foi teu mês mais caro de mercado: R$ 987 — uns R$ 210 acima da tua média. Quer que eu te avise quando passar dela?

composição — "pra onde foi o dinheiro" (o lugar do donut é este: lista com barra proporcional · ícone 16px no rótulo — cada linha é uma categoria)

mercado

R$ 987

casa

R$ 690

transporte

R$ 384

saúde

R$ 231

outros

R$ 282

quase 4 de cada 10 reais foram pro mercado. Se quiser baixar isso, o caminho mais fácil é a lista do que se repete toda semana — quer que eu monte?

guardado — linha · evolução no tempo · o sujeito é UMA categoria, o ícone entra no rótulo

o que você guarda vem subindo há dois meses — + R$ 612 em julho, teu melhor mês do ano. Segurando esse ritmo, dá pra fechar dezembro com uns R$ 3.000 na lata.

09Pimenta — os casos canônicos

Pra este público, a cor do erro é a cor da vergonha — e a fundação tira a vergonha da pessoa. Por isso: pimenta é dedo apontando, não cor de categoria. Os três usos, e nenhum outro:

1 — Saída de dinheiro (só nos glifos do valor, com −, em mono)

2 — Erro: a cor toca só o fato falho (B2)

não consegui ler a fatura do cartão agora — o banco não respondeu. Sigo com a foto de ontem e tento de novo em 1h.

bilhete calmo; pimenta marca APENAS o trecho que falhou — nunca a bolha, o fundo, ou um ícone de alerta

3 — Destrutivo: borda + texto, nunca preenchido

10O bilhete — notificação e erro

11Painel escuro e entardecer

Não existe modo escuro (L2). Jabuticaba = exceção utilitária de UM número. Fallback noturno = papel-ao-entardecer (papel rebaixa, tinta continua). Inverter é proibido.

12Espaço e ritmo

13Acessibilidade — os números

14Voz — resumo operacional

15Tokens — copiar e colar

:root{
  /* palco */
  --dom-branco-de-meio-dia:#FBF7F0;
  --dom-papel-sombra:#F4EDE2;
  --dom-traco-de-lapis:#E4DACA;
  --dom-papel-ao-entardecer:#EFE5D3;
  /* tintas */
  --dom-terra-preta:#2B2521;
  --dom-terra-arada:#6F6558;
  --dom-escuro-jabuticaba:#2E1528;
  /* lata */
  --dom-amarelo-de-lata:#F0A800;
  --dom-lata-fundida:#C88C00;
  --dom-borda-cta:#A87500;
  /* funcionais */
  --dom-verde-de-colheita:#1A6E3F;
  --dom-ferrugem:#964917;
  --dom-pimenta:#B52718;
  /* sol — só sobre jabuticaba */
  --dom-amarelo-de-sol:#FFFF00;
  /* estados */
  --dom-lata-pressionada:#D89700;
  --dom-tinta-apagada:#A99E8F;
  --dom-selecao-de-texto:#F8DFA8;
  --dom-veu:rgba(43,37,33,.45);
  /* raios e espaço */
  --dom-r-card:14px; --dom-r-bolha:18px; --dom-r-chip:999px; --dom-r-pill:999px;
  --dom-s1:4px; --dom-s2:8px; --dom-s3:16px; --dom-s4:24px; --dom-s5:40px;
  /* movimento — um batimento só */
  --dom-t-pulso:1400ms;
  --dom-t-entrada:200ms;
  --dom-t-troca:150ms;
  --dom-ease-entrada:cubic-bezier(0,0,.2,1);
  --dom-ease-pulso:cubic-bezier(.4,0,.6,1);
}

/* fontes (Google Fonts / expo-google-fonts) */
--dom-font-marca:  "Outfit"          (700 contexto de marca, 600 títulos)
--dom-font-ui:     "Figtree"         (400/500/600)
--dom-font-numero: "JetBrains Mono"  (600; herói 700)

dom — design system v2.2 · derivado do DOM_BRANDBOOK_V2.html (vigente) + parecer de design + revisão do fundador 2026-08-16 · substitui v2.1, v2.0 e v1.0 quando aprovado. Todo mundo devia ter um dom.