Você já viu esse estilo.
Agora descubra o nome.
Reconheça a linguagem visual, entenda suas características e encontre as palavras para criar com ela.
Estilos visuais24
Efeito de vidro
Superfícies translúcidas deixam o fundo aparecer como se estivessem atrás de um vidro fosco.
backdrop-filter: blur()Neobrutalismo
Blocos de cor e contornos enfáticos produzem uma interface gráfica com poucas ambiguidades visuais.
border + box-shadowMinimalismo
Reduz elementos ao que contribui para o conteúdo e para a tarefa.
space + hierarchyDesign plano
Usa formas simples e cores chapadas com pouca ou nenhuma simulação de profundidade.
solid fillsNeumorfismo
Faz os controles parecerem moldados na própria superfície por meio de sombras suaves.
box-shadow: insetEskeuomorfismo
Traz para a interface características reconhecíveis de objetos físicos.
material metaphorVolume de argila
Explora volumes arredondados e macios que lembram peças modeladas.
border-radius + shadowsBrutalismo da web
Assume a estrutura e a materialidade da página, frequentemente com aparência crua e direta.
semantic HTMLEstilo suíço
Adapta para a interface o uso de grade, alinhamento e hierarquia tipográfica sistemática.
grid + typographyGeometria Bauhaus
Usa geometria e relações entre forma, função e cor inspiradas na escola Bauhaus.
geometric compositionDesign editorial
Organiza texto e imagem com a cadência de uma publicação, dando destaque à leitura.
type scale + columnsInterface escura
Organiza a hierarquia sobre fundos escuros com níveis de superfície e contraste próprios.
color-scheme: darkMonocromático
Constrói a composição com variações de uma mesma cor ou com uma escala neutra.
single-hue scaleDuas cores
Limita a direção visual a duas cores dominantes e suas relações de contraste.
two-color paletteGradientes
Usa transições de cor como parte importante da identidade e da profundidade visual.
linear-gradient()Terminal retrô
Traz convenções visuais de terminais de texto para uma interface gráfica.
monospace + contrastPixel art e 8-bit
Usa formas em grade e bordas discretas que lembram gráficos de baixa resolução.
image-rendering: pixelatedEstética Y2K
Reinterpreta imagens de tecnologia e futuro associadas à virada dos anos 2000.
metallic gradientsFrutiger Aero
Combina motivos naturais e superfícies brilhantes em uma visão otimista de tecnologia.
gloss + gradientsMaterial Design
Um sistema do Google que conecta componentes, movimento, cor e hierarquia de superfícies.
Material componentsFluent Design
O sistema da Microsoft para criar experiências conectadas por componentes e princípios compartilhados.
Fluent UILiquid Glass
Uma linguagem de materiais da Apple em que controles e navegação usam efeitos de vidro dinâmicos.
Apple materialsAlto contraste
Prioriza diferenças perceptíveis e controles identificáveis, com suporte a preferências do sistema.
forced-colorsInterface suave
Uma direção visual de cantos suaves, cores contidas e transições discretas entre superfícies.
low-chroma surfaces