🌀Calculadora de espaciado UI usando la proporción áurea

¿Qué es una Escala de Espaciado con Proporción Áurea?

Elegir márgenes y paddings al azar (8px aquí, 15px allá, 22px más allá) produce interfaces visualmente inconsistentes. Una escala de espaciado resuelve esto generando una serie de valores donde cada uno guarda la misma proporción con el anterior — el mismo principio que las escalas tipográficas, aplicado al espacio en vez del tamaño de letra. Esta calculadora de espaciado UI genera esa escala con vista previa visual de barras, y en el Modo 2 la exporta como design tokens listos para tu código (variables CSS o configuración de Tailwind), ahorrando el trabajo manual de calcular cada nivel de una escala de espaciado css con calculadora aparte.

¿Cómo se calcula la escala de espaciado?

Ejemplo: con una base de 8px y la proporción áurea (1,618), la escala es 8, 12.94, 20.94, 33.89, 54.83, 88.71px — cada valor es 1,618 veces el anterior. Esa relación constante es lo que hace que la progresión se vea armónica en vez de arbitraria, un efecto muy buscado por quienes diseñan un sistema de espaciado UI desde cero para un producto digital.

Guía paso a paso: cómo generar tu escala de espaciado

1) Define el "Espaciado Base" en píxeles — 8px es el valor más habitual en sistemas de diseño profesionales, porque encaja bien con el grid de 8 puntos que usan iOS, Material Design y la mayoría de librerías de componentes. 2) Elige cuántos "Pasos" quieres en tu escala (entre 2 y 12). 3) Ajusta la "Proporción" si no quieres usar la proporción áurea por defecto — 1,333 o 1,5 suelen dar escalas más manejables para espaciado. 4) Copia los valores generados o, si necesitas integrarlos directamente en tu código, cambia al Modo 2: Exportar Design Tokens para obtener variables CSS y un fragmento de configuración de Tailwind listos para pegar.

¿Por qué la proporción áurea en concreto?

1,618 (φ, phi) es la proporción más citada en diseño por su presencia recurrente en la naturaleza y el arte clásico, pero no es la única opción válida ni necesariamente la mejor para espaciado de interfaz: crece muy rápido, así que con pocos pasos ya genera valores grandes. Proporciones más suaves como 1,333 o 1,5 suelen dar escalas más manejables para espaciado de UI (mientras que 1,618 se usa más a menudo para tamaños de texto, donde el crecimiento rápido es deseable entre encabezados — puedes generar esa progresión aparte con el generador de escala tipográfica para diseño UI).

Casos de uso: cuándo necesitas una escala de espaciado

Una escala de espaciado consistente resuelve problemas muy concretos en proyectos reales: evita que cada desarrollador del equipo invente sus propios valores de margin y padding a ojo; sirve de base objetiva para las decisiones de un design system que debe escalar a decenas de componentes; y facilita enormemente el trabajo de un equipo mixto de diseño y desarrollo, porque ambos hablan el mismo lenguaje de "pasos" en lugar de píxeles sueltos sin relación entre sí. Es especialmente útil combinada con una rejilla de layout — si estás definiendo el espacio (gap) entre columnas de un grid, revisa también el generador de porcentajes para rejillas CSS Grid.

Exportar como Design Tokens

Una escala de espaciado solo es útil si tu equipo la usa de forma consistente — para eso sirven los design tokens: nombres estandarizados (como --space-sm, --space-md, --space-lg) en lugar de valores sueltos repetidos por todo el código. El Modo 2 exporta la escala con nomenclatura numérica o "camiseta" (xs, sm, md, lg...), con la conversión a rem ya calculada — si prefieres convertir manualmente un valor puntual de px a rem, la herramienta hermana es el convertidor de píxeles a REM — y también como fragmento de configuración para Tailwind CSS.

Errores comunes al construir una escala de espaciado

El error más frecuente es elegir una proporción demasiado agresiva (1,618 o más) con demasiados pasos, generando valores finales absurdamente grandes que nadie usará en la práctica — es mejor una proporción moderada con más pasos que una agresiva con pocos. Otro error habitual es mezclar la escala de espaciado con valores "excepción" sin documentar el motivo, lo que rompe la consistencia que la escala pretendía garantizar. Y un tercer error común: definir la escala solo en píxeles sin convertirla también a rem, perdiendo la ventaja de accesibilidad que aporta esa unidad relativa frente a un valor fijo.

Preguntas Frecuentes (FAQ)