Cal.com DESIGN.md

Open-source scheduling infrastructure with a developer-friendly, minimal aesthetic — dark surfaces, crisp whites, and calendar-driven UI patterns.

1. Visual Theme & Atmosphere

Cal.com combines the precision of a developer tool with the approachability of a consumer scheduling product. The design leans into dark-mode-first thinking with a near-black surface palette, crisp whites for contrast, and a subtle green accent that signals availability and confirmation. The UI is clean and purposeful — every element serves the scheduling flow.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 15px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 24px;
--font-size-2xl: 30px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-base: 1.5;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #6366F1;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.button-primary:hover { background: #4F46E5; }

/* Calendar Day Cell */
.calendar-day {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s ease;
  color: #FFFFFF;
}
.calendar-day--available:hover { background: rgba(99,102,241,0.2); }
.calendar-day--selected {
  background: #6366F1;
  color: #FFFFFF;
}
.calendar-day--disabled {
  color: #52525B;
  cursor: not-allowed;
}

/* Time Slot */
.time-slot {
  border: 1.5px solid #27272A;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.time-slot:hover {
  border-color: #6366F1;
  background: rgba(99,102,241,0.1);
}
.time-slot--selected {
  border-color: #6366F1;
  background: #6366F1;
}

/* Booking Confirmation Card */
.booking-card {
  background: #18181B;
  border: 1px solid #27272A;
  border-radius: 12px;
  padding: 24px;
}

/* Input */
.input {
  background: #18181B;
  border: 1.5px solid #27272A;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #FFFFFF;
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

5. Layout Principles

6. Depth & Elevation

css/* Dark mode defaults */
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.shadow-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.6); }

7. Do's and Don'ts

Do:

• Default to dark surfaces; offer a light-mode toggle
• Use indigo (#6366F1) consistently for selected states, CTAs, and interactive highlights
• Show availability status with green (#10B981) — never with the brand color
• Keep the calendar grid pixel-perfect: equal cell sizes, consistent spacing

Don't:

• Don't put more than 2 CTAs on the booking page — one primary, one secondary
• Don't use brand indigo for error states — use red (#EF4444)
• Don't animate calendar transitions excessively

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Cal.com — open-source scheduling infrastructure.
Primary brand color is indigo (#6366F1); availability indicators use green (#10B981).
Default to dark surfaces (#18181B cards, #09090B background) with white text.
The calendar grid is the centerpiece: 40px day cells, 8px radius, precise spacing.
Time slots use bordered cards that shift to indigo fill when selected.
Typography is Inter at 15px, 600 weight for interactive labels.
Tone is clean, developer-friendly, and precision-focused.