A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Building a design system from the ground up can be a very exciting challenge! Not only can they dramatically improve an organization’s ability to deliver products faster, more consistently, and more efficiently, they also free up designers and product teams to focus on more important work. So here are some design system tools that would be useful for developers and designers to follow the patterns and be consistent.
Catalog lets you create beautiful living and fully interactive style guides using Markdown and React components.
Nebular is an Angular 8 UI Library with a focus on beautiful design and ability to adapt it to your brand easily. It comes with 4 stunning visual themes, a powerful theming engine with runtime theme switching and support of custom css properties mode. Nebular is based on Eva Design System specifications.
Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.
A design system with values of Nature and Determinacy for better user experience of enterprise applications.
An open-source design system for building scalable, responsive websites and applications.
A react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.
Build consistent, themeable React UIs based on design system constraints and design tokens.
Bedrock is a static site generator that enables teams to efficiently work together, document HTML/CSS components, and provide a single source of truth for what an application should look like. It is primarily meant to create prototypes for web applications, but can be used to generate any website.
Hologram is a Ruby gem that parses comments in your CSS and helps you turn them into a beautiful style guide.
A tool to make creating and maintaining style guides easy.
A starting point for crafting living style guides.
A tool for building website UI toolkits and style guides. Generate a style guide from your toolkit code. Write documentation in markdown to make your toolkit easy for other developers to use.
Easily create front-end style guides with Markdown and Sass/SCSS.