← Todos os guias
Fundamentos

Componente, estilo ou sistema de design?

Entenda o que cada termo descreve para combinar referências sem misturar função, aparência e regras.

CamadaO que defineExemplos
Componente ou padrãoUma unidade de função, comportamento ou organização.Modal, abas, tabela, formulário.
Estilo visualCaracterísticas recorrentes de aparência e composição.Minimalismo, vidro fosco, neobrutalismo.
Sistema de designPrincípios, tokens, componentes, comportamento e governança.Material Design, Fluent.
TecnologiaMeios para implementar a interface.HTML, CSS, SwiftUI, React.

As camadas podem ser combinadas

Um formulário pode ter aparência minimalista e ser construído com HTML nativo. Um modal pode seguir o sistema Material. O nome da tecnologia não descreve a experiência visual, e o estilo não resolve a interação.

Uma tendência não é uma norma

Termos como glassmorphism e soft UI circulam na comunidade com sentidos variados. A biblioteca destaca características recorrentes, sem presumir uma definição universal. Movimentos históricos também têm mais diversidade do que uma amostra de interface consegue mostrar.

Use a referência para a decisão certa

Escolha um componente pelo que a pessoa precisa fazer. Escolha a direção visual pelo conteúdo, pelo público e pela marca. Escolha a tecnologia e os componentes de código pelos requisitos de manutenção, acessibilidade e plataforma.

“Uma tabela com aparência minimalista em React” informa três camadas. Ainda faltam os dados, as ações, o comportamento no celular e os estados da tarefa.

Fidelidade exige contexto

Reproduzir cores de um sistema não reproduz seus contratos. Materiais nativos como os da Apple têm comportamentos que um efeito CSS apenas aproxima. Consulte a documentação oficial da plataforma escolhida.

Para aprofundar: referência oficial ↗. Os exemplos e as explicações desta página são conteúdo editorial da Biblioteca UI.

Encontrar um componente →
BIBLIOTECA UI / EXPLORAR