calendly.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: calendly.com
description: "Light product system built on #ffffff with #006bff as the primary CTA accent. Type anchored in gilroy at 80px / weight 700. Extracted automatically from https://calendly.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  calendly.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(0, 107, 255) as the high-saturation accent for primary actions.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside gilroy as the primary typeface.
  Gilroy is paired with gilroy Fallback for secondary roles.
  A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 23 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#ffffff"
  surface-2: "#f5f5f5"
  ink: "#0a0a0a"
  ink-muted: "rgba(10, 10, 10, 0.65)"
  ink-subtle: "#93a0aa"
  primary: "#006bff"
  on-primary: "#ffffff"
  primary-hover: "#071a31"
  hairline: "rgba(204, 204, 204, 0.5)"
  semantic-error: "#841f0e"
  semantic-success: "#3f491b"
  semantic-warning: "#ffe67c"
  semantic-info: "#114580"

typography:
  display-xl:
    fontFamily: "gilroy, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 80px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0
  display-lg:
    fontFamily: "gilroy, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 68px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0
  display-md:
    fontFamily: "gilroy, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  headline:
    fontFamily: "gilroy, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0
  body:
    fontFamily: "gilroy, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-sm:
    fontFamily: "gilroy, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0
  button:
    fontFamily: "gilroy, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 24px
  sm: 32px
  md: 40px
  lg: 60px
  xl: 68px
  xxl: 80px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#0b3558"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
  button-outline:
    backgroundColor: "transparent"
    textColor: "#476788"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  button-primary-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 10px 16px

extracted_at: "2026-06-11T06:03:47.579Z"
completeness: 79
scoreVersion: "v2"

---

# Design System — calendly.com
> Extracted automatically by Prism from https://calendly.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: sparse  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (gilroy) | "Calendly makes scheduling simp" |
| Color assertion | dual-accent | #006bff |
| Whitespace | sparse | section rhythm 72px |
| Interaction | expressive | 23 keyframes, 28 transitions |
| Radius language | 8px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 8px-rounded · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(0, 107, 255)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 72px between major bands. Card padding: 60px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

calendly.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Typography is anchored in **gilroy**. Headlines use weight 700 for confident, assertive presence — the brand wants to be heard. 

Body text reads in Pure Black (`#0a0a0a`) — softened from pure black, a small but deliberate detail that lowers reading friction. **#006bff** (`#006bff`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (6 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: White (`#ffffff`)
- Primary typeface: gilroy
- Primary text: Pure Black (`#0a0a0a`)
- Accent: #006bff (`#006bff`)
- Display: 68px weight 700
- Shadow system: 6 distinct elevation levels
- Custom fonts loaded: gilroy, gilroy Fallback, Geist, Calendly Sans, Wulkan Text

## 2. Color Palette & Roles

### Background & Surface
- **White** (`#ffffff`): Page background (primary)
- **Magnolia** (`#fcfbf8`): Surface / elevated background (CSS var)
- **Off-White** (`#f8f9fb`): Surface / elevated background
- **Whitesmoke** (`#e5e5e5`): Surface / elevated background
- **Light Gray** (`#d4e0ed`): Surface / elevated background

### Text & Content
- **Pure Black** (`#0a0a0a`): Primary body text
- **Steel** (`#5f6d77`): Text (CSS var)
- **Text Tertiary** (`#93a0aa`): Text (CSS var)
- **Midnight** (`#071a31`): Text (CSS var)
- **Black** (`#000000`): Secondary text

### Accent & Interactive
- **Cobalt** (`#1e5ea7`): Accent / interactive (CSS var)
- **Primary 300** (`#b8dcff`): Accent / interactive (CSS var)
- **Primary 800** (`#004796`): Accent / interactive (CSS var)
- **Primary 500** (`#0099ff`): Accent / interactive (CSS var)
- **Primary 700** (`#004eba`): Accent / interactive (CSS var)
- **Action Disabled Text** (`#748491`): Accent / interactive (CSS var)
- **Navy** (`#0e396a`): Accent / interactive (CSS var)

### Border & Divider
- **Silver** (`#d8dce0`): Border (CSS var)
- **Translucent Silver (50%)** (`rgba(204, 204, 204, 0.5)`): Borders / dividers
- **Whitesmoke** (`#e2e2e2`): Borders / dividers

### Full Extracted Palette
**76 colors rendered on the page** + **51** more declared in design tokens (CSS custom properties — not necessarily painted). (20 categorized above + 107 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#006bff` — #006bff
- `#0b3558` — #0b3558
- `#476788` — Slate Gray
- `#e55cff` — Magenta
- `#feba08` — Amber
- `#05a6f0` — Sky Bright
- `#80bc06` — #80bc06
- `#f25325` — Vermillion
- `#f5f5f5` — Off-White
- `#68819b` — Slate Gray
- `#e7edf6` — Light Gray
- `#0069ff` — #0069ff
- `#e6f0ff` — Light Gray
- `#a6bbd1` — Sage
- `#12b76a` — Emerald
- `#ebf3ff` — Light Gray
- `#8247f5` — Violet
- `#ffa600` — Amber
- `#14aa51` — Success Green
- `#f0f3f8` — Off-White
- `#188038` — Forest Green
- `#1967d2` — M Tricolor Blue
- `#f35325` — Vermillion
- `#81bc06` — #81bc06
- `#ffba08` — Amber
- `#17e886` — #17e886
- `#0a2540` — Navy Blue
- `#4087fc` — Ring Blue
- `#34439e` — #34439e
- `#f4f8ff` — Ghost White
- `#e8fdf3` — Light Gray
- `#0fa34b` — Success Green
- *…+75 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-inset-shadow-alpha`: `100%`
- `--tw-inset-ring-shadow`: `0 0 #0000`
- `--tw-inset-shadow`: `0 0 #0000`
- `--tw-shadow-alpha`: `100%`

**Spacing Token**
- `--spacing-gap-lg`: `calc(.25rem * 6)`
- `--spacing-4xl`: `calc(.25rem * 14)`
- `--spacing-2xl`: `calc(.25rem * 10)`
- `--spacing-sm`: `calc(.25rem * 3)`

**Border Radius Token**
- `--radius-ui-3xl`: `calc(.25rem * 10)`
- `--radius-ui-full`: `9999px`
- `--radius-btn-standard`: `calc(.25rem * 2.5)`
- `--radius-ui-xl`: `calc(.25rem * 6)`

**Text Color**
- `--color-text-secondary`: `#5f6d77`
- `--color-text-tertiary`: `#93a0aa`
- `--color-text-primary`: `#071a31`

**Primary Brand Color**
- `--color-primary-300`: `#b8dcff`
- `--color-primary-800`: `#004796`
- `--color-primary-500`: `#09f`
- `--color-main-100p`: `#f4f8ff`

**Success**
- `--color-green-500`: `#17e886`
- `--color-green-600`: `#17e886`
- `--color-green-200`: `#e8fdf3`
- `--color-green-100`: `#f1fef8`

**Font Weight Token**
- `--font-weight-bold`: `700`
- `--font-weight-regular`: `400`
- `--font-weight-semibold`: `600`
- `--font-weight-medium`: `500`

**Motion Token**
- `--default-transition-duration`: `.15s`
- `--default-transition-timing-function`: `cubic-bezier(.4, 0, .2, 1)`

**Border**
- `--color-border-subtle`: `#d8dce0`

**Error / Destructive**
- `--color-red-600`: `#d53c00`
- `--color-red-500`: `#ff4f00`

**Background**
- `--color-surface-bg-primary`: `#fcfbf8`

**Z-Index Token**
- `--header-z-index`: `2147483004`

**Other tokens**
- `--color-purple-200`: `#f3edfe`
- `--color-action-tertiary-text-hover`: `#5f6d77`
- `--color-orange-600`: `#f79009`
- `--color-orange-800`: `#6f3f00`
- `--color-neutral-600`: `#476788`
- `--color-badge-warning-bg`: `#ffe67c`
- `--color-fd-secondary`: `#ededed`
- `--color-neutral-300`: `#e7edf6`

## 3. Typography Rules

### Font Families
- **Primary**: `gilroy`
- **Secondary**: `gilroy Fallback`
- **Font 3**: `Geist`
- **Font 4**: `Calendly Sans`
- **Font 5**: `Wulkan Text`

### Custom Fonts Loaded
- **gilroy** weight 400 (normal)
- **gilroy** weight 500 (normal)
- **gilroy** weight 600 (normal)
- **gilroy** weight 700 (normal)
- **gilroy Fallback** weight normal (normal)
- **Geist** weight 100 900 (normal)
- **Calendly Sans** weight 100 900 (oblique 0deg 10deg)
- **Wulkan Text** weight 400 (normal)
- **Wulkan Text** weight 500 (normal)
- **Wulkan Text** weight 600 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | gilroy | 80px | 700 | 1.2 | normal | Main headline (h2) |
| Section Heading | gilroy | 68px | 700 | 1.2 | normal | Section titles (h1) |
| Sub-heading | gilroy | 28px | 600 | 1.4 | normal | Third-level heading (h3) |
| Label Heading | gilroy | 18px | 700 | 1.6 | normal | Small heading (H5) |
| Label Heading | gilroy | 16px | 600 | 1.6 | normal | Small heading (H6) |
| Card Title | gilroy | 16px | 400 | 1 | normal | Card headings |
| Link Large | gilroy | 16px | 700 | 1 | normal | Link (16px) — Decoration: none |
| Button | gilroy | 14px | 600 | 1.4 | normal | Button label (14px) |

### Font Weight Scale

CSS custom properties define 5 explicit weight steps:
- `--font-weight-regular`: `400` — Regular
- `--font-weight-normal`: `400` — Regular
- `--font-weight-medium`: `500` — Medium
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-bold`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `80px`, `68px`, `50px`, `28px`, `26.93px`, `24.45px`, `24px`, `21.92px`, `21.73px`, `20.20px`, `20px`, `19.41px`, `19.41px`, `19.02px`, `18px`, `17.50px`, `16.99px`, `16.36px`, `16.07px`, `16px`, `15.10px`, `15.06px`, `15.03px`, `14.15px`, `14.06px`, `14px`, `13.65px`, `13.22px`, `13.15px`, `12.34px`, `12.05px`, `11.61px`, `11.33px`, `10.89px`, `10.54px`, `10.41px`, `9.68px`, `9.44px`, `9.28px`, `8.12px`

> 34 size(s) detected outside the sampled hierarchy (50px, 26.9306px, 24.4492px, 24px, 21.9203px, 21.7326px, 20.198px, 20px, 19.4081px, 19.4067px, 19.016px, 17.5px, 16.9917px, 16.3636px, 16.067px, 15.1037px, 15.0628px, 15.0294px, 14.153px, 14.0586px, 13.652px, 13.2157px, 13.1507px, 12.34px, 12.0503px, 11.606px, 11.3278px, 10.893px, 10.544px, 10.409px, 9.682px, 9.437px, 9.284px, 8.124px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#0b3558`
- Padding: 0px
- Radius: 4px
- Font: 14px weight 600
- Use: Subtle action, toolbar, nav button

**Outline**
- Background: `transparent`
- Text: `#476788`
- Padding: 10px 16px
- Radius: 8px
- Border: 1px solid rgb(71, 103, 136)
- Font: 14px weight 600
- Use: Secondary action with border

**Primary Brand**
- Background: `#006bff` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 10px 16px
- Radius: 8px
- Border: 1px solid rgb(0, 107, 255)
- Font: 14px weight 600
- Use: Primary CTA / brand action

**Primary Brand**
- Background: `#006bff` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 6px 16px 6px 6px
- Radius: 8px
- Border: 1px solid rgb(0, 107, 255)
- Font: 18px weight 600
- Use: Primary CTA / brand action

**Secondary**
- Background: `#0b3558`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 6px 16px 6px 6px
- Radius: 8px
- Border: 1px solid rgb(11, 53, 88)
- Font: 18px weight 600
- Use: Secondary action


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 107, 255)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(10, 10, 10)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 107, 255)"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(10, 10, 10)"
    hover:
      bg: "transparent"
      fg: "inherit"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(11, 53, 88)"
    hover:
      bg: "transparent"
      fg: "inherit"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **4 shape(s)** in this system: `Ghost`, `Outline`, `Primary Brand`, `Secondary`
- **DO NOT introduce new buttons variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Flexbox column

### Max Width
1440px

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 24px |
| sm | 32px |
| md | 40px |
| base | 48px |
| lg | 60px |
| xl | 68px |
| 2xl | 72px |
| 3xl | 80px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 24px | Large rounded elements, pill segments |
| Xl | 32px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `4px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Subtly Rounded — Minimal corner rounding (1–4px). Professional restraint.

**Full Radius Spectrum**: 0px, 2px, 4px, 8px, 12px, 24px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~72px internal vertical padding (up to 96px) — **generous**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `80px` | Top/bottom of full-bleed hero sections |
| **section** | `68px` | Between major bands (color change, content shift) |
| **subsection** | `60px` | Within a section, between content groups |
| **card** | `40px` | Card padding, list-item spacing |
| **compact** | `32px` | Form fields, tight clusters, badge padding |
| **micro** | `24px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**6/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Easy scheduling ahead" — 68px left-aligned
- **Subheading:** "Join 20 million professionals who easily book meetings with the #1 scheduling tool."
- **Media:** present, positioned top
- **CTAs:** 2 (primary: "Sign up with Google")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Place media top of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 64px
- **Logo:** ✓ present
- **Nav links:** 5 primary items
- **CTAs in nav:** 2
- **Clone instruction:** Build a static logo left links left navigation. Reserve 2 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 5 cards detected
- **Columns (desktop):** 4-up grid
- **Card dimensions:** 378×395px (aspect 0.96:1)
- **Gap:** 32px between cards
- **Content:** ✓ image + CTA
- **Image position:** none
- **Clone instruction:** Build a 4-column grid (desktop) with cards at ~0.96:1 aspect ratio. Each card has an image at the none.

### Pricing Table Pattern

- **Tier count:** 4 pricing tiers
- **Layout:** side-by-side (horizontal comparison)
- **Columns (desktop):** 4-up
- **Clone instruction:** Build a 4-column side-by-side pricing comparison.

### CTA Banner Pattern

- **Banner count:** 2
- **Position:** multiple
- **Visual treatment:** ✓ contrasting background
- **Primary CTA text:** "169%return on investmentRead now"
- **Clone instruction:** Place multiple CTA banners across page sections. Use contrasting solid background.

### Footer Pattern

- **Columns:** 1
- **Links:** 66 total
- **Height:** 899px
- **Includes:** ✗ no newsletter | ✓ social icons | ✓ language switcher ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~66 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.04) 0px 4px 4px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(71, 103, 136, 0.04) 0px 4px 5px 0px`,<br>`rgba(71, 103, 136, 0.04) 0px 10px 15px 0px`,<br>`rgba(71, 103, 136, 0.1) 0px 40px 50px 0px` | Cards, elevated surfaces |
| Inset (Level 3) | <br>`rgba(184, 220, 255, 0.75) 0px 0px 8px 0px inset` | Buttons, pressed-state elements |
| Layered (Level 4) | <br>`rgba(71, 103, 136, 0.04) 0px 4px 5px 0px`,<br>`rgba(71, 103, 136, 0.03) 0px 8px 15px 0px`,<br>`rgba(71, 103, 136, 0.08) 0px 30px 50px 0px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--ease-in` | `cubic-bezier(.4, 0, 1, 1)` | Custom Ease — Balanced |
| `--default-transition-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-out` | `cubic-bezier(0, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-in-out` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--default-transition-duration` | `.15s` | Fast |

### Copy-Paste Transition Snippets

**Opacity**
```css
transition: opacity 0.1s ease-in-out;
```

**All Props**
```css
transition: 0.2s linear;
```

**Background**
```css
transition: background-color 0.3s ease-in-out;
```

**All Props**
```css
transition: width 0.3s ease-in-out;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `fePmJl` | Rotate / Spin | transform | UI transition |
| `kUFUrl` | Rotate / Spin | transform | UI transition |
| `scroll` | Slide | transform | UI transition |
| `ketch-backdropFadeOut` | Fade | opacity | Element exit |
| `ketch-bannerAnimateCenter` | Fade | opacity | Element entrance |
| `ketch-bannerAnimateTop` | Slide | transform | UI transition |
| `ketch-bannerDesktopAnimate` | Slide | transform | UI transition |
| `ketch-bannerDismissBottom` | Slide | transform | UI transition |
| `ketch-bannerDismissCenter` | Fade | opacity | Element entrance |
| `ketch-bannerMobileBottomAnimate` | Slide | transform | UI transition |
| `ketch-bannerMobileDismissBottom` | Slide | transform | UI transition |
| `ketch-fadeIn` | Fade | opacity | Element entrance |
| `ketch-modalAnimatedLeft` | Custom | left | UI transition |
| `ketch-modalAnimatedRight` | Custom | right | UI transition |
| `ketch-pulseOpacity` | Fade | opacity | Attention / status |
| `onetrust-fade-in` | Fade | opacity | Element entrance |
| `ot-slide-in-left` | Slide | transform | Panel / drawer enter |
| `ot-slide-in-right` | Slide | transform | Panel / drawer enter |
| `ot-slide-out-left` | Slide | transform | Panel / drawer exit |
| `ot-slide-out-right` | Slide | transform | Panel / drawer exit |

> *3 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `400ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 23 unique animations (23 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use Pure Black (`#0a0a0a`) for text — not pure black, it's warmer and more readable
- Use gilroy as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use #006bff (`#006bff`) as the primary accent — it's the brand's signature interactive color
- Use 8px border-radius on buttons — the standard corner rounding for interactive elements
- Maintain nav height at 64px — consistent vertical space for the navigation bar
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Each card includes a none image — imagery is part of the card identity, not optional
- Use a 4-column grid on desktop — density matters for this content type
- Place 4 pricing tiers side-by-side on desktop — direct comparison is the value prop
- Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single

### Don't
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(0, 107, 255)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(0, 107, 255)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 385px | Single column, compact spacing |
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1023px | Multi-column grids begin |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `68px` | `38px` |
| heading | line-height | `81.6px` | `45.6px` |
| nav | height | `64px` | `56px` |
| card | width | `1200px` | `342px` |

### Collapsing Strategy
- Headlines: 68px → 38px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 5 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).
- **Nav CTAs reduced** on mobile (2 → 1) — the design prioritizes content over conversion buttons at small sizes.
- **Card grid: 4-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Animated SVG** — path/line-draw animations.
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Blend modes** — 8 mix-blend layer(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.

> **Motion fingerprint**: SVG animations, non-rectangular shapes (10), blend modes, CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Illustration-driven

The site relies primarily on illustrations, vector art, and decorative SVG elements rather than photography. Use commissioned illustrations, icon sets, or generated graphics for clones — stock photos will feel off-brand.

**Canonical Brand Image (OG):**
- https://images.ctfassets.net/k0lk9kiuza3o/6sN1GkuaBoQ67Nhkqa8Hgn/bcefc60aa064f94237bac2524bad875c/homepage.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 0 (0%)
- Portrait (<0.87): 1 (17%)
- Square (0.87–1.15): 5 (83%)

**Media Format Mix:**
- SVG: 34 (icons, illustrations, decorative geometry)

**Average rendered image size:** 109×112px
**Above-fold image count:** 0 / 6

**Decorative Patterns Detected:**
- 28 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents

**Clone instruction for decorative work:** Decorative SVG accents are part of the brand — generate or source blob/illustration shapes to scatter behind content.

**Imagery Guidance for clones:**
- Use vector illustration as the primary visual language — photos will read as off-brand.
- Maintain consistent illustration style (line weight, color palette) across the site.

## 10. Agent Prompt Guide

### Quick Reference
- Background: White (`#ffffff`)
- Primary text: Pure Black (`#0a0a0a`)
- Accent: #006bff (`#006bff`)
- Border: Translucent Silver (50%) (`rgba(204, 204, 204, 0.5)`)
- Font: gilroy
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on White background (#ffffff). Headline at 68px gilroy weight 700, line-height 1.2, color #0a0a0a."
- "Create the primary CTA button: `#006bff` background, `#ffffff` text, 8px border-radius, 10px 16px padding, 600 weight, gilroy font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: relative on `#ffffff`. gilroy 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in gilroy, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: #006bff (`#006bff`) is the sole interactive color. On hover → #0b3558 (`#0b3558`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 150ms for micro-interactions, 150ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `0px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (24px–68px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-on-primary: #ffffff;
  --ca-surface-2: #f5f5f5;
  --ca-ink-muted: #0a0a0a;
  --ca-ink-subtle: #93a0aa;
  --ca-primary: #006bff;
  --ca-primary-hover: #071a31;
  --ca-hairline: #cccccc;
  --ca-semantic-error: #841f0e;
  --ca-semantic-success: #3f491b;
  --ca-semantic-warning: #ffe67c;
  --ca-semantic-info: #114580;
}

/* Typography */
:root {
  --ca-font-primary: "gilroy", system-ui, sans-serif;
  --ca-text-display: 80px;
  --ca-text-heading: 68px;
  --ca-text-body: 14px;
  --ca-text-small: 16px;
  --ca-text-button: 14px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 24px;
  --ca-space-sm: 32px;
  --ca-space-md: 40px;
  --ca-space-base: 48px;
  --ca-space-lg: 60px;
  --ca-space-xl: 68px;
  --ca-space-2xl: 72px;
  --ca-space-3xl: 80px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 24px;
  --ca-radius-xl: 32px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-in: cubic-bezier(.4, 0, 1, 1);
  --ca-ease-out: cubic-bezier(0, 0, .2, 1);
  --ca-ease-in-out: cubic-bezier(.4, 0, .2, 1);
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    classes: ["Main__MainEle-sc-439b6be6-0", "efNfLQ"]
    height: 7461px
    width: full-bleed
    layout: flex-column justify=normal
    children: 4
  - section: hero
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "fsJgCR", "ckydwG"]
    height: 690px
    width: full-bleed
    layout: flex-row justify=center
    children: 2
    vertical-padding: ~72px (generous)
    padding: "0px 40px"
  - section: logo-strip
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "eNjlqe", "cRuAAK"]
    height: 181px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    vertical-padding: ~40px
  - section: feature-section
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "jYJuVZ", "emyDpp"]
    height: 1229px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    vertical-padding: ~80px (generous)
    padding: "0px 40px"
  - section: unknown
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "bjQexb"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: content-section
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "bjQexb"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: unknown
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "bjQexb"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: content-section
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "bjQexb"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: unknown
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "bjQexb"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: feature-section
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "ppYMR", "cRuAAK"]
    height: 504px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~48px
    padding: "0px 40px"
  - section: section
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "jYJuVZ", "cRuAAK"]
    height: 301px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    vertical-padding: ~40px
    padding: "0px 40px"
  - section: feature-section
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "fsJgCR", "fEUpsx"]
    height: 1205px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    vertical-padding: ~68px (generous)
    padding: "0px 40px"
  - section: unknown
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "gmNBpT"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: unknown
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "gmNBpT"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: unknown
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "gmNBpT"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: unknown
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "gmNBpT"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: unknown
    tag: div
    classes: ["Flex-sc-c78b5868-0", "Image-atoms__ImageWrapper-sc-320b6695-0", "Image___StyledImageWrapper-sc-b6790a56-0", "gmNBpT"]
    height: 650px
    width: 650px
    layout: flex-row justify=normal
    children: 1
  - section: feature-section
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "jYJuVZ", "cRuAAK"]
    height: 643px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    vertical-padding: ~68px (generous)
    padding: "0px 40px"
  - section: feature-section
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "kEyNTs", "cRuAAK"]
    height: 800px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    bg: "rgb(248, 249, 251)"
    vertical-padding: ~96px (airy)
    padding: "0px 40px"
  - section: feature-section
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "jYJuVZ", "cRuAAK"]
    height: 638px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    vertical-padding: ~72px (generous)
    padding: "0px 40px"
  - section: feature-section
    tag: section
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "kEyNTs", "cRuAAK"]
    height: 307px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    bg: "rgb(248, 249, 251)"
    vertical-padding: ~72px (generous)
    padding: "0px 40px"
  - section: footer
    tag: footer
    classes: ["Section-atoms__SectionOuterWrapper-sc-5c63c46b-1", "Section___StyledSectionOuterWrapper-sc-a69a3378-0", "kEyNTs"]
    height: 899px
    width: full-bleed
    layout: flex-row justify=center
    children: 1
    bg: "rgb(248, 249, 251)"
    vertical-padding: ~60px (generous)
    padding: "0px 40px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Trusted by more than 100,000 of the world’s leading organizations"
    - "Calendly makes scheduling simple"
    - "Connect Calendly to the tools you already use"
    - "Power up your scheduling"
  sub-headings:
    - "Connect your calendars"
    - "Add your availability"
    - "Always free"
    - "$10"
  ctas:
    - "Talk to sales"
    - "Log In"
    - "Get started for free"
    - "Sign up with Google"
    - "Sign up with Microsoft"
    - "Sign up for free"
    - "Connect your calendars"
    - "Add your availability"
  navigation:
    - "Product"
    - "Solutions"
    - "Resources"
    - "Pricing"
    - "Talk to sales"
    - "Log In"
    - "Get started for free"
  footer-links:
    - "Scheduling automation"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 23
    avg-ratio: 3.51
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Calendly logo"
      - "Compass Logo"
  thumbnail:
    count: 17
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Google logo"
      - "Zoom integration"
      - "Google Calendar integration"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Action
</button>
```
_Source pattern detected: padding `0px` · radius `0px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `0px` · shadow `none`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 3 · **cta** 6 · **auth** 1 · **product** 5 · **pricing** 2 · **docs** 2 · **project** 6 · **social** 2 · **footer** 13 · **other** 20

**Primary actions (conversion path):**
- Account access — "Log In" (login/signup) → `https://calendly.com/login`
- Primary call-to-action — "Get started for free" (the conversion path) → `https://calendly.com/signup`
- Primary call-to-action — "Sign up free with email." (the conversion path) → `https://calendly.com/signup`
- Primary call-to-action — "Sign up for free" (the conversion path) → `https://calendly.com/signup`
- Primary call-to-action — "Get started" (the conversion path) → `https://calendly.com/signup`
- Primary call-to-action — "Try for Free" (the conversion path) → `https://calendly.com/signup`

**Projects / case studies detected** (clustered by URL + featured image):

*Integration* — medium confidence, 12 items:

| Title | Featured image | Link |
|---|---|---|
| Zoom integration | `Zoom.svg` (ar 1) | https://calendly.com/integration/zoom |
| Salesforce integration | `saleforce.svg` (ar 1.37) | https://calendly.com/integration/salesforce |
| Slack integration | `slack-logo-icon.svg` (ar 1) | https://calendly.com/integration/slack |
| Microsoft Teams integration | `teams.svg` (ar 1.07) | https://calendly.com/integration/microsoft-teams |
| Outlook integration | `outlook.svg` (ar 1) | https://calendly.com/integration/calendly-for-outlook |
| Chrome integration | `Chrome.svg` (ar 1) | https://calendly.com/integration/calendly-for-chrome |
| Webex integration | `webex-logomark-01.svg` (ar 1.01) | https://calendly.com/integration/webex |
| HubSpot integration | `hubspot.svg` (ar 0.94) | https://calendly.com/integration/hubspot |

*Customers* — high confidence, 5 items:

| Title | Featured image | Link |
|---|---|---|
| 169% return on investment Read now | `hackerone-customer-logo.svg` (ar 3.59) | https://calendly.com/customers/hackerone |
| 160% increase in customers reached Read now | `VonageLogo.svg` (ar 4.39) | https://calendly.com/customers/vonage |
| 20% decrease in scheduling errors Read now | `texas-ut-austin-customer-logo__1_.sv` (ar 3.03) | https://calendly.com/customers/ut-austin |
| 8 days reduction in time-to-hire Read now | `muck-rack-stacked.svg` (ar 1.85) | https://calendly.com/customers/muck-rack |
| 26% increase in website bookings Read now | `smith-ai-customer-logo.svg` | https://calendly.com/customers/smithai |

**Signals:** 44/60 links carry a featured image · device mockups detected: laptop ×2 · dominant link roles: content-card (32), footer-link (18), inline-link (5).


---
## Extraction Completeness: 79/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 20 named colors |
| Typography | 20 | 20 | 8 roles defined |
| Components | 4 | 20 | 1 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 307 vars |
| Responsive Breakpoints | 5 | 5 | 7 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (gilroy, Geist, Calendly Sans)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.
- **5 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Hero imagery** | No dominant hero image detected above the fold | Use the canonical brand visual from §9b (OG image) for hero composition |
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 307 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 8 typography roles inferred |
| §4 Components | Low | 1 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 18 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 7 breakpoints detected |
| §9b Photography | Medium | 6 images, hero not detected |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

8 font file(s) captured (268KB total). When running `prism add`, fonts are saved to `extractions/calendly.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'gilroy';
  /* src: url('/fonts/gilroy.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'gilroy';
  /* src: url('/fonts/gilroy.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'gilroy';
  /* src: url('/fonts/gilroy.woff2') format('woff'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'gilroy';
  /* src: url('/fonts/gilroy.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'gilroy Fallback';
  /* src: url('/fonts/gilroy-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  /* src: url('/fonts/Geist.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Calendly Sans';
  /* src: url('/fonts/Calendly-Sans.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: oblique 0deg 10deg;
  font-display: swap;
}
@font-face {
  font-family: 'Wulkan Text';
  /* src: url('/fonts/Wulkan-Text.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wulkan Text';
  /* src: url('/fonts/Wulkan-Text.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Wulkan Text';
  /* src: url('/fonts/Wulkan-Text.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wulkan Text';
  /* src: url('/fonts/Wulkan-Text.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Wulkan Text';
  /* src: url('/fonts/Wulkan-Text.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wulkan Text';
  /* src: url('/fonts/Wulkan-Text.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**34 @keyframes found** — these are the real animation definitions:

```
@keyframes MobileMenu-module__VcvHca__fd-dialog-in { ... }
@keyframes MobileMenu-module__VcvHca__fd-dialog-out { ... }
@keyframes DynamicText-module__mjdETG__text-in { ... }
@keyframes DynamicText-module__mjdETG__text-out { ... }
@keyframes HeroGradient-module__DUwqqG__b0 { ... }
@keyframes HeroGradient-module__DUwqqG__b1 { ... }
@keyframes HeroGradient-module__DUwqqG__b2 { ... }
@keyframes HeroGradient-module__DUwqqG__b3 { ... }
@keyframes HeroGradient-module__DUwqqG__b4 { ... }
@keyframes HeroGradient-module__DUwqqG__b5 { ... }
@keyframes Skeleton-module__lYmWna__pulse-skeleton { ... }
@keyframes SearchDialog-module__2bNY0G__fd-dialog-in { ... }
@keyframes SearchDialog-module__2bNY0G__fd-dialog-out { ... }
@keyframes spin { ... }
@keyframes pulse { ... }
@keyframes fd-sidebar-in { ... }
@keyframes fd-sidebar-out { ... }
@keyframes fd-dialog-in { ... }
@keyframes fd-dialog-out { ... }
@keyframes fd-popover-in { ... }
@keyframes fd-popover-out { ... }
@keyframes fd-fade-in { ... }
@keyframes fd-fade-out { ... }
@keyframes fd-enterFromRight { ... }
@keyframes fd-enterFromLeft { ... }
@keyframes fd-exitToRight { ... }
@keyframes fd-exitToLeft { ... }
@keyframes fd-collapsible-down { ... }
@keyframes fd-collapsible-up { ... }
@keyframes fd-accordion-down { ... }
@keyframes fd-accordion-up { ... }
@keyframes fd-nav-menu-in { ... }
@keyframes fd-nav-menu-out { ... }
@keyframes onetrust-fade-in { ... }
```

<details><summary>Full keyframes CSS (34 animations)</summary>

```css
@keyframes MobileMenu-module__VcvHca__fd-dialog-in{0%{opacity:0;transform:scale(1.06)}
@keyframes MobileMenu-module__VcvHca__fd-dialog-out{0%{transform:scale(1)}
@keyframes DynamicText-module__mjdETG__text-in{0%{transform:translateY(100%)}
@keyframes DynamicText-module__mjdETG__text-out{0%{transform:translateY(0%)}
@keyframes HeroGradient-module__DUwqqG__b0{0%,to{transform:translate(0)scale(1)}25%{transform:translate(160px,-100px)scale(1.16)}50%{transform:translate(-120px,70px)scale(1.08)}75%{transform:translate(90px,-50px)scale(1.12)}}
@keyframes HeroGradient-module__DUwqqG__b1{0%,to{transform:translate(0)scale(1)}25%{transform:translate(-140px,110px)scale(1.12)}50%{transform:translate(100px,-80px)scale(1.2)}75%{transform:translate(-50px,40px)scale(1.08)}}
@keyframes HeroGradient-module__DUwqqG__b2{0%,to{transform:translate(0)scale(1)}25%{transform:translate(110px,-70px)scale(1.1)}50%{transform:translate(-160px,100px)scale(1.16)}75%{transform:translate(70px,-90px)scale(1.12)}}
@keyframes HeroGradient-module__DUwqqG__b3{0%,to{transform:translate(0)scale(1)}25%{transform:translate(-130px,80px)scale(1.16)}50%{transform:translate(140px,-50px)scale(1.08)}75%{transform:translate(-60px,100px)scale(1.2)}}
@keyframes HeroGradient-module__DUwqqG__b4{0%,to{transform:translate(0)scale(1)}25%{transform:translate(150px,-110px)scale(1.12)}50%{transform:translate(-100px,60px)scale(1.08)}75%{transform:translate(50px,-30px)scale(1.08)}}
@keyframes HeroGradient-module__DUwqqG__b5{0%,to{transform:translate(0)scale(1)}25%{transform:translate(-80px,70px)scale(1.2)}50%{transform:translate(130px,-100px)scale(1.1)}75%{transform:translate(-140px,60px)scale(1.16)}}
@keyframes Skeleton-module__lYmWna__pulse-skeleton{0%,to{opacity:1}50%{opacity:.4}}
@keyframes SearchDialog-module__2bNY0G__fd-dialog-in{0%{opacity:0;transform:scale(1.06)}
@keyframes SearchDialog-module__2bNY0G__fd-dialog-out{0%{transform:scale(1)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5}}
@keyframes fd-sidebar-in{0%{transform:translateX(var(--fd-sidebar-drawer-offset))}}
@keyframes fd-sidebar-out{to{transform:translateX(var(--fd-sidebar-drawer-offset))}}
@keyframes fd-dialog-in{0%{opacity:0;transform:scale(1.06)}
@keyframes fd-dialog-out{0%{transform:scale(1)}
@keyframes fd-popover-in{0%{opacity:0;transform:scale(.9)}}
@keyframes fd-popover-out{to{opacity:0;transform:scale(.9)}}
@keyframes fd-fade-in{0%{opacity:0}
@keyframes fd-fade-out{0%{opacity:1}
@keyframes fd-enterFromRight{0%{opacity:0;transform:translate(200px)}
@keyframes fd-enterFromLeft{0%{opacity:0;transform:translate(-200px)}
@keyframes fd-exitToRight{0%{opacity:1;transform:translate(0)}
@keyframes fd-exitToLeft{0%{opacity:1;transform:translate(0)}
@keyframes fd-collapsible-down{0%{opacity:0;height:0}
@keyframes fd-collapsible-up{0%{height:var(--radix-collapsible-content-height)}
@keyframes fd-accordion-down{0%{opacity:.5;height:0}
@keyframes fd-accordion-up{0%{height:var(--radix-accordion-content-height)}
@keyframes fd-nav-menu-in{0%{opacity:0;height:0}
@keyframes fd-nav-menu-out{0%{opacity:1;height:var(--radix-navigation-menu-viewport-height)}
@keyframes onetrust-fade-in{0%{opacity:0}100%{opacity:1}}
```
</details>

### Brand Gradient Palette

**4 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(287.24deg, var(--color-legacy-accent-blue);

/* Gradient 2 */
background: linear-gradient(to right, transparent, var(--color-legacy-surface-default);

/* Gradient 3 */
background: linear-gradient(287.24deg,var(--color-legacy-accent-blue);

/* Gradient 4 */
background: linear-gradient(to bottom,transparent,white calc(var(--spacing);

```

### Hover State CSS (Intercepted)

**24 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
@media (any-hover:hover){.styles-module__NAT3sq__tocItemButton:focus,.styles-module__NAT3sq__tocItemButton:focus-visible{position:relative}

@media (hover:hover){.styles-module__NAT3sq__tocItemButton:hover{color:var(--color-primary-700,#004eba)}

@media (any-hover:hover){.styles-module__NAT3sq__tocNextButton:focus,.styles-module__NAT3sq__tocNextButton:focus-visible{position:relative}

@media (hover:hover){.styles-module__NAT3sq__tocNextButton:hover{color:var(--color-primary-700,#004eba)}

@media (any-hover:hover){.styles-module__NAT3sq__popoverItemButton:focus,.styles-module__NAT3sq__popoverItemButton:focus-visible{position:relative}

@media (hover:hover){.styles-module__NAT3sq__popoverItemButton:hover{color:var(--color-main-800n,#0b3558)!important}

@media (any-hover:hover){.Sidebar-module__ERrlba__sidebar>div:first-child button[data-search-full]:focus,.Sidebar-module__ERrlba__sidebar>div:first-child button[data-search-full]:focus-visible{position:relative}

.Sidebar-module__ERrlba__sidebar>div:first-child button[data-search-full]:hover{border-color:var(--color-neutral-500,#a6bbd1);color:var(--color-main-800n,#0b3558)}

.Sidebar-module__ERrlba__sidebar>div:first-child button[data-search-full]:hover div:has(kbd){border-color:var(--color-neutral-500,#a6bbd1)}

.Sidebar-module__ERrlba__sidebar>div:first-child button[data-search-full]:hover div:has(kbd) kbd{color:var(--color-main-800n,#0b3558)}

.SidebarFolder-module___AGylG__folderTrigger:hover{background-color:var(--color-neutral-100,#f8f9fb);color:var(--color-main-800n,#0b3558)}

.SidebarSubItem-module__xz9NOG__subItem:hover{background-color:var(--color-neutral-100,#f8f9fb);color:var(--color-main-800n,#0b3558)}

.SidebarSubItem-module__xz9NOG__subItem:hover:before{background-color:var(--color-neutral-500,#a6bbd1);width:1.5px}

.SidebarSubItem-module__xz9NOG__subItem[data-active=true]:hover{background-color:var(--color-primary-100,#f4f8ff)}

@media (hover:hover){.SidebarSubItem-module__xz9NOG__subItem[data-active=true]~.SidebarSubItem-module__xz9NOG__subItem[data-active=true]:hover{background-color:var(--color-neutral-100,#f8f9fb);color:var(--color-main-800n,#0b3558)}

.SidebarItem-module__TdskAq__item:hover{background-color:var(--color-neutral-100,#f8f9fb);color:var(--color-main-800n,#0b3558)}

@media (hover:hover){.SidebarItem-module__TdskAq__item[data-active=true]~.SidebarItem-module__TdskAq__item[data-active=true]:hover{background-color:var(--color-neutral-100,#f8f9fb);color:var(--color-main-800n,#0b3558)}

.DocsSidebarBanner-module__4ehmCa__hubItem:not(.DocsSidebarBanner-module__4ehmCa__hubItemActive):hover{background-color:var(--color-neutral-100,#f8f9fb);color:var(--color-main-800n,#0b3558)}

.MobileNav-module__soePZG__navItem:hover{cursor:pointer;color:var(--color-main-800n,#0b3558)}

@media (any-hover:hover){.MobileNav-module__soePZG__navItem:focus-visible:focus,.MobileNav-module__soePZG__navItem:focus-visible:focus-visible{position:relative}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 4544 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**32 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`320px` · `385px` · `389px` · `400px` · `420px` · `425px` · `426px` · `435px` · `480px` · `481px` · `530px` · `550px` · `567px` · `576px` … (+18 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×3030 · `14px`×502 · `18px`×168 · `20px`×92 · `9.284px`×78 · `12px`×37 · `13.2157px`×36 · `16.2196px`×36

**Radius scale** (× = paint count): `50%`×44 · `4px`×35 · `8px`×29 · `24px`×28 · `12px`×18 · `50px`×6 · `16px`×4

**Weights** (× = paint count): `400`×2995 · `600`×766 · `500`×523 · `700`×258

**Layout gaps** (× = paint count): `8px`×106 · `12px`×46 · `24px`×27 · `32px`×25 · `4px`×18 · `16px`×13 · `48px`×11 · `2px`×9

**Elevation (real shadows)**:
```css
rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.03) 0px 4px 10px 0px, rgba(71, 103, 136, 0.05) 0px 10px 20px 0px
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
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.06) 0px 15px 30px 0px
rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, rgba(71, 103, 136, 0.04) 0px 10px 15px 0px, rgba(71, 103, 136, 0.1) 0px 40px 50px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { background-color:var(--color-fd-background); color:var(--color-fd-foreground) }
body { background-color:#fff }
body { font-family:gilroy, "gilroy Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" }
body { font-family:gilroy,gilroy Fallback }
header { font-family:gilroy, "gilroy Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" }
header { transition:top 0.3s }
nav { font-family:gilroy, "gilroy Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" }
nav { background-color:white }
h1 { font-family:gilroy, "gilroy Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" }
h1 { font-size:4.25rem; font-weight:700; color:rgb(11, 53, 88) }
h2 { font-family:gilroy, "gilroy Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" }
h2 { font-size:1.125rem; font-weight:400; color:rgb(11, 53, 88) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://calendly.com | 2026-06-11T06:03:47.687Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*