Guia do design system

A Celere vende previsibilidade numérica em um setor que opera no achismo. O design system traduz isso visualmente: tudo no site parece medido, calibrado e rastreável, como um orçamento bem feito.

Três pilares:

1. Precisão como estética. Hairlines de medição, grid técnico visível em momentos-chave, números sempre em mono tabular. O site parece instrumentado, não decorado.
2. A linha do ciclo. O maior ativo narrativo da Celere é cobrir o ciclo completo de incorporação (terreno → entrega) com 7 soluções. Essa linha-cronograma é o elemento-assinatura: aparece no hero, organiza o hub de soluções e serve de navegação entre produtos.
3. Laranja é onde você age. O laranja da marca (#F79633) é usado EXCLUSIVAMENTE em ponto de ação ou decisão: CTA primário, o marco "agora", e desvio adverso, ou seja o que exige reação. Nunca decorativo. Se tudo é laranja, nada é urgente.

Regra de sinal, decidida em 07/08/2026. Folga e desvio favorável são teal, nunca laranja: folga não pede ação. Desvio adverso é laranja. Vermelho #C4442A é severidade crítica e erro de sistema: o que já quebrou contrato ou prazo, e a falha técnica. Nunca estouro de custo, porque estouro é diagnóstico e ainda dá para agir, logo é laranja. A emenda existe porque aplicar "vermelho só para erro de sistema" ao pé da letra fundiria o degrau crítico no degrau de atenção e apagaria um nível de severidade. E o sinal nunca depende só de matiz: a palavra "acima" ou "abaixo", ou o sinal do número, acompanha sempre, o que também resolve daltonismo.

O que este DS mata do site antigo: 10 cinzas → 1 escala; 9 border-radius → 3; 3 verdes → 0 (WhatsApp usa token próprio); 82 !important → 0; roxo #705989 → aposentado (acompanhamentos usam teal-deep); px fixos → escala fluida em rem.

Tokens primitivos

Regras de aplicação

• Texto de corpo nunca mais claro que --celere-ink-3. Razões reais, calculadas pela fórmula WCAG 2.1 e conferidas contra os dois fundos:

• Chip semântico precisa do token de texto, não do token de cor. Medido: orange-deep sobre orange-ghost dá 2,77:1 e danger sobre danger-ghost dá 4,28:1, os dois reprovam. Com os tokens de texto passam: --celere-orange-text sobre orange-ghost dá 4,58:1, e --celere-danger-text (#B03A22) sobre danger-ghost dá 5,18:1. Sucesso e info já passavam, com 4,72:1 e 8,70:1.

• O tema escuro tinha a mesma falha do mist. --celere-ink-3-on-dark media 4,30:1 sobre --celere-paper-dark e reprovava na superfície elevada, apesar de passar sobre ink puro. Subiu para #758E93, que dá 4,71:1 sobre paper-dark, 5,06:1 sobre ink e 5,34:1 sobre sunken.

• Laranja em texto tem token próprio. Medição: --celere-orange-deep dá 3,00:1 sobre paper e 2,76:1 sobre mist, então serve só como texto grande a partir de 24px, e sobre mist não serve nem aí. Todo texto laranja abaixo de 24px usa --celere-orange-text (#A65A00), que dá 4,96:1 sobre paper e 4,55:1 sobre mist. Laranja como fundo continua livre: #1A1205 sobre --celere-orange dá 8,27:1.

• Sobre fundo mist, caption sobe para --celere-ink-2. O ink-3 só passa AA sobre paper. Como mist é o fundo de seção alternada e de card, essa é a armadilha mais fácil de cair no sistema.

• O cinza #727376 que o site antigo usava em texto e reprovava AA é, medido no arquivo oficial, o próprio cinza do wordmark. Ele existe como token --celere-brand-grey e é exclusivo da marca, nunca de texto.

• Teal sobre branco em texto <18px: usar --celere-teal-deep (o teal puro dá 2.9:1, então serve só para elemento gráfico grande, ícone e headline ≥24px bold).

• Fundos dark (--celere-ink): texto em #F2F7F7, secundário #9FB6BA, hairlines --celere-line-dark.

• Semânticos: sucesso herda teal; erro #C4442A; aviso usa orange-deep. WhatsApp: #25D366 (token isolado --ws-green, único verde permitido).

Mapa de fases do ciclo (herança do site antigo, racionalizada)

• Orçamento (Paramétrico, Express, Levantamento, Analytics): teal #00AFAF
• Planejamento: laranja usado APENAS no marco do cronograma, não na identidade da página, que usa teal como todas
• Acompanhamento (Custos, Prazos): teal-deep #007878
• O roxo #705989 do site antigo foi aposentado (cor órfã, sem papel).

Regra de ouro: número é dado, dado é mono. Qualquer quantidade (R$ 30 bi, 737 projetos, 30.539 m²) renderiza em Spline Sans Mono. É a assinatura tipográfica do site.

Escala (fluida, mobile-first)

Headlines em sentence case. O site antigo gritava tudo em caixa alta; caixa alta agora é só do eyebrow.

• Unidade base 4px. Escala: 4/8/12/16/24/32/48/64/96/128/160.
• Seções: padding-block: clamp(4rem, 10vw, 8rem). Respiro é feature, não desperdício.
• Container: max-width: 1240px, gutter clamp(1.25rem, 5vw, 4rem) (o site antigo espremia tudo em 900px).
• Grid: 12 colunas desktop / 4 mobile, gap 24px. Conteúdo de leitura limitado a 65ch.
• Raio, só 3 valores: --radius-s: 10px (chips, inputs), --radius-m: 18px (cards), --radius-full: 999px (pills/botões). Imagens de card usam --radius-m.
• Sombras, só 2: --shadow-s: 0 1px 2px rgb(14 27 30 / 0.06), 0 4px 12px rgb(14 27 30 / 0.06) e --shadow-m: 0 2px 4px rgb(14 27 30 / 0.08), 0 16px 40px rgb(14 27 30 / 0.12). Elevação por sombra + hairline, nunca sombra pesada.

A régua (elemento-assinatura)

Divisor de seção proprietário: hairline horizontal com ticks de medição a cada 8px (CSS repeating-linear-gradient) e o código da seção em mono (01 · SOLUÇÕES). Encode a ordem real do conteúdo; usado com moderação (1 por seção).

O separador do código é ·, nunca travessão, porque travessão é proibido em texto visível pelo axioma da casa. Vale também no código de fase: F1 · VIABILIDADE. Em mídia grande o passo do tick muda para o ritmo sobreviver à redução: 8px em tela, 16px em lâmina de 1920px, 24px em peça social de 1080px.

Filosofia: o site se comporta como instrumento de precisão: responde, não performa. Framer-style: coreografado, curto, físico.

Vocabulário permitido (e nada além):

1. Rise-in: opacity 0→1 + translateY 14px→0, --dur-2, stagger 70ms entre irmãos. Uma vez por elemento (viewport-once).
2. Count-up: números de stats sobem do 0 no primeiro viewport-enter, 1.4s ease-out, em mono tabular (sem layout shift).
3. Line-draw: a linha do ciclo e as réguas se desenham via stroke-dashoffset / scaleX on-scroll.
4. Hover de card: shadow-s→m + hairline vira teal + zoom interno da imagem (scale ≤1.05 dentro de overflow-hidden). NUNCA transladar/escalar o elemento que recebe o hover, porque o card sairia de baixo do cursor e causaria flickering.
5. CTA magnético (desktop): deslocamento máx 6px em direção ao cursor; seta desliza 4px no hover.
6. Navbar: fundo ganha blur + hairline ao rolar 24px.

Proibições: parallax profundo, spin/flash/shine, AOS genérico em tudo, autoplay carousels, animação em loop infinito fora do marquee de logos (que pausa em hover e em prefers-reduced-motion).

prefers-reduced-motion: reduce → tudo vira fade simples de 150ms, count-ups renderizam o valor final, marquee congela.

Botões

• Primário (decisão): pill laranja, texto ink #1A1205 600, seta →. Hover: orange-deep + magnetismo. UM por viewport-fold.
• Secundário: pill ghost com hairline --celere-line, texto ink. Hover: fundo mist.
• Terciário/link: texto + seta, underline animado da esquerda.
• Altura 48px (44px mínimo touch), padding-inline 28px, --text-body 500.

Navbar

Sticky, paper translúcido + blur ao rolar. Logo à esquerda, links centro, CTA "Agendar demo" à direita. Mobile: sheet full-screen com stagger nos links (rise-in 40ms), fecha com scrim. Item ativo: dot teal 4px.

Section header

Eyebrow (mono/archivo-expanded uppercase teal-deep) → H2 sentence case → lead opcional em --celere-ink-2, max 65ch. Régua acima com código da seção.

Stat

Valor em Spline Sans Mono --text-stat ink + prefixo "+" teal + unidade small caps --celere-ink-3. Count-up. Fonte de dados única (ver §8).

Card de solução

Fundo paper, hairline, radius-m. Código de fase em mono (ex. F1 · VIABILIDADE), nome, one-liner, seta terciária. Hover: shadow-m, hairline vira teal.

Card de projeto (portfólio)

Imagem radius-m com zoom interno sutil (scale 1→1.04 no hover, --dur-3), overlay gradient ink no rodapé com nome + construtora; dados (m², unidades, local) em mono no corpo. Lightbox para galeria.

Depoimento

Player de vídeo com fachada (thumb + play teal), nome 600 + empresa --celere-ink-3. Nunca autoplay.

Formulários

Inputs 52px, radius-s, hairline; foco: ring teal 2px + label flutua. Labels sempre visíveis (nunca placeholder-only). Validação inline com mensagem objetiva. Máscara e higienização de telefone/nome/email conforme padrão Meteora (E.164 no backend).

Footer

Ink, 4 colunas → acordeão mobile. Réguas como divisores. Newsletter inline. Endereço/telefones reais.

• Sentence case em tudo (headlines, botões, navegação).
• Números concretos > adjetivos ("737 projetos orçados" > "vasta experiência").
• Dores em segunda pessoa, solução em primeira do plural, sem gerundismo.
• CTAs dizem o que acontece: "Agendar demonstração", "Baixar planilha", "Ver o case". Nunca "Saiba mais" nem "Clique aqui".
• Anglicismos fora ("values" → valores). Termos técnicos do setor (BIM 5D, EAP, baseline, curva físico-financeira) são bem-vindos, porque o público é engenheiro.

O site antigo tinha 4 versões de cada número. O novo renderiza TUDO de site/data/stats.ts. Valores canônicos (os mais recentes publicados na home atual, 2026):

Alterou o número? Altera no stats.ts e o site inteiro acompanha.

Obra piloto · Times Square, LB in (decidido em 07/08/2026)

O orçamento e o cronograma divergem, e a divergência é real. O sistema adota a fonte do orçamento e declara isso em todo artefato:

A leitura alternativa fica registrada, não apagada: pelo cronograma o custo é R$ 22.264.089,96, uma diferença de R$ 1.675.546,12, ou 7,0% da base do orçamento e 7,53% da base do cronograma, e o avanço ponderado por duração é 52%. Todo card e toda tela declaram qual fonte usam.

⚠️ Dois valores para o cronograma, com R$ 1,11 de diferença. O CLAUDE.md do workspace registra R$ 22.264.088,85 e a análise da planilha registra R$ 22.264.089,96. O valor de divergência publicado, R$ 1.675.546,12, só fecha com o segundo, então o sistema adota R$ 22.264.089,96. Conferir a origem com o Bernardo, junto da explicação de escopo dos 7%, que segue pendente com ele e o Silvio.

• Contraste AA em todo texto (tokens já garantem); AAA no corpo sobre paper.
• 1 <h1> por página, hierarquia sem saltos.
• Foco visível: ring teal 2px offset 2px, sempre.
• Touch targets ≥44px. Alt real em toda imagem de conteúdo; alt="" só decorativa.
• prefers-reduced-motion integral. Skip-link. Landmarks semânticos.

Os arquivos oficiais vivem em assets/brand/. O wordmark é arte, não texto: a marca se aplica pelo arquivo, nunca digitando o nome com uma fonte.

O símbolo é uma roseta de 8 pétalas em teal com o ponto laranja no centro, o que dá base visual à tese do sistema: a decisão fica no centro.

Pendências de marca:

• Não existe vetor de origem, só PNG. O simbolo-celere.svg é reconstrução fiel para tela (erro máximo de 0,057 unidade de viewBox), mas corte, bordado, fachada e placa exigem o vetor original com o Raphael.
• Em 16px o vão entre pétalas vale 0,54px e a roseta fecha num anel. É preciso aprovar uma variante simplificada só para favicon.
• Quando usar celere e quando usar celere digital não está definido em nenhum doc. Pendente com Raphael e Vini.
• A fonte encontrada na pasta de marca é Neo Sans Intel, corte proprietário da Intel. O DS não a adota, e por isso a marca se aplica pelo arquivo.