Calendly DESIGN.md

Scheduling product design with calm blue trust, clean booking flows, and precise availability selection.

1. Visual Theme & Atmosphere

Calendly should feel like time coordination made simple. The design needs to remove friction from booking, routing, rescheduling, and calendar connection while keeping the experience professional for both hosts and invitees.

• Mood: calm, efficient, reliable, professional, lightweight
• Density: medium, with clear calendar grids and booking details
• Character: blue actions, white scheduling cards, subtle dividers, compact forms

2. Color Palette & Roles

Use blue for booking action and selected availability. Keep surrounding surfaces neutral so times and dates remain easy to scan.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #006BFF;
  border-radius: 999px;
  background: #006BFF;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.booking-card {
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #FFFFFF;
  padding: 24px;
}

.time-slot {
  min-height: 44px;
  border: 1px solid #006BFF;
  border-radius: 10px;
  background: #FFFFFF;
  color: #006BFF;
  font: 600 15px/1 Inter, sans-serif;
}

.time-slot[aria-selected="true"] {
  background: #EAF2FF;
}

5. Layout Principles

Separate event details, calendar selection, time slots, and confirmation. Avoid hiding timezone, duration, and host details.

6. Depth & Elevation

css.shadow-card { box-shadow: 0 8px 22px rgba(11, 19, 32, 0.08); }
.shadow-modal { box-shadow: 0 22px 54px rgba(11, 19, 32, 0.14); }

Use elevation to distinguish the active booking card from the page background. Calendar cells should stay flat and predictable.

7. Do's and Don'ts

Do make selected dates and time slots unmistakable. Do keep booking steps short. Do show timezone clearly. Do not overload the booking screen with marketing content. Do not make calendar navigation ambiguous.

8. Responsive Behavior

Keep time slots and primary actions at least 44px tall.

9. Agent Prompt Guide

Design like Calendly: calm blue scheduling UI, clean white booking cards, clear date and time-slot selection, visible timezone and duration metadata, and a professional low-friction confirmation flow.