Shapes

Radii mínimos. Escala re-tematizable por sitio, con dos valores especiales fuera de ella.

Los radios se mantienen mínimos para no dar aspecto de app, y derivan por referencia, no por copia, para que la relación entre tokens no pueda driftar cuando un sitio re-tematiza.

Escala

sm, 4px

Cards, imágenes, la mayoría de elementos

md, 8px

Uso intermedio; items del NavPill (via --nav-item-radius)

lg, 16px

NavPill (via --nav-radius), panel del Modal. Más suave que pill, menos app.

xl, 24px

BentoGrid: esquinas exteriores

Especiales

inner, 4px

Esquinas interiores del BentoGrid. Valor propio a propósito: coincide con sm hoy, pero no deriva de él; si un sitio re-tematiza sus radios, las divisiones internas del grid siguen nítidas a 4px.

full, 9999px

Círculos y píldoras completas: flechas de ImageGallery, badges. No lo usa el NavPill (16px a propósito).

Dual-radius del BentoGrid

Esquinas exteriores: 24px (xl). Esquinas interiores donde las celdas se encuentran: 4px (inner). El grid se lee como una superficie cohesiva: bordes exteriores suaves, divisiones internas nítidas.

Derivación

Los tokens de componente que repiten un valor de la escala derivan por referencia, no por copia: --nav-radius: var(--radius-lg), --nav-item-radius: var(--radius-md). La relación no puede driftar. La excepción documentada es --radius-inner (valor propio del bento).