Awesome Open Source
Awesome Open Source


Clarity Design System

Build Website

Project Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, Angular components, and Web Components. This repository includes everything you need to build, customize, test, and deploy Clarity. For complete documentation, visit the Clarity website.

Getting Started

Clarity is published as five npm packages:

  • npm version core Contains the Web Components that work in any JavaScript framework.
  • npm version cds angular Contains shims for core usage in Angular environment
  • npm version ui Contains the static styles for building HTML components.
  • npm version clr angular Contains the Angular components. This package depends on @clr/ui for styles.
  • npm version clarity city Our open source sans-serif typeface.

Installing Clarity


For documentation on the Clarity Design System, including a list of components and example usage, see our website.


The Clarity project team welcomes contributions from the community. For more detailed information, see


  • The Clarity Design System is licensed under the MIT license.
  • The font is licensed under the Open Font License (OFL).


If you find a bug or want to request a new feature, please open a GitHub issue.

Include a link to the reproduction scenario you created by forking one of the Clarity Stackblitz Templates for the version you are using at Clarity StackBlitz templates.


The team supports up to 2 versions behind the latest one.

For questions, ideas, or just reaching out to the team feel free to open a discussion in our GitHub Disscussion section.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,988
css (7,431
angular (1,322
web (1,044
ui (1,043
components (305
accessibility (186
web-components (145
ux (140
design-system (126
component-library (83
angular-components (52