Artigos
Guias práticos sobre CSS, cor e design para desenvolvedores e designers.
Como Construir uma Paleta de Cores de Marca Consistente do Zero
Guia passo a passo para escolher sua cor primária de marca, gerar harmonias, verificar contraste WCAG e exportar variáveis CSS.
RAL vs Pantone vs HEX: qual sistema de cor usar e quando
Uma comparação completa e honesta dos sistemas de cor RAL, Pantone e HEX. Fundamentos técnicos, casos de uso e como escolher o certo para o seu projeto.
Guia completo de sombras CSS: box-shadow, drop-shadow e text-shadow explicados
Domine as três técnicas de sombra CSS. Diferenças, parâmetros, padrões reais e dicas de performance com exemplos ao vivo.
CSS Glassmorphism em 2025: a forma correta de implementar
Como implementar glassmorphism em 2025: backdrop-filter, contraste WCAG, performance mobile, fallback progressivo. O guia atualizado com as melhores práticas.
px, rem, em, vh: Quando usar cada unidade CSS
Guia prático de unidades CSS: quando usar px, rem, em, vh e vw. Com explicação de acessibilidade e tabela de conversão rápida.
Como extrair uma paleta de cores de qualquer imagem (e usá-la no seu design)
Conta-gotas vs. extração automática, cores dominantes vs. representativas e um workflow prático para transformar fotos e mood boards num sistema de design utilizável.
SVG vs PNG vs WebP: o guia definitivo para web designers em 2025
A comparação honesta de SVG, PNG e WebP para cada caso de uso: logos, ícones, fotografia, ilustrações, favicons e email. Inclui quando SVG vence apesar do maior tamanho de arquivo e quando WebP torna o PNG obsoleto.
CSS Gradients: o guia completo de linear a conic
Domine os três tipos de gradiente CSS — linear, radial e conic — com color stops avançados, ângulos, hints e padrões reais como fundos listrados, texto gradiente e mesh gradients.
HEX para RGB: O guia completo de conversão
Aprenda a converter códigos de cor HEX em valores RGB manualmente e com ferramentas. Entenda a matemática, os casos de uso práticos e quando usar cada formato no CSS.
Gerador de Paletas de Cores: Como criar esquemas de cores harmoniosos
Descubra como gerar paletas de cores profissionais usando a teoria das cores.
PX para REM: O guia do desenvolvedor para tipografia escalável
Domine a conversão de unidades CSS de px para rem. Aprenda por que as unidades rem melhoram a acessibilidade.
Contraste de Cores: Diretrizes WCAG para design acessível
Aprenda a verificar e corrigir taxas de contraste de cores para conformidade WCAG 2.1 AA/AAA.
Gerador de Gradientes CSS: Guia completo de gradientes lineares e radiais
Domine os gradientes CSS: lineares, radiais e cônicos. Aprenda sintaxe, paradas de cor, ângulos e técnicas criativas.
HEX para RAL: Convertendo cores digitais para padrões industriais
Aprenda a converter cores HEX em códigos RAL para impressão, pintura e fabricação.
Gerador de Favicon: Guia completo para ícones de navegador
Crie favicons perfeitos para todos os navegadores e dispositivos. Aprenda os tamanhos necessários, formatos e tags HTML.
Tints e Shades: Construindo escalas de cores para sistemas de design
Aprenda a gerar tints e shades de uma cor base para construir escalas de cores para sistemas de design.
Calculadora de Proporção: Entendendo as proporções largura-altura
Domine as proporções de aspecto para vídeo, imagens e design responsivo.
Guia de Combinação de Fontes: Como combinar tipografias efetivamente
Aprenda os princípios de combinação de fontes: contraste, hierarquia e legibilidade.
CSS Box Shadow: Guia completo com exemplos
Domine CSS box-shadow: sintaxe, sombras múltiplas, sombras internas e efeitos criativos.
CSS Border Radius: Formas, blobs e cantos criativos
Explore CSS border-radius de simples cantos arredondados até formas blob complexas.
Glassmorphism CSS: Como criar UI com efeito vidro
Aprenda a implementar glassmorphism em CSS: backdrop-filter, blur, transparência e truques de borda.
CSS Text Shadow: Efeitos, neon e truques tipográficos
Domine CSS text-shadow: sintaxe, sombras múltiplas, brilho neon, efeitos de relevo.
Neumorphism CSS: Técnica de design Soft UI explicada
Entenda e implemente neumorphism em CSS usando double box-shadows.
SVG para PNG: Quando e como converter vetorial para raster
Aprenda quando usar SVG vs PNG, como converter entre eles e as implicações para qualidade e desempenho.
Imagem para Base64: Codificando imagens para CSS e HTML
Entenda a codificação Base64 para imagens: como funciona, quando usar em CSS data URIs e HTML.
Lorem Ipsum: História e uso no design web moderno
Explore as origens do Lorem Ipsum, por que designers o usam e alternativas para prototipagem realista.
Codificação Base64: O que é e quando usar
Mergulho na codificação Base64: o algoritmo, conjunto de caracteres, preenchimento, casos de uso.
JSON Formatter: Validar, formatar e entender JSON
Aprenda a sintaxe JSON, erros de validação comuns, melhores práticas de formatação e como usar JSON em APIs.
Unix Timestamp: Entendendo e convertendo o tempo Epoch
Entenda timestamps Unix, tempo Epoch e como converter entre timestamp e datas legíveis.
Conversor de Unidades: Comprimento, peso, temperatura e mais
Domine conversões de unidades para uso cotidiano e científico: métrico vs imperial, fórmulas de temperatura.
CSS Filter: Blur, brilho e efeitos de imagem explicados
Domine as funções CSS filter: blur, brightness, contrast, grayscale, hue-rotate, saturate e mais.
Daltonismo no Design UI: Escolhas de cores acessíveis
Design para daltonismo: entenda deuteranopia, protanopia, tritanopia e como testar sua UI.
A psicologia das cores no design de UI: o que a pesquisa realmente diz
A maioria dos artigos sobre psicologia das cores repete as mesmas generalizações. Este cita estudos reais — vermelho e urgência, azul e confiança, verde e ação — com aplicações práticas para UI.