Calendly design system

What font does Calendly use?

Calendly’s website uses Calendly Sans for headings and Geist for body text. Calendly Sans is not on Google Fonts; the closest free match is Figtree; Geist is free on Google Fonts.

Calendly colour palette

Calendly’s home page is light (#FCFBF8 background, #000000 text) and uses #071A31 for its main actions. Its palette: #FCFBF8, #F5F3EE, #071A31, #E4E6E9, #FFFFFF, #5F6D77.

• #FCFBF8
  74.7% · backgrounds
• #F5F3EE
  12.7% · backgrounds
• #071A31
  4.6% · backgrounds, text
• #E4E6E9
  3.8% · backgrounds
• #FFFFFF
  2.4% · backgrounds
• #5F6D77
  0.8% · text
• #C3DFFE
  0.4% · backgrounds
• #D4C2FF
  0.2% · backgrounds
• #6BB1FF
  0.1% · backgrounds
• #F2F8DE
  0.1% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Calendly’s largest type is 72px at weight 500.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px.

Corner radii: 1px, 2px, 3px, 4px, 8px, 12px, 16px. 4 shadow levels measured.

What makes Calendly look like Calendly

Almost entirely neutral: 99% of the page is painted in #FCFBF8 and #F5F3EE.

#C3DFFE is an accent: 0.4% of the page, as small fills such as buttons and badges. Keep it to small areas.

#D4C2FF is an accent: 0.2% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (72px Calendly Sans) is medium weight, not bold (500), tracked to -0.028em.

Calendly DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Calendly’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Calendly’s product, so use your own name, words and images.

Download Calendly DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Calendly’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@500&display=swap");

:root {
  --color-background: #FCFBF8; /* Background */
  --color-surface: #D8DCE0; /* Surface */
  --color-text: #000000; /* Text */
  --color-text-muted: #5F6D77; /* Text muted */
  --color-border: #D8DCE0; /* Border */
  --color-action: #071A31; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-link: #071A31; /* Link */
  --color-positive: #BAF0EC; /* Positive */
  --color-f5f3ee: #F5F3EE; /* 12.7% of the page, as fills */
  --color-e4e6e9: #E4E6E9; /* 3.8% of the page, as fills */
  --color-c3dffe: #C3DFFE; /* 0.4% of the page, as fills */
  --font-body: "Geist", "Geist", sans-serif; /* Geist */
  --font-display: "Calendly Sans", "Figtree", sans-serif; /* Calendly Sans on the site; Figtree renders */
  --font-interface: "Wulkan Text", "Figtree", sans-serif; /* Wulkan Text on the site; Figtree renders */
  --type-display-1: 72px; /* Display 1, weight 500 */
  --type-display-1-leading: 79.2px;
  --type-display-1-tracking: -0.028em;
  --type-display-2: 60px; /* Display 2, weight 500 */
  --type-display-2-leading: 66px;
  --type-display-2-tracking: -0.033em;
  --type-display-3: 48px; /* Display 3, weight 500 */
  --type-display-3-leading: 52.8px;
  --type-display-3-tracking: -0.042em;
  --type-display-4: 36px; /* Display 4, weight 500 */
  --type-display-4-leading: 39.6px;
  --type-display-4-tracking: -0.028em;
  --type-headline-large: 28px; /* Headline Large, weight 500 */
  --type-headline-large-leading: 33.6px;
  --type-headline-small: 24px; /* Headline Small, weight 500 */
  --type-headline-small-leading: 33.6px;
  --type-title-large: 20px; /* Title Large, weight 500 */
  --type-title-large-leading: 28px;
  --type-title-small: 18px; /* Title Small, weight 400 */
  --type-title-small-leading: 25.2px;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 22.4px;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 19.6px;
  --type-label: 12px; /* Label, weight 500 */
  --type-label-leading: 16.8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-30: 120px;
  --space-38: 152px;
  --space-40: 160px;
  --radius-xs: 1px;
  --radius-sm: 2px;

How this was measured

PikSpec’s scanner read the calendly.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Calendly is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Calendly.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.