−11,2%
412.860
Alcance no Instagram
contas distintas alcançadas em 29 dias medidos
01 · Fundação
Uma cor de ação, e o resto é hierarquia
Os valores abaixo são lidos do CSS em tempo real — troque o tema no topo e
eles se recalculam, porque cada token é declarado uma vez com
light-dark() e quem decide é o color-scheme.
Superfície e traço
Três níveis bastam. Um quarto cinza é sinal de hierarquia errada em outro lugar.
Tinta
Texto fraco é para metadado curto, nunca para texto que precisa ser lido.
Ação
Uma cor de ação só. Se é clicável e não é destrutivo, é verde. O 700 foi escurecido do #00a86b original para bater AA sobre branco.
Estado — reservado
Nunca vira cor de série. Sempre com rótulo ou ícone junto, porque cor sozinha não carrega o dado.
Séries — identidade
Ordem fixa pela posição estável da entidade. Nunca cicle, nunca reatribua quando um filtro muda a contagem de séries.
Sequencial e divergente
Magnitude usa uma matiz só. A polaridade é azul↔laranja, nunca verde↔vermelho: esse par some no daltonismo.
Etapas — estado de funil
O neutro é intencional: "não começou" não deve competir por atenção.
Escala tipográfica
Inter, base de interface em 14px, nunca abaixo de 12. Números sempre tabulares.
02 · Componentes do sistema
As peças que o app já tem em CSS
Todas estas primitivas já existem em primitivas.css e são
consumidas pelas telas. O que falta, em muitos casos, é o componente React
que as veste.
Botão
Chip
Em revisão
Feito
Backlog
Campo
Seletor segmentado
Tabela
| Item | Frente | Data | Status | Valor |
|---|---|---|---|---|
| Reels do lançamento tráfego pago | Conteúdo | 23/07 | Em revisão | 9 d |
| Planilha de precificação SEO | Produto | 22/07 | Fazendo | 4 d |
| Sequência de e-mail captação | CRM | 21/07 | A fazer | — |
Número à direita e tabular. Sem dado é travessão, nunca zero — tarefa sem responsável não é tarefa de ninguém, é tarefa não registrada.
Sem tarefas neste recorte.
Nada aguardando revisão.
Sem tarefas neste recorte.
Leitura — as três severidades, e só três
Risco
A reclamação de spam do e-mail está em 0,28%, quase três vezes o limite de 0,10% dos provedores.
12.480 assinantes6 envios no período
Atenção
A landing carrega em 3,4 s no mobile, acima do limite de 2,5 s. O tráfego pago sai antes do funil começar.
78% do tráfego é mobile12.106 sessões
Informação
A perda maior do funil está entre engajamento e clique: 14,8% passaram, contra 17,2% no período anterior.
25.184 engajados3.727 cliques
A frase vem de detector puro e determinístico, que devolve null quando não há sinal.
Leitura sem sinal não aparece — não existe leitura "tudo certo" enchendo lista.
Nota de cobertura — a peça mais importante do sistema
34% das tarefas não têm responsável. É o que limita o resto do painel.
Formato fixo: quanto falta → o que isso impede de afirmar. Fica no rodapé do card a que se refere, nunca solta no fim da página, onde ninguém liga a nota ao número.
03 · Extensões do painel
Quatro peças novas, escritas nesta sessão
Vivem em ltq-os-extensoes.css, fora da pasta gerada, porque
npm run ds:sync sobrescreve styles/ltq-os/. Quando o
repo do design system incorporar as quatro, o arquivo some.
KpiTile
número antes do rótulo — a leitura vira varredura
+7,9%
25.184
Interações
curtidas, comentários, salvamentos e compartilhamentos somados
3.727
Visitas ao perfil
sem período anterior medido, o selo de variação não aparece
O selo diz quanto mudou; a leitura diz o que isso significa. Selo sozinho é o que o
sistema proíbe — por isso leitura é obrigatória no tipo do componente.
O ponto colorido é a segunda codificação: variação nunca é comunicada só por cor.
Do alcance ao perfil
Instagram · 01 – 29 agoAlcance412.860
6,1% passaram · era 5,4%
Interações25.184
14,8% passaram · era 17,2%
Visitas ao perfil3.727
Rampa sequencial, uma matiz só. O funil é magnitude ordinal — usar as cores de etapa do kanban aqui viraria arco-íris.
Origem das conversões
por pedidos pagos35%Orgânico — busca4.312
28%Pago — Meta Ads3.480
17%Social — Instagram2.108
11%não informada1.406
6%E-mail800
O chip é a participação no total, não a posição: "35%" informa mais que "1".
Receita bruta contra a meta
últimos 3 meses · meta cadastrada em /metasA marca vertical é a meta, a barra é o realizado, o fundo claro é a faixa aceitável. O KpiTile compara com o período anterior; este compara com o alvo. São perguntas diferentes — "cresci?" e "cheguei?" — e discordam com frequência.
04 · As telas
Três rotas já vestidas com o padrão
Estas são as montagens reais do código — inclusive os buracos. Onde o banco não tem fonte, o bloco diz o que falta em vez de mostrar número inventado.
/marketing · Visão geral
−11,2%
412.860
Alcance no Instagram
contas distintas alcançadas em 29 dias medidos
+4,3%
157
Conversões pagas
pedidos com status pago ou concluído, de todos os canais
O que precisa de atenção
ordenado por gravidade
Sem fonte de tarefas
Este bloco lista tarefas com frente, prazo e status. O LTQ OS ainda não tem
tabela de tarefas — as 25 do schema cobrem vendas, contatos, Meta Ads,
Instagram, comunidade e NPS.
/instagram · Resumo do perfil
A rota com o melhor dado do app: a API já devolve totals e
previousTotals, que é exatamente o que o selo de variação precisa.
Eram seis MetricCard iguais; viraram seis KpiTile, e o funil
agora existe porque os três números vêm do mesmo snapshot, sobre o mesmo universo.
18.402
Seguidores totais
total no último snapshot do período, não a soma dos dias
+18,6%
+412
Crescimento líquido
seguidores ganhos menos perdidos em 29 dias medidos
+22,4%
412.860
Views
exibições de reels, posts e stories somadas
Do alcance ao perfil
29 dias com snapshotAlcance184.203
7,0% passaram · era 8,3%
Interações12.940
28,7% passaram · era 26,1%
Visitas ao perfil3.714
O funil para na visita ao perfil. O clique na bio e o que acontece depois dele não são medidos — sem analytics de site, não dá para afirmar quanto deste alcance virou venda.
Atenção
O engajamento do Instagram caiu para 7,0% do alcance, contra 8,3% no período anterior.
12.940 interações184.203 de alcance29 dias medidos
/metas · Realizado contra o alvo
A barra que já existia na tabela normaliza cada linha pela própria meta: 100% de um mês de R$ 200 mil ocupa a mesma largura que 100% de um mês de R$ 400 mil. Responde "bati?", e só. Aqui a escala é comum às linhas, então os meses passam a ser comparáveis entre si.
Realizado contra o alvo
8 meses de 2026 com meta3 meses já iniciados estão sem meta cadastrada e ficaram fora deste gráfico. A comparação acima fala só dos meses planejados.
06 · Decisões
O que trava a padronização do resto do app
O LTQ OS tem 15 rotas. Três já estão vestidas. Estas são as escolhas que definem como as outras 12 vão ser feitas — e algumas mudam o app inteiro.
A navegação vira clara?
É a decisão de maior alcance: toca app-sidebar.tsx e portanto as 15 rotas
de uma vez. Enquanto não for decidida, qualquer tela nova nasce com a nav antiga e
precisa ser revisitada.
Separador decimal
O helper fmtPercent usa toFixed e imprime
11.2% com ponto; o Figma pede vírgula. É uma linha em
format.ts, mas muda todo número percentual do dashboard.
Use o controle no topo desta página para ver os dois.
Ordem das 14 rotas restantes
As rotas do app hoje, e o quanto cada uma já usa o DS:
| Rota | O que é | Estado |
|---|---|---|
/marketing | Visão geral + Meta Ads | redesenhada |
/instagram | Painel do IG | redesenhada |
/metas | Gestão de metas | bloco Meta aplicado |
/ | Home do dashboard | tokens, sem as peças novas |
/vendas | Pedidos, filtros, export | tokens, sem as peças novas |
/contatos | Listagem e métricas | tokens, sem as peças novas |
/produto, /comunidade, /recuperacoes, /reconciliation, /usuarios, /perfil, /auth, /login | as demais | a inventariar |
O que precisa de backend antes de existir
Três frentes do desenho não são trabalho de front. Sem elas, os blocos continuam declarando ausência:
analytics de site — sessões, visitantes, rejeição
métricas de e-mail — entrega, abertura, spam
board de tarefas — frente, prazo, status
Renderizado com tokens.css + primitivas.css (design system LTQ OS
v0.3.0) e ltq-os-extensoes.css, sem reescrita. Os números são exemplos do
Figma e de dados de agosto de 2026 — não são leitura ao vivo do banco.