vue-design-system
[](https://travis-ci.org/arielsalminen/vue-design-system/)   [](https://gitter.im/vueds/Lobby) # Vue Design System **Vue Design System** is an open source tool for building UI Design Systems with [Vue.js](https://vuejs.org). It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development. The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist), [Webpack](https://webpack.js.org), and [Theo](https://github.com/salesforce-ux/theo) and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript. **Made by [@arielsalminen](https://twitter.com/arielsalminen) and other contributors. See also [the official website](https://vueds.com) of Vue Design System and [read my article](https://arielsalminen.com/2018/vue-design-system/) on the processes and workflow I use to get started with a new design system project.** [](https://vueds.com/) ## Features - A set of interconnected patterns & practices for you and your team. - A well thought-out terminology, naming conventions, and hierarchy. - Get an automated overview of how your design system progresses over time. - Global design tokens in YAML format that you can use inside any component. - Automatic generation of living, user editable documentation. - Easily export and use your Design System as an NPM dependency in another Vue.js or Nuxt.js project. - Create a token, an element, or a pattern, and it’s immediately available across all components. - Pre-configured Prettier setup for auto-formatting code on both save and before commit. - Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box. - Documentation and the app logic are separated, so you can have public docs while the app itself stays private. - [And more…](https://vueds.com/) ## Documentation - **[Getting Started](https://github.com/arielsalminen/vue-design-system/wiki/getting-started): How to install and run Vue Design System.** - [Terminology](https://github.com/arielsalminen/vue-design-system/wiki/terminology): Introduction to the system concepts and its hierarchy. - [Naming of Things](https://github.com/arielsalminen/vue-design-system/wiki/naming-of-Things): Naming is hard, so it’s good to have clear guidelines. - [Directory Structure](https://github.com/arielsalminen/vue-design-system/wiki/directory-structure): What goes where and why. - [Working with the System](https://github.com/arielsalminen/vue-design-system/wiki/working-with-the-system): Concrete examples on how to work with `Tokens`, `Elements` , `Patterns` and `Templates`. - [Editing Living Documentation](https://github.com/arielsalminen/vue-design-system/wiki/editing-living-documentation): How to customize the living system documentation. - [Spacing](https://github.com/arielsalminen/vue-design-system/wiki/spacing): A framework for creating a predictable and harmonious spacing. - [Component Status](https://github.com/arielsalminen/vue-design-system/wiki/Component-Status): Clear labels that reflect the state of completion. - [Component QA](https://github.com/arielsalminen/vue-design-system/wiki/Component-QA): How to review new components and keep the quality high. - [Contributing](https://github.com/arielsalminen/vue-design-system/blob/master/CONTRIBUTING.md): A set of guidelines for contributing to the system. - [Code of Conduct](https://github.com/arielsalminen/vue-design-system/blob/master/CODE_OF_CONDUCT.md): By participating you agree to abide by its terms. - [Frequently Asked Questions](<https://github.com/arielsalminen/vue-design-system/wiki/frequently-asked-questions-(FAQ)>): How to use icons, how to use font-face, etc. ## Examples - **[Official example](https://vueds.com/example)** - [Using Vue Design System as NPM dependency on Vue.js project](https://github.com/arielsalminen/vue-design-system-example) - [Using Vue Design System as NPM Dependency on Nuxt.js project](https://github.com/arielsalminen/nuxt-design-system) - [Using Vue Design System as NPM Dependency on a static website](https://github.com/arielsalminen/vue-design-system-example-website) ## Roadmap - See [Roadmap tag](https://github.com/arielsalminen/vue-design-system/issues?q=is%3Aissue+is%3Aopen+label%3Aroadmap) in the issues. ## Changelog - `3.5.7` is the latest release. - See [Releases page](https://github.com/arielsalminen/vue-design-system/releases) for the full changelog. ## Need more help? About to get started with a new design system? I’m an independent designer and developer, specialized in helping companies to build [design systems](https://vueds.com). I also conduct [design system workshops](https://arielsalminen.com/2018/vue-design-system/) and do consulting. [Let’s talk!](https://twitter.com/arielsalminen) ## Authors and License [Ariel Salminen](https://arie.ls), [Artem Sapegin](http://sapegin.me), [Rafael Escala](https://github.com/rafaesc), [react-styleguidist contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors), [vue-styleguidist contributors](https://github.com/vue-styleguidist/vue-styleguidist/graphs/contributors), [Vue.js contributors](https://github.com/vuejs/vue/graphs/contributors), [vue-webpack-boilerplate contributors](https://github.com/vuejs-templates/webpack/graphs/contributors), [Theo contributors](https://github.com/salesforce-ux/theo/graphs/contributors), and [Polaris contributors](https://github.com/Shopify/polaris). Licensed under the [MIT license](https://github.com/arielsalminen/vue-design-system/blob/master/LICENSE).