Cómo nombrar colores, componentes y funciones en un sistema de diseño
Los nombres de colores, componentes y funciones deben ser breves, claros y coherentes para evitar confusiones y facilitar su uso, sin depender de rasgos visuales que puedan cambiar.
Resumen del artículo publicado en smashingmagazine.com y recomendado por Digital Skills Institute el 1 de noviembre de 2026.
Poner nombre a colores, componentes de interfaz, funciones o variables puede generar confusión entre quienes diseñan, desarrollan y utilizan un producto. Un término demasiado genérico no aclara a qué se refiere; uno demasiado específico dificulta su reutilización. Para evitarlo, los nombres deben tener una estructura lógica, ser breves y comprensibles para el equipo, y no depender de propiedades visuales que puedan cambiar.
Hay recursos que ayudan a resolver problemas concretos. Classnames agrupa palabras útiles para nombrar clases HTML, propiedades CSS y funciones de JavaScript según ideas como el comportamiento, el orden o la relación entre elementos. Para los colores existe un repertorio de 30.355 nombres únicos, acompañado de un selector y un buscador. Component Gallery reúne ejemplos de más de 50 componentes de interfaz procedentes de sistemas de diseño reales e indica las distintas denominaciones que recibe cada uno.
En los sistemas de diseño que abarcan varios productos, la organización de los nombres cobra especial importancia. Intuit desarrolló una clasificación flexible de tokens para productos como Mailchimp y QuickBooks. El sistema de Vodafone UK organiza sus variables en cuatro colecciones conectadas, desde la marca y los valores básicos hasta los significados funcionales y las páginas: así, el propio nombre permite identificar qué representa un token y dónde se utiliza. Una guía para nombrar tokens permite definir estructuras por componentes, categorías, estados y funciones; también propone un inventario filtrable para mantenerlos localizados.
Las funciones nuevas plantean otro problema: si su nombre no ayuda a descubrirlas o entenderlas, puede reducirse su uso. Conviene describir el resultado que ofrecen con palabras próximas a las que emplean los usuarios. Para encontrarlas, se les puede pedir que expliquen la función con sus propios términos y utilizar después ese vocabulario.
