Calendly — design system & UI screens

Productivity · 1 screen · 10 sections · https://calendly.com/

This is a meeting scheduling and calendar management platform for booking appointments and coordinating availability. The landing page uses a hero section showcasing the scheduling interface with calendar selection, time slots, and availability management. Below, multiple feature sections with illustrations describe core functionality: full calendar control, actionable meeting notes, and 100+ integrations. A four-tier pricing table (Free, Standard, Teams, Enterprise) anchors the lower half, followed by footer links and navigation.</description> <parameter name="category">Landing Page

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/calendly.

Decoded design system

Calendly's decoded design system: background #F8F9FB, text #0A0A0B, accent #006BFF, link #0B3558, primary #006BFF; type scale h1 68px / h2 18px / body 20px; 8px spacing base; 8px base radius. The single interactive/action color is #006BFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F8F9FB`
surface	`#E9EAEC`
border	`#D4D5D7`
text	`#0A0A0B`
text_muted	`#646466`
primary	`#006BFF`
accent	`#006BFF`
link	`#0B3558`
secondary	`#476788`
button_bg	`#006BFF`
button_text	`#FFFFFF`

Using these colors

Action color #006BFF — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #006BFF — one role, not several (the action color).
accent #006BFF — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #0B3558 — inline text links and link-styled controls.
secondary #476788 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Roboto
Body: Roboto
h1: 68px
h2: 18px
body: 20px

Spacing

base unit: 8px
scale: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 40px

Radii

base: 8px
button: 8px

Shadows (elevation)

card: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.03) 0px 8px 15px 0px, rgba(71, 103, 136, 0.08) 0px 30px 50px 0px

Motion

Micro-interactions run at 200ms (dominant) with ease.

durations: 200ms · 600ms · 1ms
easings: ease · ease-in-out
animated properties: transform, opacity, background-position, background-size

Native design tokens

Token	Value
`--color-purple-200`	`#f3edfe`
`--color-action-tertiary-text-hover`	`#5f6d77`
`--color-orange-600`	`#f79009`
`--color-neutral-600`	`#476788`
`--color-orange-800`	`#6f3f00`
`--color-badge-warning-bg`	`#ffe67c`
`--color-fd-secondary`	`#ededed`
`--color-neutral-300`	`#e7edf6`
`--color-purple-800`	`#7434f4`
`--color-neutral-200`	`#f0f3f8`

…and 110 more measured on the page.

Button states (measured)

primary hover: border 1px solid rgb(0, 78, 186) · background #004EBA
primary focus: border 1px solid rgb(0, 153, 255) · background #0099FF

Layout (measured)

container max-width: 1200px
nav: 65px sticky
common grid: 2 columns

Motion choreography (measured)

Load order: div.rfm-marquee×2 → div.flex → a.ButtonBase-sc-39255da6-0×4 → path.HomepageHeroShapes__Path → path.HomepageHeroShapes__Path → div.Flex-sc-c78b5868-0

Scroll reveal: 35 elements rest at opacity 0, translateY(25px), animate in over 0.8s ease.

Stagger: div ×3 — 100ms apart.

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Responsive (measured)

breakpoints: 480px · 576px · 768px · 992px · 1200px · 1280px
mobile (390px): hero 38px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Scheduling landing page