Human-Connection Styleguide

CION is a Design System build primary for Vue 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: https://styleguide.human-connection.org

Landing page demo: https://cion.visualjerk.de

Integrate it in your application: Quick Start

Project setup

yarn install

Developing

Compiles and hot-reloads living styleguide

yarn dev

Building

Living styleguide

Compiles living styleguide to ./docs

yarn build

Library

Compiles design system as a library to ./dist

yarn build:lib

Helper

Serve living styleguide locally

yarn serve

Lints and fixes files

yarn lint