Preview 05 · Radio, elevación y movimiento

Tres radios, casi ninguna sombra, dos duraciones

El sistema separa con una línea de 1px, no con sombra. La elevación se reserva para lo que de verdad flota sobre la página: una tarjeta bajo el cursor en el índice, un modal, una gaveta.

tokens.css · radius / elevation / motionassets/siga.css:55–65, 144–145
Las sombras cambian de fórmula en oscuro; compruébalo aquí

Radio

--radius-sm · 8px
--radius-md · 12px
--radius-lg · 18px
--radius-pill
8px
botones, campos, elementos del carril, celdas del stepper
12px
tarjetas, bloques de comida, control segmentado, tira de semana
18px
solo modales
pill
solo contadores del carril y etiquetas .tag

Elevación

--elev-flat
El estado por defecto de todo. Sin sombra ambiental en tarjetas.
--elev-raised / --shadow-pop
Tarjeta bajo el cursor, popover. 0 18px 46px al 10 % en claro, al 60 % en oscuro.
--shadow-modal
Modal y gaveta. Se calcula desde --ink-abs, así que se profundiza sola en oscuro.
4px de halo del acento, más el borde en --solid-bg

Movimiento

Dos duraciones y una curva. Nada se anima al cargar; no hay transiciones de entrada en ninguna pantalla del origen.

--motion-fast · 120mscolor, borde, fondo — la respuesta de estado se siente mecánica
--motion-base · 200msgeometría: el recorrido del interruptor y poco más
--ease-standardcubic-bezier(0.2, 0, 0, 1)
reduced-motiontokens.css anula duración de transición y animación a 0.01ms

Pruébalo

Pasa el cursor y tabula por estos controles: el fondo se mueve, la tinta se oscurece y el aro de foco aparece con :focus-visible.