Canteiro.

• marca técnica em azul, cinza ou verde-escuro
• construtora ou reforma com várias obras simultâneas
• quem controla prazo e custo contra a linha de base (curva S, IDC/IDP)
• operação que gera dado todo dia (RDO, compras, medições)

• app de consumo ou marca lifestyle
• produto que precisa parecer leve e colorido
• negócio de uma pessoa só sem obra física
• tema escuro obrigatório

Tom

Identidade

• Fundo cimento #e7eae8; painéis brancos com fio #d2d7d4 e cantos de 4px; cabeçalho de tabela e tfoot em #f2f4f3. Sem sombra: separação por fio e contraste de superfície.
• Lateral grafite #16232d (a mesma cor do texto) com texto #d3dbdf e secundário #8c9ba3. No celular vira barra de topo grafite + gaveta (popover nativo).
• Azul-técnico #1c4a68 = ação e "executado": botão principal, físico real, barra executada do cronograma, linha selecionada, aba ativa. Azul claro #7fa3bb só como segunda série (financeiro).
• Laranja de segurança #ef5f0f é só alerta (preenchimento, trama, marcador); para texto usa --canteiro-alerta #b3470c (o #ef5f0f não passa 4,5:1 em letra pequena). Obra em dia quase não tem laranja.
• Fontes: Oswald 500 em caixa alta (.canteiro-titulo) só em título de página, de obra e de painel e na marca; Public Sans para todo o resto (rótulo, botão, tabela); IBM Plex Mono (.canteiro-num, tnum) só em número, data, código de pedido/RNC e valor. Texto nunca em mono.
• Escala fixa: título da página 26px, obra 21px, painel 15px, tabela 13px, apoio 12–12,5px.

Regras

• Hierarquia: KPIs do portfólio > tabela de obras (ordenada pelo pior desvio) > obra selecionada (curva S + indicadores > cronograma > suprimentos > medições e qualidade > diário).
• Os números fecham e são calculados no Landing.tsx: físico da obra = Σ(orçado × físico da etapa) ÷ orçado; planejado de hoje = cada etapa linear entre início e fim da base; financeiro = realizado ÷ orçado; IDC = valor agregado ÷ realizado; IDP = valor agregado ÷ valor planejado. KPIs do portfólio são ponderados pelo orçamento de cada obra; efetivo do RDO de hoje = soma das funções. Atraso de pedido, prazo de pendência e dias até a entrega saem das datas contra hoje.
• Percentual com 1 casa; reais inteiros com separador de milhar; "mi" só em resumo (KPI, portfólio, contrato). Sinal de menos tipográfico (−) em desvios.
• Tabela: cabeçalho em faixa clara, número alinhado à direita, coluna ordenada com seta (aria-sort), tfoot com total, fio azul de 2px na margem no hover/foco/seleção, primeira coluna fixa quando a tabela rola de lado. Tabela larga dentro de overflow-x-auto num painel min-w-0; a página nunca rola de lado.
• Foco de teclado: anel de 2px azul-técnico (azul claro na lateral grafite).
• Ícone lucide de traço 1.8–2, size-4, cor neutra; nunca em quadradinho colorido.
• Animação: data-sobe no título e nos KPIs, data-revela nos painéis; barras enchem da esquerda e as linhas da curva S se desenham uma vez. Tudo para com prefers-reduced-motion.

Adaptar à marca do cliente

• Troque --d-primary pela cor técnica da marca (azul, verde-escuro, grafite) e, se quiser, a lateral --canteiro-lateral por um tom escuro da mesma família. O laranja de alerta não muda.
• Marca laranja/amarela: troque o alerta por vermelho escuro (--d-accent e --canteiro-alerta) e use a trama só nesse tom, para não confundir com a cor da marca.
• Logo da construtora entra no lugar do capacete da lateral, numa cor só (branco).
• Marca vibrante, roxa, ou exigência de tema escuro no conteúdo: este design não é o certo.