Espaciado, radios y layout

Escala de espaciado, radios, contenedor y anchos.

Escala de espaciado spacing-xxs (2) … spacing-11xl (160). Lo habitual: spacing-md (8) dentro de controles, spacing-xl (16) entre campos, spacing-3xl (24) de padding en tarjetas y modales, spacing-4xl (32) de gutter de página en escritorio.
Contenedor: máximo container-max-width-desktop (1280), padding container-padding-mobile (16) y container-padding-desktop (32).
Radios, con los mismos nombres que Tailwind (rounded-md = radius-md): radius-md (6) badges, tags, pestañas e ítems de menú; radius-lg (8) botones, inputs, tooltips; radius-xl (12) tarjetas, alertas, tablas; radius-2xl (16) modales; radius-full pills, avatares, toggles.
Anchos: modales en width-sm (480); paneles estrechos width-xxs (320).

Escala de espaciado

Token	Valor	Uso
p-0	`0px`	Sin separación.
p-0.5	`2px`	De etiqueta a asterisco, de título a subtítulo en bloques apretados.
p-1	`4px`	De icono a texto en botones (xs–md), texto apilado y texto de apoyo.
p-1.5	`6px`	De etiqueta a input, de icono a texto en botones lg/xl, de punto a texto del badge.
p-2	`8px`	Hueco interior de inputs, de avatar a etiqueta, grupos de tags.
p-3	`12px`	Filas de botones, de checkbox a etiqueta (md), hueco entre acciones de un modal.
p-4	`16px`	Padding de tarjeta (compacta), padding de alertas, hueco entre campos.
p-5	`20px`	Secciones de formulario, padding de tarjetas.
p-6	`24px`	Padding de modales, padding de tarjeta (holgada).
p-8	`32px`	Márgenes de página en escritorio, bloques de sección dentro de una página.
p-10	`40px`	Entre secciones de una página.
p-12	`48px`	Separaciones grandes entre secciones.
p-16	`64px`	Padding de secciones de marketing (móvil).
p-20	`80px`	Padding de secciones de marketing.
p-24	`96px`	Padding de secciones de marketing (escritorio).
p-32	`128px`	Padding de cabeceras grandes.
p-40	`160px`	Padding de cabeceras grandes (amplio).
	`16px`	Padding horizontal de página por debajo de 768px.
	`32px`	Padding horizontal de página desde 768px.

Utilidad	Valor	Uso
	`0px`	Tablas e imágenes a sangre.
	`2px`	Marcas diminutas (flecha del tooltip).
	`4px`	Checkbox sm, barras de progreso.
	`6px`	Badges (tipo badge), tags, checkbox md, pestañas de botón, ítems de navegación.
	`8px`	Botones, inputs, tooltips, ítems de menú, iconos destacados, grupos de botones.
	`12px`	Tarjetas, alertas, notificaciones, tarjetas de radio, menús.
	`16px`	Modales, tarjetas grandes.
	`24px`	Marcos de imágenes de marketing.
	`9999px`	Pills, avatares, toggles, puntos.

Token	Valor	Uso
	`320px`	Paneles estrechos, tooltips con texto de apoyo, columna de notificaciones.
	`384px`	Modales pequeños y popovers.
	`480px`	Modales (por defecto), slideouts.
	`560px`	Modales medianos, formularios de acceso.
	`640px`	Modales grandes, formularios de ajustes.
	`768px`	Contenido a una columna.
	`1024px`	Contenido de app a dos columnas.
	`1280px`	Ancho máximo de la app.
	`1440px`	Paneles anchos.
	`1600px`	Maquetaciones muy anchas.
	`1920px`	Lienzo Full HD.
	`720px`	Ancho máximo de línea para texto de lectura.
	`1280px`	Ancho máximo del contenedor de página.