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).

Trocada na v1, em 28/08/2026, a pedido da revisão da Celere. As três famílias da v0 (Archivo, Instrument Sans, Spline Sans Mono) saíram inteiras.

Por que 700 e não 800. A carta de títulos do Raphael se contradiz: o cabeçalho dela diz "Plus Jakarta Sans Extrabold", que é 800, e a nota logo abaixo diz "peso de trabalho entre 500 e 700, nunca 400". Levado ao Vinícius em 28/08/2026, a decisão foi fechar em 700: 800 fica pesado demais no corpo grande. O h2 ficou em 620 de propósito, e não subiu junto: com o h1 em 650 os dois quase não se distinguiam, e o degrau de 80 é o que faz o título de seção recuar de verdade. O .marca, que é o wordmark em texto, continua em 650, porque é outro papel.

Regra de ouro: número é dado, e todo dado pede font-variant-numeric: tabular-nums. Qualquer quantidade (R$ 30 bi, 737 projetos, 30.539 m²) renderiza no papel de dado. É a assinatura tipográfica do site.

O token --font-mono não é uma fonte monoespaçada

O nome ficou por compatibilidade: hub-cliente, site-celere e ds-celere referenciam --font-mono em dezenas de arquivos, e renomear quebraria os três de uma vez. Neste sistema "mono" nomeia o papel de DADO, não a natureza da face.

Isso muda uma coisa na prática, e ela é obrigatória: o alinhamento de coluna, que a Spline Sans Mono dava de graça por ser monoespaçada, agora depende de tabular-nums estar declarado. Sem ele o dígito volta a ter largura variável e a vírgula dança de linha em linha. Por isso a v1 acrescentou a declaração em 373 pontos do sistema.

O papel de dado também desliga ligadura, com font-variant-ligatures: none. A Manrope liga dois hifens num travessão, e essa ligadura vem ativa por padrão. Numa fonte de código isso nunca acontecia; numa face de texto acontece, e é este papel que carrega nome de token CSS, código de EAP e identificador, onde a sequência de caracteres tem que sair literal. Sem a regra, --font-mono aparece na tela com um traço só. Medido: em Manrope 20px, --x e –x dão exatamente a mesma largura, 21,3px; com a regra, 27px contra 21,3px.

A cauda da pilha de --font-mono continua monoespaçada de propósito (ui-monospace, SF Mono, Menlo, Consolas, monospace). Quando o webfont não carrega, e no e-mail ele nunca carrega, o fallback é uma monoespaçada e a coluna sobrevive sem depender do tabular-nums que o cliente de e-mail também ignora.

As três famílias, e o que cada uma custa

Plus Jakarta Sans e Manrope são SIL OFL, servidas pelo Google Fonts, sem custo e sem licença a renovar.

Neo Sans Intel é a fonte corporativa da Intel, desenhada sob encomenda em 2005, sem caminho de compra. A Celere decidiu usá-la assim mesmo em 27/08/2026, com o risco assumido por ela, depois de ver por escrito as três saídas com custo e exposição. Ela é hospedada em assets/fonts/, subsetada de 289 para 225 glifos (20,2 KB), carrega um peso só e serve um papel só. A procedência está em assets/fonts/LEIA-ME.md.

O eixo de largura saiu

A v0 separava título e eyebrow pelo eixo de largura da Archivo: wdth 92 no título, wdth 125 no rótulo. Nenhuma das três famílias da v1 tem eixo de largura, então os tokens --wdth-condensed e --wdth-expanded foram removidos junto com as 158 declarações de font-variation-settings que os usavam. Declaração inerte não quebra nada, e é justamente por isso que não pode ficar: ela engana quem lê o código.

O contraste mudou de lugar. Antes era eixo dentro da mesma família; agora título e eyebrow são famílias diferentes, o que é uma separação mais forte e que nenhum navegador pode ignorar.

Medido no navegador, mesmo texto e mesmo corpo: o título ficou 11,5% mais largo, o eyebrow 26,7% mais estreito com a caixa alta 8,3% mais alta, o corpo ficou igual (0,0%) e o dado ficou 17% a 20% mais estreito. O tracking do eyebrow subiu de 0.14em para 0.16em para devolver o ar que a face mais estreita pede; nada mais precisou de recalibragem, porque a medição mostrou que apertar o título não muda a contagem de linha.

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 (Neo Sans Intel 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 no papel de dado, --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.

Reflow · dado imprevisível nunca empurra a página

Regra do sistema, escrita depois da varredura de 27/08 em 31 previews e aplicada em 28/08.

white-space: nowrap vale para rótulo curto e conhecido: código de fase (F4), unidade (m²), sigla, sinal colado no número. Nunca para dado de tamanho imprevisível: nome de arquivo, nome de obra, razão social, descrição de serviço. Esse conteúdo vem do banco e não tem teto de largura.

O erro não é o nowrap sozinho: é o nowrap sem caminho para encolher. Dado imprevisível tem que fazer uma das duas coisas, e nunca a terceira:

1. quebrar, com white-space: normal e overflow-wrap: anywhere quando couber mais de uma linha;
2. truncar, com min-width: 0 no pai flex mais overflow: hidden e text-overflow: ellipsis, quando a altura for fixa;
3. empurrar o layout, que é o que acontece sozinho quando ninguém decide entre 1 e 2.

Três armadilhas que só apareceram medindo, e que valem para qualquer componente novo:

• Grade sem coluna definida. display: grid sem grid-template-columns dá coluna implícita auto, que vale max-content. O filho pode ter min-width: 0 que não adianta, porque não existe contra o que reduzir. Use minmax(0, 1fr).
• minmax(Npx, 1fr) com N maior que o contêiner. auto-fill não encolhe abaixo do mínimo declarado, então a coluna fica com N e estoura. Use minmax(min(Npx, 100%), 1fr).
• Variante que herda o nowrap da base. Um pill curto pode ser nowrap; a variante de linha do mesmo componente, que carrega texto do banco, precisa revogar.

Tabela de dado vive dentro de overflow-x: auto. A coluna numérica é nowrap por contrato, para o sinal não se separar do número, então o mínimo da tabela não encolhe. O rolador faz o estouro ser da tabela e não da página.

Prancheta de largura fixa também. E-mail de 600px e lâmina de 16:9 não deveriam caber num telefone: a pessoa rola para ver a peça inteira. O que não pode é isso virar rolagem da página.

Chrome de aplicação de mesa degrada, não espreme. Barra de topo com logo, seletor de obra, percentual e ações não cabe em 390px, e apertar os quatro deixa todos ilegíveis. O secundário sai por media query e o essencial fica inteiro.

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.

Onde a marca pode pousar (manual de 2015, portado na v1)

A revisão da v0 pediu para respeitar os usos do manual de marca. As quatro regras estão aplicadas e renderizadas na seção 07.5 da amostra Fundamentos · Marca. O manual é de impressão e fala em %K e %C; a conversão para tela é 255 × (1 − K/100).

Entre 25% e 50% K nenhuma das duas coloridas serve. É a faixa que o manual deixa vazia, e é exatamente onde caem as duas cores cheias da casa: --celere-orange equivale a 32% K e --celere-teal a 38% K. A saída nas duas continua a cartela branca, que a 07.5 já prescrevia por contraste.

As duas réguas concordam nas doze superfícies do sistema. Cada superfície foi convertida ao %K equivalente pela luminância relativa da WCAG e depois medida por contraste do wordmark contra ela. O manual de impressão de 2015 e o piso de 3:1 de objeto gráfico dão o mesmo veredito em todas: as claras pedem a positiva (3,59:1 a 4,74:1), as escuras pedem a negativa (5,00:1 a 17,59:1) e as duas da faixa morta reprovam as duas versões. O critério é o wordmark, não a pétala teal do símbolo, que fica em 2,61:1 sobre paper e é aceito assim desde a v0 porque o símbolo é marca de várias cores.

Pendências de marca:

• Não existe versão monocromática, nem preta nem branca, e a regra 3 do manual depende dela. A amostra demonstra o efeito por filtro CSS sobre o arquivo colorido, o que prova que a regra funciona mas não substitui o arquivo oficial. Pendente com o Raphael.
• ⚠️ O manual se contradiz na leitura da regra 3. As páginas 1 e 2 mandam usar a monocromática sobre fundo colorido; a página 3 mostra a monocromática preta reprovada sobre as mesmas seis cores, inclusive sobre amarelo, onde o preto teria contraste de sobra. Até a resposta do Raphael o sistema segue o texto, que é explícito, e não os ícones.
• 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 Neo Sans Intel, encontrada na pasta de marca, passou a ser adotada na v1, só no eyebrow e com uso autorizado pela Celere em 27/08/2026. Isso não muda a regra da marca: o wordmark continua sendo arte e se aplica pelo arquivo, nunca digitando o nome.