# Human-Connection Styleguide | Ocelot.Social Documentation
Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

# Human-Connection Styleguide

April 5, 2026
Less than 1 minute

On This Page

- Project setup
- Developing
- Building
- - Living styleguide
  - Library
- Helper
- - Serve living styleguide locally
  - Lints and fixes files

# 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

Screenshot

## 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