---
title: Colors
description: Cal.com Color System Documentation
---

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

export const backgroundTokens = {
  title: 'Background Tokens',
  colors: [
    { name: 'emphasis', value: 'var(--cal-bg-emphasis)', className: 'bg-emphasis' },
    { name: 'default', value: 'var(--cal-bg, white)', className: 'bg-default' },
    { name: 'subtle', value: 'var(--cal-bg-subtle)', className: 'bg-subtle' },
    { name: 'muted', value: 'var(--cal-bg-muted)', className: 'bg-muted' },
    { name: 'inverted', value: 'var(--cal-bg-inverted)', className: 'bg-inverted' },
  ],
};

export const primaryBackgroundTokens = {
  title: 'Primary Background Tokens',
  colors: [
    { name: 'primary.default', value: 'var(--cal-bg-primary)', className: 'bg-primary-default' },
    { name: 'primary.emphasis', value: 'var(--cal-bg-primary-emphasis)', className: 'bg-primary-emphasis' },
    { name: 'primary.muted', value: 'var(--cal-bg-primary-muted)', className: 'bg-primary-muted' },
  ],
};

export const brandTokens = {
  title: 'Brand Colors',
  colors: [
    { name: 'brand.default', value: 'var(--cal-brand,#111827)', className: 'bg-brand-default' },
    { name: 'brand.emphasis', value: 'var(--cal-brand-emphasis,#101010)', className: 'bg-brand-emphasis' },
    { name: 'brand.subtle', value: 'var(--cal-brand-subtle,#9CA3AF)', className: 'bg-brand-subtle' },
    { name: 'brand.accent', value: 'var(--cal-brand-accent,white)', className: 'bg-brand-accent' },
  ],
};

export const semanticBackgroundTokens = {
  title: 'Semantic Background Tokens',
  colors: [
    { name: 'semantic.info.subtle', value: 'var(--cal-bg-semantic-info-subtle)', className: 'bg-semantic-info-subtle' },
    { name: 'semantic.info.emphasis', value: 'var(--cal-bg-semantic-info-emphasis)', className: 'bg-semantic-info-emphasis' },
    { name: 'semantic.success.subtle', value: 'var(--cal-bg-semantic-success-subtle)', className: 'bg-semantic-success-subtle' },
    { name: 'semantic.success.emphasis', value: 'var(--cal-bg-semantic-success-emphasis)', className: 'bg-semantic-success-emphasis' },
    { name: 'semantic.attention.subtle', value: 'var(--cal-bg-semantic-attention-subtle)', className: 'bg-semantic-attention-subtle' },
    { name: 'semantic.attention.emphasis', value: 'var(--cal-bg-semantic-attention-emphasis)', className: 'bg-semantic-attention-emphasis' },
    { name: 'semantic.error.subtle', value: 'var(--cal-bg-semantic-error-subtle)', className: 'bg-semantic-error-subtle' },
    { name: 'semantic.error.emphasis', value: 'var(--cal-bg-semantic-error-emphasis)', className: 'bg-semantic-error-emphasis' },
  ],
};

export const borderTokens = {
  title: 'Border Tokens',
  colors: [
    { name: 'border.emphasis', value: 'var(--cal-border-emphasis)', className: 'border-emphasis' },
    { name: 'border.default', value: 'var(--cal-border)', className: 'border-default' },
    { name: 'border.subtle', value: 'var(--cal-border-subtle)', className: 'border-subtle' },
    { name: 'border.muted', value: 'var(--cal-border-muted)', className: 'border-muted' },
    { name: 'border.semantic.error', value: 'var(--cal-border-semantic-error)', className: 'border-semantic-error' },
  ],
};

export const textTokens = {
  title: 'Text Tokens',
  description: 'Semantic text colors for various purposes',
  colors: [
    { name: 'text.emphasis', value: 'var(--cal-text-emphasis)', className: 'text-emphasis' },
    { name: 'text.default', value: 'var(--cal-text)', className: 'text-default' },
    { name: 'text.subtle', value: 'var(--cal-text-subtle)', className: 'text-subtle' },
    { name: 'text.muted', value: 'var(--cal-text-muted)', className: 'text-muted' },
    { name: 'text.inverted', value: 'var(--cal-text-inverted)', className: 'text-inverted' },
  ],
};

# Color System

Our color system is built on semantic tokens that provide consistent theming across light and dark modes. The system is organized into five main categories:

1. Background Colors
2. Primary Colors
3. Brand Colors
4. Semantic Colors
5. Text & Border Colors

## Usage Guidelines

1. **Use Semantic Tokens**: Always prefer semantic tokens over direct color values to maintain consistency and theme support.
2. **Dark Mode Support**: Our semantic tokens automatically handle dark mode transitions.
3. **Component Design**: When creating new components, follow the semantic token system:
   - Use `bg-*` tokens for backgrounds
   - Use `text-*` tokens for text content
   - Use `border-*` tokens for borders
4. **Semantic States**: Use semantic color variations to convey meaning:
   - Info: For informational UI elements
   - Success: For successful actions and positive states
   - Attention: For warnings and important notices
   - Error: For error states and destructive actions
5. **Brand Colors**: Use brand colors sparingly and primarily for:
   - Primary CTAs
   - Brand identity elements
   - Key interactive components


## Using Semantic Tokens

Our color tokens are CSS variables that automatically handle light and dark mode transitions. Here's how to use them:

### Background Colors
```tsx
// Basic backgrounds
<div className="bg-default">Default background</div>
<div className="bg-subtle">Subtle background</div>
<div className="bg-emphasis">Emphasis background</div>

// Primary backgrounds
<div className="bg-primary-default">Primary background</div>
<div className="bg-primary-emphasis">Primary emphasis</div>
```

### Semantic Colors
```tsx
// Info states
<div className="bg-semantic-info-subtle">Info subtle</div>
<div className="bg-semantic-info-emphasis">Info emphasis</div>

// Success states
<div className="bg-semantic-success-subtle">Success subtle</div>
<div className="bg-semantic-success-emphasis">Success emphasis</div>

// Error states
<div className="bg-semantic-error-subtle">Error subtle</div>
<div className="bg-semantic-error-emphasis">Error emphasis</div>
```

### Text Colors
```tsx
<p className="text-emphasis">High emphasis text</p>
<p className="text-default">Default text</p>
<p className="text-subtle">Subtle text</p>
<p className="text-muted">Muted text</p>
```

<TypeTable sections={[backgroundTokens, primaryBackgroundTokens, brandTokens, semanticBackgroundTokens, borderTokens, textTokens]} />