# 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

#

April 5, 2026
Less than 1 minute

On This Page

- Human Connection - Styleguide
- - Documentation
  - How to use it
  - Extending existing components
  - Creating new components
  - Resources

## Human Connection - Styleguide

This Design System provides our team with essential components and guidelines to achieve a consistent user experience accross our applications.

### Documentation

If you are searching for more technical information for the UI & API, you can find it in the HC Documentation.

### How to use it

Use the system's components to solve common UI problems like layout, typography, displaying data or data input.

When no component fits your case, either extend an existing one or create a new one.

### Extending existing components

When extending components, make sure not to break existing features. If you really need to, it might be better to create a new one and mark the existing component as `deprecated`

### Creating new components

Keep a few things in mind when creating a new component:

- Keep it simple
- Keep it extendable
- Use Design Tokens wherever needed
- Document it

### Resources

If you would like to become a component superhero feel free to dive into the Vuejs Component Style Guide.