Colors

Color tokens are the primitive values in our design system, represented by context names.

Introduction

Cal.com is designed to be a grayscale brand to emphasise on boldness and professionalism. Some inspiration for the black and white design was drawn from Uber. Hence, colors should be sparingly used.

Base

Our color set is based on the TailwindCSS colors, with some modifications. It's especially important that our specific grayscale colors are used.

Aliases

We sometimes use class name aliases to reference particular colors, with two sets of aliases for light and dark modes.

Light Mode

Dark Mode