Skip to main content Skip to navigation Skip to search
Clarity Design System

Enterprise-Ready Consumer-Simple

Clarity is a scalable, customizable, open source design system bolstered by the people that build with it, the people we build it for, and the community that makes us who we are.

Get Started using Clarity
A man riding a singled wheeled skateboard surrounded by Clarity components and tools.

Clarity is all about people, just like you

Clarity is all about people, like designers

Design with confidence

Our toolkit is Figma. Every component, pattern, and guideline we ship is rooted in real customer interactions. As a result, you can rely on Clarity for 30+ components and over 200 icons so you can focus on product-specific user problems.

Get Started Browse our Figma libraries
A confident woman looking at charts with arms folded.

Clarity is all about people, like developers

Build framework agnostic

The first folx that built Clarity from scratch were a scrappy team of developers, designers, and content creators. Clarity has continued to grow on that strong start by supporting the big three: Angular, React and Vue. Our latest Core components provide support for them all. Clarity provides code examples and detailed API documentation that guide you as you build your next application.

Get started with Angular components Get started with Core components Explore our Github
A hand holding icons for Angualr, Vue and React web frameworks.

Clarity is all about people, like all of our users

Backed by performant components

When Clarity customers speak, we listen. One of our most requested components, datagrid, can support more than a dozen features and handle thousands of data entries. Let us build performant components so you can focus on building applications.

Browse Angular components Browse Core components
An image showing the datagrid component, a checkbox form control component and the filter icon component.

Accessible applications start here

A man looking at a monitor with the Clarity logo on it and icons depicting no sight, no mouse, hearing and cognitive thinkers.

We’ve integrated accessibility into the design and development of the Clarity assets. Accessibility is a priority, and we work closely with a dedicated accessibility team following the WCAG 2.1 AA guidelines. Use Clarity to leverage all the built-in accessibility features and follow our accessibility guidelines to make your application not only compliant but loved by users of all abilities.

View our VPAT

Together, we are the Clarity community

Join us and we can build better products together

Great design systems have a great community behind it. We open sourced Clarity early in our journey because we believe in the importance of community. It is foundational to our story. We are open about our roadmap and priorities. We are proud of what we have running under the hood. Check out our Github and take a look at our priority list, our code, our documentation, and join our community.

Join the community A man with an orange hat orgainzing items on the left side with a network of faces in the middle and a woman with a backpack on a moped with an item in her outstretched arm.

2M+

downloads since the beginning of Clarity

2700+

Github repositories depending on Clarity

300+

releases for new features and continuous improvements

Clarity firmly believes that the best products are built by those who form a rich, varied community. We invite all forms of feedback or ideas that allow us, together, to create better experiences for all users.