--shadow-raisedSuperfície que sobe um pouco sobre o conteúdo.As medidas por trás de cada tela.
Espaçamento, raio, camada, elevação e movimento. Esta página lê os valores direto de app/globals.css — o que você vê aqui é literalmente o que a interface aplica.
Espaçamento
Grade de 4px, com um meio-passo de 2px para ajuste óptico. Um valor de 1px nunca é espaçamento — é compensação de borda.
Raio
Cinco degraus. Cards de produto param em 20px; 28px pertence às grandes telas de marca.
--radius-sm8pxBotões, chips e campos.--radius-md12pxCards e painéis de produto.--radius-lg20pxBlocos editoriais e diálogos.--radius-xl28pxGrandes telas de marca.--radius-pill999pxTags e indicadores.
Camadas
A ordem importa mais que o número. De 1 a 9 fica livre para empilhamento local dentro de um componente.
- 200
--layer-skip-linkPular para o conteúdo — precisa vencer todo o resto. - 100
--layer-overlayBusca e lightbox de fotografia. - 70
--layer-drawerO menu em si. - 60
--layer-drawer-backdropVéu do menu em telas pequenas. - 35
--layer-sidebar-toggleBotão de recolher, que monta sobre a borda da sidebar. - 30
--layer-sidebarNavegação lateral fixa. - 20
--layer-stickyTopbar. - 10
--layer-floatingBarra de contexto que flutua sobre o conteúdo.
Elevação
Duas sombras, nomeadas pelo papel. Anel de foco, halo colorido e borda inset também são box-shadow, mas não são elevação.
--shadow-overlayDiálogo e skip link, que flutuam sobre tudo.Movimento
Só movimento com função, entre 150 e 250ms. Tudo respeita prefers-reduced-motion.
--transition-fast150ms cubic-bezier(.22, 1, .36, 1)Hover, foco, troca de cor.--transition-base220ms cubic-bezier(.22, 1, .36, 1)Sidebar, drawer e mudanças de layout.
Com movimento reduzido ativo, transições e animações caem para 1ms e os transform de estado somem — o estado continua legível, o deslocamento é que desaparece.
Estados
Todo controle interativo tem cinco. Nenhum deles pode depender só de cor.
- PadrãoPeso 700, altura mínima de 44px.
- HoverBorda escurece; a cor de fundo não muda de matiz.
- ActiveEscala 0,97 — some com movimento reduzido.
- FocusAnel de 3px na cor de foco, com 3px de afastamento.
- DisabledOpacidade 0,72 e cursor de espera.