Sistemas de diseño para startups: cómo construí el mío al revés

Construí mi sistema de diseño al revés. La mayoría de los consejos dicen “espere a tener product-market fit”. Yo comencé con CSS custom properties desde el primer día porque un error de CLS en mi sitio personal me enseñó el costo de omitir los tokens: un Cumulative Layout Shift de 0,493 que requirió dos sesiones de depuración para rastrear hasta un valor de espaciado inconsistente. La corrección tomó 15 minutos. La investigación tomó 3 horas. Los tokens habrían prevenido el error por completo.¹

TL;DR

Los sistemas de diseño resuelven problemas de coordinación. Los desarrolladores individuales con un solo proyecto no tienen problemas de coordinación entre personas, pero sí tienen problemas de coordinación entre su yo pasado y su yo futuro. Después de construir el sistema de tokens de diseño para blakecrosley.com — 10 tokens de color, 13 pasos de escala tipográfica, 8 valores de espaciado — he aprendido que la secuencia correcta es: tokens de inmediato (día uno), patrones cuando se repiten tres veces, sistema formal nunca (para proyectos individuales). La inversión en tokens se paga sola la primera vez que una inconsistencia de espaciado causa un error de diseño.

Mi sistema de diseño: tokens y nada más

La no-paleta de colores

Mi sitio completo opera con 10 CSS custom properties sin colores de marca:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

Cuatro niveles de transparencia (100%, 65%, 40%, 10%) sostienen toda la jerarquía visual. Cada nivel de texto cumple con el contraste WCAG AAA contra el fondo #000000. Sin degradados, sin colores semánticos, sin alternancia de modo oscuro/claro. La restricción produce un sistema coherente que una biblioteca de componentes no podría mejorar.²

La decisión de omitir los colores de marca fue una elección de diseño, no técnica. Durante mis 16 estudios de diseño de producto, noté que los productos que más respetaba (Linear, Vercel, Raycast) usaban paletas restringidas donde la tipografía hacía el trabajo de jerarquía.

El sistema de espaciado de 8 puntos

Cada valor de espaciado se deriva de una base de 8 puntos:

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

Sin valores arbitrarios. El sistema contiene ocho pasos. Si un diseño requiere un espaciado que no existe en el sistema, el diseño está mal, no el sistema.

El error de --spacing-2xs

Aprendí la regla por las malas. Usé --spacing-2xs para un margin-top de subtítulo. El token no existía en mi definición de :root. Las CSS custom properties fallan silenciosamente — el navegador aplicó cero margen en lugar de lanzar un error. El subtítulo se colapsó contra el título, el diseño se desplazó durante la carga, y mi puntuación de Cumulative Layout Shift saltó a 0,493.³

La ruta de depuración: Lighthouse marcó el CLS. DevTools identificó el elemento que se desplazaba. La inspección de los estilos computados reveló margin-top: 0 donde esperaba 4px. La búsqueda en la hoja de estilos de --spacing-2xs mostró un uso y cero definiciones.

La corrección: cambiar --spacing-2xs por --spacing-xs. La corrección más amplia: adherencia estricta al sistema de tokens sin excepciones.

La escala tipográfica

13 pasos desde 12px hasta 80px, usando fuentes del sistema:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:      0.75rem;   /* 12px */
  --font-size-sm:      0.875rem;  /* 14px */
  --font-size-base:    1rem;      /* 16px */
  --font-size-lg:      1.125rem;  /* 18px */
  --font-size-xl:      1.3125rem; /* 21px */
  --font-size-2xl:     1.5625rem; /* 25px */
  --font-size-3xl:     1.875rem;  /* 30px */
  --font-size-4xl:     2.25rem;   /* 36px */
  --font-size-5xl:     2.7rem;    /* 43.2px */
  --font-size-6xl:     3.25rem;   /* 52px */
  --font-size-7xl:     3.875rem;  /* 62px */
  --font-size-display: 5rem;      /* 80px */
}

Las fuentes del sistema eliminan por completo la latencia de carga de fuentes. Sin FOIT (Flash of Invisible Text), sin FOUT (Flash of Unstyled Text), cero solicitudes de red para fuentes. Esta elección contribuye a mi puntuación de rendimiento de 100/100 en Lighthouse.⁴

El problema del momento adecuado

Demasiado temprano: la trampa de la abstracción prematura

Las startups en etapa semilla enfrentan una incertidumbre extrema sobre en qué se convertirá el producto. Un sistema de diseño codifica suposiciones sobre patrones de interacción, jerarquía de componentes y lenguaje visual. Cuando el producto pivotea, el sistema de diseño se convierte en un pasivo que resiste el cambio.⁵

Un equipo de tres ingenieros y un diseñador no necesita una biblioteca de componentes con documentación, versionado y una instancia de Storybook. La sobrecarga de coordinación excede el problema de coordinación.

Pero los tokens son diferentes. Los tokens no son abstracciones — son valores. Un token de color no impone una estructura de componentes. Un token de espaciado no restringe los patrones de interacción. Los tokens sobreviven a los pivotes porque operan por debajo de la capa de componentes.

Demasiado tarde: la espiral de deuda de diseño

Las empresas en Serie B con 30 ingenieros y sin patrones de diseño compartidos enfrentan el problema opuesto. Cada equipo de funcionalidad inventa sus propios estilos de botones, diseños de formularios y valores de espaciado. El producto se siente como tres aplicaciones diferentes cosidas entre sí.⁶

Observo el mismo patrón a menor escala en mis propios proyectos. Cuando inicio un proyecto nuevo sin copiar mis tokens de :root, las inconsistencias aparecen dentro de la primera semana. Los tokens son un seguro económico contra una espiral de deuda que se vuelve costosa de revertir.

El marco de inversión progresiva

Etapa 1: solo tokens (día uno, cualquier tamaño de equipo)

Defina y comparta únicamente los valores fundamentales. Mi implementación:

41 tokens en total. Cero componentes. Cero sitio de documentación. El objetivo es prevenir la divergencia a nivel de valores mientras se preserva la máxima flexibilidad para la experimentación.⁷

Etapa 2: extracción de patrones (cuando los patrones se repiten 3 veces)

Cuando el mismo elemento de interfaz aparece en tres funcionalidades distintas, extraiga el patrón. Mi sitio tiene patrones extraídos para: - Diseños de tarjetas (tarjetas de proyectos, tarjetas de blog, tarjetas sociales): padding consistente, radio de borde, estados hover - Subrayados de navegación (enlaces de navegación, breadcrumbs): transición scaleX(0) → scaleX(1) en hover - Encabezado con glassmorphism: backdrop-filter: blur(20px) con border-bottom

Cada patrón existe porque construí lo mismo tres veces y noté la duplicación. Extraigo patrones del código en producción en lugar de diseñarlos por adelantado. Los patrones de producción codifican requisitos reales.⁸

Etapa 3: sistema formal (más de 25 ingenieros, nunca para proyectos individuales)

A escala, el problema de coordinación justifica bibliotecas de componentes, sincronización con Figma, procesos de contribución y registros de cambios versionados. No he alcanzado esta etapa con ningún proyecto personal y no espero hacerlo. Para desarrolladores individuales, los tokens más los patrones extraídos proporcionan suficiente estructura sin la sobrecarga de mantenimiento de un sistema formal.

Lo que omito por completo

Sitio de documentación

Los sitios de documentación de sistemas de diseño orientados al público consumen tiempo de ingeniería que produce cero valor para el usuario en proyectos individuales. Mi “documentación” es el bloque :root en critical.css. Cualquier desarrollador (o agente de IA) que lea el archivo comprende el sistema de inmediato.

Soporte para múltiples frameworks

Mi sitio usa CSS puro. Sin componentes de React, sin wrappers de Vue, sin Web Components. Los tokens funcionan en cualquier framework porque las CSS custom properties son agnósticas al framework. La capa de abstracción es CSS en sí mismo.

Teatro de accesibilidad prematuro

La accesibilidad importa — mi sitio logra contraste WCAG AAA en cada nivel de texto. Pero construí primero el sistema de contraste (tokens con relaciones conocidas) y verifiqué el cumplimiento después. Comenzar con tokens que tienen accesibilidad incorporada (cada nivel de texto supera una relación de contraste de 7:1) es más efectivo que auditar elecciones de color arbitrarias después del hecho.⁹

Conclusiones clave

Para desarrolladores individuales: - Defina CSS custom properties para color, tipografía, espaciado y transiciones desde el día uno; la inversión de 41 tokens previene errores e inconsistencias que cuestan horas de depuración después - Omita las bibliotecas de componentes, los sitios de documentación y Storybook; para proyectos individuales, la sobrecarga de mantenimiento excede el beneficio de coordinación - Extraiga patrones del código en producción cuando el mismo elemento aparece en tres lugares; la extracción prematura desperdicia esfuerzo en patrones que pueden no sobrevivir a la siguiente iteración

Para líderes de diseño en startups: - Comience con tokens antes del product-market fit; los tokens sobreviven a los pivotes porque operan por debajo de la capa de componentes - Resista el sistema formal hasta que más de 25 ingenieros creen un problema de coordinación genuino; la formalización antes de ese umbral genera una sobrecarga de mantenimiento que ralentiza la iteración

Referencias