Human-Connection Styleguide

December 10, 2025Less than 1 minute

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

Compiles and hot-reloads living styleguide

yarn dev

Compiles living styleguide to ./docs

yarn build

Compiles design system as a library to ./dist

yarn build:lib

yarn serve

yarn lint