El marco en una frase
Un sistema outline con esquinas redondeadas que traduce el rasgo cálido con estándares al plano visual: preciso en construcción, humano en terminación.
Filosofía del sistema
Outline sobre sólido, salvo excepción justificada. El outline transmite ligereza, humildad y modernidad; el sólido transmite peso y afirmación. La marca prioriza outline por default, coherente con el rasgo humildad ejecutiva. El sólido queda reservado para estados activos, hover o énfasis funcional.
Esquinas redondeadas, no angulosas. El corner radius consistente traduce la calidez del sistema y dialoga con la g redondeada del logotipo.
Construcción geométrica precisa, terminación humanista. El ícono se construye sobre grid estricto (rasgo capaz) pero termina con terminaciones redondeadas (rasgo cálido). Esta tensión es exactamente la lectura Reeve: fuerza que no necesita mostrarse.
Densidad visual consistente entre íconos. Un ícono de usuario y un ícono de config deben tener aproximadamente la misma mancha visual. Sin esa disciplina, unos íconos gritan y otros susurran.
Sistema de variantes
Regular (outline). Estado por defecto. Toda UI estándar.
Filled (sólido). Estados activos, hover, seleccionado, notificación con contador. La variante filled se usa para estado, no para decoración.
Duotone. Íconos hero editoriales que necesitan más presencia visual. Línea neutra con relleno naranja. Uso reservado para categorías de servicio, aperturas de sección editorial y momentos ilustrativos.
Uso de color en íconos
El color de un ícono se hereda del contexto donde vive. Los íconos no son planchas de color, son elementos gráficos que refuerzan la lectura tipográfica.
- Sobre fondos claros: negro cálido.
- Sobre fondos oscuros o plancha naranja: blanco cálido.
- Estado activo o hover destacado: naranja primario.
- Duotone editorial: neutro con relleno naranja primario.
El naranja no es color de ícono por default. Su uso está restringido a estado activo, hover destacado y variante duotone. Sin esta restricción, el sistema abusa del naranja y lo diluye como firma visual.
Categorías del set base
El sistema arranca con un set organizado en seis categorías funcionales, que cubren las necesidades de comunicación e interfaz de la primera fase.
Personas y equipo. Perfiles, secciones de talento, casos de éxito, relaciones con clientes.
Comunicación. Contacto, CTA, redes sociales, canales de conversación.
Acción y navegación. Botones, controles, filtros.
Trabajo y proceso. Timelines, procesos, acciones sobre contenido.
Tecnología. Casos técnicos, servicios, blog posts de ingeniería.
Métricas y logros. Casos de éxito, métricas verificables, secciones de resultado.
Nuevos íconos se añaden bajo demanda real, siempre siguiendo la filosofía del sistema.
Aplicación
Cuándo usar íconos. Refuerzo de acción en botones. Wayfinding en navegación. Categorización visual rápida en listas o cards. Empty states donde el ícono comunica antes que el texto.
Cuándo no usar íconos. Como decoración gratuita sin función comunicativa. Como sustituto de texto crítico: un ícono nunca reemplaza una etiqueta accesible, la acompaña. Como firma visual de la marca: ese rol lo ocupa el logotipo.
Regla de acompañamiento textual. En todo contexto UI el ícono lleva label textual o accesible. Nunca ícono solo sin texto asociado, salvo en contextos donde el significado es universalmente reconocido, y aun así con aria-label.
Accesibilidad
Los íconos como elementos visuales cumplen con los criterios WCAG 2.1 nivel AA. Las especificaciones técnicas de tamaño mínimo táctil, contraste no textual y roles ARIA se documentan en el design system operativo.