Clarity is an open source design system developed by VMware that combines UX guidelines, design resources, and coding implementations built on Web Components technology. The system is designed to work with any JavaScript framework while maintaining enterprise-grade quality, accessibility standards, and customization capabilities. The repository itself is now archived, as the project has been split into two separate repositories: Clarity Angular for the Angular-specific implementation and Clarity Core for the framework-agnostic Web Components version.
The design system is published as five npm packages that serve different needs within the ecosystem. The @cds/core package contains the foundational Web Components that function across any JavaScript framework, providing the core building blocks for developers. The @cds/angular package offers shims and integrations specifically for Angular environments, while @cds/react provides similar compatibility layers for React applications. Additionally, the @cds/city package includes an open source sans-serif typeface designed specifically for the Clarity system. These modular packages allow developers to adopt only the components and tools relevant to their specific technology stack.
The repository demonstrates significant engagement from the development community, with overlapping contributors shared with major projects including Microsoft's VSCode, TypeScript, and the Rust language project. This cross-pollination with high-profile open source projects indicates the quality and relevance of Clarity's approach to component design and accessibility standards. The system is classified across multiple domains including enterprise UI development, component-based architecture, accessibility, responsive design, and modern CSS utilities, reflecting its comprehensive scope as both a design system and development toolkit.
Clarity emphasizes accessibility as a core principle rather than an afterthought, with accessible components and inclusive design built into the foundation of the system. The use of Web Components as the underlying technology provides framework-agnostic functionality while maintaining the ability to create specialized integrations for popular frameworks like Angular and React. The system targets enterprise applications where scalability, consistency, and accessibility requirements are paramount.
The project maintains comprehensive documentation at clarity.design, providing getting started guides, component documentation, and usage examples. The community contribution process is formalized with contribution guidelines, and the project team actively engages with users through GitHub issues for bug reports and feature requests, GitHub Discussions for general questions and ideas, and StackBlitz templates that allow developers to quickly prototype and test Clarity components. The MIT license ensures the design system remains freely available for both open source and commercial use, supporting VMware's commitment to providing enterprise-grade tooling to the broader development community.
