Fundamentos
Superfície e elevação
Quatro materiais e quatro alturas. Sombra tingida de Graffiti.
Quatro materiais#
paper · e1
Papel
O padrão. Dado, formulário, decisão.
sunken · e0
Rebaixado
Trilho de segmento, área de teste, prévia.
glass · e2
Vidro
Só no que flutua. Tem borda de luz nas quinas.
night · e2
Graffiti
Superfície da marca. Sidebar, cabeçalho do agente, dock.
<Card /> // paper
<Card material="sunken" />
<Card material="glass" className="hb-lens" />
<Card material="night" />Quatro alturas#
Sombra tingida de Graffiti (46,52,64), nunca preta. Cada nível é um anel de 1px + uma sombra longa e macia.
e0
Anel só. Rebaixado, chip, item de lista.
shadow-e0
e1
Papel padrão. Cartão, tabela.
shadow-e1
e2
Hover de cartão, vidro, noite.
shadow-e2
e3
Diálogo, folha.
shadow-e3
Aurora#
A luz ambiente atrás do vidro. Fica fixa no fundo da área de conteúdo, nunca sobre dado.
<main className="relative isolate">
<div aria-hidden className="hb-aurora" />
{children}
</main>Esta documentação usa a mesma aurora. O pai precisa de isolate para a aurora (z-index: -1) não escapar para trás do body.
Regras#
Faça
- Papel para tudo que se lê com atenção.
- Subir de e1 para e2 só no hover de algo clicável.
- e3 só para o que bloqueia a página.
Evite
- Sombra preta ou colorida.
- Vidro sobre tabela.
- Card sunken dentro de sunken.