VMware's open source Clarity design system is available on GitHub now Credit: Thinkstock VMware has released at GitHub its open source Clarity design system to create web applications based on the Angular 2 framework. Clarity packages user-experience guidelines, design patterns, and view-layer UI components. This packaging means that 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,” said Jehad Affoneh, a staff engineer at VMware and Clarity project lead. “For example, using a data grid—one of the most complicated components in a UI—becomes easy because Clarity has already provided one, built on top of Angular 2,” he said. Clarity originated from VMware’s desire to build an internal design system to unify the company’s product portfolio. It relies on reusable components to accelerate development and has been used dozens of product teams at the company, Affoneh said. “We expect that as an open source project Clarity, will be rapidly developed based on the input and contributions of its developer and user community,” Affoneh said. Clarity is offered under an MIT license. VMware has published Clarity as three NPM packages: clarity-icons, featuring custom element icons clarity-ui, with static styles for building HTML components clarity-angular, featuring Angular 2 components and dependent on clarity-ui A sketch template is part of Clarity, featuring a library of components and relying on the Metropolis open source font. To start a new project, VMware recommends cloning the Clarity seed project integrated with clarity-ui and clarity-angular. Web DevelopmentJavaScriptSoftware DevelopmentOpen Source