FUNDAMENTOS · 04 · ELEVAÇÃO E RAIOO site antigo tinha nove valores de raio. Este tem três, cada um amarrado a um tipo de peça. E elevação aqui é sombra somada a hairline: a linha desenha a borda, a sombra apenas descola do fundo.
04.1 · RAIOA regra é de tipo, não de gosto: chip e input em 10px, card e imagem em 18px, botão e pill em 999px. Não existe quarto valor.
Peça pequena de interface: chip de fase, tag de status, input, select, célula destacada de planilha.
Contrato, medição e compra sempre aderentes ao orçamento aprovado.
Container de conteúdo: card de solução, card de projeto, imagem de portfólio, modal, bloco de depoimento.
Tudo que é clicável e tem forma de comprimido: botão primário, botão ghost, pill de filtro, dot de navegação.
Proibido
Cada peça com um arredondamento próprio faz a página parecer montada por três pessoas diferentes. Estes cinco valores não existem no sistema.
04.2 · ELEVAÇÃOSombra sozinha deixa a borda indefinida, e o card fica flutuando sem contorno. Hairline sozinha deixa tudo no mesmo plano. O sistema exige os dois juntos, sempre, nos dois níveis de elevação.
Quantidade extraída do projeto, item por item.
12.075,30 m² de alvenariaRepouso do card. A linha define o limite, a sombra apenas descola do fundo. É o estado padrão
de card de solução, de projeto e de dado.
--shadow-s --celere-line
Quantidade extraída do projeto, item por item.
12.075,30 m² de alvenariaEstado ativo: hover de card, dropdown aberto, modal e planilha em foco. É o teto de elevação
do sistema, e não existe nível acima.
--shadow-m
Dois deles ficam pela metade, e o terceiro passa longe do outro lado.
Quantidade extraída do projeto, item por item.
12.075,30 m² de alvenariaFica no plano do fundo. Serve para linha de tabela e item de lista, não para peça que precisa parecer clicável ou destacada.
Quantidade extraída do projeto, item por item.
12.075,30 m² de alvenariaA borda superior desaparece contra o fundo claro e o card perde o contorno, justo onde o olho procura o limite.
Quantidade extraída do projeto, item por item.
12.075,30 m² de alvenariaPreto puro com 42% de opacidade e desfoque de 64px. Suja o fundo, cria um cinza que não está na paleta e transforma card de dado em cartão de promoção.
// --shadow-s: 0 1px 2px rgb(14 27 30 / 0.06), 0 4px 12px rgb(14 27 30 / 0.06)
// --shadow-m: 0 2px 4px rgb(14 27 30 / 0.08), 0 16px 40px rgb(14 27 30 / 0.12)
// as duas usam ink, não preto. Sombra com #000 esverdeia errado sobre paper.
04.3 · HOVER DE CARDPasse o cursor nos dois cards. No correto, a sombra vai de shadow-s para shadow-m, a hairline vira teal e a seta desliza 4px. No proibido, o card se desloca e escala: ele sai de baixo do cursor, o hover pisca e o clique falha.
Cronograma, curva S e caminho crítico amarrados ao orçamento aprovado.
Ver a solução → Correto · sombra e hairline mudam, geometria não F5 · PLANEJAMENTOCronograma, curva S e caminho crítico amarrados ao orçamento aprovado.
Ver a solução → Proibido · translada, escala e ganha sombra pesada// zoom interno de imagem é permitido, com scale de até 1.05 dentro de overflow hidden. O que nunca se move é o elemento que recebe o hover.
04.4 · ELEVAÇÃO NO ESCUROSobre ink a sombra não aparece: falta contraste para ela. A elevação passa a ser paper-dark somado a hairline em line-dark. Mesmos raios, mesma lógica de par, ferramenta diferente.
Avanço físico medido contra o baseline, semana a semana.
+4,7% de desvio no mêsCard sobre ink. A sombra continua declarada, e o que faz o trabalho visível é o par de
superfície e linha.
--celere-paper-dark --celere-line-dark
Avanço físico medido contra o baseline, semana a semana.
+4,7% de desvio no mêsCard na mesma cor do fundo, contando com sombra que ninguém vê. O bloco desaparece e o conteúdo fica sem moldura.