An open source Clarity design system was released by VMware at GitHub to produce web applications constructed from the Angular 2 framework. Clarity offers design patterns, view-layer UI components, and user-experience guidelines.
Jehad Affoneh, a staff engineer at VMware said, “They(the developers) can now shift their focus from building UI components to building the application itself, giving them more time and energy to craft workflows and experiences unique to their product.”
“For example, using a data grid — one of the most complicated components in a UI— becomes easy because Clarity has already provided one, on top of Angular 2,” he added.
VMware distributed three NPM packages under Clarity:
1.) clarity-icons, featuring custom element icons,
2.) clarity-ui, with static styles for building HTML components and
3.) clarity-angular, featuring Angular 2 components and dependent on clarity-ui.
Clarity also has a sketch template featuring a series of components and counting on the Metropolis open source font. To begin a new project, VMware suggests copying the Clarity seed project intertwined with the clarity-ui and clarity-angular.
VMWare’s Clarity aims to build an internal design system to unify the company’s product portfolio and relies on reusable components to accelerate development. Affoneh and the rest of VMware expect rapid development based on the input of its developer and user community due to its nature as an open source project.