cal.com

DESIGN.md

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

---
version: alpha
name: cal.com
description: "Light product system built on #f4f4f4 with #7826b1 as the primary CTA accent. Type anchored in Cal Sans at 64px / weight 600. Extracted automatically from https://cal.com/ — every value from getComputedStyle(), no approximation."
narrative: |
  cal.com is built on a pure-white canvas (rgb(244, 244, 244)).
  The system uses rgb(120, 38, 177) as the accent for primary actions and brand signals.
  Moderately rounded CTAs (8px) — modern SaaS standard, neither sharp nor pill alongside sans-serif as the primary typeface.

colors:
  background: "#f4f4f4"
  surface-1: "rgba(255, 255, 255, 0.03)"
  surface-2: "#ffffff"
  ink-muted: "#242424"
  ink-subtle: "#111111"
  primary: "#7826b1"
  on-primary: "#ffffff"
  primary-hover: "#aa61f1"
  hairline: "#292929"

typography:
  display-xl:
    fontFamily: "Cal Sans"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0
  display-md:
    fontFamily: "Cal Sans UI Variable Light"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.3
    letterSpacing: -0.2px
  body:
    fontFamily: "Cal Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0
  body-sm:
    fontFamily: "Cal Sans UI Variable Light"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: -0.2px
  button:
    fontFamily: "Cal Sans"
    fontSize: 12px
    fontWeight: 600
    lineHeight: normal
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 29px
  pill: 1000px

spacing:
  xxs: 2px
  xs: 10px
  sm: 12px
  md: 24px
  lg: 24px
  xl: 32px
  xxl: 64px
  section: 80px

components:
  button-ghost:
    backgroundColor: "#000000"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-pill:
    backgroundColor: "#f5f5f5"
    textColor: "#0000ee"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 4px 8px 4px 12px
  button-pill:
    backgroundColor: "{colors.on-primary}"
    textColor: "#000000"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 4px 12px 4px 8px

extracted_at: "2026-05-30T20:38:39.257Z"
completeness: 65
scoreVersion: "v2"

---

# Design System — cal.com
> Extracted automatically by Clone Architect from https://cal.com
> Date: 2026-05-30
> Viewport: Desktop 1440x900 + Mobile 390x844
> Every value in this file comes from real getComputedStyle() — no approximation.

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(244, 244, 244)` is the page background. Every component composits against this.
> - **Accent**: `rgb(120, 38, 177)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 12px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **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

cal.com sits on a warm cream canvas (`#f4f4f4`), a neutral foundation calibrated for sustained reading and component contrast. 

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

Body text reads in Pure Black (`#000000`) (contrast ratio 95.7:1, well above WCAG AA). **#7826b1** (`#7826b1`) 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 — each level combines several blurred layers at varying offsets to simulate the way light actually falls on stacked surfaces, not the simulated drop-shadow of cheap interfaces. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. The site uses a variable font with GEOM + WGHT axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Warm Cream (`#f4f4f4`)
- Primary typeface: Cal Sans
- Accent: #7826b1 (`#7826b1`)
- Display: 64px weight 600
- Shadow system: 11 distinct elevation levels
- Custom fonts loaded: Cal Sans, Manrope, Public Sans, Fragment Mono, Roboto Mono, Matter Regular, Cal Sans UI Variable Light, Matter SemiBold, Matter Medium, Paper Mono Regular, Cal Sans UI Light, Matter Bold, Cal Anim Graph 5 [MORF] Variable Regular, Matter Bold Italic, Matter Regular Italic, Inter, Inter Variable, Inter Display, Cal Sans Placeholder, Public Sans Placeholder, Manrope Placeholder, Matter Regular Placeholder, Cal Sans UI Variable Light Placeholder, Matter SemiBold Placeholder, Matter Medium Placeholder, Paper Mono Regular Placeholder, Matter Bold Placeholder, Cal Anim Graph 5 [MORF] Variable Regular Placeholder, Matter Bold Italic Placeholder, Matter Regular Italic Placeholder, Inter Placeholder, Inter Variable Placeholder, Inter Display Placeholder

## 2. Color Palette & Roles

### Background & Surface
- **Warm Cream** (`#f4f4f4`): Page background (primary)
- **Translucent Pure White (3%)** (`rgba(255, 255, 255, 0.03)`): Surface / elevated background
- **Light Gray** (`#e1e2e3`): Surface / elevated background
- **Warm Cream** (`#f5f5f5`): Surface / elevated background
- **Light Gray** (`#e5e7eb`): Surface / elevated background

### Text & Content
- **Pure Black** (`#000000`): Primary body text
- **#0000ee** (`#0000ee`): Secondary text
- **Warm Brown** (`#292929`): Secondary text
- **Jet Black** (`#111111`): Secondary text
- **Warm Brown** (`#242424`): Secondary text

### Accent & Interactive
- **Slate Gray** (`#6b7280`): Interactive / accent
- **Dark Gray** (`#374151`): Interactive / accent
- **Dark Gray** (`#333e4e`): Interactive / accent
- **Light Gray** (`#e9ddfd`): Interactive / accent
- **#7826b1** (`#7826b1`): Interactive / accent
- **#aa61f1** (`#aa61f1`): Interactive / accent
- **Soft Pink** (`#f8d7d8`): Interactive / accent

### Border & Divider
- **Transparent** (`transparent`): Borders / dividers
- **Light Gray** (`#e6e8ec`): Borders / dividers
- **Light Gray** (`#e0e0e0`): Borders / dividers
- **Silver** (`#d3d3d3`): Borders / dividers
- **Silver** (`#cbcbcb`): Borders / dividers

### Full Extracted Palette
72 distinct colors detected on the live page (22 categorized above + 50 additional below). Every value is a real `getComputedStyle()` color — no approximation.

- `#898989` — Medium Gray
- `rgba(20, 20, 20, 0.1)` — Translucent Jet Black (10%)
- `#101010` — Jet Black
- `#f3f4f6` — Light Gray
- `#0a0a0a` — Jet Black
- `#8a8a8a` — Medium Gray
- `#9ca3af` — Cool Gray
- `#222222` — Warm Brown
- `#1b1b1b` — Near Black
- `#882c2f` — #882c2f
- `#d85b5f` — Terracotta
- `#d6ecfe` — Light Gray
- `#0261a2` — Cobalt Blue
- `#0c9beb` — Sky Bright
- `#efefef` — Light Gray
- `#767676` — Stone
- `#0099ff` — Sky Bright
- `#ffc107` — Amber
- `#ff3d00` — Bright Orange
- `#4caf50` — #4caf50
- `#4285f4` — Ring Blue
- `#343434` — Charcoal
- `#ea4335` — Vermillion
- `#188038` — Forest Green
- `#1967d2` — M Tricolor Blue
- `#fbbc04` — Amber
- `#34a853` — Success Green
- `#858585` — Medium Gray
- `#fbbc05` — Amber
- `#ff492c` — Vermillion
- `#00832d` — Forest Green
- `#0066da` — M Tricolor Blue
- *…+18 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--sj-tw-shadow`: `0 0 #0000`
- `--sj-tw-drop-shadow`: ``
- `--sj-tw-shadow-colored`: `0 0 #0000`
- `--sj-tw-ring-shadow`: `0 0 #0000`

**Spacing Token**
- `--sj-tw-border-spacing-x`: `0`
- `--sj-tw-numeric-spacing`: ``
- `--sj-tw-border-spacing-y`: `0`

**Other tokens**
- `--sj-tw-ring-color`: `rgba(59,130,246,.5)`
- `--sj-tw-ring-offset-color`: `#fff`

## 3. Typography Rules

### Font Families
- **Primary**: `Cal Sans`
- **Secondary**: `Manrope`
- **Font 3**: `Public Sans`
- **Font 4**: `Fragment Mono`
- **Font 5**: `Roboto Mono`

### Custom Fonts Loaded
- **Cal Sans** weight 400 (normal)
- **Manrope** weight 400 (normal)
- **Public Sans** weight 700 (normal)
- **Fragment Mono** weight 400 (normal)
- **Roboto Mono** weight 600 (normal)
- **Matter Regular** weight 400 (normal)
- **Cal Sans UI Variable Light** weight 300 (normal)
- **Matter Regular** weight normal (normal)
- **Matter SemiBold** weight 600 (normal)
- **Matter Medium** weight normal (normal)
- **Matter Medium** weight 500 (normal)
- **Paper Mono Regular** weight 400 (normal)
- **Cal Sans UI Light** weight 300 (normal)
- **Matter Bold** weight 700 (normal)
- **Cal Anim Graph 5 [MORF] Variable Regular** weight 400 (normal)
- **Matter Bold Italic** weight 700 (italic)
- **Matter Regular Italic** weight 400 (italic)
- **Inter** weight 400 (normal)
- **Inter** weight 600 (normal)
- **Inter** weight 500 (normal)
- **Inter** weight 100 (normal)
- **Inter** weight 200 (normal)
- **Inter** weight 300 (normal)
- **Inter** weight 700 (normal)
- **Inter** weight 800 (normal)
- **Inter** weight 900 (normal)
- **Inter Variable** weight 400 (normal)
- **Inter Display** weight 400 (normal)
- **Inter Display** weight 100 (normal)
- **Inter Display** weight 200 (normal)
- **Inter Display** weight 300 (normal)
- **Inter Display** weight 500 (normal)
- **Inter Display** weight 600 (normal)
- **Inter Display** weight 700 (normal)
- **Inter Display** weight 800 (normal)
- **Inter Display** weight 900 (normal)
- **Cal Sans** weight 600 (normal)
- **Cal Sans Placeholder** weight normal (normal)
- **Public Sans Placeholder** weight normal (normal)
- **Manrope Placeholder** weight normal (normal)
- **Matter Regular Placeholder** weight normal (normal)
- **Cal Sans UI Variable Light Placeholder** weight normal (normal)
- **Matter SemiBold Placeholder** weight normal (normal)
- **Matter Medium Placeholder** weight normal (normal)
- **Paper Mono Regular Placeholder** weight normal (normal)
- **Matter Bold Placeholder** weight normal (normal)
- **Cal Anim Graph 5 [MORF] Variable Regular Placeholder** weight normal (normal)
- **Matter Bold Italic Placeholder** weight normal (normal)
- **Matter Regular Italic Placeholder** weight normal (normal)
- **Inter Placeholder** weight normal (normal)
- **Inter Variable Placeholder** weight normal (normal)
- **Inter Display Placeholder** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Cal Sans | 64px | 600 | 1.1 | normal | Main headline (h1) |
| Sub-heading | Cal Sans UI Variable Light | 18px | 300 | 1.3 | -0.2px | Third-level heading (h3) |
| Link | Cal Sans UI Variable Light | 14px | 300 | 1.5 | -0.2px | Link (14px) — Decoration: none |
| Body | Cal Sans | 12px | 400 | normal | normal | Standard reading text |
| Button Small | Cal Sans | 12px | 600 | normal | normal | Button label (12px) |

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `48px`, `24px`, `20px`, `18px`, `16px`, `14px`, `12px`, `10px`, `9.71px`, `8px`

> 7 size(s) detected outside the sampled hierarchy (48px, 24px, 20px, 16px, 10px, 9.71px, 8px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

**Variable font axes:**
- GEOM axis
- WGHT axis

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `#000000`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 12px 24px
- Radius: 8px
- Shadow: `rgba(0, 0, 0, 0.15) 0px 4px 12px 0px`
- Font: 12px weight 600
- Use: Subtle action, toolbar, nav button

**Pill**
- Background: `#f5f5f5`
- Text: `#0000ee`
- Padding: 4px 8px 4px 12px
- Radius: 9999px
- Shadow: `rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`
- Font: 12px weight 400
- Use: Status pills, tags, chips

**Pill**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#000000`
- Padding: 4px 12px 4px 8px
- Radius: 9999px
- Shadow: `rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`
- Font: 12px weight 400
- Use: Status pills, tags, chips


## 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: "rgb(0, 0, 0)"
      fg: "rgb(255, 255, 255)"
      shadow: "rgba(0, 0, 0, 0.15) 0px 4px 12px 0px"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
```

**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
- **3 shape(s)** in this system: `Ghost`, `Pill`, `Pill`
- **DO NOT introduce new buttons variants** without justification

## 5. Layout Principles

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

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 10px |
| sm | 12px |
| md | 24px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 64px |

### 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 | 16px | Large rounded elements, pill segments |
| Xl | 29px | Category strips, featured containers |
| Full | 1000px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `8px` |
| Page Body | `0px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 0px, 2px, 4px, 6px, 6.94px, 7px, 8px, 10px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

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

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `24px` | Card padding, list-item spacing |
| **compact** | `12px` | Form fields, tight clusters, badge padding |
| **micro** | `10px` | 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).

**2/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:** 282px tall (not full-viewport)
- **Heading:** "Le meilleur moyen de planifier vos réunions" — 64px left-aligned
- **CTAs:** none detected in hero (unusual — agent should verify)
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. No imagery needed for hero — text-driven.

### Card Grid Pattern

- **Card count:** 4 cards detected
- **Columns (desktop):** 3-up grid
- **Card dimensions:** 518×415px (aspect 1.25:1)
- **Gap:** 12px between cards
- **Content:** ✗ no image + icon
- **Clone instruction:** Build a 3-column grid (desktop) with cards at ~1.25:1 aspect ratio. Text/icon-only cards (no photography).

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.15) 0px 4px 12px 0px` | Cards, elevated surfaces |
| Inset (Level 2) | <br>`rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset` | Buttons, pressed-state elements |
| Layered (Level 3) | <br>`rgba(36, 36, 36, 0.7) 0px 1px 5px -4px`,<br>`rgba(36, 36, 36, 0.05) 0px 4px 8px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(34, 42, 53, 0.05) 0px 4px 8px 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

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `__framer-loading-spin` | Rotate / Spin | transform | Loading indicator |
| `pulse` | Fade | opacity | Attention / status |

### Motion Fingerprint

- **Dominant Easing**: standard CSS easings
- **Animation Library**: 2 unique animations (2 total including variants)

## 8. Do's and Don'ts

### Do
- Use Warm Cream (`#f4f4f4`) as the page background — it's intentionally not pure white
- Use sans-serif as the primary typeface — it defines the brand personality
- Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use #7826b1 (`#7826b1`) as the primary accent — it's the brand's signature interactive color
- Keep the hero centered and text-driven — no decorative media, typography carries the message
- Each card uses an icon (not photo) — the visual language is illustrative, not photographic
- Use a 3-column grid on desktop — density matters for this content type

### Don't
- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 600 is the maximum weight in this system
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't add hero illustrations or photos — they'll break the typographic restraint


## 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(244, 244, 244)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(244, 244, 244)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(120, 38, 177)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(120, 38, 177)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Large | 640px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Tablet | 809px | Multi-column grids begin |
| Tablet | 1024px | Multi-column grids begin |
| Desktop | 1199px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `64px` | `40px` |
| heading | line-height | `70.4px` | `44px` |

### Collapsing Strategy
- Headlines: 64px → 40px 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: 12px 24px 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):

- **Card grid: 3-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.

## 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://framerusercontent.com/images/pPSh5HDe1qaySb4R7xBgMHudhU.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): 2 (67%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 0 (0%)
- Ultra-wide (>2.3): 1 (33%)

**Media Format Mix:**
- PNG: 1 (logos, transparent UI elements, mockups)
- SVG: 5 (icons, illustrations, decorative geometry)

**Average rendered image size:** 589×216px
**Above-fold image count:** 0 / 3

**Decorative Patterns Detected:**
- 1 radial gradient — circular color blooms used for spotlight/glow effects
- 3 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- 34 background patterns (non-photo url() backgrounds) — textures/illustrations as backdrops

**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: Warm Cream (`#f4f4f4`)
- Primary text: Pure Black (`#000000`)
- Accent: #7826b1 (`#7826b1`)
- Border: Warm Brown (`#292929`)
- Font: Cal Sans
- Body: 12px weight 400

### Example Component Prompts
- "Create a hero section on Warm Cream background (#f4f4f4). Headline at 64px Cal Sans weight 600, line-height 1.1, color #000000."
- "Create the primary CTA button: `#7826b1` background, `#ffffff` text, 8px border-radius, 12px 24px padding, 600 weight, Cal Sans font."
- "Build navigation: sticky on `#f4f4f4`. Cal Sans 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Warm Cream (`#f4f4f4`) — every component is composited against this exact base.
2. **Typography**: All type in Cal Sans, weight range 400–600. Never exceed 600 — heavier weights break the brand's tonal restraint.
3. **Accent**: #7826b1 (`#7826b1`) is the sole interactive color. On hover → #aa61f1 (`#aa61f1`). Use CSS transitions, not opacity/brightness filters.
4. **Spacing**: Use the `--ca-space-*` token scale (10px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
5. **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-background: #f4f4f4;
  --ca-on-primary: #ffffff;
  --ca-ink-muted: #242424;
  --ca-ink-subtle: #111111;
  --ca-primary: #7826b1;
  --ca-primary-hover: #aa61f1;
  --ca-hairline: #292929;
}

/* Typography */
:root {
  --ca-font-primary: "Cal Sans", system-ui, sans-serif;
  --ca-text-display: 64px;
  --ca-text-body: 12px;
  --ca-text-small: 14px;
  --ca-text-button: 12px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 10px;
  --ca-space-sm: 12px;
  --ca-space-md: 24px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 29px;
  --ca-radius-full: 1000px;
}
```


## 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: unknown
    tag: div
    height: 8022px
    width: full-bleed
    layout: block
    children: 3
  - section: unknown
    tag: div
    height: 96px
    width: 1048px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-17mbdsy-container"]
    height: 412px
    width: 713px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-o9bfvf-container"]
    height: 96px
    width: 1048px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 95px
    width: 1200px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 96px
    width: 1048px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 300px
    width: 300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-12pddbm-container"]
    height: 200px
    width: 315px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 199px
    width: 333px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 96px
    width: 1048px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 96px
    width: 1048px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 412px
    width: 383px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 412px
    width: 470px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 435px
    width: 680px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 96px
    width: 1048px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-1srnfz-container"]
    height: 96px
    width: 1048px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-mxjprm-container"]
    height: 691px
    width: 1200px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 96px
    width: 1048px
    layout: block
    children: 1
  - section: section-1
    tag: section
    height: 298px
    width: 524px
    layout: flex-row justify=normal
    children: 2
  - section: unknown
    tag: div
    classes: ["framer-16usawc-container"]
    height: 298px
    width: 524px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 298px
    width: 524px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-13kxqne-container"]
    height: 298px
    width: 524px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 298px
    width: 524px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-v7ihlw-container"]
    height: 298px
    width: 524px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 298px
    width: 524px
    layout: block
    children: 1
```

**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:
    - "Avec nous, la prise de rendez-vous est facile"
    - "Cal.com"
    - "Tous vos outils clés synchronisés avec vos réunions"
    - "Découvrez pourquoi nos utilisateurs aiment Cal.com"
  sub-headings:
    - "Connectez votre calendrier"
    - "Choisissez comment vous souhaitez vous rencontrer"
    - "La réunion commence maintenant"
    - "Accepter les paiements"
    - "65+ langues"
    - "Toutes vos applications préférées"
```

**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:
  thumbnail:
    count: 48
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
```

**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`.


## 12. Known Extraction Gaps

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

- **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.


---
## Extraction Completeness: 65/100 (C)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 22 named colors |
| Typography | 13 | 20 | 5 roles defined |
| Components | 4 | 20 | 1 specs extracted |
| Motion & Interaction | 10 | 15 | Keyframes present |
| CSS Custom Properties | 4 | 10 | 77 vars |
| Responsive Breakpoints | 5 | 5 | 5 breakpoints |
| Variable Fonts | 5 | 5 | GEOM, WGHT axes |

## 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.

| 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 |
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |
| **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 | 77 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 5 typography roles inferred |
| §4 Components | Low | 1 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 16 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 5 breakpoints detected |
| §9b Photography | Medium | 3 images, hero not detected |

---
*Generated by Clone Architect — automated Playwright extraction + design analysis.*
*Source: https://cal.com | 2026-05-30T20:38:39.268Z*
*All values verified via getComputedStyle() — no approximation, no hallucination.*