FlowConsent
How it worksPricingComparisonsBlogDocumentationLog inTry FlowConsent
Try FlowConsent
Frameworks

Clarity Design System

AnalyticsOfficial website

Clarity Design System is an open source design system created by VMware (now part of Broadcom), combining UX guidelines, an HTML/CSS framework and Angular components. It is mostly used to build enterprise web applications and admin consoles. On a website it is only front-end code bundled with the site: it sets no cookies, sends no data to a third party and needs no consent. It is unrelated to Microsoft Clarity, the session recording tool.

Block Clarity Design System until consentScan my site
Overview

What does Clarity Design System do?

What is Clarity Design System?

Clarity is an open source design system started by VMware, whose business is now part of Broadcom. It brings together UX guidelines, an HTML and CSS framework and a library of Angular components, published on npm as @clr/ui and @clr/angular under the MIT licence. It was built for data-heavy enterprise interfaces such as admin consoles, dashboards and cloud management tools, and VMware used it in many of its own products. A framework-agnostic version based on web components, Clarity Core, was archived in 2026, while Clarity Angular continues to be maintained in the vmware-clarity/ng-clarity repository on GitHub.

How Clarity appears on a website

Clarity is not a hosted service. Developers install it as a dependency and ship its stylesheets, components and icons as part of their own application bundle. Detection tools recognise it from:

  • a stylesheet whose path contains clr-ui;
  • the clr-main-container layout element and the clr-angular script;
  • the ClarityIcons JavaScript object.

Because Clarity Angular is built on Angular, sites using it also show Angular.

Cookies and personal data

The Clarity libraries do not set cookies, do not use localStorage for tracking and do not send requests to VMware, Broadcom or any analytics endpoint. Files are normally served from the site's own server. If a developer chooses to load the CSS or icons from a public CDN such as unpkg or jsDelivr, the visitor's browser contacts that CDN, which receives the IP address like any web request.

GDPR and consent

Clarity does not process personal data by itself, so it needs no consent and does not need to appear in the cookie banner. The application built with it may of course process personal data, for example a login form or user tables, and that processing has to be assessed on its own merits. Do not confuse this framework with Microsoft Clarity, a behavioural analytics and session recording service that does require consent and has its own entry in this catalogue.

Practical steps

  • No banner entry is needed for Clarity Design System.
  • Self-host the CSS and icon files rather than loading them from a public CDN.
  • Check that your scanner or tag inventory does not mix it up with Microsoft Clarity.
  • Track the end of maintenance of Clarity Core if your application uses the web components.
Compliance

Clarity Design System and the GDPR

Legal basis
Not applicable (no personal data processed by the library); site operation rests on legitimate interest (Art. 6(1)(f) GDPR)
Risk level
low
Applicable regulations
GDPR, ePrivacy Directive

Impact assessment (DPIA)

No DPIA is needed for Clarity Design System itself, as it is a front-end component library that processes no personal data. Any DPIA should focus on the application built with it and the data that application handles.

Sample text for your banner

This site's interface is built with Clarity Design System, an open source component library. It runs in your browser, sets no cookies and sends no data to third parties, so no consent is needed for it.
Cookies and trackers

What Clarity Design System sets and contacts

Tracking method
Front-end UI framework detected through its CSS (clr-ui), Angular components (clr-main-container, clr-angular) and the ClarityIcons JavaScript global; no tracking
Server location
Self-hosted
Cookieless mode available
Yes
Questions

Frequently asked questions about Clarity Design System

Can't find your question? Write to us, we answer fast.

Is Clarity Design System the same as Microsoft Clarity?

No. Clarity Design System is an open source UI framework from VMware. Microsoft Clarity is a free analytics tool that records sessions and heatmaps, which requires consent and has a separate entry.

Does Clarity Design System set cookies?

No. It only provides CSS, Angular components and icons that run in the browser. It stores nothing for tracking and makes no calls to VMware or Broadcom.

Do I need to list Clarity in my cookie banner?

No. A front-end library that processes no personal data does not require consent or a banner entry. List it only if your own code adds trackers around it.

Is Clarity still maintained?

Clarity Angular is still maintained on GitHub in vmware-clarity/ng-clarity and published as @clr/angular. Clarity Core, the web components edition, was archived in 2026.

Who publishes Clarity Design System?

It was created and open-sourced by VMware, whose business is now owned by Broadcom. The code is released under the MIT licence.

Same category

More services: Frameworks

See the whole category

Headless UI

Headless UI is a foundational web service that powers critical website functions and digital experiences. It provides reliable infrastructure, seamless integration capabilities, and consistent performance across all devices and browsers. Headless UI supports modern development practices and scales with growing business needs. With a focus on stability and compatibility, Headless UI ensures your website delivers a smooth, uninterrupted experience to every visitor and search engine crawler.

Frameworks

Base UI

Base UI is a JavaScript framework designed for building fast, interactive, and scalable web applications. It provides component-based architecture, reactive data binding, and efficient DOM rendering. Base UI supports server-side rendering, static site generation, and progressive web apps. With a rich ecosystem of plugins and developer tools, Base UI accelerates frontend development and delivers exceptional user experiences with optimized performance and SEO-friendly output.

Frameworks

PSPad

PSPad is a foundational web service that powers critical website functions and digital experiences. It provides reliable infrastructure, seamless integration capabilities, and consistent performance across all devices and browsers. PSPad supports modern development practices and scales with growing business needs. With a focus on stability and compatibility, PSPad ensures your website delivers a smooth, uninterrupted experience to every visitor and search engine crawler.

Frameworks

Karma

Karma is a web technology service that provides essential functionality for websites and digital platforms. It delivers core capabilities that support site operations, content delivery, and user experience optimization. Karma integrates seamlessly with modern web architectures, ensuring reliable performance and compatibility across browsers and devices. Trusted by businesses worldwide, Karma helps organizations maintain robust websites that meet user expectations and technical requirements.

Frameworks

Lua

Lua is a web technology service that provides essential functionality for websites and digital platforms. It delivers core capabilities that support site operations, content delivery, and user experience optimization. Lua integrates seamlessly with modern web architectures, ensuring reliable performance and compatibility across browsers and devices. Trusted by businesses worldwide, Lua helps organizations maintain robust websites that meet user expectations and technical requirements.

Frameworks

Draft.js

Draft.js is a foundational web service that powers critical website functions and digital experiences. It provides reliable infrastructure, seamless integration capabilities, and consistent performance across all devices and browsers. Draft.js supports modern development practices and scales with growing business needs. With a focus on stability and compatibility, Draft.js ensures your website delivers a smooth, uninterrupted experience to every visitor and search engine crawler.

Frameworks

Make your site compliant today.

Free up to 25,000 sessions a month. No credit card, no commitment.

Create my bannerScan my site