# Colors

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

<figure><img src="https://2607815040-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpmUOqZjfGqNkiPmqgnMv%2Fuploads%2FXjbjIBZQngIhV20xwf6e%2Fimage.png?alt=media&#x26;token=c418f2b7-80f0-432e-b959-4f95166aac7f" alt=""><figcaption></figcaption></figure>

## Aliases

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

### Light Mode

<figure><img src="https://2607815040-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpmUOqZjfGqNkiPmqgnMv%2Fuploads%2FHaxMZigScsdCPgjm5bco%2Fimage.png?alt=media&#x26;token=4b526fee-b689-4430-b48a-e75af5a384da" alt=""><figcaption></figcaption></figure>

### Dark Mode

<figure><img src="https://2607815040-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpmUOqZjfGqNkiPmqgnMv%2Fuploads%2FH7W7MRivC1fUJATUEPt7%2Fimage.png?alt=media&#x26;token=f2d07190-c094-4c8f-ae74-1d39730faaa4" alt=""><figcaption></figcaption></figure>