Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Colores, sombras y tipografía en sistemas de diseño

Un Sistema de Diseño es una colección de elementos reutilizables, pautas, estilos y principios que se utilizan para construir y mantener productos digitales de manera coherente.
Es un manual de instrucciones para crear productos digitales, donde se definen todos los elementos visuales y funcionales que se utilizarán. Este «manual» incluye aspectos como los colores que deben usarse, la tipografía, el estilo de los botones y otros componentes visuales, además de reglas sobre cómo deben combinarse.
El objetivo principal es que todo el equipo de diseño use las mismas herramientas y siga las mismas reglas, sin importar quién esté trabajando en él o qué parte del producto estén creando. Si quieres informarte acerca del resto de beneficios te recomendamos leer Sistemas de diseño, ¿qué son y por qué son tan importantes?
1. Colores
Paleta de colores
La paleta de colores es un conjunto de colores que se utilizará en todo el diseño. Para definirla, te aconsejamos elegir:
- Colores primarios: colores principales que representarán la marca o producto, y suelen ser los más utilizados.

- Colores secundarios: colores complementarios que se usan para dar variedad y evitar que todo se vea igual.
- Colores neutros: como blancos, grises y negros, que sirven para equilibrar visualmente el diseño.
Colores de estado
Los colores de estado son críticos para comunicar de manera visual los mensajes y acciones dentro de una interfaz. Cada color tiene una connotación universal que guía la interpretación del usuario:
- Rojo: errores o advertencias críticas.
- Verde: confirmaciones o acciones completadas
- Amarillo: advertencias o precauciones
Ver también: El impacto de los colores en la UX
Accesibilidad
Para garantizar la accesibilidad en un diseño, es importante que el contraste entre el texto y el fondo sea adecuado.
Por ejemplo, si usas texto azul sobre un fondo morado, puede resultar difícil de leer porque los colores son demasiado similares. Sin embargo, un texto oscuro, como morado sobre un fondo claro, proporcionará un buen contraste, asegurando que sea fácil de leer para todos los usuarios, incluidas las personas con dificultades visuales.

Una herramienta muy útil para verificar el nivel de contraste entre colores y asegurar la accesibilidad es el Contrast Checker de WebAIM. Esta web permite evaluar el contraste exacto entre dos colores y comprobar si cumplen con los estándares establecidos por las Pautas de Accesibilidad para el Contenido en la Web (WCAG). El ratio de contraste mínimo recomendado es de 4.5:1 para texto normal y 3:1 para texto grande.
Siguiendo con el ejemplo anterior de UX Learn, si introducimos los valores hexadecimales del color morado y el blanco, obtenemos un contraste de 15.44:1. Este valor indica que, además de ser legible, cumple con las WCAG.

2. Sombras y efectos
Las sombras añaden profundidad y ayudan a definir qué elementos son interactivos o están más cercanos al usuario en términos de interacción. Por ejemplo, un botón con una sombra sutil aparece elevado y, por lo tanto, clicable. Este uso visual guía a los usuarios intuitivamente sin necesidad de explicaciones adicionales.
Los efectos visuales, como desenfoques, brillos y transparencias, pueden mejorar el diseño de una manera sutil pero efectiva. Por ejemplo:
- El desenfoque puede usarse en fondos para hacer que el contenido principal destaque más, sin distraer al usuario.
- Un brillo ligero en un botón o icono le da mayor visibilidad, haciéndolo parecer más importante sin recargar la interfaz.
- Las transparencias permiten que los elementos se mezclen mejor en la pantalla, manteniendo un diseño limpio y moderno sin perder claridad. Ver también: Glassmorphism: una tendencia de diseño UX
En este blog nos gusta que todas las imágenes aparezcan en blanco y negro pero, a la hora de seleccionar el post que quieres leer, este muestra sus colores reales para destacar sobre resto.

4. Tipografía
En UX, la selección de fuentes es un aspecto clave para garantizar una experiencia de usuario fluida y coherente. El objetivo principal es asegurar que el texto sea legible en todo tipo de dispositivos. Por lo tanto, establecer el tamaño y espaciado correctos conseguirá que la lectura sea cómoda.
En términos de accesibilidad, es imprescindible asegurar un buen contraste y una jerarquía visual clara, para que todos los usuarios, independientemente de sus capacidades, puedan interactuar sin dificultades.
Si te interesa profundizar en estos aspectos, te invitamos a leer este artículo: Consejos para un sistema tipográfico efectivo.
Adoptar estas estrategias facilita la colaboración entre equipos y asegura que el producto evolucione de manera coherente, sin perder calidad visual ni funcional. Te invitamos a seguir estas recomendaciones y descubrir el impacto positivo que tendrán en tus proyectos UX.
Foto de Dulcey Lima en Unsplash