Un sistema de diseño es el conjunto de valores y componentes que se deciden antes de diseñar las pantallas: qué colores, qué sombras, qué tamaños y qué botones hay. Al hacer una pantalla no se elige el valor que uno quiera: se elige uno de los que ya están en el sistema. Sus partes y sus ventajas están en el índice del módulo.

Con millones de colores y cualquier número de píxeles, cada decisión es una tortura (¿12px o 13px? ¿sombra con un 10% o un 15% de opacidad?) y cada pantalla acaba con valores distintos. La solución es decidir una vez una lista corta de valores y usar siempre esos.

En el ejemplo mal cada tarjeta tiene su azul, su redondeo, su sombra, sus márgenes y su tamaño de letra. En el bien, todo sale del mismo sistema.

Mal	Bien

Qué se fija en el sistema:

• Colores: las gamas y para qué se usa cada una.
• Sombras: unos pocos niveles de elevación.
• Tamaños: márgenes, padding, tamaños de fuente y border-radius.
• Componentes: los botones y sus variantes.

Y lo mismo con el peso de la fuente, la altura de línea, el ancho de los bordes o la opacidad: cualquier cosa sobre la que haya que decidir un valor.

Con el sistema, elegir es descartar: si para un icono solo hay 12px, 16px, 24px y 32px, se prueba el que parece mejor y los de al lado, y los malos se ven enseguida.

Cómo se lleva todo esto a CSS con variables está en Sistema de diseño: Tokens.

Los colores de pueden definir en CSS con formato RGB o HSL. Mas información de HSL en Descripción del modelo de color HSL (Hue, Saturation, Ligthness). Y aquí una herramienta para transformar de RGB a HSL: Color Converter

Una cosa son los colores y otra los colores semánticos:

• Colores: Las gamas que tienes, con el nombre de cómo son: grises, blancos, rojos, verdes, azules y amarillos.
• Colores semánticos: Con el nombre de para qué se usan: principal, alternativo y peligroso. Cada uno es una gama de colores.

Los colores, con los de Tailwind 4 (los blancos no existen en Tailwind):

En el generador: Grises, Blancos, Rojos, Naranjas, Verdes, Azules, Amarillos.

Los colores semánticos:

En el generador: Principal, Alternativo, Peligroso.

Gracias a los colores semánticos, si mañana el color principal pasa a ser verde solo cambia a qué gama apunta principal, no cada sitio donde se usa. Cómo se llevan a CSS está en Tokens de sistema.

Otros colores semánticos habituales:

• Éxito: Verde. La operación ha terminado bien: «Pedido guardado».
• Aviso: Amarillo. Algo que conviene revisar pero no impide seguir: «La sesión caduca en 5 minutos».
• Información: Azul. Mensajes neutros: «Hay una nueva versión».
• Error: Rojo, como peligroso, pero para un estado y no una acción: un campo mal rellenado.
• Deshabilitado: Gris claro. Un botón que no se puede pulsar.
• Texto: Gris oscuro para el texto normal y gris medio para el secundario.
• Fondo: Blancos, para el fondo de la página y de las tarjetas.

Necesitas muchos colores, pero no para hacer cosas así:

sino para hacer cosas así:

La gama de blancos y grises la usas para hacer las cosas muy claras u oscuras. La gama del color principal obviamente la usas para casi todo, mientras que la gama del color alternativo la usas para destacar algo. Por último, los colores rojo, verde, amarillo, etc, son para cosas concretas que necesitan ese color. Por ejemplo para avisar del borrado de algo usar el rojo.

Para crear variaciones de un color usa:

• Data Viz Color Palette Generator (for Charts & Dashboards)
• Color Scheme Generator: Mi generador
• Palettte App
• colorxcolor:Permite ajustar las curvas de saturación y luminosidad.
• Paletas de colores de Tailwind CSS
  • Rojos
  • Azules
  • Verdes
  • Rosas
  • Amarillos
  • Morados
  • Gris pizarra

Para crear el color alternativo usa:

• Color Scheme Designer 3

Tailwind ha cambiado su paleta en cada versión mayor. Estos son los tonos 100 a 900 de cada color en cada versión, para comparar sus gráficas de saturación y luminosidad.

Grises

Grises con matiz (nuevos en Tailwind 4)

Rojos, naranjas y amarillos

Verdes

Azules

Morados y rosas

Las sombras dicen a qué altura está cada elemento (la luz viene del cielo). En el sistema se definen unos pocos niveles de elevación y cada tipo de elemento usa siempre el suyo.

• Ejemplo de sombras que cada vez están más arriba.

.square {
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 6px;

}

<div style="display: flex;gap: 40px;padding: 30px;background-color: #E1E6E6;">
    <div class="square" style="box-shadow: 0  1px  3px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0  4px  6px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0  5px 15px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0 10px 24px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0 15px 35px  rgb(0 0 0 / 20%);"></div>
</div> 

Al igual que en los colores nos ceñimos a un conjunto limitado de colores, se debe hacer lo mismo con los tamaños de márgenes, fuentes, etc.

En el ejemplo mal cada separación tiene un valor distinto (10, 11, 13, 15, 17, 19, 21, 22 y 25 píxeles) y tan parecidos que no se distinguen: parecen descuidos, no decisiones. En el bien solo hay tres valores: 8px entre lo que va junto, 12px entre un título y lo suyo y 24px entre bloques.

Mal	Bien

Veamos algunos ejemplos.

Padding o Margin:

0px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px

Tamaño de fuente:

12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 64px

Border radius:

0px, 2px, 4px, 6px, 8px, 12px, 16px

Obviamente se puede elegir los tamaños que se deseen pero se tiene que tener en cuenta que a mayor tamaño , mas debe ser el incremento entre uno y otro.

Entre dos valores seguidos tiene que haber una diferencia que se vea: entre 12px y 13px no la hay, así que 13px no está en la lista.

Los botones también se predefinen: no se diseña un botón para cada pantalla, se elige uno de los que tiene el sistema.

Los botones tienen 2 características:

• Importancia: Es si queremos o no que el usuario pulse ahí. A mayor importancia es que queremos que mas veces pulse en ese botón.
• Función: Es para decir al usuario que tipo de acción está realizando. Por ejemplo , la función "Peligrosa" es roja y nos quiere decir que tengamos cuidado al pulsar ahí.

	Importancia
Función	Primaria	Secundaria	Terciaria
Normal
Alternativa
Peligrosa

Veamos algunos ejemplos de varios botones juntos:

• Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal
• Cancelar pago: Terciaria Normal . Nunca queremos que pulse ahí y es una acción normal

• Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal
• Vaciar carrito: Terciaria Peligrosa . Nunca queremos que pulse ahí y ademas es peligroso porque se queda sin los productos del carrito

• Actualizar a la nueva versión de Windows: Primaria Peligrosa . Queremos que pulse ahí y es una acción peligrosa
• Mantener tu versión de Windows: Secundaria Normal . No queremos que pulse ahí y es una acción normal

• Donar 20€ a Wikipedia: Primaria Normal . Queremos que pulse ahí y es una acción normal
• Donar 5€ a Wikipedia: Secundaria Normal . No queremos que pulse ahí y es una acción normal

• Página de Login

Los 2 botones son iguales, cuando realmente queremos que pulsen "Entrar", así que uno debería ser primario y el otro secundario.

• Página de cookies de una web.

Ahora si que está claro cual quiere que pulsemos pero el botón de "Más información" nunca interesa que lo aprieten, así que debería ser terciario. Por otro lado ¿Realmente les interesa que pulsemos en el de "Rechazar y Subscribirme por 0,75€ Por mes"?

• Abrir un enlace en WhatsApp.

Aquí está bien porque hace uso de la función peligrosa, además que no quiere influir sobre que botón deberías pulsar.

• Iniciar un trámite en una administración pública.

Le da la misma importancia a seguir con el trámite que cancelarlo.

• Diálogo

Tienen la misma función el "Si" y "No", cuando el "Si" debería ser peligroso ( ya que es borrar el trámite).

Busca 2 Webs e indica cuál es el color principal y cuál el color alternativo.

Haz 2 capturas de pantalla del uso del color para cada web

Busca una Web y indica los tipos de botones que tienen según los tipos que hemos visto en el tema.

Haz capturas de pantalla para cada uno de los tipos que haya

Inventa ventanas con botones e indica el texto de cada botón, la importancia y la función

Elige una web y, con las herramientas de desarrollador del navegador, saca su sistema de diseño: qué colores, tamaños de fuente, márgenes, border-radius y sombras usa. ¿Están limitados a unos pocos valores o cada sitio usa el que quiere?