---
title: "Calendly design system"
variant: extended
source: https://calendly.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/calendly-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Calendly · Design System

> Calm neutrals meet vivid meeting-workflow gradients.

**Theme:** light · **Industry:** saas · **Source:** https://calendly.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Calendly pairs an airy, warm-neutral canvas with confident navy typography and vivid gradient product storytelling. Oversized rounded media panels, crisp interface mockups, and clear calls to action make a complex SaaS suite feel approachable.

## North star

Keep the interface calm and legible in warm neutrals, then use oversized rounded gradient imagery to make each product benefit tangible.

## Overview

The page uses a warm off-white canvas as a quiet frame for deep navy text and expansive, colorful product storytelling. The hero’s blue-to-lilac-to-peach gradient is a prominent visual moment, while later feature panels repeat softer blue, mint, and lavender tones around UI mockups. Treat those vivid hues as media-led illustration colors, not as a replacement for the measured core palette. Geist handles navigation, body copy, and controls; Calendly Sans gives display headings a clean, rounded presence, while Wulkan Text adds a more editorial contrast to selected headings. The layout alternates centered statements and split feature rows, with generous vertical breathing room and broad, rounded media surfaces. Compact navigation, understated dividers, and dark navy CTAs keep the experience grounded. The overall effect balances playful product imagery with a composed, readable SaaS interface.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#fcfbf8` | `--color-warm-canvas` | surface | Primary page background, light card surfaces, and occasional light button fills. |
| Slate Copy | `#5f6d77` | `--color-slate-copy` | neutral | Muted explanatory copy and supporting text on light sections. |
| Midnight Ink | `#071a31` | `--color-midnight-ink` | brand | Primary headings, body emphasis, dark CTA fills, inverse surfaces, and footer background. |
| Oat Surface | `#f5f3ee` | `--color-oat-surface` | surface | Soft secondary cards, integration tiles, and subtle button or link backgrounds. |
| Quiet Gray | `#b2b7bc` | `--color-quiet-gray` | neutral | Low-emphasis footer and button text. |
| Harbor Line | `#203145` | `--color-harbor-line` | neutral | Thin divider and border treatment, especially in the footer. |
| Mist Panel | `#e4e6e9` | `--color-mist-panel` | surface | Secondary interface and card surfaces that need gentle contrast. |
| Deep Harbor | `#0c2d54` | `--color-deep-harbor` | brand | Supporting dark-blue footer and interface details. |
| Cloud Blue | `#c3dffe` | `--color-cloud-blue` | surface | Pale blue card surface and product-mockup backdrop. |
| Graphite Copy | `#3d464e` | `--color-graphite-copy` | neutral | Secondary navigation and restrained text details. |
| Pale Divider | `#d8dce0` | `--color-pale-divider` | neutral | Faint rules and UI details within supporting components. |
| Lilac Accent | `#d4c2ff` | `--color-lilac-accent` | accent | Small illustrative accent and soft product-visual highlights. |
| Sky Accent | `#6bb1ff` | `--color-sky-accent` | accent | Illustrative blue accent within product and navigation visuals. |
| Mint Glow | `#baf0ec` | `--color-mint-glow` | accent | Illustration-only mint tone used in product artwork and mockups. |
| Lime Mist | `#f2f8de` | `--color-lime-mist` | accent | Illustration-only pale green accent in product artwork. |
| Bright Air | `#84c1ff` | `--color-bright-air` | accent | Small blue navigation accent and secondary illustrative highlight. |

### Semantic aliases

`--color-canvas` → `#fcfbf8` (Warm Canvas) · `--color-surface` → `#f5f3ee` (Oat Surface) · `--color-surface-2` → `#071a31` (Midnight Ink) · `--color-surface-3` → `#e4e6e9` (Mist Panel) · `--color-surface-4` → `#c3dffe` (Cloud Blue) · `--color-text` → `#071a31` (Midnight Ink) · `--color-text-muted` → `#5f6d77` (Slate Copy) · `--color-text-subtle` → `#b2b7bc` (Quiet Gray) · `--color-border` → `#203145` (Harbor Line) · `--color-accent` → `#d4c2ff` (Lilac Accent) · `--color-accent-2` → `#6bb1ff` (Sky Accent) · `--color-accent-3` → `#84c1ff` (Bright Air)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#071a31` | `#fcfbf8` | 16.9:1 | AAA |
| `#071a31` | `#f5f3ee` | 15.77:1 | AAA |
| `#071a31` | `#e4e6e9` | 13.98:1 | AAA |
| `#5f6d77` | `#fcfbf8` | 5.15:1 | AA |
| `#5f6d77` | `#f5f3ee` | 4.81:1 | AA |
| `#5f6d77` | `#071a31` | 3.28:1 | AA-large |
| `#5f6d77` | `#e4e6e9` | 4.26:1 | AA-large |
| `#b2b7bc` | `#fcfbf8` | 1.95:1 | fail |
| `#b2b7bc` | `#f5f3ee` | 1.82:1 | fail |
| `#b2b7bc` | `#071a31` | 8.65:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, captions, buttons, and interface labels. | Inter |
| Calendly Sans | `--font-display` | webfont | 500 | Display, H1, and H3 headings. | Inter |
| Wulkan Text | `--font-wulkan-text` | webfont | 500 | H2 and H4 editorial-style headings. | DM Serif Display |

- **Geist:** Use regular body text and medium controls; eyebrow labels are compact, uppercase, and letter-spaced.
- **Calendly Sans:** Medium weight with tight negative tracking for large headlines; keep title case and sentence case.
- **Wulkan Text:** Medium weight adds a restrained serif contrast; use tight tracking on larger headings.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1.1 | -0.028em | — | Calendly Sans | Oversized hero statement and major promotional headlines. |
| h1 | 60px | 500 | 1.1 | -0.033em | — | Calendly Sans | Primary page headline and major section statements. |
| h2 | 48px | 500 | 1.1 | -0.042em | — | Wulkan Text | Editorial-style feature and content section headings. |
| h3 | 36px | 500 | 1.1 | -0.028em | — | Calendly Sans | Feature titles and secondary prominent headings. |
| h4 | 28px | 500 | 1.2 | 0 | — | Wulkan Text | Smaller editorial feature and card headings. |
| body | 16px | 400 | 1.4 | 0 | — | Geist | Feature descriptions, supporting paragraphs, and standard copy. |
| caption | 14px | 400 | 1.4 | 0 | — | Geist | Compact supporting labels and helper text. |
| button | 14px | 500 | 1.4 | 0 | — | Geist | Primary and secondary action labels. |
| nav | 14px | 400 | 1.4 | 0 | — | Geist | Header navigation labels and menu items. |
| eyebrow | 12px | 600 | 1 | 0.083em | uppercase | Geist | Uppercase section labels above major headings. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 120 px.
- Section rhythm 120px · element gap 8px · card padding — · max content width 1200px.

Use a spacious, centered composition with content aligned to a measured 1200px maximum width. The top hero is full-bleed within a large rounded panel, followed by a quiet workflow showcase and alternating two-column feature rows. Center the hero and major integration and closing CTA headings; use left-aligned copy in feature splits. Keep section spacing generous, with restrained content density and clear transitions between story beats. Small navigation and utility elements sit above the broad editorial content.

## Shape & elevation

- Radius: button `8px` · card `48px` · nav `4px` · link `48px` · xs `3px` · sm `4px` · md `8px` · lg `12px` · xl `16px` · 2xl `20px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(11, 53, 88, 0.16) 0px 20px 48px -12px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Keep most content flat against the warm canvas, using thin neutral rules to divide feature details. Reserve subtle, broad shadows for floating product or testimonial cards. Rounded panels create the main sense of layering; avoid heavy outlines or deep, dramatic shadows.

## Imagery

Use product UI mockups and illustrative panels as the primary imagery, with occasional customer photography in the testimonial carousel and closing gallery. Frame interfaces inside large, rounded white or softly tinted cards. Hero and feature art use luminous blue, lilac, mint, and warm gradients with crisp, legible UI overlays. Keep logos in a compact integrations display; avoid making photography the dominant visual language.

## Components

### Announcement bar

A slim sky-blue banner above navigation with a short product announcement, learn-more link, and dismiss control.

### Primary CTA

Dark navy fill with warm-white text; compact label and softly rounded corners, used for the main conversion action.

### Feature showcase card

Large rounded white or warm-neutral surface pairing concise feature copy with a crisp scheduling or payments UI mockup.

### Feature split row

Two-column alternating image-and-copy layout with a feature heading, short description, and fine horizontal separators between details.

### Testimonial carousel

Gradient-backed customer story section with a prominent rounded quote card, customer portrait, and smaller side cards.

### Integration tiles

Centered integration logo display with soft oat-colored ecosystem cards and compact explanatory copy.

### Footer

Deep navy rounded footer panel with a large brand statement, grouped link columns, Calendly branding, and low-emphasis utility links.

### Measured component styles

- **Primary button** (“Sign up with Google”): background #fcfbf8 · text #071a31 · border 1px solid #fcfbf8 · radius 20px · padding 12px 20px · 500 16px Geist
- **Secondary button** (“Get started for free”): background #071a31 · text #fcfbf8 · border 2px solid · radius 16px · padding 12px 16px · 400 14px Geist
- **Link** (“Google suite Get your job done faster by”): background #f5f3ee · text #000000 · radius 48px · padding 24px · 400 16px Geist
- **Card** (“Book A client emails asking to meet. Sha”): background #ffffff · text #000000 · radius 48px · padding 0px · 400 16px Geist · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Scheduling”): transparent background · text #fcfbf8 · radius 4px · padding 0px · 400 14px Geist

## Do

- Use Warm Canvas #fcfbf8 as the dominant page field.
- Set important text and primary CTAs in Midnight Ink #071a31.
- Use large gradient artwork to frame product UI, not replace the core interface palette.
- Alternate centered hero moments with left-aligned feature details.
- Give cards and media panels generous rounded forms.
- Use fine rules and Slate Copy #5f6d77 for quiet supporting information.

## Don't

- Don't make every section a gradient panel.
- Don't use bright accent colors for long body copy.
- Don't crowd the page with dense grids or tight vertical spacing.
- Don't add heavy borders or dramatic shadows to ordinary cards.
- Don't treat illustration colors as the default page background.
- Don't use display typography for navigation or long paragraphs.

## Agent prompt

Build a new SaaS page in Calendly’s visual language. Use Warm Canvas #fcfbf8 for the main background, Midnight Ink #071a31 for headings and primary actions, and Slate Copy #5f6d77 for supporting text. Keep the interface spacious and centered within the measured 1200px content width. Use Geist for navigation, body copy, and controls; use Calendly Sans for clean display headings and Wulkan Text selectively for editorial headings. Introduce large, rounded product panels with vivid blue, lilac, and mint gradient artwork, keeping those hues within illustration and mockup regions. Alternate centered statement sections with split feature rows, fine dividers, and calm cards. Add a compact top announcement and navigation, clear CTA hierarchy, and a deep navy footer. Favor readable product UI over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy over a full-bleed rounded gradient panel with signup actions and a featured product card. | announcement banner, dual signup options, rotating feature showcase | blue-lilac-peach gradient, white rounded card, dark navy CTA |
| 2 | how-it-works | Centered section introduction above four adjacent cards for booking, prep, capture, and follow-up. | workflow overview, four-step progression | rounded cards, soft illustrated panels, compact labels |
| 3 | feature-grid | Centered section heading followed by a broad product-led feature layout with cards and UI examples. | feature discovery, linked product examples | rounded feature surfaces, calendar mockups, spacious grid |
| 4 | feature-split | Two-column split with product art on one side and feature copy with expandable detail rows on the other. | feature detail rows, AI assistant introduction | rounded gradient illustration, fine separators, compact eyebrow |
| 5 | feature-split | Alternating two-column feature row with recap details beside a gradient-backed product illustration. | expandable feature rows, follow-up workflow | soft gradient panel, thin dividers, editorial heading |
| 6 | feature-split | Two-column split pairing a payment mockup with a heading and list of payment capabilities. | payment feature discovery, capability list | mint-tinted mockup, rounded media frame, fine row separators |
| 7 | testimonials | Full-width gradient customer-story band with centered title and layered testimonial cards. | testimonial carousel, customer outcome highlights | colorful gradient background, portrait cards, layered rounded panels |
| 8 | integrations | Centered headline and intro above a grid of integration logos and ecosystem cards. | integration discovery, ecosystem links | logo cloud, soft neutral cards, centered CTA link |
| 9 | footer | Centered final CTA and image gallery above a large rounded navy footer with grouped link columns. | final conversion CTA, footer navigation | dark footer panel, rounded gallery images, high-contrast link groups |

## Source CSS custom properties (selected)

```css
--section-rounded-divider-height: calc(.25rem*8);
--text-ui-huge: 72px;
--text-ui-h1: 60px;
--text-ui-h2: 48px;
--text-ui-h3: 36px;
--text-ui-h4: 28px;
--text-ui-h5: 24px;
--text-ui-h6: 20px;
--spacing-lg: calc(.25rem*6);
--spacing-xl: calc(.25rem*8);
--spacing-2xl: calc(.25rem*10);
--spacing-3xl: calc(.25rem*12);
--spacing-4xl: calc(.25rem*14);
--spacing-5xl: calc(.25rem*16);
--radius-ui-2xl: calc(.25rem*8);
--radius-ui-3xl: calc(.25rem*10);
--radius-ui-4xl: calc(.25rem*12);
--text-ui-body-xl: 20px;
--text-ui-body-lg: 18px;
--text-ui-body-md: 16px;
--text-ui-body-sm: 14px;
--text-ui-body-xs: 12px;
--spacing-xs: calc(.25rem*2);
--spacing-sm: calc(.25rem*3);
--spacing-md: calc(.25rem*4);
--radius-ui-xs: calc(.25rem*2);
--radius-ui-sm: calc(.25rem*3);
--radius-ui-md: calc(.25rem*4);
--radius-ui-lg: calc(.25rem*5);
--radius-ui-xl: calc(.25rem*6);
--spacing-gap-xxs: calc(.25rem*1);
--spacing-gap-xs: calc(.25rem*2);
--spacing-gap-sm: calc(.25rem*3);
--spacing-gap-md: calc(.25rem*4);
--spacing-gap-lg: calc(.25rem*6);
--spacing-gap-xl: calc(.25rem*8);
--spacing-gap-2xl: calc(.25rem*12);
--spacing-gap-3xl: calc(.25rem*14);
--spacing-gap-4xl: calc(.25rem*16);
--spacing-gap-8xl: calc(.25rem*32);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/calendly-com