Token de DesignDesign Token
Um Design Token nomeia uma única escolha de design. Exemplos incluem uma cor, espaço, fonte ou velocidade de movimento.
Abrir guiaEstilos de design de UI explicados com exemplos
Veja como cada estilo se parece, quando ajuda e quando atrapalha.
VarianteVariant
Um Variant é uma versão aprovada de um componente para um tamanho, força ou configuração diferente.
Abrir guiaHierarquia VisualVisual Hierarchy
A Hierarquia Visual orienta o que as pessoas percebem primeiro, depois e por último através do tamanho, contraste, posição e espaço.
Abrir guiaContraste de CoresColor Contrast
Contraste de Cores é a diferença de luz medida entre o conteúdo e o fundo perto dele. Ele mostra se os textos e bordas principais são fáceis de ver.
Abrir guiaTipografiaTypography
Tipografia é a forma como os estilos de texto são escolhidos e organizados para tornar as palavras legíveis, ordenadas e de acordo com a marca.
Abrir guiaDigite EscalaType Scale
Uma Type Scale é um conjunto pequeno e planejado de tamanhos de texto e alturas de linha.
Abrir guiaPaleta de CoresColor Palette
Uma Paleta de Cores é um conjunto de cores planejado. Cada cor tem um papel, estado ou superfície clara.
Abrir guiaEscala de espaçamentoSpacing Scale
Uma Spacing Scale é um pequeno conjunto de tamanhos de espaços. Ela agrupa as coisas e mantém um ritmo visual estável.
Abrir guiaIconografiaIconography
Iconografia é um conjunto de símbolos compartilhados com aparência correspondente e significados claros para ações e ideias.
Abrir guiaModo EscuroDark Mode
O Modo Escuro altera superfícies, textos, bordas, mídias e estados para um ambiente escuro.
Abrir guiaDesign ResponsivoResponsive Design
O Design Responsivo permite que layout, conteúdo e controles mudem para se ajustarem ao espaço e dispositivo disponíveis.
Abrir guiaVéuScrim
Um scrim é uma camada escura e transparente atrás de uma janela sobreposta. Ele separa a janela e mostra que a página abaixo está bloqueada.
Abrir guiaEspaçamentoSpacing
Espaçamento é o espaço vazio colocado de propósito. Ele agrupa itens relacionados, separa ideias e dá ritmo à página.
Abrir guiaMargemMargin
Margem é o espaço fora da borda de um elemento. Ela mantém esse elemento afastado de itens de layout próximos.
Abrir guiaPreenchimentoPadding
Preenchimento é o espaço dentro da borda de um elemento, entre seu conteúdo e sua borda.
Abrir guiaEspaçoGap
Espaço é o espaço que um contêiner coloca entre seus filhos Flexbox ou Grid. A mesma regra se aplica a cada par.
Abrir guiaColuna CentralizadaCentered Column
Uma coluna centralizada tem uma largura máxima legível e um espaço que parece igual em ambos os lados.
Abrir guiaGrade BentoBento Grid
Um grid bento agrupa blocos de tamanhos diferentes em um único layout. Espaços maiores mostram qual conteúdo é mais importante.
Abrir guiaTruncamento de TextoText Truncation
O truncamento de texto corta o texto para economizar espaço. Uma reticência indica que uma ou mais linhas estão faltando.
Abrir guiaProporção de telaAspect Ratio
A proporção de tela mostra a largura de um elemento comparada com a sua altura.
Abrir guiaDesfoque de fundoBackdrop Blur
O desfoque de fundo suaviza o que está atrás de uma camada transparente. Ele não desfoca o conteúdo da própria camada.
Abrir guiaGlassmorphismGlassmorphism
Glassmorphism é um estilo visual com superfícies claras em camadas. Ele usa desfoque, bordas leves e uma pequena sensação de profundidade.
Abrir guiaVidro LíquidoLiquid Glass
Vidro Líquido é um estilo de material claro e em movimento. Ele usa dobras semelhantes a lentes, destaques e formas que parecem se juntar ou flexionar.
Abrir guiaEcomorfismoSkeuomorphism
O ecomorfismo copia objetos reais familiares para explicar um controle digital. Ele também pode copiar seus materiais.
Abrir guiaNeumorfismoNeumorphism
Neumorfismo é um estilo suave, de baixo contraste. Sombras claras e escuras fazem os controles parecerem levantados ou pressionados em uma superfície de cor única.
Abrir guiaNeobrutalismoNeobrutalism
Neobrutalismo é um estilo digital ousado e de alto contraste. Utiliza formas simples, bordas grossas, cores diretas e um layout mecânico claro.
Abrir guiaMinimalismoMinimalism
O minimalismo remove o que um design não precisa. Ainda mantém o produto claro, útil e distinto.
Abrir guiaDesign PlanoFlat Design
Design plano usa formas simples, cores sólidas e áreas planas claras, com pouca profundidade falsa.
Abrir guiaClaymorphismClaymorphism
Claymorphism é um estilo divertido com formas infladas e cantos arredondados. Sombras suaves e cores pastel fazem parecer argila.
Abrir guiaEstética Digital Y2KY2K Digital Aesthetic
Esta estética digital é um estilo retro-futuro da cultura digital do final dos anos 1990 e início dos anos 2000. Frequentemente usa cromo, pixels, gradientes brilhantes e detalhes de computador divertidos.
Abrir guiaFrutiger AeroFrutiger Aero
Frutiger Aero é um estilo esperançoso dos meados dos anos 2000. Ele mistura interfaces brilhantes com céus azuis, água, plantas verdes, bolhas e tecnologia com aparência amigável.
Abrir guiaBrutalismo WebWeb Brutalism
O brutalismo web é um estilo de web cru. Mostra a estrutura, padrões do navegador, tipografia simples e aspereza planejada em vez do polimento usual.
Abrir guiaWeb vernacularVernacular Web
A web vernacular copia os sites cotidianos que as comunidades criam. Difere de sistemas polidos feitos por grandes grupos.
Abrir guiaAquaAqua
Aqua é um estilo de interface brilhante ligado aos primeiros macOS. Ele usa controles que brilham, profundidade gelatinosa, listras finas e detalhes em azul vivo.
Abrir guiaWindows AeroWindows Aero
Windows Aero é um estilo de desktop do final dos anos 2000. Ele usa molduras de janelas transparentes, vidro embaçado, brilho suave e bordas em camadas.
Abrir guiaEstilo SuíçoSwiss Style
O Estilo Suíço usa grades claras e layouts irregulares, mas equilibrados. Também usa tipografia sem serifa, fotos e uma ordem visual rigorosa.
Abrir guiaDesign EditorialEditorial Design
O design editorial organiza uma história através do ritmo de leitura, tipo, imagens, legendas e padrões de página que se repetem.
Abrir guiaDesign de MaterialMaterial Design
Design de Material é um sistema para componentes e interações. Ele utiliza superfícies em camadas, movimento com propósito, layouts flexíveis e tokens de design compartilhados.
Abrir guiaGradienteGradient
Um gradient é uma mudança suave entre cores ou transparência. Ele pode seguir uma linha, círculo, ângulo ou malha.
Abrir guiaSombra & ElevaçãoShadow & Elevation
Uma sombra é um efeito visual. Elevação é a relação de profundidade que a sombra pode explicar entre as superfícies.
Abrir guiaBorder Radius & Squircle — Pacote de AprendizadoBorder Radius & Squircle — Learning Bundle
Este guia separa três ideias. São elas: border-radius padrão do CSS, formato de canto em rascunho: squircle, e outros formatos semelhantes a squircles ou máscaras de plataforma. O pacote não é um termo de design padrão.
Abrir guiaOpacidadeOpacity
A opacidade indica quão sólido um elemento e seus filhos parecem. Pode variar de transparente a sólido.
Abrir guiaDiretrizes de Interface Humana da AppleApple Human Interface Guidelines
As Diretrizes de Interface Humana da Apple explicam o design para os sistemas da Apple. Elas cobrem ações, visuais, controles, entrada, acessibilidade e diferenças entre os sistemas.
Abrir guiaEspaço de trabalho estilo NotionNotion-style Workspace
Um Workspace no estilo Notion usa um visual de documento bem calmo. Ele gosta de textos fáceis de ler, blocos de conteúdo, controles discretos e espaço aberto.
Abrir guiaSite de Marketing SaaSSaaS Marketing Site
Um Site de Marketing SaaS explica um problema e um serviço de software para um grupo de pessoas. Ele ajuda os visitantes a verem se serve para eles e a escolherem o próximo passo.
Abrir guiaSite Corporativo B2BB2B Corporate Site
Um Site Corporativo B2B ajuda grupos de empresas a verificar as habilidades, regras, confiança e adequação de uma empresa. Ele também apoia compras ou parcerias.
Abrir guiaE-commerce Direct-to-ConsumerDTC E-commerce
O comércio eletrônico DTC permite que uma marca venda diretamente aos consumidores. Ele cobre descoberta, escolhas de produtos, pagamento, entrega e suporte pós-venda.
Abrir guiaIlustração LúdicaPlayful Illustration
Ilustração Lúdica usa personagens, formas, cores e piadas visuais animadas. Pode adicionar calor, significado ou o caráter de uma marca.
Abrir guiaDesign OrgânicoOrganic Design
O Design Orgânico segue formas encontradas na natureza. Ele usa curvas irregulares, texturas táteis, cores naturais e layouts menos mecânicos.
Abrir guiaEstilo MemphisMemphis Style
Estilo Memphis é um visual ousado pós-moderno. Ele usa formas fortes, cores que se chocam, padrões, equilíbrio desigual e energia divertida.
Abrir guiaEstética do TerminalTerminal Aesthetic
A Estética Terminal toma emprestado das telas de linha de comando. Ela usa texto monoespaçado, hierarquia rígida, sinais de prompt, poucas cores e status claro.
Abrir guiaWabi-sabiWabi-sabi
Wabi-sabi é uma visão japonesa de beleza. Valoriza limites, mudanças, formas irregulares, idade e materiais honestos em vez de polimento perfeito.
Abrir guiaPropriedades Lógicas do CSSCSS Logical Properties
As propriedades lógicas do CSS descrevem os lados pelo fluxo de escrita, como bloco e linha. Elas substituem direções fixas como topo, direita, baixo e esquerda. Isso ajuda os layouts a seguirem a direção de escrita da língua.
Abrir guiaSubgradeSubgrid
Um subgrade é uma grade dentro de outra grade que compartilha os tamanhos de linha ou coluna do pai. Pode compartilhar em uma direção ou em ambas.
Abrir guiadimensionamento intrínsecoIntrinsic Sizing
O dimensionamento intrínseco permite que o conteúdo de um elemento ajude a decidir seu tamanho, em vez de usar apenas um tamanho fixo externo.
Abrir guiaconteúdo mínimomin-content
`min-content` é o menor tamanho que o conteúdo pode usar após quebrar em todos os pontos de quebra permitidos.
Abrir guiamax-contentmax-content
`max-content` é o tamanho que o conteúdo gostaria de ter se não quebrasse nos pontos normais de quebra.
Abrir guiaminmax()minmax()
`minmax()` é uma função do CSS Grid que dá a uma linha ou coluna tanto um tamanho mínimo quanto um máximo.
Abrir guiaclamp()clamp()
`clamp()` escolhe um valor CSS preferido, mas mantém entre um mínimo e um máximo.
Abrir guiaajuste de objetoobject-fit
`object-fit` controla como uma imagem, vídeo ou item similar se ajusta dentro de sua caixa.
Abrir guiaUnidades de viewportViewport Units
Unidades de viewport são comprimentos CSS baseados na área visível do navegador. Versões pequenas, grandes e dinâmicas lidam com barras do navegador que aparecem ou desaparecem.
Abrir guiaPseudo-classePseudo-class
Uma pseudo-classe faz parte de um seletor CSS. Ela encontra um elemento por uma condição, como estado, lugar, idioma ou ação do usuário.
Abrir guiaPseudo-elementoPseudo-element
Um pseudo-elemento permite que o CSS estilize uma parte ou caixa sem um elemento normal no HTML de origem. Exemplos incluem a primeira letra e decoração gerada.
Abrir guiaBorda Arredondada em CSSCSS Border Radius
O border-radius em CSS cria cantos arredondados usando elipses de quarto de círculo com raios horizontais e verticais. Ele altera a pintura e o recorte, mas não o tamanho do layout da caixa, e não cria um squircle matemático.
Abrir guiaCanto Squircle do CSSCSS Squircle Corner
No rascunho do CSS Borders Nível 4, squircle é um valor de forma de canto para uma superelipse convexa entre arredondado e quadrado. Equivale a superellipse(2), precisa de um raio de borda diferente de zero e ainda exige uma verificação de suporte do navegador.
Abrir guiaModo de Cores ForçadasForced Colors Mode
O modo de cores forçadas usa uma paleta do sistema escolhida pelo usuário em vez de muitas cores da página. Isso pode tornar controles e textos mais fáceis de distinguir.
Abrir guiaVisual Effect MaterialVisual Effect Material
Material de Efeito Visual é um estilo de superfície do macOS que mistura e desfoca o que está por trás dele. Ele muda com o estado da janela e o tema claro ou escuro.
Abrir guia