jitter.video

DESIGN.md

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

---
version: alpha
name: jitter.video
description: "Light product system built on #ffffff with #ffffff as the primary CTA accent. Type anchored in TWK Lausanne at 80px / weight 800. Extracted automatically from https://jitter.video/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  jitter.video is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(255, 255, 255) as the singular interactive color.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside TWK Lausanne as the primary typeface.
  A layered elevation system (9 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 94 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#f2f1f3"
  surface-2: "#fafafb"
  ink: "#19171c"
  ink-muted: "rgba(25, 23, 28, 0.65)"
  ink-subtle: "#6e6e73"
  primary: "#ffffff"
  on-primary: "#111111"
  primary-hover: "#a981ff"
  hairline: "#c3c3c6"
  primary-focus: "#101010"

typography:
  display-xl:
    fontFamily: "TWK Lausanne, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 80px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -2.4px
  display-md:
    fontFamily: "TWK Lausanne, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 21px
    fontWeight: 800
    lineHeight: 0.95
    letterSpacing: -0.42px
  body:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.352px
  caption:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.32px
  button:
    fontFamily: "TWK Lausanne, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.38
    letterSpacing: -0.4px
  mono:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.41
    letterSpacing: -0.75px

rounded:
  none: 0px
  xs: 18px
  sm: 20px
  md: 26px
  lg: 40px
  xl: 50px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 5px
  sm: 13px
  md: 24px
  lg: 37px
  xl: 40px
  xxl: 70px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono}"
    rounded: "{rounded.none}"
    padding: 10px
  input-text-input:
    backgroundColor: "#2d2933"
    textColor: "{colors.primary}"
    typography: "{typography.mono}"
    rounded: "{rounded.none}"
    padding: 13px 210px 13px 24px
  status-badge-neutral-dark:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.lg}"
    padding: 7px 20px
  status-badge-neutral-dark-2:
    backgroundColor: "transparent"
    textColor: "#17082c"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 5px 20px
  alert-alert-banner:
    backgroundColor: "transparent"
    textColor: "#ff0000"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 13px 210px 13px 24px

extracted_at: "2026-06-11T05:01:14.583Z"
completeness: 79
scoreVersion: "v2"

---

# Design System — jitter.video
> Extracted automatically by Prism from https://jitter.video/?noredir=1
> 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**: animated  |  **Weight**: heavy  |  **Aesthetic**: sharp-architectural

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Inter) | "Superfast motion for every tea" |
| Color assertion | dual-accent | #ffffff |
| Whitespace | sparse | section rhythm 60px |
| Interaction | animated | 94 keyframes, 29 transitions |
| Radius language | 0px-architectural | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 0px-architectural · animated-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(255, 255, 255)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 12px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 60px between major bands. Card padding: 37px.
> - **Default radius**: 20px 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

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

Headlines are set in **TWK Lausanne**, a sans-serif display face (the dominant type signature, e.g. "Superfast motion for every team" at 80px). A second display voice — **Inter** (sans) — appears in lower bands (e.g. "Scale your animations for marketing, ads, brand, and product"), used for editorial accent. Body text is set in **Inter**. Headlines use weight 800 for confident, assertive presence — the brand wants to be heard. Negative letter-spacing at display sizes (-2.4px at 80px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Primary Color (`#19171c`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Pure White** (`#ffffff`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (9 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: Pure White (`#ffffff`)
- Primary typeface: Inter
- Primary text: Primary Color (`#19171c`)
- Accent: Pure White (`#ffffff`)
- Display: 80px weight 800, letter-spacing -2.4px
- Shadow system: 9 distinct elevation levels
- Custom fonts loaded: Inter, Euclid Circular B, TWK Lausanne

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Off-White** (`#f2f1f3`): Surface / elevated background
- **Whitesmoke** (`#e5e4e7`): Surface / elevated background
- **#efff00** (`#efff00`): Surface / elevated background
- **#cce9ff** (`#cce9ff`): Surface / elevated background

### Text & Content
- **Primary Color** (`#19171c`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Deep Navy** (`#17082c`): Secondary text
- **Near-Black** (`#1e1e1e`): Secondary text
- **Charcoal** (`#2d2933`): Secondary text

### Accent & Interactive
- **Primary Color Alt** (`#fba6ec`): Accent / interactive (CSS var)
- **#a981ff** (`#a981ff`): Interactive / accent
- **#50b8ff** (`#50b8ff`): Interactive / accent
- **Sky Bright** (`#00b2ff`): Interactive / accent
- **Violet** (`#7a40ed`): Interactive / accent
- **#b593ff** (`#b593ff`): Interactive / accent
- **Red** (`#ff0000`): Interactive / accent

### Border & Divider
- **Light Grey** (`#c3c3c6`): Borders / dividers
- **Light Grey** (`#d7d7db`): Borders / dividers
- **Whitesmoke** (`#e9e9e9`): Borders / dividers

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

- `#97979b` — Grey
- `#29a9ff` — Sky Bright
- `#cab3f8` — Lavender
- `#a35bff` — #a35bff
- `#ff004a` — #ff004a
- `#fafafb` — Off-White
- `#f2ecfd` — Light Gray
- `#e4d9fb` — Soft Pink
- `#fd3456` — Warm Rose
- `#808080` — Slate Grey
- `#ff58e0` — Magenta
- `#34abfc` — #34abfc
- `#6e6e73` — Secondary Color
- `#a9dbff` — Light Blue
- `#e6f4ff` — Light Gray
- `#f5ff63` — #f5ff63
- `#f468ff` — Magenta
- `#ae8bf4` — #ae8bf4
- `#f24e1e` — Bright Orange
- `#ff7262` — Coral
- `#1abcfe` — #1abcfe
- `#a259ff` — #a259ff
- `#0acf83` — Emerald
- `#fab2ff` — #fab2ff
- `#8d5def` — #8d5def *(token)*

### CSS Custom Properties (Design Tokens)

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

**Spacing Token**
- `--tw-space-x-reverse`: `0`
- `--tw-space-y-reverse`: `0`

**Other tokens**
- `--tw-ring-offset-color`: `#fff`
- `--primary-color`: `#19171c`
- `--secondary-color`: `#6e6e73`
- `--primary-color-alt`: `#fba6ec`
- `--bg-color`: `#fff`

## 3. Typography Rules

### Font Families
- **Primary**: `Inter`
- **Secondary**: `TWK Lausanne`
- **Font 3**: `Euclid Circular B`

### Custom Fonts Loaded
- **Inter** weight 100 (normal)
- **Inter** weight 200 (normal)
- **Inter** weight 300 (normal)
- **Inter** weight 400 (normal)
- **Inter** weight 500 (normal)
- **Inter** weight 600 (normal)
- **Inter** weight 700 (normal)
- **Inter** weight 800 (normal)
- **Inter** weight 900 (normal)
- **Euclid Circular B** weight 500 (normal)
- **TWK Lausanne** weight 600 (normal)
- **TWK Lausanne** weight 700 (normal)
- **TWK Lausanne** weight 750 (normal)
- **TWK Lausanne** weight 800 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | TWK Lausanne | 80px | 800 | 0.9 | -2.4px | Main headline (h1) |
| Sub-heading | TWK Lausanne | 21px | 800 | 0.95 | -0.42px | Third-level heading (h3) |
| Button Large | TWK Lausanne | 20px | 600 | 1.38 | -0.4px | Button label (20px) |
| Card Title | Inter | 18px | 600 | 1.5 | -0.396px | Card headings |
| Button Large | TWK Lausanne | 18px | 600 | 1 | -0.36px | Button label (18px) |
| Navigation | Inter | 18px | 400 | 1.5 | -0.396px | Navigation items |
| Input Large | Inter | 17px | 600 | 1.41 | -0.75px | Form input (17px) |
| Link Large | Inter | 16px | 600 | 1.5 | -0.352px | Link (16px) — Decoration: none |
| Caption / Badge | Inter | 15px | 400 | 1.2 | -0.32px | small text (15px) |
| Body | Inter | 12px | 400 | 1.4 | normal | Standard reading text |

### Full Font Size Scale

Sizes detected in the design (descending): `200px`, `80px`, `72px`, `48px`, `40px`, `36px`, `26px`, `24px`, `21px`, `20px`, `18px`, `17px`, `16px`, `15px`, `14px`, `13px`, `12px`, `10px`

> 10 size(s) detected outside the sampled hierarchy (200px, 72px, 48px, 40px, 36px, 26px, 24px, 14px, 13px, 10px). 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

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **tabular figures** (`tnum`) — numbers align vertically, essential for pricing tables and dashboards
- **lining figures** (`lnum`) — full-height numbers, more authoritative than old-style
- **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "tnum", "lnum", "ss01";
}
```

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#19171c` `{colors.ink-muted}`
- Padding: 10px
- Radius: 0px
- Font: 18px weight 600
- Use: Subtle action, toolbar, nav button
- Focus: opacity: `1`, transform: `matrix(1, 0, 0, 1, 0, 0)`, outline: `rgb(16, 16, 16) auto 1px`

### Inputs & Forms

**Text Input**
- Background: `#2d2933`
- Text: `#ffffff` `{colors.primary}`
- Padding: 13px 210px 13px 24px
- Radius: 0px 50px 50px 0px
- Border: 1px solid rgba(255, 255, 255, 0.1)
- Font: 17px weight 600
- Use: Text fields, search inputs
- Focus: outline: `rgb(255, 255, 255) none 3px`

### Status Badges

**Neutral Dark**
- Background: `transparent`
- Text: `#19171c` `{colors.ink-muted}`
- Padding: 7px 20px
- Radius: 40px
- Font: 15px weight 400
- Use: Status indicator, label, pill

**Neutral Dark**
- Background: `transparent`
- Text: `#17082c`
- Padding: 5px 20px
- Radius: 40px
- Font: 20px weight 600
- Use: Status indicator, label, pill

### Alerts

**Alert Banner**
- Background: `transparent`
- Text: `#ff0000`
- Padding: 13px 210px 13px 24px
- Radius: 0px
- Font: 16px weight 400
- Use: System alert, banner notification, toast


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **focus:** transform applied

*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(25, 23, 28)"
    focus:
      bg: "transparent"
      fg: "inherit"
  input:
    default:
      bg: "rgb(45, 41, 51)"
      fg: "rgb(255, 255, 255)"
      border: "1px solid rgba(255, 255, 255, 0.1)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(25, 23, 28)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(25, 23, 28)"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(25, 23, 28)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
```

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

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Status Badges
- **1 shape(s)** in this system: `Neutral Dark`
- **DO NOT introduce new status badges variants** without justification

### Alerts
- **1 shape(s)** in this system: `Alert Banner`
- **DO NOT introduce new alerts variants** without justification

## 5. Layout Principles

### Layout Type
**hero + sections**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 5px |
| sm | 13px |
| md | 24px |
| base | 30px |
| lg | 37px |
| xl | 40px |
| 2xl | 60px |
| 3xl | 70px |

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Inputs & Forms | `0px 50px 50px 0px` |
| Status Badges | `40px` |
| Alerts | `0px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `0px 50px 50px 0px` |

**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.

**Full Radius Spectrum**: 0px, 18px, 20px, 26px, 40px, 50px, 375px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~70px internal vertical padding (up to 2345px) — **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** | `70px` | Top/bottom of full-bleed hero sections |
| **section** | `40px` | Between major bands (color change, content shift) |
| **subsection** | `37px` | Within a section, between content groups |
| **card** | `24px` | Card padding, list-item spacing |
| **compact** | `13px` | Form fields, tight clusters, badge padding |
| **micro** | `5px` | 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:** 299px tall (not full-viewport)
- **Heading:** "Superfast motion for every team" — 80px center-aligned
- **Subheading:** "Jitter AI: Build your own creative tools Learn more"
- **CTAs:** 1 (primary: "Jitter AI: Build your own creative tools Learn more")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 90px
- **Logo:** ✗ absent
- **Nav links:** 10 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

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

### Pricing Table Pattern

- **Tier count:** 2 pricing tiers
- **Layout:** vertical stacked
- **Columns (desktop):** 2-up
- **Feature list:** ✓ (median ~21 feature points per tier)
- **Clone instruction:** Build a 2-column vertical-stack pricing comparison.

### Testimonial Pattern

- **Count:** 14 testimonial blocks
- **Layout:** grid
- **Avg quote length:** 72 chars (short blurb)
- **Includes:** ✓ avatars | ✗ no logos | ✗ no ratings
- **Clone instruction:** Build a grid of 14 testimonials. Each includes an avatar.  

### Footer Pattern

- **Columns:** 5
- **Links:** 37 total
- **Height:** 2017px
- **Includes:** ✓ newsletter signup | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 5-column footer with ~7 links per column, newsletter signup, 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.01) 0px 39.3493px 15.7397px 0px`,<br>`rgba(0, 0, 0, 0.02) 0px 21.6421px 12.7885px 0px`,<br>`rgba(0, 0, 0, 0.04) 0px 9.83733px 9.83733px 0px`,<br>`rgba(0, 0, 0, 0.04) 0px 1.96747px 4.91867px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(25, 23, 28, 0.01) 0px 44px 18px 0px`,<br>`rgba(25, 23, 28, 0.05) 0px 25px 15px 0px`,<br>`rgba(25, 23, 28, 0.09) 0px 11px 11px 0px`,<br>`rgba(25, 23, 28, 0.1) 0px 3px 6px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.01) 0px 197px 79px 0px`,<br>`rgba(0, 0, 0, 0.03) 0px 111px 67px 0px`,<br>`rgba(0, 0, 0, 0.05) 0px 49px 49px 0px`,<br>`rgba(0, 0, 0, 0.05) 0px 12px 27px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.33) 0px 25px 52px 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-overshoot-linear` | `linear(0,0.255,0.4449,0.6018,0.7355,0.8513,0.9525,1.0413,...` | Spring Easing — Physics-Based |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `100ms` | Fast | Hover states, micro-interactions |
| `160ms` | Normal | Panel open/close, navigation |
| `200ms` | Normal | Panel open/close, navigation |
| `300ms` | Normal | Panel open/close, navigation |
| `400ms` | Slow | Hero animations, page transitions |
| `450ms` | Slow | Hero animations, page transitions |
| `500ms` | Slow | Hero animations, page transitions |
| `550ms` | Slow | Hero animations, page transitions |

### Copy-Paste Transition Snippets

**Background**
```css
transition: background-color 0.3s linear;
```

**Transform**
```css
transition: transform 0.3s linear(0 0%, 0.255 1%, 0.4449 2%, 0.6018 3%, 0.7355 4%, 0.8513 5%, 0.9525 6%, 1.0413 7%, 1.1195 8%, 1....;
```

**Transform**
```css
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
```

**All Props**
```css
transition: border-radius 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `toastItem-module--growIn--36933` | Fade | opacity, scale | UI transition |
| `toastItem-module--shrinkOut--90c10` | Fade | opacity, scale | UI transition |
| `alert-dialog-module--overlayShow--07afa` | Fade | opacity | UI transition |
| `alert-dialog-module--contentShow--27649` | Fade + Move | opacity, transform | UI transition |
| `collapsible-module--slideDown--bf83e` | Custom | height | Panel / drawer enter |
| `collapsible-module--slideUp--70181` | Custom | height | Panel / drawer enter |
| `context-menu-module--fade-in--d5e15` | Fade | opacity | Element entrance |
| `dialog-module--overlayShow--a3661` | Fade | opacity | UI transition |
| `dialog-module--contentShow--7f350` | Fade + Move | opacity, transform | UI transition |
| `dialog-module--contentHide--31687` | Fade + Move | opacity, transform | UI transition |
| `drawer-module--show--42dab` | Fade | opacity | UI transition |
| `drawer-module--hide--22516` | Fade | opacity | UI transition |
| `drawer-module--animateBackToRest--8e377` | Slide | transform | UI transition |
| `drawer-module--slideDown--6efdd` | Slide | transform | Panel / drawer enter |
| `dropdown-module--fade-in--400fe` | Fade | opacity | Element entrance |
| `new-confirm-dialog-module--confirmBut...` | Scale | transform | UI transition |
| `new-confirm-dialog-module--overlaySho...` | Fade | opacity | UI transition |
| `new-confirm-dialog-module--contentSho...` | Fade + Move | opacity, transform | UI transition |
| `mode-bar-module--contentShow--6e97d` | Fade + Move | opacity, transform | UI transition |
| `upgradeDialog-module--appearIn--ecd3d` | Fade | opacity | UI transition |

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

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `500ms`)
- **Dominant Easing**: physics-based spring curves
- **Animation Library**: 94 unique animations (94 total including variants)

> This design moves with deliberate & calm timing using physics-based spring curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use Primary Color (`#19171c`) for text — not pure black, it's warmer and more readable
- Use Inter as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-2.4px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Pure White (`#ffffff`) as the primary accent — it's the brand's signature interactive color
- Style form inputs with a `1px solid rgba(255, 255, 255, 0.1)` border — use border-based inputs, not floating labels or underline-only
- Maintain nav height at 90px — consistent vertical space for the navigation bar
- Respect the 5px–40px spacing range — the design uses a wide scale for visual breathing room
- Use a single primary CTA in the hero — the design intentionally avoids choice paralysis
- Use a 3-column grid on desktop — density matters for this content type
- Show person avatars with testimonials — social proof is human-centric here
- Lay out testimonials in a grid (14+ items) — quantity signals scale and trust
- Include a newsletter signup in the footer — email capture is part of the conversion funnel
- Build a content-dense footer (5 columns, ~37 links) — this site treats the footer as a sitemap, not an afterthought

### 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 increase letter-spacing on headings — the type is designed to run tight at scale
- 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 remove the input border — the border is the primary affordance indicator for form fields
- 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
- Don't put a CTA button in the nav — this design uses links only at the top


## 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(255, 255, 255)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(255, 255, 255)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 380px | Single column, compact spacing |
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 720px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1024px | 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 | `80px` | `64px` |
| heading | line-height | `72px` | `53.76px` |
| nav | display | `block` | `none` |
| nav | height | `90px` | `auto` |
| hero | padding | `190px 0px 30px` | `140px 0px 40px` |
| hero | height | `1193.34px` | `935.547px` |
| card | width | `258.781px` | `100%` |

### Collapsing Strategy
- Headlines: 80px → 64px on mobile
- Navigation: block → none 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):

- **Card grid: 3-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.
- **Footer columns collapse:** 5 columns (desktop) → 3 columns (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.*

- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (3) — animated custom properties.

> **Motion fingerprint**: Canvas 2D, non-rectangular shapes (10), CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Photography-driven

The site is dominated by photography (JPG/WebP). Photos carry the brand voice as much as the typography. Use authentic, brand-appropriate imagery — generic stock will degrade quality.

**Canonical Brand Image (OG):**
- https://jitter.video/static/homepage-2026-f84088ec66bb835cbedee56b8e494ab3.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): 14 (21%)
- Portrait (<0.87): 4 (6%)
- Square (0.87–1.15): 49 (72%)
- Ultra-wide (>2.3): 1 (1%)

**Media Format Mix:**
- JPG: 4 (typically photographic content)
- WebP: 20 (optimized photo/illustration hybrid)
- PNG: 43 (logos, transparent UI elements, mockups)
- SVG: 8 (icons, illustrations, decorative geometry)

**Average rendered image size:** 110×102px
**Above-fold image count:** 0 / 68

**Decorative Patterns Detected:**
- 7 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:**
- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Primary Color (`#19171c`)
- Accent: Pure White (`#ffffff`)
- Border: Light Grey (`#c3c3c6`)
- Font: Inter
- Body: 12px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 80px Inter weight 800, line-height 0.9, letter-spacing -2.4px, color #19171c."
- "Create the primary CTA button: `#ffffff` background, `#ffffff` text, 9999px border-radius, 14px 27px padding, 600 weight, Inter font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: static on `#ffffff`. Inter 18px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in Inter, weight range 400–800. Never exceed 800 — heavier weights break the brand's tonal restraint.
3. **Accent**: Pure White (`#ffffff`) is the sole interactive color. On hover → #a981ff (`#a981ff`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use physics-based spring curves. 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 (5px–40px). 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-primary: #ffffff;
  --ca-surface-1: #f2f1f3;
  --ca-surface-2: #fafafb;
  --ca-ink-muted: #19171c;
  --ca-ink-subtle: #6e6e73;
  --ca-on-primary: #111111;
  --ca-primary-hover: #a981ff;
  --ca-hairline: #c3c3c6;
  --ca-primary-focus: #101010;
}

/* Typography */
:root {
  --ca-font-primary: "TWK Lausanne", system-ui, sans-serif;
  --ca-text-display: 80px;
  --ca-text-body: 12px;
  --ca-text-small: 16px;
  --ca-text-caption: 15px;
  --ca-text-button: 20px;
  --ca-text-mono: 17px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 5px;
  --ca-space-sm: 13px;
  --ca-space-md: 24px;
  --ca-space-base: 30px;
  --ca-space-lg: 37px;
  --ca-space-xl: 40px;
  --ca-space-2xl: 60px;
  --ca-space-3xl: 70px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 18px;
  --ca-radius-sm: 20px;
  --ca-radius-md: 26px;
  --ca-radius-lg: 40px;
  --ca-radius-xl: 50px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-overshoot-linear: linear(0,0.255,0.4449,0.6018,0.7355,0.8513,0.9525,1.0413,1.1195,1.1881,1.2484,1.3011,1.3468,1.3862,1.4198,1.4479,1.4709,1.4892,1.503,1.5126,1.5182,1.52,1.5189,1.5156,1.5101,1.5025,1.4929,1.4817,1.469,1.4552,1.4406,1.4254,1.4099,1.3943,1.3787,1.3633,1.3481,1.3333,1.3188,1.3048,1.2912,1.278,1.2653,1.253,1.2412,1.2298,1.2188,1.2083,1.1981,1.1883,1.1789,1.1698,1.1611,1.1528,1.1447,1.137,1.1296,1.1225,1.1156,1.1091,1.1028,1.0967,1.0909,1.0854,1.0801,1.075,1.0701,1.0654,1.061,1.0567,1.0526,1.0488,1.0451,1.0415,1.0382,1.035,1.032,1.0292,1.0265,1.0239,1.0215,1.0193,1.0172,1.0152,1.0134,1.0117,1.0101,1.0086,1.0073,1.0061,1.005,1.004,1.0032,1.0024,1.0018,1.0012,1.0008,1.0004,1.0002,1,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
    height: 21711px
    width: full-bleed
    layout: block
    children: 2
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: header
    tag: header
    classes: ["Header-module--header--41b9b", "Header-module--hasAppearIn--8b3cd", "Header-module--animateIn--1863a"]
    height: 129px
    width: full-bleed
    layout: block
    children: 2
  - section: feature-section
    tag: section
    classes: ["Hero-module--hero--de0f1", "Hero-module--animationStarted--923da", "global-section", "Hero-module--isIn--556e5"]
    height: 1413px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~110px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "190px 0px 30px"
  - section: feature-section
    tag: main
    classes: ["index-module--main--36469"]
    height: 19494px
    width: full-bleed
    layout: block
    children: 12
    vertical-padding: ~2345px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: header
    tag: div
    classes: ["Container-module--container--36485", "container", "Header-module--container--ad06c"]
    height: 129px
    width: 860px
    layout: block
    children: 3
  - section: header
    tag: nav
    classes: ["Header-module--links--4ecb3"]
    height: 90px
    width: 440px
    layout: block
    children: 2
  - section: content-section
    tag: div
    classes: ["Container-module--container--36485", "container"]
    height: 520px
    width: 860px
    layout: block
    children: 1
    vertical-padding: ~70px (generous)
  - section: content-section
    tag: div
    classes: ["Container-module--container--36485", "container"]
    height: 520px
    width: 860px
    layout: block
    children: 1
    vertical-padding: ~70px (generous)
  - section: header
    tag: nav
    classes: ["Header-module--submenuNav--4dd99"]
    height: 214px
    width: 242px
    layout: flex-column justify=normal
    children: 3
  - section: header
    tag: nav
    classes: ["Header-module--submenuNav--4dd99"]
    height: 214px
    width: 243px
    layout: flex-column justify=normal
    children: 3
  - section: header
    tag: section
    classes: ["SectionCenteredHeader-module--hero--d7fa8", "section-centered-header", "SectionCenteredHeader-module--dark--ad5b5", "SectionCenteredHeader-module--titleL--312a0"]
    height: 299px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["Container-module--container--36485", "container"]
    height: 299px
    width: 860px
    layout: flex-column justify=center
    children: 3
  - section: feature-section
    tag: div
    classes: ["Hero-module--heroInner--5c5f9"]
    height: 1193px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~40px
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: unknown
    tag: div
    classes: ["Container-module--container--36485", "container"]
    height: 814px
    width: 860px
    layout: block
    children: 3
  - section: section
    tag: section
    classes: ["ScrollAppearText-module--scrollAppearText--cdaed", "index-module--scrollAppearText--af3ec"]
    height: 200px
    width: full-bleed
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["Container-module--container--36485", "container", "ScrollAppearText-module--container--5acf3"]
    height: 200px
    width: 860px
    layout: grid: 10-col gap=20px
    children: 1
  - section: content-section
    tag: section
    classes: ["HorizontalScrollSection-module--container--0232e"]
    height: 900px
    width: full-bleed
    layout: block
    children: 6
  - section: feature-section
    tag: section
    classes: ["Accessibility-module--accessibility--8a08d", "global-section"]
    height: 2307px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~30px
    padding: "60px 0px 0px"
  - section: header
    tag: header
    classes: ["SectionCenteredHeader-module--hero--d7fa8", "section-centered-header", "SectionCenteredHeader-module--dark--ad5b5", "SectionCenteredHeader-module--titleL--312a0"]
    height: 312px
    width: 860px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["Container-module--container--36485", "container"]
    height: 2247px
    width: 860px
    layout: block
    children: 2
  - section: feature-section
    tag: div
    classes: ["Container-module--container--36485", "container"]
    height: 312px
    width: 860px
    layout: flex-column justify=center
    children: 3
  - section: header
    tag: div
    classes: ["SectionCenteredHeader-module--text--9dec0", "section-centered-header-description"]
    height: 81px
    width: 460px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["Quote-module--quote--41368", "section-quote"]
    height: 352px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["Container-module--container--36485", "container"]
    height: 352px
    width: 860px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["Productivity-module--productivity--a5046", "global-section"]
    height: 1369px
    width: full-bleed
    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:
    - "Motion design made simple"
    - "“Jitter gives you no excuse to skip motion . It’s that easy.”"
    - "Built for teams who move fast"
    - "“We couldn’t believe you can create such polished animations in no time at all.”"
    - "Everything your team needs to collaborate and deliver their best work"
    - "Animate for social media, ads, marketing, brand, product, and more"
  sub-headings:
    - "Import from Figma"
    - "A brand-new way to design and animate"
    - "Unlock collaboration"
    - "Jitter AI: Build your own creative tools Learn more"
    - "Motion doesn’t have to be hard. With Jitter, any designer can create professional animations in minu"
    - "Import from Figma"
  ctas:
    - "Skip to main content"
    - "Try for free"
    - "Try Jitter for free"
    - "Explore all the features"
    - "Social media"
    - "Browse 300+ free templates"
    - "Read customer stories"
  navigation:
    - "Product"
    - "Customers"
    - "Counters"
    - "Components"
    - "Glass effect"
    - "Creative teams"
    - "Agencies"
    - "Studios"
    - "Templates"
    - "Pricing"
  footer-links:
    - "Get started for free"
    - "Product"
    - "Import from Figma"
    - "After Effects alternative"
```

**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: 16
    avg-ratio: 2.02
    common-aspect: "~16:9 landscape"
    sample-alts:
      - "Google"
      - "Gamma"
      - "Perplexity"
  product:
    count: 8
    avg-ratio: 1.02
    common-aspect: "~1:1 square"
    sample-alts:
      - "video poster image"
      - "video poster image"
      - "video poster image"
  editorial:
    count: 1
    avg-ratio: 0.49
    common-aspect: "~9:21 tall"
    sample-alts:
      - "video poster image"
  thumbnail:
    count: 10
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Matt Sewell"
      - "Phi Hoang"
      - "Rico Supply"
```

**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">
  Skip to main content
</button>
```
_Source pattern detected: padding `10px` · radius `0px` · weight `600`_

### 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** 1 · **cta** 4 · **auth** 1 · **product** 11 · **pricing** 2 · **blog** 5 · **project** 16 · **social** 4 · **footer** 2 · **other** 14

**Primary actions (conversion path):**
- Account access — "Log in" (login/signup) → `https://jitter.video/login/`
- Primary call-to-action — "Try for free" (the conversion path) → `https://jitter.video/join/`
- Primary call-to-action — "Try Jitter for free" (the conversion path) → `https://jitter.video/join/`
- Primary call-to-action — "Get started now" (the conversion path) → `https://jitter.video/join/`
- Primary call-to-action — "Get started for free" (the conversion path) → `https://jitter.video/join/`

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

*Templates* — medium confidence, 6 items:

| Title | Featured image | Link |
|---|---|---|
| Devices | — | https://jitter.video/templates/devices/ |
| Text animations | — | https://jitter.video/templates/text/ |
| Logos | — | https://jitter.video/templates/logos/ |
| Animated icons | — | https://jitter.video/templates/icons/ |
| Charts | — | https://jitter.video/templates/charts/ |
| Animated websites | — | https://jitter.video/templates/websites/ |

*Customers* — medium confidence, 3 items:

| Title | Featured image | Link |
|---|---|---|
| Perplexity | — | https://jitter.video/customers/perplexity/ |
| 27b | — | https://jitter.video/customers/27b/ |
| Deliveroo | — | https://jitter.video/customers/deliveroo/ |

**Signals:** 9/60 links carry a featured image · dominant link roles: inline-link (21), footer-link (20), content-card (16).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 20 named colors |
| Typography | 20 | 20 | 10 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 1 | 10 | 29 vars |
| Responsive Breakpoints | 5 | 5 | 8 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:*

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

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

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | Medium | 29 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 10 typography roles inferred |
| §4 Components | Medium | 4 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 23 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 8 breakpoints detected |
| §9b Photography | Medium | 68 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.*

> **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 3553 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**20 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`380px` · `400px` · `401px` · `420px` · `480px` · `481px` · `600px` · `640px` · `641px` · `720px` · `767px` · `768px` · `1024px` · `1025px` … (+6 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `12px`×2399 · `18px`×329 · `16px`×234 · `20px`×221 · `14px`×84 · `15px`×68 · `40px`×62 · `72px`×41

**Radius scale** (× = paint count): `50px`×112 · `40px`×87 · `50%`×45 · `26px`×22 · `20px`×9 · `30px`×6 · `80px`×2 · `375px`×2

**Weights** (× = paint count): `400`×2792 · `600`×507 · `800`×120 · `500`×71 · `700`×41 · `750`×19

**Layout gaps** (× = paint count): `5px`×109 · `12px`×98 · `10px`×29 · `20px`×20 · `50px`×9 · `30px`×5 · `30px normal`×4 · `40px`×2

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.01) 0px 63px 25px 0px, rgba(0, 0, 0, 0.05) 0px 35px 21px 0px, rgba(0, 0, 0, 0.09) 0px 16px 16px 0px, rgba(0, 0, 0, 0.1) 0px 4px 9px 0px
rgba(25, 23, 28, 0.01) 0px 152px 61px 0px, rgba(25, 23, 28, 0.05) 0px 85px 51px 0px, rgba(25, 23, 28, 0.09) 0px 38px 38px 0px, rgba(25, 23, 28, 0.1) 0px 9px 21px 0px
rgb(255, 255, 255) 1px 0px 0px 0px, rgb(255, 255, 255) -1px 0px 0px 0px
rgba(0, 0, 0, 0.14) 0px 2px 6px 5px
```

### 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:#fff; color:#19171c; font-size:12px; font-weight:400; background-color:rgb(255, 255, 255) }
body { transition:background-color .3s linear }
header { transition:transform 1.2s cubic-bezier(.19,1,.22,1); font-weight:400; font-size:1.8rem; font-family:Inter, sans-serif }
h1 { font-size:2em }
h1 { font-weight:800; font-size:6rem; font-family:"TWK Lausanne", sans-serif }
@media screen and (min-width: 1025px) h1 { font-weight:800; font-size:7.2rem; font-family:"TWK Lausanne", sans-serif }
@media screen and (min-width: 1025px) h1 { font-weight:800; font-size:8rem; font-family:"TWK Lausanne", sans-serif }
button { font-family:inherit; font-size:100% }
button { background:transparent; background-color:transparent; font-weight:600; font-size:1.8rem; font-family:"TWK Lausanne", sans-serif }
button { color:#fff }
a { color:currentColor; gap:.5rem; font-weight:400; font-size:1.6rem; font-family:Inter, sans-serif }
a { background:transparent; background-color:transparent; font-weight:600; font-size:1.8rem; font-family:"TWK Lausanne", sans-serif }
```

> 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://jitter.video/?noredir=1 | 2026-06-11T05:01:14.600Z*
*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.*