---
title: "Cuándo se amortiza un sistema de diseño"
description: "De qué se compone un sistema de diseño, cómo la comprobación del build hace que siga cumpliéndose y a partir de qué tamaño devuelve el tiempo."
url: https://torn.studio/es/ideas/cuando-un-sistema-de-diseno-se-amortiza
locale: es
published: 2026-08-27
---

# Cuándo se amortiza un sistema de diseño

> **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.

**Sigue leyendo**

- [¿Cuánto tarda una web construida con IA?](https://torn.studio/es/ideas/cuanto-tarda-una-web-con-ia)
- [Mantener la calidad cuando la IA escribe el código](https://torn.studio/es/ideas/calidad-cuando-la-ia-escribe-el-codigo)
- [Un sistema de diseño que aguanta en el tiempo](https://torn.studio/es/servicios/diseno-y-marca)

## 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í.