---
title: "Rocket Chat Colour Palette Guide"
slug: "color-palette"
description: "Learn how to use Rocket Chat’s colour palette. Build consistent, secure, and branded collaboration experiences."
updated: 2026-02-13T13:54:25Z
published: 2026-02-13T13:54:25Z
canonical: "developer.rocket.chat/color-palette"
---

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

# Color Palette

The fuselage provides a structured palette system that enables consistent, scalable color usage across components. Instead of applying raw color values, developers use **design tokens**, which act as semantic references for colors.

Using tokens ensures:

- Consistency across the UI
- Easier theme customization
- Reduced maintenance when colors change
- Better alignment with Rocket.Chat’s design standards

Tokens are applied at the component level, allowing updates without requiring changes throughout the entire codebase.

## How to use the palette system

### Using tokens in components

Apply surface tokens with the `bg` prop and font tokens with the `color` prop:

```typescript
<Box bg='status-background-info' color='status-font-on-info' />
```

#### Prefix shortcut

Fuselage automatically applies the correct prefixes for surface (`surface-`) and font (`font-`) tokens. This allows you to use simplified token names:

```typescript
<Box bg='neutral' color='default' />
```

If preferred, you can still use the full token names:

```typescript
<Box bg='surface-neutral' color='font-default' />
```

Both approaches produce the same result.

---

### Using the palette in React

Import the palette directly from Fuselage:

```typescript
import { Palette } from '@rocket.chat/fuselage';
```

You can then reference tokens programmatically:

```typescript
const surfaceHover = Palette.surface['surface-hover'];
const strokeLight = Palette.stroke['stroke-extra-light'];
```

This is useful for:

- dynamic styling
- custom components
- conditional UI states

Fuselage automatically adapts these values based on the active theme.

---

### Using tokens in `.scss files`

When working inside Fuselage `.scss` files, you can import the color tokens and apply them to your styles.

```scss
@use '/packages/fuselage/src/styles/colors.scss'; // use relative path

.example {
  color: colors.font(titles-labels);
  background-color: colors.surface(neutral);
  border: 1px solid colors.stroke(extra-light);
}
```

Leveraging the shared `colors.scss` tokens helps maintain visual consistency and simplifies future updates.