Rocket.Chat project cover.


Open-Source Team Communication.

Published in 2018


  • Interface Design

  • Design System

  • Illustration

  • Front-end Development


  • Website

  • Web App

  • Desktop App

  • iOS App

  • Android App

Rocket.Chat is free, unlimited and open-source, replacing email and Slack as the ultimate team chat software solution. But what's it like to design such a powerful open-source platform?

Rocket.Chat on desktop and mobile.

The app.

Open-source community.

With over 20k stars on GitHub, more than 600 contributors and over 13k commits, Rocket.Chat is the largest and most active open-source team chat community. View on GitHub.

Rocket.Chat illustration.

Native typography.

The design of every Rocket.Chat platform was created with native system fonts. Created with legibility at the core, these fonts will dynamically adapt to the platform's specificity for unmatched performance.

Rocket.Chat typography system.

Font style.

Used in 6 different sizes and 4 different weights — Regular, Medium, Semibold and Bold. Font colour will vary depending on the used background — Dark, Light or Color.

Rocket.Chat typography.
Rocket.Chat typography colours.

Colour palette.

With space as the backdrop, planets and stars bring this universe to life. 
A mixture of strong and vibrant colours to contrast with the darkness of space.

Rocket.Chat colours pallete.


A vast and diverse constellation of icons, carefully crafted to add visual context and enhance usability. Created in 3 different sizes to satisfy the most varied sections of the app.

Rocket.Chat icons.
Rocket.Chat illustration.

Buttons and Dropdown.

We believe in a well-structured component-based system that can effortlessly bridge the design and development process. A single source of truth that serves as the backbone of Rocket.Chat.

Rocket.Chat buttons.
Rocket.Chat inputs.
Rocket.Chat checkboxes and radio buttons.

The sidebar.

Constructed with smaller independent components that together form a versatile, ever-changing navigation bar that is paramount to the platform's navigation.

Rocket.Chat sidebar.

Endless components.

Small pieces of a very complex puzzle, each with their own specificity, with various perks and permutations, come together to form Rocket.Chat.

Rocket.Chat components.


Fully featured and fully customisable! The end product of our design process is, in fact, the foundation of the limitless possibilities of its open-source nature.

Rocket.Chat screen on desktop.

Live chat and video calls.

LiveChat allows you to add real-time chat widgets to any website or mobile app and get more value from your team chat. Replace other systems and use one communication platform to save time and money. Create a user support helpdesk, answer customer queries and convert leads.

Rocket. Chat's one-to-one or one-to-many high-quality video calling feature is simple, reliable, and works on all platforms. Improve your team's communication with live, face-to-face video chat.

Rocket.Chat chat.
Rocket.Chat incoming call.
Rocket.Chat call on desktop.
Rocket.Chat banner.


Customise your platform to tailor its exact look & feel by adding or removing features and selecting your own integrations, plugins and themes.

Rocket.Chat customisation on mobile and desktop.

More customisation.

Change the font, its size, colour and weight. Change the background colour or add your unique family of icons. Endless customisation possibilities to make Rocket.Chat on your own.

Rocket.Chat customisations.

The website.

The gateway to a fantastic open-source community that comes together for the future of team communication.

Rocket.Chat website illustration.
Rocket.Chat website screens.
Rocket.Chat grid system.


In productivity-led areas of the website, we allow the user to opt for their viewing preferences.

Rocket.Chat illustration.

What are you looking for?

Please choose an option below

Hate contact forms?