Elegir los colores correctos para un design system no se reduce a gustos. Implica entender psicología del color, accesibilidad, jerarquía y reglas de uso que mantengan coherente cualquier producto digital, en especial cuando trabajas con una tendencia tan contrastante como el New Brutalism.

¿Por dónde empiezo el proceso de creación de colores?

La base es organizar antes de decidir. Sin una estructura clara, terminas con una paleta bonita que nadie sabe usar.

El flujo recomendado pasa por cinco pasos concretos:

• Organizar los colores en grupos base.
• Crear variaciones de cada base para cubrir backgrounds, bordes y tooltips.
• Definir convenciones de nomenclatura, igual que hicimos con tipografía (H1, H2, body 18).
• Validar accesibilidad y contraste.
• Establecer condiciones y porcentajes de uso.

Este último punto es el que más se olvida. Si entras a platzi.com, verás que predomina el azul oscuro, aunque la marca también es verde. Una regla clara podría ser 70% azul y 30% verde, o 60% azul, 20% verde, 10% blanco. Sin esos porcentajes, llega un diseñador nuevo, hace una página entera en verde y rompe la armonía visual del producto [02:50].

¿Cómo organizo los colores base de un sistema de diseño?

Agrupar los colores desde el inicio te salva de un dolor enorme cuando la marca cambia. Si nombras un token literalmente "verde" o "rosado", el día que la identidad gire vas a tener que renombrar cada referencia del producto [04:20].

Los cuatro grupos base que conviene definir son:

• Primarios: el color principal de marca.
• Secundarios: acompañan al primario.
• Neutros: escalas de grises para shadows y bordes.
• Semánticos: comunican estados al usuario.

¿Qué son los colores semánticos? Son colores con significado fijo para dar feedback. Verde para éxito, rojo para errores, naranja o amarillo para warnings y azul para información [05:30].

¿Qué dice la psicología del color sobre la elección de marca?

Cada color transmite una emoción y eso debería guiar tu decisión, no la moda del momento. El amarillo proyecta optimismo, el azul confianza y el verde tranquilidad. Marcas como Puma usan rojo precisamente por la energía que comunica [06:40].

Antes de fijar un primario, pregúntate qué quieres que sienta tu usuario al ver el producto. Esa respuesta te acerca al color correcto mucho más que cualquier tendencia visual.

¿Cómo creo variaciones accesibles de un color?

Un solo tono no alcanza. El amarillo que funciona como botón principal probablemente sea horrible como background. Por eso necesitas variaciones que cubran distintos usos sin perder la identidad.

Una herramienta muy útil es Color Tool de Material Design, que ya valida qué tonos contrastan con blanco y cuáles con negro. Cada color trae una escala numerada (50, 100, 200, 300, hasta 900), donde los valores bajos suelen contrastar con negro y los altos con blanco [09:10].

Para New Brutalism, donde el contraste es protagonista, esto es oro. Eliges, por ejemplo, un primary 300 que contraste con texto negro para botones llamativos, y usas las variaciones más claras como fondos suaves.

¿Cómo verifico si dos colores contrastan? Usa una herramienta de accesibilidad, ingresa el color de texto y el de fondo, y el test te dice si pasa o falla según los estándares WCAG. Un azul oscuro sobre blanco pasa; uno demasiado claro, no [10:15].

¿Cómo nombro los tokens de color?

La nomenclatura debe ser escalable. Si tu color principal es el tono 300 de la escala, lo llamas primary 300. Las variaciones más oscuras siguen contrastando con negro, las más claras con blanco. Esa lógica permite que cualquier persona del equipo entienda dónde aplicar cada token sin adivinar.

¿Por qué la accesibilidad debe validarse desde el inicio?

Muchos equipos eligen la paleta, crean toda la nomenclatura y al final descubren que el contraste falla. Rehacer todo es costoso. Validar antes ahorra semanas de trabajo.

Las pruebas reales importan: arma una card, un botón, un estado de error, y revisa si la combinación cumple su propósito. No basta con que se vea bien en la paleta aislada [13:00].

¿Cómo defino pautas de uso dentro del Design System?

La documentación es la fuente de verdad. Cuando alguien busca primary 300, debe encontrar:

• Dónde se usa (botones, backgrounds, tooltips).
• Cuándo usarlo y cuándo no.
• Con qué colores combina sin romper accesibilidad.
• En qué porcentaje aparece dentro del producto.

Sin esas reglas, dos diseñadores con la misma paleta pueden producir pantallas que parecen de productos distintos. Con ellas, el sistema mantiene consistencia, coherencia y armonía visual sin importar cuántas personas trabajen en él.

¿Qué color de marca elegirías tú para un proyecto con New Brutalism y por qué? Cuéntamelo en los comentarios.