Tokens
Fundaciones
Espaciado, forma y movimiento: la base que comparten web, dashboards y pantallas. Todo se lee de tokens/{space,radius,motion}.tokens.json y se renderiza a su valor real.
Espaciado
Escala base-4. Paso mínimo 4 px. Usar para padding, márgenes y gaps.
space-0 0
space-1 4px
space-2 8px
space-3 12px
space-4 16px
space-5 20px
space-6 24px
space-8 32px
space-10 40px
space-12 48px
space-16 64px
space-20 80px
space-24 96px
space-32 128px
Retícula
Contenedor y márgenes [SG-09]. Grid principal de 12 columnas (8 para densidad).
layout-container 1200px ancho máximo de contenido
layout-gutter clamp(1.25rem, 4vw, 3rem) margen lateral fluido de página
Radios
Marca techy: esquinas rectas o contenidas [SG-05]. Por defecto md (4 px).
radius-none 0
radius-sm 2px
radius-md 4px
radius-lg 8px
radius-pill 9999px
Bordes
1 px por defecto; 2 px para énfasis y trazo de icono [SG-11b]. El sistema no usa sombras.
border-hairline 1px
border-thin 1px
border-thick 2px
Movimiento
Energía sin caos: ease-out sin rebote, transiciones cortas. Pasa el cursor por cada muestra.
Duración
duration-instant 80ms
duration-fast 120ms
duration-base 160ms
duration-slow 240ms
duration-slower 400ms
Curvas (easing)
easing-out cubic-bezier(0.22, 1, 0.36, 1)
easing-inOut cubic-bezier(0.65, 0, 0.35, 1)
easing-standard cubic-bezier(0.4, 0, 0.2, 1)