Cuándo se amortiza un sistema de diseño
Torn Studio es una agencia de IA que construye sitios web, productos digitales y contenido. Poco convencional.
Respuesta breve
Un sistema de diseño se compone de tokens para color, tipografía y espaciado, de componentes construidos con ellos y de una comprobación en el build que rechaza valores sueltos. Según nuestra experiencia, se amortiza hacia la décima página o al segundo cambio de marca.
Un sistema de diseño suele describirse como una colección de componentes. La parte más decisiva es la regla sobre dónde pueden vivir los valores, porque de ella depende que el sistema siga cumpliéndose dentro de medio año.
De qué se compone realmente el sistema
Cuatro capas, y la última es la que distingue un sistema de una carpeta con archivos.
- Tokens: cada color, espaciado, radio y tamaño tipográfico definido en un solo sitio
- Primitivas: botones, tarjetas, títulos y campos construidos con tokens
- Bloques: secciones terminadas con las que se arman las páginas
- Una comprobación en el build que frena los valores sueltos en el código de página
La comprobación es lo que hace que el sistema se cumpla
Un sistema que solo existe como documento se desmonta, porque teclear un color siempre es más rápido que buscar el token correcto. Esta web ejecuta esa comprobación: un paso del build lee el código y lo tumba en el primer valor hex o de píxel suelto fuera del sistema de diseño. A partir de ahí la duda deja de aparecer.
El contraste se calcula antes de usar el color
Cada par de colores del sistema se verifica contra WCAG AA, que exige un mínimo de 4,5:1 para texto corrido. Calculado a nivel de token, ninguna página futura puede volverse ilegible, porque la combinación que lo provocaría no existe.
El tamaño a partir del cual compensa
Por debajo de cinco páginas un sistema cuesta más de lo que devuelve. En diez páginas queda equilibrado. Con 30 páginas y nueve idiomas es la diferencia entre un día de trabajo y una semana cuando algo debe cambiar en todas partes, que es la cuenta que hicimos para esta web.
Las pantallas pequeñas forman parte del sistema
Cada componente se diseña primero para 320 píxeles y crece hacia arriba. Las pruebas recorren cada tipo de página en nueve anchos desde 320 píxeles, y una página que genera scroll horizontal tumba el build. Sale más barato que reparar un diseño roto en móvil después del lanzamiento.
Evidencia
En qué se apoya este artículo — una medición nuestra, una fuente fechada o una decisión y lo que costó.
- Decisión
El contraste es una puerta de build: una prueba recalcula en cada cambio cada par permitido de texto y superficie a partir del archivo de tokens y detiene el build por debajo de WCAG AA 4,5:1.
Lo que costó: Un color que se ve mejor pero mide peor no puede publicarse, de modo que parte de la paleta queda cerrada por la aritmética, y cada cambio en la escala cuesta una nueva ejecución y a menudo un reajuste de los tokens vecinos.
Preguntas frecuentes
- ¿Necesita un sistema de diseño una web pequeña?
- Por debajo de cinco páginas bastan unas convenciones. A partir de diez páginas el sistema devuelve el tiempo que costó, sobre todo si la web va a crecer o a publicarse en varios idiomas.
- ¿En qué se diferencia de un manual de marca?
- El manual describe cómo debe verse. El sistema es el código que lo consigue. Un PDF nunca puede tumbar un build, y es justo esa función la que mantiene la coherencia visual con los años.
- ¿Cómo se trata el modo oscuro?
- Cada token lleva un valor para el modo claro y otro para el oscuro. El contraste se calcula en ambos, así que un tema nunca puede quedar peor que el otro.
- ¿De quién es el sistema de diseño tras el lanzamiento?
- Tuyo, y vive en tu repositorio. Está construido para que otra desarrolladora pueda continuar: los valores en un sitio, los componentes documentados y la comprobación como parte del build.
- ¿Cada cuánto hay que rehacer un sistema de diseño?
- Rara vez entero. Los tokens cambian cuando cambia la marca y los componentes se añaden sobre la marcha. Un sistema que hay que reescribir cada dos años estaba hecho para una sola campaña.
- ¿Se puede introducir un sistema en una web existente?
- Sí, un tipo de página cada vez. Empieza por los tokens y los componentes más usados, activa la comprobación en los directorios ya convertidos y amplía desde ahí.
Siguientes pasos
Sigue leyendo
- ¿Cuánto cuesta una web hecha con IA?Lo que cuesta una web hecha con IA en 2026, por qué el precio de agencia se mantuvo mientras caían los tiempos de construcción y adónde fueron las horas.
- ¿Agencia de IA o agencia web tradicional?Los dos modelos difieren en dónde va el tiempo: la coordinación entre especialistas o el estándar mismo. Plazos, rondas de revisión y cuándo encaja cada uno.
- Bots y agentes de IA: así leen tu webEntrenamiento, índice de búsqueda y peticiones de usuario: tres bots con tres reglas distintas. Así gobiernas lo que las empresas de IA hacen en tu web en 2026.
Profundizar