Clarity Design System

¿Qué es Clarity Design System?

Clarity es un sistema de diseño de código abierto impulsado por VMware, cuyo negocio pertenece hoy a Broadcom. Reúne pautas de experiencia de usuario, un framework HTML y CSS y una biblioteca de componentes Angular, publicados en npm como @clr/ui y @clr/angular con licencia MIT. Se diseñó para interfaces empresariales con muchos datos, como consolas de administración, paneles y herramientas de gestión de la nube, y VMware lo empleó en muchos de sus productos. Una versión independiente del framework basada en web components, Clarity Core, se archivó en 2026, mientras que Clarity Angular sigue manteniéndose en el repositorio de GitHub vmware-clarity/ng-clarity.

Cómo aparece Clarity en un sitio web

Clarity no es un servicio alojado. Los desarrolladores lo instalan como dependencia y distribuyen sus hojas de estilo, componentes e iconos dentro de su propia aplicación. Las herramientas de detección lo reconocen por:

• una hoja de estilo cuya ruta contiene clr-ui;
• el elemento de diseño clr-main-container y el script clr-angular;
• el objeto JavaScript ClarityIcons.

Como Clarity Angular se basa en Angular, estos sitios también muestran Angular.

Cookies y datos personales

Las bibliotecas de Clarity no instalan cookies, no usan localStorage para seguimiento y no envían peticiones a VMware, Broadcom ni a ningún servicio de analítica. Los archivos suelen servirse desde el propio servidor del sitio. Si el desarrollador carga el CSS o los iconos desde una CDN pública como unpkg o jsDelivr, el navegador contacta con esa CDN, que recibe la dirección IP como en cualquier petición web.

RGPD y consentimiento

Clarity no trata datos personales por sí mismo, por lo que no necesita consentimiento ni debe figurar en el banner de cookies. La aplicación construida con él puede, lógicamente, tratar datos (un formulario de acceso, tablas de usuarios) y ese tratamiento se analiza por separado. No hay que confundir este framework con Microsoft Clarity, un servicio de analítica de comportamiento y grabación de sesiones que sí requiere consentimiento y tiene su propia ficha en este catálogo.

Pasos prácticos

• No es necesaria ninguna entrada en el banner para Clarity Design System.
• Alojar el CSS y los iconos en el propio servidor en lugar de cargarlos desde una CDN pública.
• Comprobar que el escáner o el inventario de etiquetas no lo confunde con Microsoft Clarity.
• Tener en cuenta el fin del mantenimiento de Clarity Core si la aplicación usa los web components.