> ## Documentation Index
> Fetch the complete documentation index at: https://cal.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the embed with CSS variables

You can fully customize the look and feel of the Cal.com embed by passing CSS variables through the `Cal("ui", { cssVarsPerTheme })` API. This lets you match the Booker to your brand's colors, spacing, and border radius — for both light and dark themes.

<Info>
  Pass the variable name **without** the `--` prefix as the key in `cssVarsPerTheme`. For example, to override `--cal-brand`, use `"cal-brand": "#6F61C0"`.
</Info>

## Variable reference

### Brand

| Key                  | Purpose                                                               |
| -------------------- | --------------------------------------------------------------------- |
| `cal-brand`          | Primary brand color — selected date circle, confirm button bg         |
| `cal-brand-emphasis` | Brand hover state — confirm button hover                              |
| `cal-brand-text`     | Text on brand surfaces — "Confirm" button label, selected date number |
| `cal-brand-subtle`   | Lighter brand accent — secondary indicators                           |
| `cal-brand-accent`   | Contrasting accent on brand buttons — icon color on brand bg          |

### Text

| Key                 | Purpose                                                            |
| ------------------- | ------------------------------------------------------------------ |
| `cal-text`          | Default body text — event description, time slot labels "14:30"    |
| `cal-text-emphasis` | High-priority text — event title, month header "April 2026"        |
| `cal-text-subtle`   | Secondary text — day-of-week headers "SUN MON TUE", timezone label |
| `cal-text-muted`    | Lowest contrast text — disabled date numbers, placeholder text     |
| `cal-text-inverted` | Text on dark/inverted backgrounds — tooltips                       |

### Text semantic

| Key                           | Purpose                                           |
| ----------------------------- | ------------------------------------------------- |
| `cal-text-semantic-info`      | Info alert text — "Scheduling information" notice |
| `cal-text-semantic-attention` | Warning alert text — "Limited spots left" notice  |
| `cal-text-semantic-error`     | Error alert text — "This time is unavailable"     |

### Text status

These feed the `text-info` / `text-error` / `text-success` / `text-attention` utility classes as well as matching `fill-*` icon colors within the Booker (for example, Badge variants and form validation messages).

| Key                  | Purpose                                                     |
| -------------------- | ----------------------------------------------------------- |
| `cal-text-info`      | Info badge text and icon fill                               |
| `cal-text-success`   | Success badge text and icon fill                            |
| `cal-text-attention` | Attention/warning badge text and icon fill                  |
| `cal-text-error`     | Error text and icon fill — form validation "Required field" |

### Background

| Key                | Purpose                                                       |
| ------------------ | ------------------------------------------------------------- |
| `cal-bg`           | Main booker background — the white canvas behind everything   |
| `cal-bg-emphasis`  | Highlighted surface — hovered date cell, active date range bg |
| `cal-bg-subtle`    | Secondary surface — time slot hover bg, card backgrounds      |
| `cal-bg-muted`     | Faintest surface — unavailable day bg, gradient fade edges    |
| `cal-bg-inverted`  | Inverted surface — dark overlay backgrounds, tooltips         |
| `cal-bg-attention` | Warning badge background — "orange" badge variant             |
| `cal-bg-error`     | Error badge/alert background — "red" badge variant            |

### Background semantic

| Key                                | Purpose                         |
| ---------------------------------- | ------------------------------- |
| `cal-bg-semantic-info-subtle`      | Subtle info alert background    |
| `cal-bg-semantic-attention-subtle` | Subtle warning alert background |
| `cal-bg-semantic-error-subtle`     | Subtle error alert background   |

### Border

| Key                                    | Purpose                                                    |
| -------------------------------------- | ---------------------------------------------------------- |
| `cal-border`                           | Default dividers — calendar grid lines, card borders       |
| `cal-border-emphasis`                  | Strong borders — focused input ring, active section border |
| `cal-border-subtle`                    | Soft borders — date picker separator, time slot dividers   |
| `cal-border-muted`                     | Faintest borders — inner column dividers                   |
| `cal-border-error`                     | Error input border — red ring on invalid form field        |
| `cal-border-semantic-error`            | Semantic error border — error banner outline               |
| `cal-border-semantic-attention-subtle` | Warning banner border                                      |
| `cal-border-semantic-error-subtle`     | Subtle error banner border                                 |

### Booker border

| Key                       | Purpose                                                            |
| ------------------------- | ------------------------------------------------------------------ |
| `cal-border-booker`       | Outer border color of the entire booker widget                     |
| `cal-border-booker-width` | Thickness of the outer booker border — for example, "1px" or "3px" |

### Border radius

| Key           | Purpose                                       |
| ------------- | --------------------------------------------- |
| `radius`      | Base radius — small inputs, chips (4px)       |
| `radius-sm`   | Extra-small radius — tiny badges (2px)        |
| `radius-md`   | Medium radius — buttons, dropdowns (6px)      |
| `radius-lg`   | Large radius — cards, modals (8px)            |
| `radius-xl`   | Extra-large radius — large cards (12px)       |
| `radius-2xl`  | 2XL radius — dialog containers (16px)         |
| `radius-3xl`  | 3XL radius — hero cards (24px)                |
| `radius-full` | Full pill shape — avatar circles, pill badges |
| `radius-none` | No rounding — sharp-cornered elements         |

### Spacing

| Key       | Purpose                                                           |
| --------- | ----------------------------------------------------------------- |
| `spacing` | Base spacing unit — all padding/margin/gap values scale from this |

## Full example

```js theme={null}
Cal("ui", {
  theme: "light",
  hideEventTypeDetails: false,
  cssVarsPerTheme: {
    light: {
      // ── Brand ──
      "cal-brand": "#6F61C0",             // Selected date circle, confirm button bg
      "cal-brand-emphasis": "#5A4EA6",     // Confirm button hover state
      "cal-brand-text": "#FFFFFF",         // Text on brand surfaces — "Confirm" label, selected date number
      "cal-brand-subtle": "#B8B0E0",       // Lighter brand accent for secondary indicators
      "cal-brand-accent": "#FFFFFF",       // Contrasting accent on brand buttons

      // ── Text ──
      "cal-text": "#6F61C0",              // Default body text — event description, time slot labels
      "cal-text-emphasis": "#4D408D",      // High-priority text — event title, month header
      "cal-text-subtle": "#8A7FCC",        // Secondary text — day-of-week headers, timezone
      "cal-text-muted": "#C0B8FF",         // Lowest contrast text — disabled dates, placeholders
      "cal-text-inverted": "#FFFFFF",      // Text on dark/inverted backgrounds

      // ── Text Semantic ──
      "cal-text-semantic-info": "#3B3080",        // Info alert text
      "cal-text-semantic-attention": "#8B3A1A",   // Warning alert text
      "cal-text-semantic-error": "#7C2020",       // Error alert text

      // ── Text Status ──
      "cal-text-info": "#3B3080",          // Info badge text and icon fill
      "cal-text-success": "#1A5C30",       // Success badge text and icon fill
      "cal-text-attention": "#8B3A1A",     // Attention badge text and icon fill
      "cal-text-error": "pink",            // Error text and icon fill — form validation

      // ── Background ──
      "cal-bg": "#FFFFFF",                 // Main booker background
      "cal-bg-emphasis": "#E1DFFF",        // Highlighted surface — hovered date, active range
      "cal-bg-subtle": "#F0EEFF",          // Secondary surface — time slot hover, cards
      "cal-bg-muted": "#F8F7FF",           // Faintest surface — unavailable day bg, gradient edges
      "cal-bg-inverted": "#2D2554",        // Inverted surface — dark overlays, tooltips
      "cal-bg-attention": "#FFF3E0",       // Warning badge background
      "cal-bg-error": "#FFE8EC",           // Error badge/alert background

      // ── Background Semantic ──
      "cal-bg-semantic-info-subtle": "#F0EDFF",       // Subtle info alert bg
      "cal-bg-semantic-attention-subtle": "#FFF3E0",  // Subtle warning alert bg
      "cal-bg-semantic-error-subtle": "#FFE8EC",      // Subtle error alert bg

      // ── Border ──
      "cal-border": "#A090E0",                             // Default dividers — calendar grid lines
      "cal-border-emphasis": "#4D408D",                    // Strong borders — focused inputs
      "cal-border-subtle": "#A090E0",                      // Soft borders — separators, dividers
      "cal-border-muted": "#D6D0F0",                       // Faintest borders
      "cal-border-error": "#FFAAAA",                       // Error input border
      "cal-border-semantic-error": "#FFAAAA",              // Error banner outline
      "cal-border-semantic-attention-subtle": "#FFD4A0",   // Warning banner border
      "cal-border-semantic-error-subtle": "#FFAAAA",       // Subtle error banner border

      // ── Booker Border ──
      "cal-border-booker": "#A090E0",      // Outer border of the entire booker widget
      "cal-border-booker-width": "3px",    // Thickness of the outer booker border

      // ── Border Radius ──
      "radius": "0.25rem",                // Base radius — small inputs, chips (4px)
      "radius-sm": "0.125rem",            // Extra-small radius — tiny badges (2px)
      "radius-md": "0.375rem",            // Medium radius — buttons, dropdowns (6px)
      "radius-lg": "0.5rem",              // Large radius — cards, modals (8px)
      "radius-xl": "0.75rem",             // Extra-large radius — large cards (12px)
      "radius-2xl": "1rem",               // 2XL radius — dialog containers (16px)
      "radius-3xl": "1.5rem",             // 3XL radius — hero cards (24px)
      "radius-full": "9999px",            // Full pill shape — avatars, pill badges
      "radius-none": "0px",               // No rounding — sharp corners

      // ── Spacing ──
      "spacing": "1px",                   // Base spacing unit — all padding/margin/gap scale from this
    },
    dark: {
      // ── Brand ──
      "cal-brand": "#A090E0",
      "cal-brand-emphasis": "#C0B8FF",
      "cal-brand-text": "#1A1540",
      "cal-brand-subtle": "#5A4EA6",
      "cal-brand-accent": "#1A1540",

      // ── Text ──
      "cal-text": "#D6D0F0",
      "cal-text-emphasis": "#F0EEFF",
      "cal-text-subtle": "#A090E0",
      "cal-text-muted": "#8A7FCC",
      "cal-text-inverted": "#1A1540",

      // ── Text Semantic ──
      "cal-text-semantic-info": "#A8A0F0",
      "cal-text-semantic-attention": "#E0A060",
      "cal-text-semantic-error": "#F08080",

      // ── Text Status ──
      "cal-text-info": "#C0B8FF",
      "cal-text-success": "#80E0B0",
      "cal-text-attention": "#F0C090",
      "cal-text-error": "#FFB0B0",

      // ── Background ──
      "cal-bg": "#1A1540",
      "cal-bg-emphasis": "#2D2554",
      "cal-bg-subtle": "#231E4A",
      "cal-bg-muted": "#1E1845",
      "cal-bg-inverted": "#F0EEFF",
      "cal-bg-attention": "#6E2D14",
      "cal-bg-error": "#601818",

      // ── Background Semantic ──
      "cal-bg-semantic-info-subtle": "#1E1860",
      "cal-bg-semantic-attention-subtle": "#3E1E0A",
      "cal-bg-semantic-error-subtle": "#3E1010",

      // ── Border ──
      "cal-border": "#4D408D",
      "cal-border-emphasis": "#8A7FCC",
      "cal-border-subtle": "#3B3080",
      "cal-border-muted": "#231E4A",
      "cal-border-error": "#802020",
      "cal-border-semantic-error": "#802020",
      "cal-border-semantic-attention-subtle": "#6E2D14",
      "cal-border-semantic-error-subtle": "#802020",

      // ── Booker Border ──
      "cal-border-booker": "#4D408D",
      "cal-border-booker-width": "3px",

      // ── Border Radius ──
      "radius": "0.25rem",
      "radius-sm": "0.125rem",
      "radius-md": "0.375rem",
      "radius-lg": "0.5rem",
      "radius-xl": "0.75rem",
      "radius-2xl": "1rem",
      "radius-3xl": "1.5rem",
      "radius-full": "9999px",
      "radius-none": "0px",

      // ── Spacing ──
      "spacing": "1px",
    },
  },
});
```