calendly.com/

Calendly

calendly.com/

Calendly is a Productivity & Collaboration product. See its calendly.com landing page design in full — desktop and mobile screenshots plus close-ups of the heroes, features, footers, pricing, about us, and 4 more. It's built with Astro and Tailwind CSS. Its type is set in Calendly Sans, anchored by a #071a31 palette. Study how Calendly structures its messaging, layout and visual hierarchy, then explore more of the best Productivity & Collaboration website designs.

Visit website

Category

Productivity & Collaboration

Style

Light Colorful

Stack

Astro Tailwind CSS

Fonts

Calendly SansGeist

Palette

Meta title

Meeting Scheduling Software and AI Meeting Tools | Calendly

Sections

Updated

Oct 15, 2026

Calendly's landing page, section by section

Each section below is cropped straight from Calendly's live page — useful references for productivity & collaboration landing page design.

Calendly design review: how the homepage is built

Calendly's homepage runs about 13,878 pixels at 1440px wide: a blue announcement strip, a header, a hero on a pale grey rounded panel, a four-card row, three feature blocks with empty image slots, a gradient testimonial carousel, an integrations icon grid, a closing call to action with two photo cards, and a rounded dark footer. Colour stays restrained, with off-white and warm grey surfaces, navy #071a31 on buttons, headlines and the footer, and light blue #84c1ff in the banner and gradients. Calendly Sans and Geist are the detected typefaces, with a serif on feature headings.

Above the fold

A blue strip reads "Introducing the new Calendly, built to handle all of the work around meetings." The header holds "Product", "Solutions", "Resources" and "Pricing", then "Talk to sales", an outlined "Log In" and a navy "Get started for free". The centred headline "All the work around meetings, handled." sits over two equal navy buttons, "Sign up with Google" and "Sign up with Microsoft", and an underlined "Sign up with email" line.

Four-card row and feature blocks

The label "AI MEETING MANAGEMENT" leads into "Built for people whose work runs on meetings" and a "Start for free" button. Four white cards, "Book", "Prep", "Capture" and "Follow up", sit in a row; only the first is wide and filled, with steps such as "Client picks Tuesday at 2 p.m." The rest show pastel shapes without content. The card titles sit top-left in navy.

Assistant, recap and payment blocks, then testimonial

Three alternating blocks follow: "Meet Callie, your AI assistant" with a "Beta" tag, "Actionable recaps for every meeting" and "Flexible payment options that fit your business", both tagged "New". Each sits beside a flat grey rounded square. A gradient band headed "Real customers. Real results." holds a card showing "75 hours saved monthly", a serif quote from "Marques Stewart" and a photo.

Integrations, closing call to action and footer

Under "150+ INTEGRATIONS", "Connect Calendly with your favorite tools" shows 17 app icons in two rows and two cards, "Google suite" and "Microsoft suite". "From the first meeting to the follow-up" adds another "Start for free" button over two gradient photo cards with chips such as "Discovery" and "Scheduled". A navy footer pairs "Make space for what matters." with seven link columns, from "Products" to "Company", plus download and social icon rows.

On mobile

At 390px the page is 14,834 pixels tall. The hero headline wraps to three lines, the two sign-up buttons stack full width, and the preview card becomes one column with a "Learn more" link. The four cards stack vertically, and "Prep" and "Capture" show step lists that the desktop capture left empty. Integration icons reflow to three per row and the footer becomes one long list.

Worth borrowing

Two equal navy buttons, "Sign up with Google" and "Sign up with Microsoft", put account creation in the hero, with "No credit card required" beneath.
Small "Beta" and "New" badges beside product names flag what is recent without extra copy.
A serif on feature headings such as "Meet Callie, your AI assistant" separates product storytelling from the sans hero.