---
title: "Rocket Chat Fuselage Design System"
slug: "fuselage-design-system"
description: "Learn about Rocket Chat’s Fuselage design system. Build secure, consistent UI components to support collaboration apps."
updated: 2026-02-13T13:57:33Z
published: 2026-02-13T13:57:38Z
canonical: "developer.rocket.chat/fuselage-design-system"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.rocket.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Fuselage Design System

Fuselage is Rocket.Chat’s design system for building consistent, accessible, and scalable user interfaces. It provides reusable components, guidelines, and tooling to help teams design and develop features efficiently.

Use this section to explore the system, understand its conventions, and contribute to its evolution.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Monorepo.svg)

**Monorepo**

Explore the Fuselage monorepo to understand how the [design system](https://developer.rocket.chat/v1/docs/monorepo) is structured and maintained.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Testing Fuselage components.svg)

**Testing Fuselage components**

Understand recommended [testing techniques](/v1/docs/testing-fuselage-components) to ensure component reliability.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Conventions.svg)

**Conventions**

Follow established [guidelines](/v1/docs/conventions) to write clean, maintainable, and predictable UI code.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Componentization.svg)

**Componentization**

Learn how [components](/v1/docs/componentization) are designed, organized, and used to build functional interfaces.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Accessibility.svg)

**Accessibility**

Review [accessibility](/v1/docs/accessibility) principles and techniques for creating inclusive user experiences.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Color palette.svg)

**Color palette**

Use the defined [color tokens](https://developer.rocket.chat/v1/docs/color-palette) to implement consistent visual styling across interfaces.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Third-party libraries.svg)

**Third-party libraries**

This document lists a few [third-party libraries](/v1/docs/third-party-libraries) you can integrate to craft an optimal UI.

Discover supported [external libraries](https://developer.rocket.chat/v1/docs/third-party-libraries) that integrate well with Fuselage.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Contributing to Fuselage.svg)

**Contributing to Fuselage**

Help improve the design system by [contributing](https://developer.rocket.chat/v1/docs/contributing-to-fuselage) components, fixes, and enhancements.