---
title: Spacing
description: Cal.com's spacing system follows the Tailwind spacing scale
---

import { SpacingTable } from '@/components/ui/SpacingTable';

export const spacingTokens = [
  { name: '0', value: '0', pixels: '0px' },
  { name: 'px', value: '1px', pixels: '1px' },
  { name: '0.5', value: '0.125rem', pixels: '2px' },
  { name: '1', value: '0.25rem', pixels: '4px' },
  { name: '1.5', value: '0.375rem', pixels: '6px' },
  { name: '2', value: '0.5rem', pixels: '8px' },
  { name: '2.5', value: '0.625rem', pixels: '10px' },
  { name: '3', value: '0.75rem', pixels: '12px' },
  { name: '4', value: '1rem', pixels: '16px' },
  { name: '5', value: '1.25rem', pixels: '20px' },
  { name: '6', value: '1.5rem', pixels: '24px' },
  { name: '8', value: '2rem', pixels: '32px' },
  { name: '9', value: '2.25rem', pixels: '36px' },
  { name: '10', value: '2.5rem', pixels: '40px' },
  { name: '12', value: '3rem', pixels: '48px' },
  { name: '14', value: '3.5rem', pixels: '56px' },
  { name: '16', value: '4rem', pixels: '64px' },
  { name: '20', value: '5rem', pixels: '80px' },
];

# Spacing System

Our spacing system follows the Tailwind spacing scale, providing consistent spacing values across the application. Each spacing token can be used with various utility classes:

- **Padding**: `p-{size}`, `px-{size}`, `py-{size}`, `pt-{size}`, `pr-{size}`, `pb-{size}`, `pl-{size}`
- **Margin**: `m-{size}`, `mx-{size}`, `my-{size}`, `mt-{size}`, `mr-{size}`, `mb-{size}`, `ml-{size}`
- **Gap**: `gap-{size}`, `gap-x-{size}`, `gap-y-{size}`

Hover over each token to copy its utility classes or pixel value.

<SpacingTable tokens={spacingTokens} />