Calendly Design System Deep Dive

1. Brand Overview

Calendly’s brand design is exactly what you’d expect from a tool that lives in your calendar ecosystem all day: clean, pragmatic, and frictionless. The look is modern SaaS with just enough warmth to keep it human. The vibe is “professional, but we don’t wear suits.”

The philosophy here feels like: strip away anything that slows you down. Their interface is built for busy people scheduling meetings, so they aren’t going to hit you with distracting gradients or quirky illustrations mid-flow. Instead, they use restrained colors, consistent spacing, and typography that’s confident without shouting.

You can tell they’re aiming for a broad audience — from solo consultants to enterprise teams — so the tone is neutral and adaptable. There’s no hyper-aggressive branding that would alienate a corporate client, but also no cold, sterile enterprise feel.

The choice of Gilroy for typography immediately sets a friendly but deliberate tone. It’s geometric, clean, and has enough character to distinguish itself from default sans-serifs. Pair that with their color palette built around deep navy (#0b3558) and a bright blue (#006bff), and you’ve got a brand that says: “We’re reliable, but quick to act.”

Their layout system is predictable — 8px grid, responsive breakpoints from 320px up to 1920px — which makes the experience feel consistent across devices. The spacing choices aren’t just random; they build a rhythm, so even a dense scheduling dashboard doesn’t feel messy.

Calendly is one of those brands that nails the “SaaS minimalism” playbook without becoming bland. The design system makes sense for their product: fast, clear, and scalable. If you’re designing anything in their ecosystem — integrations, app screens, marketing collateral — you’ll want to stick to these rules, or you’ll break the rhythm they’ve so carefully set.

2. Color System

2.1 Primary Colors

Calendly’s main brand color is a bright blue #006bff (rgb(0, 107, 255)), used for CTAs, links, and primary interactive states. It’s saturated and high-contrast against white, which makes buttons pop and feels energetic. Blue in this range communicates trust, efficiency, and tech competence — all perfect for a scheduling platform.

The deep navy #0b3558 (rgb(11, 53, 88)) acts as a secondary anchor, giving weight to text and backgrounds while balancing the vibrancy of the primary blue. It’s a classic move: bright accent for actions, dark base for legibility and structure.

Compared to competitors like Doodle (lighter blues) or Microsoft Bookings (corporate teal), Calendly’s blue is sharper and more vivid. It’s not “playful startup blue,” it’s “get things done” blue.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid. Primary blue against white easily meets WCAG AA for normal text and AAA for large text. Deep navy against white is even stronger.

They use #476788 for secondary text — it’s muted but still passes accessibility for body copy on white. Background grays (#f0f3f8) are light enough to keep blue elements distinct.

Dark mode? Not implemented here — everything is optimized for light UI.

2.4 Usage Guide

Works well:

• Primary blue (#006bff) on white for buttons — high energy, draws focus.
• Deep navy (#0b3558) as button fill with white text — professional and stable.
• Slate blue (#476788) for borders — subtle but defined.

Avoid:

• Using primary blue for large text blocks — it’s meant for actions, not paragraphs.
• Dark blue hover (#294e70) for text — too low contrast unless on light background.
• Mixing black and deep navy in the same text block — pick one for consistency.

3. Typography

3.1 Font Families

They use Gilroy across the board. Fallbacks are either gilroy Fallback or Proxima Nova depending on context. No Google Fonts or Adobe Fonts — this is a custom/licensed choice.

Gilroy brings geometric shapes with clean curves, perfect for a modern SaaS brand. It’s readable at small sizes (14px captions) and bold enough at display sizes (80px headlines).

3.2 Type Scale

3.3 Hierarchy

The scale jumps are deliberate: 80 → 68 → 50 → 38 → 28 → 24 → 20 → 18 → 16 → 14 → 12. Plenty of range for marketing hero sections and dense product UI.

Bold weights dominate headings (600–700), while body and captions use lighter weights (400–500) for readability. The large line heights (up to 2.00) in small text prevent cramped layouts.

4. Spacing & Layout

4.1 Spacing Scale

Calendly runs on an 8px base grid. Common values:

4.2 Layout

Breakpoints span from 320px to 1920px. Lots of fine-grain midpoints (385px, 426px, 530px, etc.), which suggests they optimize for many viewport quirks.

The layout approach: fixed container widths per breakpoint, padding increments in multiples of 8px. Section gaps at 32px+ keep content blocks distinct without crowding.

5. Visual Elements

Border Radius

They use multiple radius values depending on context:

The 8px and 24px radii stand out — 8px for most buttons, 24px for cards. The 50% full circle is common for pagination controls and avatars.

Shadows

Calendly uses soft multi-layer shadows for depth:

• rgba(71, 103, 136, 0.04) 0px 4px 5px, rgba(71, 103, 136, 0.03) 0px 4px 10px, rgba(71, 103, 136, 0.05) 0px 10px 20px — subtle card lift.
• Inset glow: rgba(184, 220, 255, 0.75) 0px 0px 8px inset — focus states.

No heavy drop shadows — everything is feathered and low opacity.

Borders

They rely on light borders for separation:

• 1px solid #d4e0ed — neutral dividers.
• 1px solid #006bff — focus and active states.
• Ghost buttons in slate blue borders (#476788).

6. Components

6.1 Buttons

Primary Blue Button

• Default: bg: #006bff, color: #fff, padding 10px 16px, radius 8px, border 1px solid #006bff
• Hover: white background, blue text (#2285f7), box-shadow inset white, translateX(4px), opacity 0.7
• Active: scale 1.125, dark green background #2c6415, white text, border semi-transparent green
• Focus: outline black 1px, scale 1.125, bg #1eaedb, white text

Navy Button

• Default: bg: #0b3558, white text, padding 6px 16px 6px 6px, radius 8px
• Hover: bg #1eaedb, white text
• Active: bg #004796, text #006bff
• Focus: outline black 2px, bg #1eaedb, white text

Ghost Button

• Default: transparent bg, slate blue text #476788, border 1px solid #476788
• Hover: white bg, blue text, inset shadow white
• Active: scale 1.125, dark green bg, white text
• Focus: outline black 1px, bg #1eaedb, white text

Circle Pagination

• Default: bg #f8f9fb or #e7edf6, navy text, radius 50%
• Hover: bg #1eaedb, white text
• Active: navy text #006bff

6.2 Links

Variants:

• Slate blue (#476788) — hover shifts to #3860be
• Primary blue (#006bff) with underline — hover removes underline
• Navy (#0b3558) — hover to #3860be
• White (#ffffff) — hover to #3860be
• Black (#000000) — hover to #3860be

6.3 Forms

No text inputs in sample — likely consistent with border 1px solid #d4e0ed and radius 4–8px, focus outline in primary blue.

6.4 Cards

Example: white bg, padding 32px, radius 24px, border 1px solid #d4e0ed, shadow triple-layer soft blue.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-navy: #0b3558;
  --color-white: #ffffff;
  --color-slate-blue: #476788;
  --color-primary-blue: #006bff;
  --color-light-gray-blue: #f0f3f8;
  --color-dark-hover-blue: #294e70;
  --color-semantic-primary-light: #e7edf6;

  /* Typography */
  --font-primary: "Gilroy", "Proxima Nova", sans-serif;
  --heading-1-size: 5rem;
  --heading-1-weight: 700;
  /* ...repeat for all sizes... */

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-72: 72px;
  --space-96: 96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-card: rgba(71, 103, 136, 0.04) 0px 4px 5px,
                  rgba(71, 103, 136, 0.03) 0px 4px 10px,
                  rgba(71, 103, 136, 0.05) 0px 10px 20px;
  --shadow-focus-inset: rgba(184, 220, 255, 0.75) 0px 0px 8px inset;
}

8. AI Coding Assistant Prompt

# Calendly Design System Specification

You are a Calendly design expert. Build UIs matching their visual language exactly.

## Brand Context
Calendly values clarity, speed, and professionalism. The design is minimal, with bright blue accents for actions and deep navy for text anchors. Layouts follow an 8px grid and typography is geometric sans-serif.

## Color Palette
- Black: #000000 — primary text
- Deep Navy: #0b3558 — secondary brand color, dark buttons
- White: #ffffff — backgrounds, text on dark
- Slate Blue: #476788 — borders, secondary text
- Primary Blue: #006bff — CTAs, links, primary buttons
- Light Gray Blue: #f0f3f8 — hover/focus backgrounds
- Dark Hover Blue: #294e70 — hover state for dark buttons
- Semantic Primary Light: #e7edf6 — light background fills

## Typography
Font: "Gilroy", fallback "Proxima Nova", sans-serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 80px | 700 | 1.20 | Main hero headings |
| H2 | 68px | 700 | 1.20 | Large section headings |
| H3 | 50px | 700 | 1.20 | Section titles |
| H4 | 38px | 700 | 1.21 | Subheadings |
| H5 | 28px | 600/700 | 1.40 | Medium headings |
| Body L | 20px | 400/500/600 | 1.40 | Main body text |
| Body M | 18px | 400–700 | 1.60 | Secondary text |
| Small | 16px | 400–700 | 1.50–2.00 | UI labels |
| Caption | 14px | 500–700 | 1.40–2.00 | Notes, meta info |

## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px, 72px, 96px

Map:
- Button padding: 10px vertical / 16px horizontal
- Card padding: 32px
- Section gaps: 32px–48px

## Border Radius
- none: 0 — tables
- sm: 4px — inputs
- md: 8px — buttons
- lg: 12px — integration icons
- xl: 24px — cards
- full: 50% — avatars, circular buttons

## Shadows & Depth
- Card: rgba(71, 103, 136, 0.04) 0px 4px 5px, rgba(71, 103, 136, 0.03) 0px 4px 10px, rgba(71, 103, 136, 0.05) 0px 10px 20px
- Focus inset: rgba(184, 220, 255, 0.75) 0px 0px 8px inset

## Component Specifications

### Primary Button
Default:
```css
background: #006bff;
color: #ffffff;
padding: 10px 16px;
border-radius: 8px;
border: 1px solid #006bff;
font-weight: 600;
font-size: 14px;
```
Hover: white bg, color #2285f7, inset shadow white, translateX(4px), opacity 0.7  
Active: scale 1.125, bg #2c6415, white text  
Focus: outline 1px solid black, scale 1.125, bg #1eaedb

### Secondary (Navy) Button
Default: bg #0b3558, white text, padding 6px 16px 6px 6px, radius 8px  
Hover: bg #1eaedb, white text  
Active: bg #004796, text #006bff  
Focus: outline 2px solid black

### Ghost Button
Transparent bg, border 1px solid #476788, text #476788  
Hover: white bg, blue text  
Active: scale 1.125, bg #2c6415

### Navigation Links
Slate blue text, hover to #3860be  
Primary blue links underlined, hover removes underline

### Card
bg #ffffff, padding 32px, radius 24px, border #d4e0ed, shadow var(--shadow-card)

## Layout & Responsive Rules
Breakpoints: 320px, 385px, 426px, 480px, 530px, 576px, 640px, 768px, 834px, 900px, 992px, 1024px, 1200px, 1440px, 1920px  
Page padding: multiples of 8px per breakpoint  
Grid gap: 32px default

## Interaction Rules
Transition: 150ms ease for hover/focus/active  
Focus indicators: black outline, inset glow for text inputs  
Loading states: opacity 0.5

## DO
- Use only palette colors
- Maintain 8px grid
- Use Gilroy for all text
- Keep button padding consistent
- Respect border-radius tokens

## DON'T
- Invent new blues or grays
- Mix sharp and rounded corners in same component
- Use heavy drop shadows
- Remove focus outlines

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #006bff;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #006bff;
  font-weight: 600;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #fff;
  color: #2285f7;
  transform: translateX(4px);
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid #d4e0ed;
  box-shadow: var(--shadow-card);
}
```

Input:
```css
.input {
  border: 1px solid #d4e0ed;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
}
.input:focus {
  border-color: #006bff;
  box-shadow: var(--shadow-focus-inset);
}
```

9. Summary

TL;DR — Calendly’s design system is minimal SaaS done right: bright blue for actions, deep navy for text, Gilroy everywhere, and an 8px grid that keeps layouts consistent. Buttons have clear states, cards use soft shadows, and nothing feels accidental.

Brand Keywords — tech-pragmatic, grid-disciplined, blue-driven, friendly-professional