FUNDAMENTOS · 08 · GRAFISMOSRégua, blueprint, dot grid, hachura, dois degradês e o overlay ink. Nenhuma delas é ornamento: cada uma diz uma coisa sobre o dado que está por perto, e todas nascem de um token em celere-tokens.css.
08.1 · A RÉGUAHairline com tick de medição a cada 8px, mais o código da seção em mono. É o divisor proprietário da Celere, e é o grafismo pelo qual o site vai ser reconhecido.
01 · SOLUÇÕES02 · CASES DE OBRA03 · O CICLOversão vertical
Para trilha lateral de etapas e marcação de coluna em tabela longa.
Quando usar: uma vez por seção, como divisor, sempre com o código da seção em mono à esquerda. O código encode a ordem real do conteúdo da página.
Nunca duas réguas na mesma seção, e nunca sem o código: a régua sem número vira listra decorativa.
08.2 · BLUEPRINTA prancha técnica virada em fundo. Malha de 24px, com a opção de subdividir em 8px quando o bloco precisa parecer mais detalhado.
A malha de 24px é a mesma que sustenta o grid de 12 colunas. Fundo e estrutura falam a mesma língua.
Quando usar: fundo de seção que fala de projeto, planta ou levantamento, e palco de peça técnica em página de produto.
Nunca atrás de parágrafo corrido. A malha compete com a linha de base do texto e cansa a leitura.
A malha fina entra em 45% de opacidade sobre a malha de 24px, e o passo de 8px é o mesmo tick da régua.
Quando usar: bloco pequeno que precisa de densidade, como palco de ícone, cabeçalho de ficha técnica e capa de caso.
Nunca em área maior que meia tela: em bloco grande a malha fina virá moiré.
08.3 · DOT GRIDPonto de 1px a cada 16px. É o fundo mais silencioso do sistema, e serve para dar textura sem sugerir prancha.
Mais leve que o blueprint, então aguenta card com sombra por cima sem disputar atenção com ele.
Quando usar: palco de espécime, fundo de card de depoimento, área de vazio em lista e moldura de peça em documentação.
Nunca junto com o blueprint no mesmo bloco. As duas malhas somadas criam um padrão que ninguém pediu.
08.4 · HACHURA A 45 GRAUSA hachura tem significado fixo no sistema: o valor ainda é estimativa. Área hachurada é verba paramétrica ou quantidade prevista. Área chapada é valor medido, com documento atrás.
Quando usar: barra de verba paramétrica, célula de valor estimado, área de segurança da marca e zona de padding em diagrama de espaçamento.
Nunca em valor já medido. A hachura é uma promessa de imprecisão, e usá-la em dado fechado mente para quem lê.
08.5 · DEGRADÊSInstrumento é teal e mora atrás de dado. Decisão é laranja e mora atrás de ação. Os dois descem para transparente, então nunca fecham a leitura do que está em cima.
Quando usar: topo de bloco de stats, cabeçalho de tabela de orçamento, fundo de mini gráfico e cartela de dado em destaque.
Nunca acima de 10% de opacidade no teal, e nunca invertido de baixo para cima: o peso do degradê tem que sair do topo do bloco.
Quando usar: faixa de CTA no fim da página, bloco de delta entre realizado e previsto, e alerta de estouro de verba.
Nunca em seção que não tem ação nem delta. Fora desses dois casos, o laranja deixa de significar decisão e o CTA perde a força.
08.6 · OVERLAY INKToda legenda em cima de foto senta sobre o overlay ink. É o que garante contraste AA em imagem que a Celere não controla.
Quando usar: rodapé de card de projeto, capa de case, thumb de depoimento e qualquer imagem que carregue nome e dado por cima.
Nunca texto direto na foto, sem overlay. E nunca overlay cobrindo mais de dois terços da altura, senão a imagem deixa de existir.
08.7 · LIMITES DE COMBINAÇÃOTextura é fundo. No momento em que ela disputa com o conteúdo, ela virou problema.
Blueprint e hachura no mesmo bloco. As duas malhas se cruzam e formam um terceiro padrão que não existe no sistema.
Uma textura por bloco. Se o bloco precisa de duas leituras, ele precisa virar dois blocos.
Malha em teal cheio, passo de 12px. Contraste de fundo alto engole o texto e transforma o bloco em papel milimetrado.
A linha de textura vive em --celere-line no claro e em --celere-line-dark no escuro. Teal e laranja não entram em malha.
Parágrafo corrido direto sobre a malha de blueprint, sem cartela branca por baixo. A linha de 24px briga com a linha de base do texto e o olho perde o fio.
Texto sobre textura sempre em cima de cartela em surface-raised, com hairline e radius-s.
Cartela em white com hairline por cima do dot grid. A textura fica no ambiente, e a leitura acontece na cartela.
É o padrão do sistema: fundo com textura, conteúdo em superfície elevada com o par de sombra e hairline.
08.8 · NO ESCUROA classe .dark troca a cor da linha por line-dark nos três padrões de malha. Nenhum grafismo precisa de arquivo próprio para o tema escuro.
01 · RÉGUA// --pattern-regua-dark
Blueprint em line-dark, com cartela em paper-dark por cima.
Dot grid em line-dark, o fundo mais silencioso do tema escuro.