Fundamentos
Espaço e forma
Grade de 4 px com oito passos; raios por tipo de peça; três níveis de elevação; vidro só no cromo flutuante; um fundo que vive mesmo com a página vazia, nos dois temas.
Raios por peça
claro
xs4 pxmensagem
sm8 pxetiqueta
md12 pxcampo, botão
lg16 pxbotão de canto
xl20 pxcartão, menu, diálogo
pillpílulaselo, contador
escuro
xs4 pxmensagem
sm8 pxetiqueta
md12 pxcampo, botão
lg16 pxbotão de canto
xl20 pxcartão, menu, diálogo
pillpílulaselo, contador
<div class="site-radii"><div style="border-radius:var(--hibex-radius-xs)"><b>xs</b><span>4 px</span><span>mensagem</span></div><div style="border-radius:var(--hibex-radius-sm)"><b>sm</b><span>8 px</span><span>etiqueta</span></div><div style="border-radius:var(--hibex-radius-md)"><b>md</b><span>12 px</span><span>campo, botão</span></div><div style="border-radius:var(--hibex-radius-lg)"><b>lg</b><span>16 px</span><span>botão de canto</span></div><div style="border-radius:var(--hibex-radius-xl)"><b>xl</b><span>20 px</span><span>cartão, menu, diálogo</span></div><div style="border-radius:var(--hibex-radius-pill)"><b>pill</b><span>pílula</span><span>selo, contador</span></div></div>Elevação
claro
nível 1cartão
nível 2botão de canto
nível 3menu aberto, diálogo
escuro
nível 1cartão
nível 2botão de canto
nível 3menu aberto, diálogo
<div class="site-radii"><div style="box-shadow:var(--hibex-shadow-1);background:var(--hibex-surface-solid)"><b>nível 1</b><span>cartão</span></div><div style="box-shadow:var(--hibex-shadow-2);background:var(--hibex-surface-solid)"><b>nível 2</b><span>botão de canto</span></div><div style="box-shadow:var(--hibex-shadow-3);background:var(--hibex-surface-solid)"><b>nível 3</b><span>menu aberto, diálogo</span></div></div>Espaço
--hibex-space-1…8 = 4, 8, 12, 16, 24, 32, 48, 64 px. Espaço vertical numa direção só: gap no contêiner ou margem inferior, nunca superior.
Vidro e fundo
Vidro fosco só no cromo flutuante — botões de canto, menus abertos. Conteúdo em superfície quase opaca, sem desfoque. Sem suporte, ou com prefers-reduced-transparency, o vidro vira superfície opaca. O fundo vive mesmo com a página vazia: brilhos suaves de menta e céu, fixos, atrás de tudo — no claro e no escuro.
Origem: cap. 03 §3.3–§3.6 · ADR-0008 · desde a versão 0.1.0