Construir un design system

Por qué un sistema, no páginas

El error clásico del principiante — humano o asistido por IA — consiste en dibujar páginas una a una. La página de inicio es bonita, la página de precios es bonita, pero puestas una al lado de la otra, no parecen pertenecer al mismo producto: los azules difieren ligeramente, los espaciados cambian, los botones no tienen el mismo redondeo. El resultado parece amateur, aunque cada página aislada esté lograda.

Un buen diseño no es una acumulación de páginas bonitas, es un sistema coherente: un pequeño conjunto de decisiones (colores, tipografías, espaciados, radios, sombras) tomadas una vez y reutilizadas en todas partes. La coherencia tiene un efecto psicológico medible: inspira confianza. El usuario siente — sin poder verbalizarlo — que un producto coherente es un producto cuidado, y por tanto fiable. Para una app de meditación que pide una suscripción, esa confianza es literalmente dinero.

Con la IA, el sistema se vuelve aún más crucial: cada nueva conversación parte de cero. Si no aportas tus decisiones visuales, el modelo improvisará valores diferentes en cada generación. El design system es tu memoria externa: lo pegas al principio de cada prompt, y todas las pantallas generadas hablan el mismo idioma.

Los design tokens: la gramática de tu interfaz

En concreto, un design system empieza por los design tokens: variables con nombre que portan cada decisión visual. En lugar de escribir #4A7C6F en cuarenta sitios, defines --color-primary: #4A7C6F una sola vez y referencias la variable en todas partes. El día que el cliente quiera un verde más profundo, cambias una línea y toda la interfaz sigue.

Los tokens cubren típicamente cinco familias: los colores, la tipografía (familias, tamaños, grosores, alturas de línea), los espaciados, los radios de borde y las sombras. En CSS, todo eso cabe en un bloque :root de unas cincuenta líneas. Es ese bloque el que vas a pedir a la IA que genere — y el que luego reinyectarás en cada prompt del proyecto.

:root {
  /* Colores — roles, no tonos */
  --color-primary: #4A7C6F;      /* verde salvia: acciones principales */
  --color-primary-hover: #3D685D;
  --color-accent: #E8A87C;       /* melocotón suave: destacados puntuales */
  --color-surface: #FAF8F5;      /* fondo crema cálido */
  --color-surface-raised: #FFFFFF;
  --color-text: #2D3A36;         /* contraste 11.2:1 sobre surface */
  --color-text-muted: #5C6B66;   /* contraste 5.1:1 — AA ok */
  --color-success: #4A7C5F;
  --color-error: #B5544D;

  /* Tipografía — escala 1.25 (tercera mayor) */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --leading-tight: 1.2;
  --leading-body: 1.6;

  /* Espaciados — base 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radios y sombras */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 2px 12px rgba(45, 58, 54, 0.06);
  --shadow-raised: 0 8px 28px rgba(45, 58, 54, 0.10);
}

Colores: roles, no tonos

Fíjate en cómo están nombrados los tokens de color de arriba: primary, surface, text-muted — roles funcionales, nunca tonos (--verde-1, --beige). El matiz es capital. Un rol describe el uso: « el color de las acciones principales », « el fondo de las tarjetas elevadas ». Si cambias de paleta, los nombres siguen siendo válidos. Y sobre todo, la IA entiende los roles: « usa --color-accent únicamente para los destacados puntuales » es una instrucción que sabrá respetar pantalla tras pantalla.

En cuanto a la composición, la regla empírica 60-30-10 sigue siendo una excelente salvaguarda: alrededor del 60 % de la pantalla en color de superficie, 30 % en colores de texto y de estructura, y solo un 10 % para el color de acento. Es esa dosificación la que hace un acento impactante — un color usado en todas partes ya no acentúa nada. El resultado « IA genérica » suele saturar la pantalla de color; tu sistema, en cambio, impone la contención.

Crea un design system para una app de meditación, ambiente calmado y premium (briefing: generosidad de espacio, suavidad de color, tipografía nítida):
- 8 colores con roles funcionales (primary, primary-hover, accent, surface, surface-raised, text, text-muted, error) en variables CSS
- contrastes accesibles: AA mínimo para todo texto, indica el ratio de cada combinación texto/fondo
- escala tipográfica en ratio 1.25, de small a h1, con alturas de línea
- escala de espaciado en base 4 px (4 → 96)
- 3 radios de borde y 2 sombras discretas
Entrega todo en un bloque :root { } CSS comentado, y explica en 3 frases las decisiones de color.

Contraste y accesibilidad: innegociable

Hablemos del tema que el resultado « bonito » hace olvidar demasiado a menudo: la accesibilidad. El contraste entre un texto y su fondo se mide con un ratio que va de 1:1 (invisible) a 21:1 (negro sobre blanco). Las WCAG definen dos umbrales: AA exige 4,5:1 para el texto corriente (3:1 para los títulos grandes), y AAA sube a 7:1. AA es tu mínimo absoluto — no un objetivo, un suelo.

¿Por qué ser intransigente? Primero porque aproximadamente una de cada doce personas percibe mal ciertos colores, y porque todo el mundo lee algún día su teléfono a pleno sol. Después porque los ambientes « suaves y relajantes » — precisamente lo que pide nuestro cliente — empujan de forma natural hacia grises claros sobre fondo crema que caen por debajo de los umbrales. Un diseño premium que no es legible no es premium: es un defecto de fabricación. Pide sistemáticamente a la IA que indique los ratios de contraste de cada combinación texto/fondo, y haz verificar los casos límite.

La tipografía: una escala, no tamaños al azar

La tipografía carga ella sola con la mitad de la impresión « premium ». Dos decisiones lo estructuran todo: la elección de las familias (una para los títulos, una para el texto corriente — rara vez más de dos) y la escala de tamaños. En lugar de elegir cada tamaño a ojo, se derivan todos los tamaños de un ratio constante: cada nivel es 1,25 veces más grande que el anterior, por ejemplo. Ese ratio crea una armonía matemática que el ojo percibe sin entenderla — exactamente como los intervalos en música.

Un ratio moderado (1,2 – 1,25) da una jerarquía suave, adecuada para interfaces densas; un ratio fuerte (1,333 – 1,5) crea títulos espectaculares, perfectos para una landing page donde la hero debe imponerse. Para Sereno, un 1,25 con una serif elegante en los títulos (calidez, humanidad) y una sans-serif neutra en el cuerpo (legibilidad) traduce bien el « calma premium ». No olvides las alturas de línea: 1,5 a 1,6 para el cuerpo de texto, más apretado (1,1 – 1,2) para los títulos grandes, si no flotan.

El espaciado: el ritmo invisible

El espaciado es el parámetro más invisible y más determinante de una interfaz. Una página « que respira » y una página « apretada » suelen usar los mismos componentes — solo difieren los espacios. El principio: una escala fija en base 4 px (4, 8, 12, 16, 24, 32, 48, 64, 96) de la que nunca se sale. Nada de márgenes de 17 px o de 23 px: cada espacio es un múltiplo elegido de la escala.

Esta restricción produce el ritmo vertical: la regularidad de los intervalos crea una retícula invisible que calma el ojo. También explota la ley de proximidad: los elementos cercanos se perciben como relacionados, los elementos alejados como distintos. Un título debe por tanto estar más cerca del párrafo que introduce que de la sección que cierra — regla simple, violada por la mitad de las páginas web. Por último, sé generoso entre las secciones: 96 px de separación en desktop no es vacío, es puntuación. Lo genérico aprieta; lo premium respira.

Del token a las pantallas: hacer vivir el sistema

Una vez definidos tus tokens, el sistema sigue una lógica de irrigación: los tokens alimentan componentes (botones, tarjetas, campos de formulario), y los componentes ensamblan pantallas. En cada nueva generación, pide explícitamente a la IA que reutilice las variables existentes en lugar de inventar valores: « usa exclusivamente los tokens proporcionados; si una necesidad no está cubierta, propón un nuevo token en lugar de un valor en duro ».

flowchart TD
  T["Tokens: colores + tipografía + espaciados"] --> CP["Componentes: botones, tarjetas, formularios"]
  CP --> E1["Landing page"]
  CP --> E2["Página de precios"]
  CP --> E3["Pantallas siguientes"]

Esta última consigna — proponer un token en lugar de un valor en duro — es valiosa: hace crecer tu sistema de forma controlada. A lo largo del proyecto, verás aparecer necesidades que la versión inicial no cubría (un color de borde, un espaciado intermedio). Cada adición pasa por ti, recibe un nombre, se documenta y se une al archivo de referencia. El sistema sigue siendo la única fuente de verdad.