Tokens. Espacio. Motion.

Variables canónicas de css/tokens.css.

CSS tokens

Fuente de verdad instalable.

Archivo canónico: canon-brand/css/tokens.css → sync a /assets/css/tokens.css. UI consumidora: solo estas variables. Ver archivo syncado para valores reales.

/* Estructura típica — completar hex/familias en el kit */
:root {
  --canvas / --surface
  --ink / --muralla
  --primary / --accent (+ hover)
  --muted
  --surface-elevated

  --font-display
  --font-body / --font-ui
  --font-mono

  --radius · --btn-radius
  --space-1 … --space-6
  --ease · --btn-min-size
}

/* Tras sync: abrir /assets/css/tokens.css */

Forma y espacio

Radios y escala.

Token	Uso
`--radius`	Paneles / cards de interacción
`--btn-radius`	CTA
`--space-1` … `6`	Escala de spacing

.btn-primaryhover · 160ms · var(--ease)

Motion

Presencia, no ruido.

Ease

var(--ease) — documentado en el kit.

Hover CTA

~160ms. Respetar prefers-reduced-motion.

Seguir a Checklist