Eliminando el "Frankenstein Visual" con Mobile-First

Cuando cada pantalla introduce un nuevo radio de borde, una sombra distinta o tipografías improvisadas, nace el Frankenstein visual: la app “funciona”, pero transmite desorden. Eso aumenta la carga cognitiva: el usuario no sabe qué es clickeable, qué es decorativo o qué es error.

Mobile-first no es “solo móvil”

Es priorizar restricciones reales primero: viewport estrecho, interacción táctil, rendimiento. Luego se amplía con media queries y composición, no al revés (desktop-first suele dejar hacks en CSS para encoger lo que ya se infló).

/* Base = móvil: una columna, espaciado compacto */
.card {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .card {
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
  }
}

Design tokens: el contrato visual

Los tokens son variables semánticas (color.border.subtle, radius.button) que el equipo reutiliza en código y en Figma. Así se evita que cada desarrollador invente un gris nuevo.