COMPONENTES · 07 · RÉGUAS E DIVISORESA régua como sistema
Um hairline com tick de medição a cada 8px é o que faz este design parecer instrumento em vez de enfeite. Ela carrega o código real da seção, então também serve de sumário.
7.1 · RÉGUA COM CÓDIGO DE SEÇÃO01 · SOLUÇÕES02 · O CICLO DE INCORPORAÇÃO03 · CASES04 · A CELERE05 · ACOMPANHAMENTONo escuro a régua usa line-dark. Mesmo desenho, mesma cadência de 8px.
// a máscara em degradê apaga o último trecho de tick. É o que diferencia régua de borda: ela termina onde a medição termina, não onde o container termina.
7.2 · RÉGUA FINAComposições de custo unitário
251 composições clonadas do cenário de referência 1262, todas com preço congelado na data de 27/06/2025.
Insumos
330 insumos, 303 com preço de banco Celere e 27 com preço trazido pelo cliente.
// régua fina divide bloco dentro da mesma seção e não recebe código. A versão curta em teal marca fim de trecho de leitura, no lugar de um travessão.
7.3 · RÉGUA COM MARCO "VOCÊ ESTÁ AQUI"// este é o único laranja permitido em um divisor, e ele existe por um motivo: dizer onde a obra está hoje é a informação que muda decisão. Uma régua tem um marco, nunca três.
7.4 · RÉGUA VERTICAL E DIVISORES DE LISTACadeia de suprimentos por pacote
Cada um dos 40 pacotes de serviço percorre a mesma cadeia: lista, cotação, aprovação, pedido de compra, fabricação e logística de canteiro.
Hoje são 87 restrições removidas, 366 pendentes e 117 com prazo já vencido. O pior caso é o elevador, com 231 dias de atraso.
- 001.001.001 Infraestrutura R$ 2.397.541,54
- 001.001.004 Estrutura de concreto R$ 4.812.330,18
- 001.001.006 Alvenaria e vedações R$ 2.104.887,40
- 001.001.008 Instalações elétricas R$ 1.986.412,55
- S1 01 a 12/04 OK
- S2 13 a 19/04 OK
- S3 20 a 26/04 JUSTIFICAR
- S4 27 a 30/04 VERIFICAR
// recuo lateral quando a lista tem ícone alinhado, borda cheia quando a lista é densa.
7.5 · DIVISOR COM RÓTULO CENTRALIZADOProgramação da semana S3, de 20 a 26 de abril.
Fechamento do mês, com EOMONTH travando o último dia útil.
A partir daqui só existe linha de base, nada medido.
// a versão com tick usa o mesmo pattern da régua, em duas metades espelhadas. Serve para separar período no tempo, e é o único divisor que aceita rótulo no meio.
7.6 · LINHA DO CICLO DE INCORPORAÇÃO// sete produtos reais, do terreno à entrega. O ponto laranja marca a fase onde a obra está agora.
Uma solução para cada fase da incorporação
F1Budget ParamétricoCOMPRA DO TERRENOF2Budget ExpressESTUDO PRELIMINARF3Levantamento QuantitativoPROJETO LEGALF4Budget AnalyticsPROJETO EXECUTIVOF5Planejamento de ObrasVOCÊ ESTÁ AQUI · ABR 2026F6Acompanhamento de CustosEXECUÇÃOF7Acompanhamento de PrazosEXECUÇÃO E ENTREGA
// o line-draw roda uma vez, quando a linha entra na viewport, em 800ms com ease-out. Os pontos aparecem em stagger de 90ms, na ordem construtiva. Em prefers-reduced-motion a linha já nasce inteira.
// F6 e F7 usam teal-deep porque são a fase de execução no mapa de fases. F1 a F5 usam teal. O laranja aparece só no marco do agora.
// abaixo de 760px a linha vira vertical sem JavaScript, por media query, e cada item mantém 44px de altura mínima para ser tocável.