Color Palette

Prev Next

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:

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

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

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

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

Both approaches produce the same result.

Using the palette in React

Import the palette directly from Fuselage:

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

You can then reference tokens programmatically:

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.

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