El espaciado y la elevación son dos pilares de cualquier design system sólido. Si trabajas en diseño de producto, entender cómo distribuir el espacio entre componentes y cómo jerarquizar elementos en el eje Z te permite crear interfaces consistentes, escalables y alineadas con tu equipo de desarrollo.

¿Cómo definir el espaciado a nivel de componentes y de layout?

Existen dos niveles de espaciado que conviene diferenciar desde el inicio de tu proyecto. El primero es el espaciado a nivel de componentes, pensado para distancias internas más pequeñas. Si arrancas con la regla de 4, una buena progresión sería 4, 8, 12 y 16 píxeles.

El segundo es el espaciado a nivel de layout, que organiza la distribución general de la página. Aquí las medidas crecen: hablamos de 32, 36 o 40 píxeles, porque necesitas separar bloques completos de contenido.

¿Cuál es la diferencia entre espaciado de componentes y de layout? El de componentes se aplica dentro de cards, botones o formularios con valores pequeños (4 a 16 px). El de layout separa secciones completas de la página con valores más grandes (32 a 40 px o más).

La clave está en definir pautas claras: si tienes 10 medidas en tu sistema, decide cuáles van para componentes y cuáles para layout. Esa pauta puede pulirse con el tiempo según las necesidades del proyecto.

¿Por qué los breakpoints deben acordarse con desarrollo?

Los breakpoints para mobile, tablet y desktop no son una decisión que tomes solo desde diseño. Un design system involucra a varios equipos: diseño, desarrollo y producto, y todos deben hablar el mismo idioma de medidas.

Imagina que entras a una startup con ocho años de historia que ya trabaja con Tailwind CSS. Ese framework tiene sus propios breakpoints establecidos y el equipo de desarrollo ya construye sobre ellos [3:00]. Lo lógico es que tú, desde diseño, te ajustes a esas medidas en lugar de imponer otras.

Si el proyecto es nuevo, conversa con desarrollo antes de fijar nada. Pregunta qué framework van a usar y acuerden juntos las medidas. La idea es que haya comunicación constante, no decisiones en paralelo que después choquen.

¿Qué consideraciones prácticas debes aplicar al espaciar?

Hay varias reglas que te ayudan a tomar mejores decisiones cuando estás distribuyendo elementos en pantalla.

• Menos espacio entre componentes del mismo tipo. Si en una app de restaurantes tienes cards de categorías de comida, todas deben ir juntas con un espaciado consistente. No tiene sentido poner pollo, luego un hueco enorme, y después pastas. Lo que pertenece a la misma jerarquía se agrupa visualmente.
• Las medidas no están escritas en piedra. Si necesitas centrar un texto verticalmente dentro de una card, céntralo y olvídate de la medida exacta arriba o abajo. La intención manda sobre la regla.
• Cada plataforma usa su unidad. iOS trabaja con points, Android con densidades y web con píxeles. Tu sistema debe contemplar estas diferencias [4:30].

¿Puedo romper las reglas de espaciado de mi design system? Sí, cuando la intención del diseño lo justifique. Por ejemplo, al centrar contenido dentro de un contenedor, prima el resultado visual sobre el valor numérico exacto.

Tener mucho espacio disponible en desktop tampoco es excusa para separar elementos arbitrariamente. Usa ese espacio con intención, no por inercia.

¿Qué es la elevación y cómo se representa con sombras?

La elevación es la jerarquía de los elementos en el eje Z, es decir, la distancia que percibes desde la pantalla hacia ti como usuario. No es algo físico, pero sí visual.

La forma más común de representarla es con sombras. ¿Te ha pasado que pasas el mouse sobre una card y ella parece levantarse ligeramente? Esa pequeña sombra genera la ilusión de que el elemento se realza, y comunica que es interactivo: puedes hacer clic o ejecutar una acción [5:30].

¿Para qué sirve la elevación en una interfaz? Para indicar jerarquía visual y comunicar interactividad. Una card con sombra sugiere que está "por encima" del fondo y que el usuario puede actuar sobre ella.

Las sombras bien aplicadas refuerzan la claridad del producto y guían al usuario sin necesidad de instrucciones explícitas. ¿Cómo estás manejando hoy el espaciado y la elevación en tus proyectos? Cuéntame en los comentarios qué pautas usas.