FUNDAMENTOS · 06 · ÍCONESGrade de 24px, área viva de 20px, traço de 1.5px, emenda em esquadro. O ícone da Celere parece ter saído de uma prancha cotada, não de uma biblioteca de interface.
06.1 · GRADE DE CONSTRUÇÃOO exemplo abaixo é o ícone de curva S, desenhado sobre a malha real. Cada vértice cai em unidade cheia da grade, e nada encosta na borda de 24px.
Todo ícone nasce em viewBox="0 0 24 24". Vértice em unidade cheia ou meia unidade, nunca em valor solto de terceira casa.
Duas unidades de folga em cada lado. O ícone respira dentro do alvo de toque e nunca esbarra no texto ao lado.
stroke-width: 1.5 em todo desenho. Não existe versão bold nem versão fina: a hierarquia vem do tamanho e da cor, não da espessura.
stroke-linecap: square e stroke-linejoin: miter. Ponta arredondada amolece o desenho e briga com a régua da marca.
fill: none como regra. A única exceção é o quadrado de 1.2 unidade que marca o ponto de decisão, em laranja sólido.
stroke: currentColor. O ícone recebe a cor do texto que o acompanha, e por isso funciona em claro e em escuro sem variante.
06.2 · CONJUNTO DO DOMÍNIOOrçamento, obra, medição, cronograma e governança. Nada de metáfora genérica: quem olha o conjunto reconhece o vocabulário de quem orça e fiscaliza custo de construção.
06.3 · TAMANHO E PESO ÓPTICOO ícone é desenhado em 24px e usado em 16, 20, 24, 32 e 48. Com vector-effect: non-scaling-stroke o traço mantém 1.5px óptico em qualquer tamanho, então o conjunto não engorda quando cresce.
// abaixo de 16px o desenho perde detalhe e vira ruído. Nesse caso, troque o ícone por rótulo em texto.
06.4 · COR E APLICAÇÃOInk no neutro, teal no ativo, teal-deep no aprovado, laranja só no marco de decisão, danger no desvio. Cinco papéis, nenhum tom inventado.
Ponta arredondada com traço de 2.5, preenchimento colorido, traço de 0.75 e cinza abaixo de ink-3. Cada um desses quebra a leitura do conjunto como um sistema.
Ícone de 24px dentro de linha de 44px de altura, com rótulo sempre visível. Ícone sozinho só em botão com nome acessível declarado.
06.5 · NO ESCUROPorque o traço herda currentColor, o mesmo SVG serve claro e escuro. Não existe pasta de ícone para dark, e nenhum arquivo tem cor fixa dentro.