La vista Sistema

La cuarta vista deriva “todo lo demás” de un sistema de diseño — radio de esquina, grosores de borde, elevación y movimiento — a partir de la misma base y ratio que tu tipografía y color.

Cómo se derivan los efectos

• Radio — los pasos siguen base × ratio^(k/notes), redondeados a valores de píxel limpios, desde xs hasta 4xl más full. Las superficies anidadas siguen la regla concéntrica: radio interior = radio exterior − padding, nunca iguales.
• Bordes — hairline, default, strong, heavy: cuatro grosores que siguen la escala, más el ancho y el desplazamiento del anillo de foco.
• Elevación — una escalera de sombras (2xs–2xl) cuyo color deriva del neutro más oscuro, de modo que las sombras pertenecen a la paleta en lugar de ser un negro genérico.
• Movimiento — las duraciones son valores de la escala en milisegundos (base × ratio^n: 150 · 200 · 267 · 355 …) y cuatro curvas de aceleración por perfil, incluida una curva enfatizada para los momentos hero. Las demos del lienzo están en vivo — pulsa play y compara.

Edición

Cada sección tiene sus controles semilla en su propia tarjeta — la base del radio, el perfil de elevación, el ancho de borde, el perfil de movimiento — justo al lado de lo que afectan. La selección y el avance con las flechas funcionan exactamente igual que en las otras vistas: los valores recorren la escala.

Por qué los efectos también están en la escala

Los radios y las duraciones suelen ser los primeros tokens en pudrirse: alguien escribe border-radius: 7px o transition: 180ms y nada lo marca. Cuando los valores permitidos son pasos de la escala, el que desentona salta a la vista — y las exportaciones cubren el espacio de nombres entero del destino (cada nombre de radio y de sombra de Tailwind, cada curva de aceleración), de modo que ninguna utilidad recae en silencio en un valor por defecto fuera de marca. Ese principio de exhaustividad se aplica a cada formato de exportación que ofrece la herramienta.