Materiais

Superfícies, raio, pílula e sombras do tema.

A hierarquia vem dos níveis de superfície, do espaçamento e da sombra do tema, não de bordas decorativas. Os exemplos abaixo usam os tokens vivos: trocam com o tema.

Superfície

Cada degrau sobe um nível a partir da moldura. Evite cartão dentro de cartão.

Exemplo	Classe	Uso
	Moldura`bg-chrome`Raio sem raio	Trilho, sidebar e topbar do Shell. É o degrau mais escuro.
	Conteúdo`bg-background`Raio --rx-shell-radius	Painel do conteúdo, flutuando 6 px dentro da moldura.
	Cartão`bg-surface`Raio --radius · sombra --surface-shadow	Cartões, Widget, KPI e ItemCard.
	Cartão interno`bg-surface-secondary`Raio --radius	Blocos dentro de um cartão e estados de hover.
	Terceiro degrau`bg-surface-tertiary`Raio --radius	Destaque discreto sobre o cartão interno. Evite aninhar mais.
	Campo`bg-field-background`Raio --field-radius · sombra --field-shadow	Campos de texto e seletores, sem borda e sem sombra.
	Controle neutro`bg-default`Raio rounded-full	Chips e controles neutros, em pílula.

Flutuante

Menus, diálogos e Sheet flutuam sobre a página com --overlay-shadow. Não empilhe sombra própria sobre eles.

Exemplo	Classe	Uso
	Menu e popover`bg-overlay`Raio --radius · sombra --overlay-shadow	Dropdown, Select, ListBox e popovers.
	Diálogo e Sheet`bg-overlay`Raio --radius · sombra --overlay-shadow	Modal, AlertDialog e Sheet, sobre o fundo --backdrop.
	Fundo do diálogo`--backdrop`Raio --radius	Cobre a página atrás de um diálogo.

Raios

--radius e --field-radius valem 16 px. Botões são em pílula. Não misture escalas de raio na mesma tela.

Exemplo	Token	Uso
	`--radius-sm`—	Detalhes pequenos: teclas, selos.
	`--radius-md`—	Elementos internos compactos.
	`--radius-lg`—	Igual a --radius: cartões e controles.
	`--radius-xl`—	Contêineres grandes.
	`--radius-2xl`—	Ilustrações e capas.
	`--radius-3xl`—	Raras. Prefira a pílula.
	`rounded-full`pílula	Botões, chips e avatares.

Sombras

--surface-shadow: cartões, Widget, KPI e ItemCard.
--overlay-shadow: Sheet, menus e diálogos.
Campos não têm sombra (--field-shadow transparente).

Faça

Usar Card ou Widget: o tema já aplica superfície, raio e sombra.

Evite

Somar shadow-lg e uma borda sobre um cartão que já tem --surface-shadow.