Espaçamento
O Lyra usa uma grade de espaçamento de 4px para tornar previsível a distância entre elementos
relacionados. Construa o layout com --space-* e, em seguida, use os tokens de raio e sombra para
expressar agrupamento e elevação sem criar medidas avulsas.
Escala
A rampa --space-* começa em 4px e avança pelos passos usados em padding de componentes, gaps,
ritmo de seções e margens de página. Passos pequenos aproximam controles relacionados; os médios
separam conteúdo dentro de uma superfície; os maiores dividem regiões da página. O token zero está
disponível quando um componente precisa de uma redefinição explícita.
Escala de espaçamento — grade de 4px
As barras usam o mesmo token indicado no rótulo. Prefira um passo nomeado a uma medida literal para que o layout mantenha o mesmo ritmo dos componentes ao redor.
--space-14px--space-28px--space-312px--space-416px--space-520px--space-624px--space-832px--space-1040px--space-1248px--space-1664px--space-2080px--space-2496pxRaios
O conjunto de raios vai de um detalhe de 4px a uma pílula totalmente arredondada. --radius-md é o
canto padrão de 10px para superfícies gerais; use raios menores em controles compactos, maiores em
containers espaçosos e --radius-full apenas quando a própria forma precisar parecer uma pílula ou
um círculo.
Papéis de raio de borda
Cada superfície aplica seu próprio token --radius-*. O passo médio em destaque é a escolha
padrão para cards e para a maior parte dos containers de componentes.
4px6px10px · default14px20px999pxSombras
--shadow-xs até --shadow-lg oferecem elevação progressivamente mais visível no tema claro: use
xs para separação sutil, sm para cards, md para feedback de hover e lg para modais. No modo escuro,
--shadow-xs e --shadow-sm resolvem para none, com bordas semânticas expressando a elevação
sutil; --shadow-md e --shadow-lg permanecem para overlays mais profundos.
Sombras de elevação
Escolha a menor sombra que comunique a relação. Uma sombra sinaliza elevação, não substitui a borda que define uma superfície.