CION - Design system boilerplate for Vue.js

CION is a design system build primarily for Vue.js applications. You can use it as a starting point for building your own design system.

The system utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.

Living styleguide demo:

Landing page demo:

Project setup

yarn install


Compiles and hot-reloads living styleguide

yarn dev


Living styleguide

Compiles living styleguide to ./docs

yarn build


Compiles design system as a library to ./dist

yarn build:lib


Serve living styleguide locally

yarn serve

Lints and fixes files

yarn lint