Inside the Calendly website design
Calendly is a technology website built with custom code, React, Astro, and Tailwind CSS. Its pages are built from hero, features, CTA, footer, pricing, feature card, process, FAQ, testimonials, and feature grid sections, shown here in full-page captures and a scroll recording. Typography: Geist. Palette: #C0E0FF, #2060A0, #60C0FF.
Calendly connects and simplifies all of the work around meetings, from scheduling, payments, and meeting prep to notetaking, contact management, and follow-up. Its visual style is soft, corporate, and gradient, with announcement bar, navigation bar, and hero among its components.
Why we picked it
A repeating card pattern with icon tabs and soft gradient backdrops (blue, lilac, mint) carries the eye through scheduling, notes and payments without feeling like separate pitches. Bold dark headlines over pale cream, paired with rounded white product panels, keep each feature easy to scan on a long page.
What to look for
- Hero: a specific headline instead of a generic slogan
- Features: benefits framed around what the user gets, not internal capability names
- CTA: a short restatement of the main benefit
- Footer: grouped navigation with clear column headings
Questions designers ask
What fonts does Calendly use?
Calendly uses Geist, read from the fonts loaded on the captured page.
What is the Calendly website built with?
The Calendly website is built with custom code, React, Astro, and Tailwind CSS, detected when the page was captured.
What colours does the Calendly website use?
The captured palette includes #C0E0FF, #2060A0, and #60C0FF.
What sections does the Calendly website have?
The Calendly website includes hero, features, CTA, footer, pricing, feature card, process, FAQ, testimonials, and feature grid sections. Each one opens on its own page, so you can compare it with the same section on other websites.
Can I use Calendly's design for my own project?
Use it as a reference for structure, hierarchy, and style rather than something to copy. The DESIGN.md download summarises Calendly's typography, colours, and components for your team or an AI tool.
