Fuselage Design System

Rocket.Chat’s design system aims to provide a clear direction to build the user interface. It is a set of purpose-driven components and principles that offer adaptability and accessibility. This section guides you through the design system details to help you understand and follow them, if you are interested in contributing to the open-source project.

Monorepo

This document gives you an introduction to Rocket.Chat’s Fuselage Design System.

Testing Fuselage components

Check out the testing techniques to ensure a reliable functionality of the design components.

Conventions

The guidelines outlined here help you write code that is easy to read and maintain.

Componentization

Explore the various components and guidelines for using them to create a functional UI.

Accessibility

Here you can find an overview of accessibility tips to create an inclusive digital experience.

Color palette

Learn how to use the color palette so you can implement a consistent interface.

Third-party libraries

This document lists a few third-party libraries you can integrate to craft an optimal UI.

Contributing to Fuselage

We welcome collaboration from new and seasoned developers to shape Rocket.Chat’s user interfaces.