# Welcome

Here you should find everything you need regarding Cal.com's design system and branding guidelines.

<figure><img src="/files/l2X4RRYQFE9j2MfIrauo" alt=""><figcaption></figcaption></figure>

## Introduction

Everything here is split into three sections: basics, assets and Figma.

**Basics**, as the name infers, is a lot of the design tokens and simple stuff that you should base all designs upon.

**Assets** is an excellent collection of each of the different types of asset we've prepared, which are great to use in content and publications.

**Figma** contains all of the links to our Figma documents, which are considered the ultimate source of truth.


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

<figure><img src="/files/Uxqk6F1gqY0Y1eDq3p2v" 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="/files/dJyzFB1lYFi3rpAWLRwI" alt=""><figcaption></figcaption></figure>

### Dark Mode

<figure><img src="/files/9NQ6MvnHE9QteWNrqfoo" alt=""><figcaption></figcaption></figure>


# Typography

Great type is at the core of our branding, and we make good use of our own custom font.

## Introduction

We have our own custom font, called [Cal Sans](https://github.com/calcom/font). It can be downloaded through GitHub, and should be used in all designs that make use of a heading.

It's important to note that **Cal Sans is a display font**, meaning that it **should exclusively be used for headings and large text**.

Here's an excerpt from the GitHub repository:

> As this design was created for display, and is currently a single static font, an unusual approach is taken for its texture and default typography. Letters are intentionally spaced to be extremely close for tight headlines “out of the box.” **For smaller subheadings, positive letter spacing must be applied.** There are currently no other Open Source geometric sanserifs geared as intentionally for “tight but not touching” typesetting—as it is more labor intensive to produce with accurate texture. But for typesetters, if they would letterspace another design as tight as Cal Sans, the results would not be as consistent.

The key thing to note here is that it's ready out of the box for large headings, but if you need to go smaller, you'll need to apply some positive letter spacing so it's not looking too bunched up.

**For all other text, we use Inter.** A pretty standard choice, but a rock-solid one nevertheless.

## Font Sizes

<figure><img src="/files/VveKqtWZDqq9IOacDu1T" alt=""><figcaption></figcaption></figure>

### Headings

<table><thead><tr><th width="594">Type</th><th>Font Size</th></tr></thead><tbody><tr><td>Title 1</td><td>28px</td></tr><tr><td>Title 2</td><td>24px</td></tr><tr><td>Title 3</td><td>20px</td></tr></tbody></table>

### Body Text

<table><thead><tr><th width="591">Type</th><th>Font Size</th></tr></thead><tbody><tr><td>Large single line text (semibold only)</td><td>16px</td></tr><tr><td>Normal single line text</td><td>14px</td></tr><tr><td>Small single line text</td><td>12px</td></tr><tr><td>Extra small single line text (regular and semibold only)</td><td>10px</td></tr><tr><td></td><td></td></tr><tr><td>Large muliline text (medium only)</td><td>16px</td></tr><tr><td>Normal multiline text</td><td>14px</td></tr><tr><td>Small multiline text (mono only)</td><td>12px</td></tr></tbody></table>


# Shadows

Shadows are an important part of our design, and should always be replicated closely.

## Introduction

For shadows, I'm going to link the relevant Figma page, not because I'm lazy, but it's better to copy values from.

{% embed url="<https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/Cal-DS---Components?mode=design&node-id=16581-150779&t=2yA6FxSQlUQPrnWd-4&type=design>" %}


# Grid

We should align everything within our standardised grid.

## Introduction

We use a standardised 12 column grid as a basis for all of our layouts.

<figure><img src="/files/WyMSJNzg7DXGliSwyrUa" alt=""><figcaption></figcaption></figure>


# Icons

We use icons within the app to give a quick visual reference when navigating.

## Introduction

We use a light, thin set of icons that are subtle visual cues for things within the app. Icons should not be overused, but in a minimal, complimentary fashion.

{% embed url="<https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/Cal-DS---Components?mode=design&node-id=328-21603&t=2yA6FxSQlUQPrnWd-4&type=design>" %}


# Breakpoints

Here you can find our standardised breakpoints that we use to define Cal.com's responsive design.

## Desktop

<figure><img src="/files/OlaKd6ja88ZASGkPghhv" alt=""><figcaption></figcaption></figure>

## Tablet

<figure><img src="/files/r3v5TLp5EWO1ParPeMlr" alt=""><figcaption></figcaption></figure>

## Mobile

<figure><img src="/files/u9Sb2vLoLJyqbQzyFFMh" alt=""><figcaption></figcaption></figure>

## Breakpoints in practice

{% embed url="<https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/Cal-DS---Components?mode=design&node-id=22391-147764&t=2yA6FxSQlUQPrnWd-4&type=design>" %}


# Logos

Our logo is iconic and simple, and should be used extensively.

## Introduction

Our logo is simply "Cal.com" in the Cal Sans font. We have a dark and light variant, and although the dark is considered our default, you can freely use both as much as you'd like.

As many designers will tell you, when using a logo, always make the logo smaller. Branding should be subtle, as it's reused often.

| Do this                          | Not this                         |
| -------------------------------- | -------------------------------- |
| ![](/files/wh95PFAfmrwiHkYmmL6H) | ![](/files/AsydYpvRh4DOVzK7dLbA) |

## Downloads

| Logo (default)                                                                                          | Logo (white)                                                                                                        |
| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| <img src="/files/xPDMZEmFxqa8jVlqfC7v" alt="" data-size="line">                                         | <img src="/files/bFFA0ba1ycpxnvV0Tm5B" alt="" data-size="line">                                                     |
| <p>Download or direct link at:<br><a href="https://cal.com/logo.svg"><https://cal.com/logo.svg></a></p> | <p>Download or direct link at:<br><a href="https://cal.com/logo-white.svg"><https://cal.com/logo-white.svg></a></p> |

We also have some really neat profile-ready images:

| Profile (default)                | Profile (dark)                   |
| -------------------------------- | -------------------------------- |
| ![](/files/PGb7D5e26w3GPU75og97) | ![](/files/j1ON1cYekL5nTFdEPC3K) |


# Backgrounds

We use backgrounds with our unique grid design on marketing sites and content to add visual flair.

## Light

We have a great light mode background to use:

<figure><img src="/files/RBEbszjzHu3z3JRPCkkp" alt=""><figcaption></figcaption></figure>

## Dark

We also have a dark mode variant that looks great:

<figure><img src="/files/BcINS8XckDhoZr2pgKpP" alt=""><figcaption></figcaption></figure>

We use the dark background a lot for things like this ~~(sorry, Calendly)~~:

![](/files/CkzE8Grk2IvKOgwm2Gsn)

## Download

To download these in a high-quality version, get them from the Marketing Figma document's highlights page. You can right click on any cover and copy it as an SVG or PNG, or go to the export tab on the right.

{% hint style="info" %}
Make sure you're hovering over the name of the cover in the top left, like this:

<img src="/files/ncRbzoQg7xGBSThfXvFo" alt="" data-size="original">
{% endhint %}


# Covers

We use these as cover images for social platforms or as a banner where relevant.

## Branding covers

### Logo on gradient

This is our most commonly used gradient.

![](/files/zwcESCuBesrFy1ql8phN)

### OG image

This version is the correct sizing for an OG image on social media platforms.

![](/files/mdd62Zv4Y9oterU07OP3)

## Design system covers

### CalDS

This is a very nice looking cover representing our design system. Although a cool graphic to show, note how busy the image is, so bear in mind when using this.

![](/files/A4PPv0pu6B7w33gDbP0D)

### Screens

This cover has two screens, the booking page and event types settings, next to each other. It's a very good cover to use in publications.

![](/files/8ZEw4XcaducSsAKSisCS)

## Product covers

We have a bunch of really nice product featured area covers that look great.

### Event types

![](/files/uakCEKIue6g3xSsN84ie)

### App Store

![](/files/dBIvpALChNPy0WdrM2nG)

### Marketing site

![](/files/J4G6gSUHh3ZJe2MthJHQ)

### And more...

I won't add all of them in here, but check out the Figma document for more of these.

## Download

To download these in a high-quality version, get them from the Marketing Figma document's highlights page, as well as the "Social covers" page. You can right click on any cover and copy it as an SVG or PNG, or go to the export tab on the right.

{% hint style="info" %}
Make sure you're hovering over the name of the cover in the top left, like this:

<img src="/files/ncRbzoQg7xGBSThfXvFo" alt="" data-size="original">
{% endhint %}


# Badges

We have a number of badges to add to your content.

## Introduction

We have a series of badges that can be added to content such as a README file, a website and such as a button to book someone with Cal.com.

We have a number of variants:

<img src="/files/fKz0fZJNOHR9sQEsseEu" alt="" data-size="line"><img src="/files/TNZMK611ycGDlJIULHNb" alt="" data-size="line"><img src="/files/vXkJPWtu4nFQMUmvpRfG" alt="" data-size="line"><img src="/files/hBNRjo7Vf5FssCfGH3vd" alt="" data-size="line">

## Download

To download these in a high-quality version, get them from the Marketing Figma document's "Schedule with Cal.com" page. You can right click on any cover and copy it as an SVG or PNG, or go to the export tab on the right.

{% hint style="info" %}
Make sure you're hovering over the name of the cover in the top left, like this:

<img src="/files/ncRbzoQg7xGBSThfXvFo" alt="" data-size="original">
{% endhint %}


# Thumbnails

Our template for creating thumbnails for content.

## Introduction

We have two editable templates for single and multiline content.

## Single line content

{% embed url="<https://www.figma.com/file/0TkA0fFItVwr2d1zcMfh16/Marketing-2.0-(Master-File)?mode=design&node-id=737-90489&t=zYtDb2NnpKcpeLh6-4&type=design>" %}

## Multiline content

{% embed url="<https://www.figma.com/file/0TkA0fFItVwr2d1zcMfh16/Marketing-2.0-(Master-File)?mode=design&node-id=737-90167&t=zYtDb2NnpKcpeLh6-4&type=design>" %}


# OG Images

We have a number of social-media friendly OG images that look great for sharing.

## Introduction

We have a number of different types of OG image, some for booking links, some for apps etc.

Here are some examples:

{% embed url="<https://www.figma.com/file/0TkA0fFItVwr2d1zcMfh16/Marketing-2.0-(Master-File)?mode=design&node-id=519-86351&t=bXOikM3Z3JzfLqDW-4&type=design>" %}

## Download

To download these in a high-quality version, get them from the Marketing Figma document's "OG Share images" page. You can right click on any cover and copy it as an SVG or PNG, or go to the export tab on the right.

{% hint style="info" %}
Make sure you're hovering over the name of the cover in the top left, like this:

<img src="/files/ncRbzoQg7xGBSThfXvFo" alt="" data-size="original">
{% endhint %}


# Screenshots

We have an assortment of official product screenshots that can be used in content.

## Introduction

We have a selection of product glamour shots that are framed in a standardised way. These are great to add to any type of content.

## Guidelines

<figure><img src="/files/tfjnJjH9zLl4RX0STVIt" alt=""><figcaption></figcaption></figure>

## Download

To download these in a high-quality version, get them from the Marketing Figma document's "All Product Screenshots" page. You can right click on any cover and copy it as an SVG or PNG, or go to the export tab on the right.

{% hint style="info" %}
Make sure you're hovering over the name of the cover in the top left, like this:

<img src="/files/ncRbzoQg7xGBSThfXvFo" alt="" data-size="original">
{% endhint %}


# Illustrations

We have a library of great illustrations of the different features of our product to use in marketing content.

## Introduction

We have a number of great illustrations on our gradient background showing simplifications of our user interface and a number of features.

Here are some examples:

![](/files/4SU2pkuMPfgWeBiLxpmU)![](/files/DBEoxPYQJhkGqpHL9PqI)![](/files/C1F2lMTkPZixC86qkHNG)![](/files/6QRP3bojR6KlurxhokRw)

## Download

To download these in a high-quality version, get them from the Marketing Figma document's "Features pages" page. You can right click on any cover and copy it as an SVG or PNG, or go to the export tab on the right.

{% hint style="info" %}
Make sure you're hovering over the name of the cover in the top left, like this:

<img src="/files/ncRbzoQg7xGBSThfXvFo" alt="" data-size="original">
{% endhint %}


# Apps

We have a set of icons for some of our most popular apps on the app store.

<table data-header-hidden><thead><tr><th width="59.333333333333314"></th><th width="48"></th><th width="53"></th><th width="54"></th><th width="58"></th><th width="59"></th><th width="58"></th><th width="55"></th><th width="56"></th><th width="52"></th><th width="49"></th><th width="44"></th><th></th></tr></thead><tbody><tr><td><img src="/files/FeTgLhWK0iLBVQcRg6p4" alt="" data-size="line"></td><td><img src="/files/G16ZfQ1edrMS9ETibzXd" alt="" data-size="line"></td><td><img src="/files/va4oanvt53Uak2gkY8Bg" alt="" data-size="line"></td><td><img src="/files/MbAROyh9UfVXYn5IRPxN" alt="" data-size="line"></td><td><img src="/files/PLk0IIu99yPi9O3lrltB" alt="" data-size="line"></td><td><img src="/files/Z3wHMafB3KmOoR5iwt4c" alt="" data-size="line"></td><td><img src="/files/3pQxEJxiMRxiGcJszc68" alt="" data-size="line"></td><td><img src="/files/7Ib1qQ0BQ02t2x5QA3lt" alt="" data-size="line"></td><td><img src="/files/W5KzwAQ8iq1IIZJUY5X2" alt="" data-size="line"></td><td><img src="/files/YOnb84apX4frpsQ6c1Qv" alt="" data-size="line"></td><td><img src="/files/aog5p7d3Q2SXMJyjxDSg" alt="" data-size="line"></td><td><img src="/files/WJz7ZK0WSJblS3YOV7OI" alt="" data-size="line"></td><td><img src="/files/UlumNHKCF2wVlb4jpQv3" alt="" data-size="line"></td></tr><tr><td><img src="/files/k630WdVx8UpQGg2JYGr1" alt="" data-size="line"></td><td><img src="/files/FbJXSV0Fe1yTVSRBjVjC" alt="" data-size="line"></td><td><img src="/files/ymcqF1If0iAYcSeqabeS" alt="" data-size="line"></td><td><img src="/files/NuoRDgaOlRat1DOLUltx" alt="" data-size="line"></td><td><img src="/files/MPlyVO1613qFQOuIy15c" alt="" data-size="line"></td><td><img src="/files/VblweTMEockn1k9zofjz" alt="" data-size="line"></td><td><img src="/files/VUsHn2wyUNyCwpzcYrqi" alt="" data-size="line"></td><td><img src="/files/gKyWDQdpzGnlNtiaLPGg" alt="" data-size="line"></td><td><img src="/files/DQgRKcEIMXlkyEtI4cNW" alt="" data-size="line"></td><td><img src="/files/pr3PCF0H19iFEhm4hWce" alt="" data-size="line"></td><td><img src="/files/lUXGSIFl0R4AhBsyv6gE" alt="" data-size="line"></td><td><img src="/files/crCIn2RCqfYaf4i34M6B" alt="" data-size="line"></td><td><img src="/files/EYsxn2DJt9Vqx8zMfrjY" alt="" data-size="line"></td></tr></tbody></table>