Espaçamento, raio e sombra

Espaçamento: grid de 4px

spacing/14px

spacing/28px

spacing/312px

spacing/416px

spacing/520px

spacing/624px

spacing/832px

spacing/1040px

spacing/1248px

spacing/1664px

Não existem 28, 36 nem 56. Fique nos passos acima.

Raio: cantos retos

--radius vale 0, e todos os derivados (sm, md, lg, xl…) também.

Exceção: radius/full = 9999, para forma circular ou pill. Isso vale para elementos de ação e de identidade, como avatar, switch, radio, checkbox marcado e o símbolo do Horizontes.

radius = 0

Superfícies e blocos

radius/full

Elementos de ação e identidade

Sombras

Sombra é exceção. A hierarquia vem primeiro do tom de superfície (surface → surface-container-*). shadow/lg é para elementos flutuantes.

shadow/smElevação mínima

shadow/defaultCards destacados

shadow/mdMenus e popovers

shadow/lgModal, bottom sheet, tab bar flutuante

Token	Valor CSS
shadow/sm	0 1px 2px 0 rgba(0,0,0,.05)
shadow/default	0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1)
shadow/md	0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1)
shadow/lg	0 10px 40px 0 rgba(0,0,0,.16), 0 4px 6px -4px rgba(0,0,0,.1)