Material Design
Superfícies digitais se comportam como folhas de papel com espessura e sombra, de modo que profundidade e movimento explicam a hierarquia da interface.
Um sistema de superfícies planas coloridas que ficam em elevações definidas e projetam sombras a partir de uma luz clave no canto superior esquerdo, com cores fortes, uma grade de 8dp e movimentos intencionais. O Google anunciou isso no I/O em junho de 2014.
Período: 2014–presente · Era: Tela sensível ao toque · Domínio: Design Gráfico e de IU · Também chamado de: Material, Google Material, Material 2
Quando carregar esta skill
Carregue-a quando o usuário pedir: "material design", "material ui", "google material", "elevation", "floating action button", "fab", "android style", "ripple effect", "app bar", "paper and ink", "md2".
Bom para: aplicativos Android, dashboards administrativos, web apps com muitos componentes, sistemas de design, ferramentas de produtividade.
Não use quando:
- A marca precisar de uma voz distinta, porque o visual padrão é reconhecidamente do Google.
- A página for editorial e tiver poucos componentes interativos.
- O design precisar de um visual puramente 2D, sem nenhuma sombra.
Diretivas do sistema
Ao gerar layouts de IU ou gráficos no Material Design, você DEVE:
- Tratar cada superfície como uma folha de papel de 1dp de espessura que nunca dobra, nunca muda de tamanho esticando e nunca atravessa outra superfície.
- Expressar hierarquia com elevação em dp: 0 para a página, 1 para cartões, 4 para a barra de aplicativos, 6 para um botão flutuante em repouso, 8 para um menu, 16 para uma gaveta de navegação e 24 para um diálogo.
- Construir cada layout em uma grade de 8dp, com 4dp para alinhamento de texto pequeno e ícones, e alvos de toque de 48dp.
- Usar cores fortes de um matiz primário e um de destaque, com a barra de status no tom 700 do primário e a barra de aplicativos no tom 500.
- Usar texto grande com uma escala definida de 12, 14, 16, 20, 34, 45 e 56sp em Roboto.
- Dar a cada toque uma resposta: uma ondulação circular que cresce do ponto de toque ao longo de 300ms.
- Mover elementos ao longo de caminhos curvos com uma suavidade que começa rápido e termina devagar, e fazer cada movimento explicar de onde o elemento veio.
Guardrails
Cada linha abaixo quebra o estilo. Verifique sua saída em relação à lista antes de retorná-la.
- NUNCA: Gradientes e texturas em superfícies.
- NUNCA: Sombras sem um nível de elevação consistente ou com diferentes direções de luz.
- NUNCA: Superfícies que se sobrepõem na mesma elevação.
- NUNCA: Alvos de toque abaixo de 48dp.
- NUNCA: Texto colorido em fundo colorido abaixo de 4,5:1.
- NUNCA: Mudanças instantâneas de estado sem movimento ou feedback de ondulação.
- NUNCA: Mais de um botão de ação flutuante em uma tela.
Perfil vetorial
| Eixo | Pontuação | 1 significa | 5 significa |
|---|---|---|---|
| Ornamentação | ■■□□□ 2/5 | minimalista puro | maximalista |
| Dimensionalidade | ■■■□□ 3/5 | estritamente 2D | totalmente 3D / espacial |
| Rigidez de grade | ■■■■□ 4/5 | caótico / orgânico | grade matemática estrita |
| Realismo skeuomórfico | ■■□□□ 2/5 | digital abstrato | material fotorrealista |
| Expressividade tipográfica | ■■□□□ 2/5 | neutro / invisível | experimental / ilustrativo |
Mantenha essas pontuações. Se uma solicitação mover um eixo em 2 pontos ou mais, você saiu do estilo: vá para "Fallbacks de linhagem".
Lógica espacial e de grade
- Mecânica de grade: Uma grade base de 8dp, 4dp para ícones e texto, uma grade de 4 colunas para telefone com margens de 16dp, uma grade de 8 colunas para tablet com margens de 24dp e uma grade de 12 colunas para desktop; a barra de aplicativos tem 56dp no telefone e 64dp no desktop.
- Proporção de espaço em branco: 25–40% da superfície permanece vazia; a escala de espaçamento é 4, 8, 16, 24, 32, 48, 56dp, com 16dp de preenchimento do cartão.
- Regras de alinhamento: O conteúdo alinha a uma linha-chave de 72dp a partir da borda esquerda em listas com avatares e a uma linha-chave de 16dp caso contrário; o botão de ação flutuante fica a 16dp das bordas direita e inferior.
- Geometria do contêiner: Cartões e botões usam um raio de canto de 2dp; botões de ação flutuante são círculos de 56dp e botões mini têm 40dp; diálogos têm no mínimo 280dp de largura.
Tipografia
- Classificações: sem serifa neo-grotesca · sem serifa humanista
- Espaçamento: Tamanhos de exibição de 34sp e maiores recebem 0em a -0,01em; corpo recebe +0,01em; botões são em maiúsculas com +0,09em.
- Entrelinha: Títulos 1,2; corpo 1,4 a 1,5 a 14sp em uma linha de 20dp; texto de lista 24dp para 16sp.
- Regras de hierarquia:
- Use a escala 12, 14, 16, 20, 34, 45 e 56sp e nenhum tamanho entre esses valores.
- Use médio (500) para títulos e botões, regular (400) para corpo e leve (300) para tamanhos de exibição de 45sp e acima.
- Defina o texto em uma superfície a 87% preto para primário, 54% preto para secundário e 38% preto para desabilitado.
- Defina rótulos de botão em maiúsculas a 14sp e peso 500.
Pares de fontes
| Exibição | Corpo | Nota |
|---|---|---|
| Roboto | Roboto | A fonte do sistema do Material 1 e 2, usada em uma única família do peso 300 ao 900. |
| Roboto Condensed | Roboto | Uma fonte de exibição condensada para cabeçalhos densos com a fonte de texto padrão. |
| Noto Sans | Noto Sans | A família substituta para scripts não latinos nos mesmos pesos e métricas. |
Cor e iluminação
- Estrutura de paleta: Um matiz primário com seus tons 500 e 700, um matiz de destaque da faixa A200 a A400 e cinzas neutros; o matiz primário cobre a barra de aplicativos e 10 a 20% da superfície.
- Regras de contraste: O texto do corpo mantém pelo menos 4,5:1 e o texto grande pelo menos 3:1; texto branco sobre Indigo 500 atinge 7,5:1 e sobre Pink A200 atinge 3,4:1, o que é suficiente apenas para texto de 18sp.
- Tratamento de superfície: Preenchimentos planos opacos de cor sólida, sem gradiente e sem textura; scrims usam preto a 32% de opacidade atrás de diálogos.
- Luz e sombra: Uma luz clave do topo e uma luz ambiente suave; cada sombra tem uma penumbra, uma umbra e uma camada ambiente, e seu desfoque e deslocamento aumentam com a elevação.
Paleta
| Nome | Hex | Função |
|---|---|---|
| Superfície | #FFFFFF | superfície do cartão e folha |
| Fundo | #FAFAFA | fundo da página |
| Indigo 500 | #3F51B5 | primário e barra de aplicativos |
| Indigo 700 | #303F9F | barra de status |
| Pink A200 | #FF4081 | destaque e botão de ação flutuante |
| Cinza 900 | #212121 | texto a 87% de opacidade |
Materialidade e textura
- Simulação de superfície: Papel digital: uma folha plana de 1dp de espessura que projeta uma sombra, mas não tem grão, bisel ou textura.
- Regras de borda: Superfícies não têm contorno; divisores são 1px preto a 12% de opacidade, recuados 72dp ou 16dp da borda; campos de texto recebem uma linha inferior de 1px que cresce para 2px no foco.
- Desfoque e elevação: Sombras de elevação são 0 1px 3px a 20% mais 0 1px 1px a 14% para 1dp, 0 4px 5px a 14% e 0 1px 10px a 12% para 4dp, e 0 9px 12px a 14% para 12dp; o sistema tem 25 níveis de 0 a 24dp.
Ornamentação e iconografia
- Iconografia: Ícones do sistema de 24dp em uma área ativa de 20dp com peso de traço de 2dp, terminais quadrados com cantos arredondados de 2dp, preenchimento sólido e uma cor a 54% preto.
- Ilustração: Formas vetoriais planas na paleta e fotografia sem margens sob um scrim de 20 a 40%; sem contorno e sem perspectiva.
- Elementos decorativos: botão de ação flutuante · ondulação · sombras de elevação · barra de aplicativos em bloco de cor · imagem herói sem margens · cartão
Movimento e interatividade
- Nascido na tela: sim
- Física de transição: Superfícies se movem ao longo do eixo Z e do plano da tela com caminhos curvos; elementos aceleram rapidamente e desaceleram suavemente, e um elemento compartilhado viaja de sua origem ao seu destino.
- Suavização: cubic-bezier(0.4, 0, 0.2, 1)
- Duração (ms): 300
- Hover e ativo: Hover adiciona uma sobreposição preta de 4%; pressionar mostra uma ondulação de 12% preto crescendo do ponto de toque ao longo de 300ms; um botão elevado levanta de 2dp para 8dp ao pressionar.
Primer de código e tokens
Defina data-style="material-design" no elemento raiz e cole os tokens. O arquivo tokens.css tem os mesmos tokens e um conjunto de regras de referência.
[data-style="material-design"] {
--color-bg: #FAFAFA;
--color-surface: #FFFFFF;
--color-text: rgba(0, 0, 0, 0.87);
--color-muted: rgba(0, 0, 0, 0.54);
--color-primary: #3F51B5;
--color-accent: #FF4081;
--color-border: rgba(0, 0, 0, 0.12);
--font-sans: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--font-display: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--border-radius: 2px;
--border-width: 1px;
--shadow-elevation: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
--backdrop-filter: none;
--space-unit: 8px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 300ms;
--color-primary-dark: #303F9F;
--shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
--shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
--touch-target: 48px;
--color-on-bg: #212121;
--color-on-surface: #212121;
--color-on-primary: #FAFAFA;
--color-on-accent: #212121;
--color-muted-on-bg: #737373;
--color-muted-on-surface: #757575;
--color-link: #3F51B5;
--color-link-on-surface: #3F51B5;
--display-weight: 300;
--subhead-weight: 500;
--body-weight: 400;
--strong-weight: 500;
--label-weight: 500;
--display-tracking: 0em;
--display-leading: 1.15;
--display-case: none;
--body-leading: 1.5;
--body-size: 16px;
--icon-stroke: 2;
}
Padrões Tailwind:
| Elemento | Classes |
|---|---|
| página | min-h-screen bg-[#FAFAFA] font-sans text-black/[0.87] antialiased |
| barra de aplicativos | flex h-14 md:h-16 items-center bg-[#3F51B5] px-4 text-xl font-medium text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)] |
| cartão | rounded-sm bg-white p-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.2),0_1px_1px_0_rgba(0,0,0,0.14),0_2px_1px_-1px_rgba(0,0,0,0.12)] |
| botão | h-9 min-w-[64px] rounded-sm bg-[#3F51B5] px-4 text-sm font-medium uppercase tracking-[0.09em] text-white shadow-md transition-shadow duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-lg active:shadow-xl |
| fab | h-14 w-14 rounded-full bg-[#FF4081] text-white shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),0_6px_10px_0_rgba(0,0,0,0.14),0_1px_18px_0_rgba(0,0,0,0.12)] |
Pacote visual
As imagens e ícones deste estilo são arquivos. Use-os como estão, ou leia-os como uma especificação e desenhe os seus próprios na mesma linguagem.
| Arquivo | Conteúdo |
|---|---|
pack/hero.svg | Placa herói, 800 por 600. Uma imagem abstrata na linguagem visual do estilo. |
pack/pattern.svg | Ladrilho de padrão, 80 por 80. Repete-se em ambas as direções. |
pack/icons.svg | Sprite de ícones: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders. |
- Ícones: sólidos, traço 2 em um campo de 24px, tampas retas, uniões redondas, contêiner: nenhum. Use:
<svg class="icon"><use href="pack/icons.svg#home"/></svg>. Um ícone recebecurrentColor. - Família de ícones: o sprite foi extraído de Material Symbols (Baseline, preenchido) pelo Google, licença Apache 2.0. Motivo: O conjunto preenchido do sistema do próprio estilo, em sua grade de 24dp. É um substituto de código aberto para uma demonstração. Para um produto, use a biblioteca de ícones da marca e escolha a família pelas regras abaixo.
- Tipo de exibição: peso 300, espaçamento 0em, entrelinha 1.15, caixa: nenhum.
- Pesos: exibição 300, subtítulo 500, corpo 400, negrito no texto 500, rótulos e botões 500. O estilo usa 3 pesos (300, 400, 500) e nenhum outro. A exibição é 100 mais leve que o corpo, então o tamanho carrega a hierarquia. O destaque é o peso: uma palavra mais pesada é o destaque, então os passos entre os pesos são claros.
- Tipo de corpo: 16px, entrelinha 1.5.
- Página: herói dividido, alinhado à esquerda, densidade regular, inclinação do destaque 0°.
- Cor do texto:
--color-texté apenas para o campo de leitura principal. Em cada campo, use seu token:--color-on-bg,--color-on-surface,--color-on-primary,--color-on-accent.
Como escolher um pacote de ícones
Um pacote de ícones é uma fonte para imagens. Escolha-o com o mesmo cuidado que a fonte de texto. Essas regras valem para um conjunto de código aberto e para uma biblioteca licenciada.
- O traço corresponde à haste. Coloque um ícone ao lado do texto do corpo no tamanho do texto. A linha do ícone e a haste de uma letra têm o mesmo peso.
- Terminais e cantos seguem o token de raio. Tampas retas e uniões em esquadria vão com um raio de zero. Tampas redondas e uniões redondas vão com um raio suave.
- O modo de preenchimento segue a tecnologia da era. Eras de impressão cortam formas sólidas. Eras de tela com profundidade preenchem e sombreiam a forma. As interfaces de produto atuais desenham um contorno.
- As metáforas não são mais jovens que o estilo. Cada imagem é um objeto que a época conhecia. Um ícone com uma metáfora posterior quebra o período.
- Uma família, uma grade. Todos os ícones vêm de uma família e uma variante, desenhados em um campo. Não misture famílias em uma superfície.
- A família cobre o produto. Liste cada conceito que o produto precisa antes de se comprometer. Uma família que não tem um ícone para um deles é a família errada.
- A cor é um token. Um ícone recebe currentColor. Um segundo tom vem de um token, não do arquivo.
- A licença permite o uso. Leia a licença do conjunto. Dê crédito onde a licença pedir. Um produto com uma marca usa sua biblioteca licenciada e aplica as mesmas regras para escolher a família.
Fallbacks de linhagem
Quando o usuário pedir uma variação, não improvise. Misture-se em direção ao vizinho nomeado aqui e carregue sua skill.
- Se o usuário pedir mais plano: mova-se em direção a
flat-design(Flat Design). Remova todas as sombras de elevação, separe as superfícies apenas pela cor e mantenha a paleta de cores e a grade de 8dp. - Se o usuário pedir mais tátil: mova-se em direção a
skeuomorphism(Skeuomorphism). Adicione um gradiente de 5 a 10%, um realce interno de 1px e uma textura de superfície a 5% de opacidade; mantenha a elevação e o layout.