Radios y sombras

Los radios se exponen como tokens semánticos, no como escalas sueltas, para que cambiarlos unifique todo el sistema.

Radios semánticos

Token	Alias	Uso
`--radius-button`	`var(--radius-sm)`	Botones
`--radius-card`	`var(--radius-md)`	Cards
`--radius-section`	`var(--radius-md)`	Secciones con fondo
`--radius-badge`	`var(--radius-full)`	Pills, badges

Los componentes nunca usan --radius-sm directamente: usan --radius-button. Así, si decides cambiar todos los botones a más redondeados, cambias un único token.

Escalas primitivas

Token	Valor típico
`--radius-xs`	`0.125rem`
`--radius-sm`	`0.375rem`
`--radius-md`	`0.625rem`
`--radius-lg`	`1rem`
`--radius-xl`	`1.5rem`
`--radius-full`	`9999px`

Sombras

Escala primitiva (un token por nivel):

Token	Valor
`--shadow-xs`	`0 1px 2px oklch(0 0 0 / 0.04)`
`--shadow-sm`	`0 2px 4px oklch(0 0 0 / 0.06)`
`--shadow-md`	`0 4px 8px oklch(0 0 0 / 0.08)`
`--shadow-lg`	`0 10px 20px oklch(0 0 0 / 0.12)`
`--shadow-xl`	`0 20px 40px oklch(0 0 0 / 0.16)`

Semánticas:

Token	Alias	Uso
`--shadow-card`	`var(--shadow-sm)`	Cards en reposo
`--shadow-elevated`	`var(--shadow-md)`	Elementos elevados
`--shadow-overlay`	`var(--shadow-lg)`	Modales, popovers

Uso

<div class="rounded-[var(--radius-card)] shadow-[var(--shadow-card)]">
  Card con tokens semánticos
</div>

O con las clases de componente (que ya los usan internamente):

<article class="card card-elevated">
  <!-- usa --radius-card y --shadow-elevated por defecto -->
</article>

Motion

Para transiciones, FDS incluye utility/animations/durations.css con duraciones semánticas:

Token	Valor	Uso
`--duration-fast`	`120ms`	Hover, micro-interacciones
`--duration-normal`	`200ms`	Transiciones estándar
`--duration-slow`	`320ms`	Modales, paneles

Con utilities:

<button class="transition duration-[var(--duration-normal)]">
  Hover suave
</button>

Proporcionalidad entre tokens

Cuando extiendas radios o sombras, mantén la proporción: duplicar el radio debería coincidir con subir un paso en la sombra. Los usuarios perciben visualmente la consistencia entre escalas.

Aspect ratios

FDS también expone ratios comunes como tokens:

Token	Ratio	Uso
`--aspect-rrss`	`1.91 / 1`	Open Graph, redes sociales
`--aspect-wide`	`18 / 8`	Heroes anchos
`--aspect-ultrawide`	`18 / 5`	Banners cinemáticos
`--aspect-golden`	`1.618 / 1`	Proporción áurea
`--aspect-portrait`	`3 / 4`	Imágenes verticales
`--aspect-landscape`	`4 / 3`	Imágenes horizontales

Usables directamente en aspect-ratio:

<div style="aspect-ratio: var(--aspect-wide);">...</div>