loom.com

DESIGN.md

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

---
version: alpha
name: loom.com
description: "Light product system built on #ffffff with #1868db as the primary CTA accent. Type anchored in Charlie Display at 63.2692px / weight 700. Extracted automatically from https://loom.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  loom.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(24, 104, 219) as the high-saturation accent for primary actions.
  Fully-rounded CTAs (9999px) signal a friendly, tactile interaction model alongside Charlie Display as the primary typeface.
  A layered elevation system (8 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 12 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#ffffff"
  surface-2: "#e9f2fe"
  ink: "#292a2e"
  ink-subtle: "#101214"
  primary: "#1868db"
  on-primary: "#ffffff"
  primary-hover: "rgba(255, 97, 61, 0.125)"
  hairline: "#292a2e"
  semantic-error: "#c9372c"
  semantic-success: "#1f845a"
  semantic-warning: "#fbc828"
  semantic-info: "#1869db"

typography:
  display-xl:
    fontFamily: "Charlie Display, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 63.2692px
    fontWeight: 700
    lineHeight: 1.03
    letterSpacing: 0
  display-md:
    fontFamily: "Charlie Display, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 32.5px
    fontWeight: 700
    lineHeight: 1.27
    letterSpacing: 0
  headline:
    fontFamily: "Charlie Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12.6154px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0
  body:
    fontFamily: "Charlie Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Charlie Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Charlie Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15.6154px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0

rounded:
  none: 0px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 41.6923px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 8px
  sm: 16px
  md: 36px
  lg: 71px
  xl: 91px
  xxl: 119px

components:
  button-pill:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-pill-2:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 7.80769px 15.6154px
  button-icon-button:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"

extracted_at: "2026-06-11T06:12:05.438Z"
completeness: 70
scoreVersion: "v2"

---

# Design System — loom.com
> Extracted automatically by Prism from https://loom.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**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Charlie Text) | "One video is worth a thousand " |
| Color assertion | dual-accent | #1868db |
| Whitespace | sparse | section rhythm 111px |
| Interaction | expressive | 12 keyframes, 10 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · 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(24, 104, 219)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 111px between major bands. Card padding: 71px.
> - **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

**Signature:** an atmospheric gradient mesh in the hero — colours: #1868db, #94c748, #bf63f3, #a36700, #4d8ced. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

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

Headlines are set in **Charlie Display**, a sans-serif display face (the dominant type signature, e.g. "One video is worth a thousand words" at 63.2692px). A second display voice — **Charlie Text** (sans) — appears in lower bands (e.g. "Easily record and share AI-powered video messages with your "), used for editorial accent. Body text is set in **Charlie Text**, deployed with OpenType features enabled globally (`"ss01", "ss02", "ss08"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. The weight scale rejects the standard 100/200/.../900 ladder in favor of custom values (max **653** in this system) — a deliberate signal that this design system is precisely tuned, not assembled from defaults. 

Body text reads in Near-Black (`#292a2e`) — softened from pure black, a small but deliberate detail that lowers reading friction. **M Tricolor Blue** (`#1868db`) 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 (8 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Charlie Display
- Primary text: Near-Black (`#292a2e`)
- Accent: M Tricolor Blue (`#1868db`)
- Display: 63.2692px weight 700
- Shadow system: 8 distinct elevation levels
- Custom fonts loaded: Charlie Display, Charlie Text, Circular, Atlassian Sans, Atlassian Mono

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Ghost White** (`#f8eefe`): Surface / elevated background
- **Light Gray** (`#e9f2fe`): Surface / elevated background
- **Beige** (`#fff5d4`): Surface / elevated background
- **Soft Pink** (`#eed7fc`): Surface / elevated background

### Text & Content
- **Near-Black** (`#292a2e`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Near-Black** (`#101214`): Secondary text
- **#48245d** (`#48245d`): Secondary text
- **Dark Gray** (`#3b394e`): Secondary text

### Accent & Interactive
- **M Tricolor Blue** (`#1868db`): Interactive / accent
- **Translucent #ff613d (13%)** (`rgba(255, 97, 61, 0.125)`): Interactive / accent
- **#a36700** (`#a36700`): Interactive / accent
- **Translucent #eb9100 (20%)** (`rgba(235, 145, 0, 0.2)`): Interactive / accent
- **#bf63f3** (`#bf63f3`): Interactive / accent
- **#c97cf4** (`#c97cf4`): Interactive / accent
- **#82b536** (`#82b536`): Interactive / accent

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

- `#7d818a` — Medium Gray
- `#efffd6` — Beige
- `#123263` — #123263
- `#1558bc` — Cobalt Blue
- `#0082ff` — #0082ff
- `#0050d3` — #0050d3
- `#ffc716` — Amber
- `#6c6f77` — Dim Gray *(token)*
- `#4d8ced` — Ring Blue *(token)*
- `rgba(59, 130, 246, 0.5)` — Translucent Ring Blue (50%) *(token)*
- `#f0f1f2` — Off-White *(token)*
- `#c77b00` — #c77b00 *(token)*
- `#94c748` — #94c748 *(token)*
- `#669df1` — Cornflower Blue *(token)*
- `#af59e1` — Amethyst *(token)*
- `#d3f1a7` — #d3f1a7 *(token)*
- `#372d1d` — Warm Brown *(token)*
- `#3b3d42` — Charcoal *(token)*
- `#ffe48f` — #ffe48f *(token)*
- `#b3df72` — #b3df72 *(token)*
- `#cfe1fd` — #cfe1fd *(token)*
- `#964ac0` — Amethyst *(token)*
- `#357de8` — Ring Blue *(token)*
- `#ffa900` — Amber *(token)*
- `#b7b9be` — Grey *(token)*
- `#1e1f21` — Near-Black *(token)*
- `#8a5700` — Chocolate *(token)*
- `#5b7f24` — #5b7f24 *(token)*
- `#d8a0f7` — Plum *(token)*
- `#f1f0f3` — Off-White *(token)*
- `#28311b` — Warm Brown *(token)*
- `#f8f8f8` — Off-White *(token)*
- *…+15 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `conic-gradient(from 180deg at 50% 50%,#1868db 55.38461744785309deg,#94c748 145.80000042915344deg,#bf…` — (--thd-color-rovo-gradient)
- `linear-gradient(180deg,rgba(0,0,0,.07),transparent)` — (--thd-gradient-nav)
- `linear-gradient(180deg,hsla(0,0%,100%,0),#fff 31.77%)` — (--thd-gradient-white)
- `linear-gradient(135deg,#4d8ced 0%,#1868db 100%)` — (--thd-color-blue-gradient)
- `radial-gradient(138.41% 100% at 100% 100%, #E9F2FE 0%, #FFF 100%)` — (--lns-gradient-ai-secondary)
- `conic-gradient(from 270deg, #0469FF 90deg, #BF63F3 180deg, #FFA900 270deg, #0065FF 360deg)` — (--lns-gradient-ai-primary)
- `linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 55%, rgb(233, 242, 254) 55%, rgb(233, 242…` — (sidebar)

### CSS Custom Properties (Design Tokens)

**Border Radius Token**
- `--lns-radius-250`: `calc(2.5 * 0.5rem)`
- `--lns-radius-none`: `0`
- `--lns-radius-175`: `calc(1.75 * 0.5rem)`
- `--thd-rounded-fluid-ext-min`: `3.5`

**Background**
- `--lns-themeDark-color-background`: `hsla(240,3%,12.5%,1)`
- `--lns-themeLight-color-backgroundSecondary2`: `hsla(0,0%,97.25%,1)`
- `--lns-themeDark-color-backgroundNeutral`: `hsla(240,12.6%,83%,0.07)`
- `--lns-themeLight-color-backgroundNeutral`: `hsla(209,76%,8%,0.08)`

**Shadow Token**
- `--lns-shadow-small`: `0 calc(0.5 * 0.5rem) calc(1.25 * 0.5rem) hsla(0, 0%, 0%, 0.05)`
- `--lns-formFieldBorderShadow`: `inset 0 0 0 1px hsla(223.6,5%,57%,1)`
- `--lns-shadow-medium`: `0 calc(0.5 * 0.5rem) calc(1.25 * 0.5rem) hsla(0, 0%, 0%, 0.1)`
- `--lns-formFieldBorderShadowFocus`: `inset 0 0 0 2px hsla(215.4,80%,47.65%,1),
    0 0 0 2px hsla(216.1,81.4%,60%,1)`

**Spacing Token**
- `--lns-letterSpacing-xlarge`: `-0.2px`
- `--lns-letterSpacing-large`: `-0.2px`
- `--lns-letterSpacing-body-sm`: `normal`
- `--thd-space-fixed-4xl`: `3.5rem`

**Primary Brand Color**
- `--lns-themeLight-color-primaryActive`: `hsla(216.3,69.2%,22.9%,1)`
- `--lns-color-primaryActive`: `hsla(216.3,69.2%,22.9%,1)`
- `--lns-themeDark-color-primaryActive`: `hsla(216.5,92%,90.2%,1)`
- `--lns-themeDark-color-primaryHover`: `hsla(216.1,85.1%,76.3%,1)`

**Warning**
- `--thd-color-yellow-60`: `#c77b00`
- `--lns-color-yellowLight`: `hsla(43,93%,82%,1)`
- `--thd-color-yellow-100`: `#372d1d`
- `--thd-color-yellow-30`: `#ffc716`

**Error / Destructive**
- `--lns-themeDark-color-dangerHover`: `hsla(4,96%,78%,1)`
- `--lns-color-red`: `hsla(4,64%,48%,1)`
- `--lns-color-danger`: `hsla(4,64%,48%,1)`
- `--lns-themeDark-color-dangerActive`: `hsla(4,100%,91.2%,1)`

**Success**
- `--thd-color-green-20`: `#d3f1a7`
- `--thd-color-green-10`: `#efffd6`
- `--thd-color-green-40`: `#94c748`
- `--thd-color-green-50-80`: `#82b536cc`

**Border**
- `--thd-color-border-grey`: `#f1f0f3`
- `--lns-themeLight-color-border`: `hsla(225.5,57%,10%,0.14)`
- `--lns-color-border`: `hsla(225.5,57%,10%,0.14)`
- `--lns-themeDark-color-border`: `hsla(236,36.6%,92%,0.12)`

**Other tokens**
- `--lns-themeLight-color-backdropDark`: `hsla(228,6%,17%,0.9)`
- `--lns-color-buttonBorder`: `hsla(252,13%,46%,0.25)`
- `--lns-color-info`: `hsla(215,80.25%,47.65%,1)`
- `--lns-themeDark-color-highlightActive`: `hsla(215.4,80%,47.65%,0.45)`
- `--lns-themeDark-color-highlightHover`: `hsla(215.4,80%,47.65%,0.3)`
- `--lns-color-backdropDark`: `hsla(228,6%,17%,0.9)`
- `--thd-color-blue-80`: `#1558bc`
- `--lns-themeLight-color-upgrade`: `hsla(277.5,89%,96.5%,1)`

## 3. Typography Rules

### Font Families
- **Primary**: `Charlie Text`
- **Secondary**: `Charlie Display`
- **Font 3**: `Circular`
- **Font 4**: `Noto Color Emoji`
- **Font 5**: `Atlassian Sans`

### Custom Fonts Loaded
- **Charlie Display** weight 100 (normal)
- **Charlie Display** weight 200 (normal)
- **Charlie Display** weight 400 (normal)
- **Charlie Display** weight 500 (normal)
- **Charlie Display** weight 700 (normal)
- **Charlie Display** weight 800 (normal)
- **Charlie Display** weight 900 (italic)
- **Charlie Text** weight 100 (normal)
- **Charlie Text** weight 200 (normal)
- **Charlie Text** weight 400 (normal)
- **Charlie Text** weight 500 (normal)
- **Charlie Text** weight 700 (normal)
- **Charlie Text** weight 800 (normal)
- **Circular** weight 400 (normal)
- **Noto Color Emoji** weight 400 (normal)
- **Atlassian Sans** weight 100 900 (normal)
- **Atlassian Mono** weight 100 800 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Charlie Display | 63.2692px | 700 | 1.03 | normal | Main headline (h1) |
| Sub-heading | Charlie Display | 32.5px | 700 | 1.27 | normal | Third-level heading (h3) |
| Body | Charlie Text | 16px | 400 | 1.5 | normal | Standard reading text |
| Button | Charlie Text | 15.6154px | 400 | 1.71 | normal | Button label (15.6154px) |
| Link | Charlie Text | 15px | 400 | 1.5 | normal | Link (15px) — Decoration: none |
| Label Heading | Charlie Text | 12.6154px | 700 | 1.45 | normal | Small heading (H4) |

### Font Weight Scale

CSS custom properties define 4 explicit weight steps:
- `--lns-fontWeight-regular`: `400` — Regular
- `--lns-fontWeight-book`: `400` — Regular
- `--lns-fontWeight-medium`: `500` — Medium
- `--lns-fontWeight-bold`: `653` — Bold (custom, ~700)

### Full Font Size Scale

Sizes detected in the design (descending): `63.27px`, `44.15px`, `32.50px`, `26.65px`, `25.27px`, `18.62px`, `18.40px`, `18px`, `16px`, `15.62px`, `15px`, `12.62px`

> 6 size(s) detected outside the sampled hierarchy (44.1538px, 26.6538px, 25.2692px, 18.6231px, 18.4px, 18px). 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:

- **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants)

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

## 4. Component Stylings

### Buttons

**Pill**
- Background: `transparent`
- Text: `#292a2e` `{colors.hairline}`
- Padding: 8px 16px
- Radius: 9999px
- Font: 16px weight 400
- Use: Status pills, tags, chips
- Focus: backgroundColor: `rgb(233, 242, 254)`, outline: `rgba(0, 0, 0, 0) solid 2px`

**Pill**
- Background: `#1868db` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 7.80769px 15.6154px
- Radius: 9999px
- Font: 15.6154px weight 400
- Use: Status pills, tags, chips
- Focus: backgroundColor: `rgb(233, 242, 254)`, outline: `rgba(0, 0, 0, 0) solid 2px`

**Icon Button**
- Background: `transparent`
- Text: `#292a2e` `{colors.hairline}`
- Padding: 0px
- Radius: 6px
- Font: 16px weight 400
- Use: Toolbar/UI icons
- Focus: backgroundColor: `rgb(233, 242, 254)`, outline: `rgba(0, 0, 0, 0) solid 2px`


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **focus:** bg transparent → #e9f2fe

*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(41, 42, 46)"
    focus:
      bg: "rgb(233, 242, 254)"
      fg: "inherit"
  link:
    default:
      bg: "rgb(248, 238, 254)"
      fg: "rgb(125, 129, 138)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(41, 42, 46)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(16, 18, 20)"
```

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

## 5. Layout Principles

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

### Grid
Single column, centered content

### Max Width
1440px

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 8px |
| sm | 16px |
| md | 36px |
| base | 56px |
| lg | 71px |
| xl | 91px |
| 2xl | 111px |
| 3xl | 119px |

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

### Shape Language

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

**Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy.

**Full Radius Spectrum**: 0px, 6px, 8px, 12px, 16px, 41.6923px, 50px, 68.9231px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~91px internal vertical padding (up to 111px) — **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** | `119px` | Top/bottom of full-bleed hero sections |
| **section** | `91px` | Between major bands (color change, content shift) |
| **subsection** | `71px` | Within a section, between content groups |
| **card** | `36px` | Card padding, list-item spacing |
| **compact** | `16px` | Form fields, tight clusters, badge padding |
| **micro** | `8px` | 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).

**5/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:** 162px tall (not full-viewport)
- **Heading:** "One video is worth a thousand words" — 63px center-aligned
- **Subheading:** "Easily record and share AI-powered video messages with your teammates and customers to supercharge productivity"
- **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. 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:** logo-left-links-right — Logo at far left, primary navigation links right-aligned
- **Height:** 90px
- **Logo:** ✓ present
- **Nav links:** 3 primary items
- **CTAs in nav:** 2
- **Clone instruction:** Build a static logo left links right navigation. Reserve 2 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 8 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1008×503px (aspect 2:1)
- **Gap:** 24px between cards
- **Content:** ✓ image
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~2:1 aspect ratio. Each card has an image at the top.

### Testimonial Pattern

- **Count:** 10 testimonial blocks
- **Layout:** grid
- **Avg quote length:** 209 chars (long-form story)
- **Includes:** ✓ avatars | ✓ company logos | ✗ no ratings
- **Clone instruction:** Build a grid of 10 testimonials. Each includes an avatar. Include source company logos. 

### Footer Pattern

- **Columns:** 6
- **Links:** 54 total
- **Height:** 697px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 6-column footer with ~9 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.25) 0px 15px 50px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.25) 0px 3.24px 3.24px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(255, 255, 255, 0.4) 0px 0px 0px 5px`,<br>`rgba(0, 0, 0, 0.17) 0px 45.612px 86.879px 0px`,<br>`rgba(0, 0, 0, 0.11) 0px 13.751px 26.192px 0px`,<br>`rgba(0, 0, 0, 0.09) 0px 5.71104px 10.879px 0px`,<br>`rgba(0, 0, 0, 0.06) 0px 2.06592px 3.93504px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.04) 0px 2px 6px 0px`,<br>`rgba(0, 0, 0, 0.06) 0px 5px 18px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 24px 83px 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

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `cubic-bezier(0.4,0,0.2,1)` | Material Standard — Balanced |
| `cubic-bezier(0.4,0,1,1)` | Material Accelerate — Exit |
| `ease-in-out` | Ease In-Out — Symmetric |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `100ms` | Fast | Hover states, micro-interactions |
| `150ms` | Fast | Hover states, micro-interactions |
| `200ms` | Normal | Panel open/close, navigation |
| `300ms` | Normal | Panel open/close, navigation |
| `500ms` | Slow | Hero animations, page transitions |
| `1s` | Cinematic | Splash, marketing reveals |

### Copy-Paste Transition Snippets

**Color / Background**
```css
transition: color 1s cubic-bezier(0.4, 0, 0.2, 1), background-color 1s cubic-bezier(0.4, 0, 0.2, 1), border-color 1s cubic-bezier...;
```

**Shadow**
```css
transition: box-shadow 0.5s;
```

**Transform**
```css
transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
```

**Opacity**
```css
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `SanityMarkdown_spin__2GSOd` | Rotate / Spin | transform | Loading indicator |
| `StandardHeroAccent_button__UB7R5` | Slide | background-color, transform | UI transition |
| `StandardHeroAccent_cursor__d4akH` | Scale | transform | UI transition |
| `StandardHeroAccent_desktop__l8Ggr` | Slide | transform | UI transition |
| `StandardHeroAccent_opacity__FqEXT` | Fade | opacity | UI transition |
| `StandardHeroAccent_window__1sDEW` | Slide | transform | UI transition |
| `Hero_radialShift__k0fg2` | Custom | background-position-x, background-position-y, background-size | UI transition |
| `RecordScreenSchedule_remove__eF4du` | Fade | opacity | UI transition |
| `CommentsConversationAnimation_fill__6...` | Scale | transform | UI transition |
| `animation-w7dv0m` | Scale | transform | UI transition |
| `scroll` | Slide | transform | UI transition |
| `onetrust-fade-in` | Fade | opacity | Element entrance |

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 12 unique animations (12 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 Near-Black (`#292a2e`) for text — not pure black, it's warmer and more readable
- Use Charlie Text 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 full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use M Tricolor Blue (`#1868db`) as the primary accent — it's the brand's signature interactive color
- Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs
- Maintain nav height at 90px — consistent vertical space for the navigation bar
- Respect the 8px–91px spacing range — the design uses a wide scale for visual breathing room
- Each card includes a top image — imagery is part of the card identity, not optional
- Show company logos with testimonials — social proof relies on brand recognition, not avatars
- Lay out testimonials in a grid (10+ items) — quantity signals scale and trust
- Build a content-dense footer (6 columns, ~54 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 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 use rectangular buttons for primary actions — the rounded pill shape is the brand standard
- 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(24, 104, 219)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(24, 104, 219)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 360px | Single column, compact spacing |
| Mobile | 476px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 752px | Expanded mobile layout |
| Tablet | 1023px | Multi-column grids begin |
| Desktop | 1280px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `63.2692px` | `35px` |
| heading | line-height | `65.104px` | `36.015px` |
| nav | padding | `0px 36.16px` | `0px 32px` |
| button | padding | `8px 16px` | `0px` |
| button | width | `83.9219px` | `48px` |
| main | max-width | `1440px` | `390px` |
| sidebar | width | `1440px` | `390px` |

### Collapsing Strategy
- Headlines: 63.2692px → 35px 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: 8px 16px 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):

- **Hero collapses centered → left-aligned** — composition shifts (verify on actual mobile render).
- **Navigation collapses to hamburger** — 3 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).
- **Nav CTAs reduced** on mobile (2 → 0) — the design prioritizes content over conversion buttons at small sizes.
- **Footer columns collapse:** 6 columns (desktop) → 1 column (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.*

- **Clip-path shapes** — 3 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** (1) — animated custom properties.

> **Motion fingerprint**: non-rectangular shapes (3), CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://cdn.sanity.io/images/pvn35iyy/production/6f62a5ee8e9e6a4a980876e632eb1f58c3125591-2400x1254.jpg
  *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): 5 (24%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 13 (62%)
- Ultra-wide (>2.3): 3 (14%)

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

**Average rendered image size:** 249×195px
**Above-fold image count:** 0 / 21

**Decorative Patterns Detected:**
- 2 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 3 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:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Near-Black (`#292a2e`)
- Accent: M Tricolor Blue (`#1868db`)
- Border: Near-Black (`#292a2e`)
- Font: Charlie Text
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 63.2692px Charlie Text weight 700, line-height 1.03, color #292a2e."
- "Create the primary CTA button: `#1868db` background, `#ffffff` text, 9999px border-radius, 7.80769px 15.6154px padding, 700 weight, Charlie Text font."
- "Build navigation: relative on `#ffffff`. Charlie Text 16px 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 Charlie Text, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: M Tricolor Blue (`#1868db`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `9999px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (8px–91px). 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: #e9f2fe;
  --ca-hairline: #292a2e;
  --ca-ink-subtle: #101214;
  --ca-primary: #1868db;
  --ca-primary-hover: #ff613d;
  --ca-semantic-error: #c9372c;
  --ca-semantic-success: #1f845a;
  --ca-semantic-warning: #fbc828;
  --ca-semantic-info: #1869db;
}

/* Typography */
:root {
  --ca-font-primary: "Charlie Display", system-ui, sans-serif;
  --ca-text-display: 63.2692px;
  --ca-text-body: 16px;
  --ca-text-small: 15px;
  --ca-text-button: 15.6154px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 8px;
  --ca-space-sm: 16px;
  --ca-space-md: 36px;
  --ca-space-base: 56px;
  --ca-space-lg: 71px;
  --ca-space-xl: 91px;
  --ca-space-2xl: 111px;
  --ca-space-3xl: 119px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 6px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 41.6923px;
  --ca-radius-full: 9999px;
}
```


## 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: 12452px
    width: full-bleed
    layout: grid: 1-col gap=normal
    children: 1
  - section: header
    tag: header
    height: 90px
    width: full-bleed
    layout: flex-column justify=center
    children: 3
    bg: "rgb(255, 255, 255)"
  - section: navigation
    tag: nav
    classes: ["px-fluid-base", "4xl:px-0", "my-auto", "relative"]
    height: 90px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 36.16px"
  - section: hero
    tag: section
    classes: ["relative", "pb-fluid-lg", "bg-thd-color-white", "pt-fluid-lg"]
    height: 1275px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~111px (airy)
    padding: "111.04px 0px"
  - section: feature-section
    tag: main
    height: 12362px
    width: full-bleed
    layout: block
    children: 13
    vertical-padding: ~111px (airy)
  - section: header
    tag: header
    classes: ["mb-xl", "w-full", "whitespace-pre-line", "flex"]
    height: 162px
    width: 1368px
    layout: flex-column justify=center
    children: 2
  - section: feature-section
    tag: section
    classes: ["mb-fluid-xs", "py-fluid-lg", "overflow-hidden"]
    height: 777px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~111px (airy)
    padding: "111.04px 0px"
  - section: feature-section
    tag: section
    classes: ["lg:px-fluid-base", "mb-fluid-md", "scroll-my-fluid-lg"]
    height: 816px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~111px (airy)
    padding: "0px 36.16px"
  - section: header
    tag: header
    classes: ["flex", "flex-col", "justify-center", "max-w-screen-sm"]
    height: 480px
    width: 545px
    layout: flex-column justify=center
    children: 3
  - section: feature-section
    tag: section
    classes: ["max-w-screen-3xl", "mx-auto", "mb-fluid-lg", "md:px-fluid-base"]
    height: 960px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~111px (airy)
    padding: "0px 36.16px"
  - section: header
    tag: header
    classes: ["px-fluid-base", "flex", "flex-col", "md:text-center"]
    height: 130px
    width: 1368px
    layout: flex-column justify=center
    children: 2
    padding: "0px 36.16px"
  - section: feature-section
    tag: div
    classes: ["bg-thd-color-white", "thd-container-plate", "px-fluid-base", "py-fluid-md"]
    height: 760px
    width: 1368px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~111px (airy)
    padding: "111.04px"
  - section: header
    tag: header
    classes: ["w-full", "mx-auto", "flex", "flex-col"]
    height: 294px
    width: 537px
    layout: flex-column justify=center
    children: 1
  - section: feature-section
    tag: section
    classes: ["mx-auto", "px-fluid-base", "3xl:p-0", "max-w-screen-3xl"]
    height: 2394px
    width: full-bleed
    layout: block
    children: 2
    padding: "0px 36.16px"
  - section: header
    tag: header
    classes: ["flex", "flex-col", "md:text-center", "md:items-center"]
    height: 130px
    width: 1368px
    layout: flex-column justify=center
    children: 1
  - section: feature-section
    tag: div
    classes: ["bg-thd-color-white", "thd-container-plate", "px-fluid-base", "md:px-fluid-md"]
    height: 731px
    width: 1186px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~91px (generous)
    padding: "90.88px 111.04px"
  - section: header
    tag: header
    classes: ["w-full", "mx-auto", "text-left", "flex"]
    height: 313px
    width: 286px
    layout: flex-column justify=center
    children: 2
  - section: feature-section
    tag: div
    classes: ["bg-thd-color-white", "thd-container-plate", "px-fluid-base", "md:px-fluid-md"]
    height: 731px
    width: 1186px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~91px (generous)
    padding: "90.88px 111.04px"
  - section: header
    tag: header
    classes: ["w-full", "mx-auto", "text-left", "flex"]
    height: 263px
    width: 286px
    layout: flex-column justify=center
    children: 2
  - section: feature-section
    tag: div
    classes: ["bg-thd-color-white", "thd-container-plate", "px-fluid-base", "md:px-fluid-md"]
    height: 731px
    width: 1186px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~91px (generous)
    padding: "90.88px 111.04px"
  - section: header
    tag: header
    classes: ["w-full", "mx-auto", "text-left", "flex"]
    height: 376px
    width: 286px
    layout: flex-column justify=center
    children: 2
  - section: feature-section
    tag: section
    classes: ["md:px-fluid-base", "pb-fluid-lg"]
    height: 585px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~56px (generous)
    padding: "0px 36.16px 111.04px"
  - section: feature-section
    tag: div
    classes: ["bg-thd-color-black", "p-fluid-sm", "thd-container-plate", "md:thd-rounded-ext"]
    height: 474px
    width: 1368px
    layout: block
    children: 1
    bg: "rgb(16, 18, 20)"
    tone: dark
    vertical-padding: ~71px (generous)
    padding: "70.72px 36.16px"
  - section: header
    tag: header
    classes: ["mx-auto", "mb-2xl", "flex", "flex-col"]
    height: 227px
    width: 900px
    layout: flex-column justify=center
    children: 2
  - section: feature-section
    tag: section
    classes: ["mb-fluid-md"]
    height: 686px
    width: full-bleed
    layout: block
    children: 3
```

**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:
    - "Millions of people across 400,000 companies choose Loom"
    - "Ship faster with AI bug reports"
    - "The easiest screen recorder you’ll ever use"
    - "Lightning fast screen recording"
    - "So much more than a screen recorder"
    - "Keep your content safe"
  sub-headings:
    - "Edit your videos like a pro"
    - "Share or embed video anywhere you work"
    - "Sales"
    - "When to Choose Synchronous Vs. Asynchronous Communication"
  ctas:
    - "Apps"
    - "Enterprise"
    - "Sign In"
    - "Get Loom for free"
    - "Contact Sales"
    - "Install Chrome Extension Open in new window"
    - "Learn more Open in new window"
    - "Download now"
  navigation:
    - "Enterprise"
    - "Pricing"
    - "Sign In"
    - "Get Loom for free"
    - "Contact Sales"
    - "record your screen"
    - "Chrome extension"
    - "desktop app"
    - "mobile app"
    - "Download now"
  footer-links:
    - "Pricing"
```

**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: 33
    avg-ratio: 3.41
    common-aspect: "~16:6 banner"
    sample-alts:
      - "HubSpot"
      - "LaunchDarkly"
      - "Remote"
  thumbnail:
    count: 2
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "MetaLab"
      - "MetaLab"
```

**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">
  Apps
</button>
```
_Source pattern detected: padding `8px 16px` · radius `9999px` · weight `400`_

**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** 1 · **auth** 1 · **product** 22 · **pricing** 2 · **blog** 3 · **project** 1 · **social** 5 · **footer** 11 · **other** 11

**Primary actions (conversion path):**
- Account access — "Sign In" (login/signup) → `https://www.loom.com/login`
- Primary call-to-action — "Get Loom for free" (the conversion path) → `https://www.loom.com/signup`

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

*Blog* — medium confidence, 3 items:

| Title | Featured image | Link |
|---|---|---|
| When to Choose Synchronous Vs. Asynchronous  | — | https://www.atlassian.com/blog/loom/synchronous-vs-asynchronous |
| Let Loom AI Do the Work: Say Goodbye to Manu | — | https://www.atlassian.com/blog/loom/loom-ai-workflows |
| Explore our blog Open in new window | — | https://www.atlassian.com/blog/loom |

*Looms* — medium confidence, 1 items:

| Title | Featured image | Link |
|---|---|---|
| Record now | — | https://www.loom.com/looms/videos?reminderToRecord=true |

**Signals:** 18/60 links carry a featured image · dominant link roles: footer-link (32), content-card (14), inline-link (10).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 24 | 25 | 17 named colors |
| Typography | 15 | 20 | 6 roles defined |
| Components | 4 | 20 | 1 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 10 | 10 | 477 vars |
| Responsive Breakpoints | 5 | 5 | 6 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 (Charlie Display, Charlie Text, Circular)** — 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.

| 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 | 477 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 6 typography roles inferred |
| §4 Components | Low | 1 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 20 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | Medium | 21 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

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

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Display';
  /* src: url('/fonts/Charlie-Display.woff2') format('woff2'); */
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Charlie Text';
  /* src: url('/fonts/Charlie-Text.woff2') format('woff2'); */
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  /* src: url('/fonts/Circular.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  /* src: url('/fonts/Circular.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  /* src: url('/fonts/Circular.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  /* src: url('/fonts/Circular.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Color Emoji';
  /* src: url('/fonts/Noto-Color-Emoji.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlassian Sans';
  /* src: url('/fonts/Atlassian-Sans.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlassian Sans';
  /* src: url('/fonts/Atlassian-Sans.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Atlassian Mono';
  /* src: url('/fonts/Atlassian-Mono.woff2') format('woff2'); */
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlassian Mono';
  /* src: url('/fonts/Atlassian-Mono.woff2') format('woff2'); */
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes EnterpriseAnimation_glow__VCgqx { ... }
@keyframes RecordScreenSchedule_remove__eF4du { ... }
@keyframes ChatUnfurlAnimation_moveUp3__ltAgB { ... }
@keyframes ChatUnfurlAnimation_moveUp__KUoh9 { ... }
@keyframes ChatUnfurlAnimation_moveUp2__I7mmp { ... }
@keyframes ChatUnfurlAnimation_expand___LYr7 { ... }
@keyframes ChatUnfurlAnimation_unfurl__AmPML { ... }
@keyframes ChatUnfurlAnimation_play__bHqlx { ... }
@keyframes ChatUnfurlAnimation_click__OvyUw { ... }
@keyframes ChatUnfurlAnimation_remove__YKMot { ... }
@keyframes CommentsConversationAnimation_fill__6JMyH { ... }
@keyframes CommentsConversationAnimation_emoji1__TWE3Q { ... }
@keyframes CommentsConversationAnimation_comment1__qSRR3 { ... }
@keyframes CommentsConversationAnimation_comment2__rFbbF { ... }
@keyframes SanityMarkdown_spin__2GSOd { ... }
@keyframes StandardHeroAccent_button__UB7R5 { ... }
@keyframes StandardHeroAccent_cursor__d4akH { ... }
@keyframes StandardHeroAccent_desktop__l8Ggr { ... }
@keyframes StandardHeroAccent_opacity__FqEXT { ... }
@keyframes StandardHeroAccent_window__1sDEW { ... }
@keyframes Hero_radialShift__k0fg2 { ... }
@keyframes pulse { ... }
@keyframes uppy-StatusBar-ProgressStripes { ... }
@keyframes uppy-StatusBar-spinnerAnimation { ... }
@keyframes uppy-Dashboard-fadeIn { ... }
@keyframes uppy-Dashboard-fadeOut { ... }
@keyframes uppy-Dashboard-slideDownAndFadeIn { ... }
@keyframes uppy-Dashboard-slideDownAndFadeIn--small { ... }
@keyframes uppy-Dashboard-slideUpFadeOut { ... }
@keyframes uppy-Dashboard-slideUpFadeOut--small { ... }
@keyframes k1v8un7d { ... }
@keyframes kztt5h0 { ... }
@keyframes k11647nu { ... }
@keyframes k12cqms0 { ... }
@keyframes k1bbsfcj { ... }
@keyframes k1dj5hf1 { ... }
@keyframes k1fo8igf { ... }
@keyframes k1gp9ioh { ... }
@keyframes k1h8oue3 { ... }
@keyframes k1j8u6o8 { ... }
@keyframes k1na2ju7 { ... }
@keyframes k1rq2oqw { ... }
@keyframes k1sspn6e { ... }
@keyframes k1tay9q1 { ... }
@keyframes k1vint76 { ... }
@keyframes k1vmhg30 { ... }
@keyframes k1wh49cw { ... }
@keyframes k1y4xa46 { ... }
@keyframes k1ydy56c { ... }
@keyframes k1ylodgn { ... }
@keyframes k73gfcn { ... }
@keyframes k7ccisj { ... }
@keyframes k8nf8el { ... }
@keyframes k9i97cc { ... }
@keyframes kbjizr2 { ... }
@keyframes kecjqy3 { ... }
@keyframes kij747q { ... }
@keyframes km3530i { ... }
@keyframes kqit24e { ... }
@keyframes kwlxyjp { ... }
@keyframes kyep8rx { ... }
@keyframes ftux-wrapper_fadeIn_VIZ { ... }
@keyframes video-description_dash_jfe { ... }
@keyframes video-description_fade-in_ioX { ... }
@keyframes right-panel_generating-highlights-tab-glow_ppY { ... }
@keyframes video-highlights_loading-message-glow_Jnc { ... }
@keyframes video-highlights_stream-message-logo-glow_HaU { ... }
@keyframes edit-item_angleRotation_nB2 { ... }
@keyframes chapters_dash_yLW { ... }
@keyframes chapters_fade-in_ZIW { ... }
@keyframes auto-applied_flick_fti { ... }
@keyframes auto-applied_pop_rlB { ... }
@keyframes auto-applied_disappear_D8i { ... }
@keyframes auto-applied_angleRotation__hZ { ... }
@keyframes popovers_fadeIn_qv6 { ... }
@keyframes loader_fadeInAndOut_D5k { ... }
@keyframes comment-suggestions_popIn_Mg4 { ... }
@keyframes comment-suggestions_popOut_xIf { ... }
@keyframes comment-suggestions_pillFadeToBlue_RWH { ... }
@keyframes comment-suggestions_tailCoverFadeToBlue_rUn { ... }
@keyframes comment-suggestions_tailFillFadeToBlue_URY { ... }
@keyframes comment-suggestions_tailStrokeFadeToBlue__ys { ... }
@keyframes engagement-bar_wave-rotate_TFh { ... }
@keyframes engagement-bar_prompt-slide-up_a5c { ... }
@keyframes engagement-bar_slide-background_A4Y { ... }
@keyframes engagement-bar_emoji-bar-slide_YUW { ... }
@keyframes persistent-reaction-bar_emoji-bar-slide_dXh { ... }
@keyframes components_fadeIn_TH_ { ... }
@keyframes fadeOut { ... }
@keyframes popUp { ... }
@keyframes auto-link_fadeIn_I3u { ... }
@keyframes end-of-video-suggested-video_slideFromRight_UHU { ... }
@keyframes end-of-video-suggested-video_fadeInAndSlide_YIL { ... }
@keyframes players_tapToUnmuteToastAnimation_fG_ { ... }
@keyframes profile-bubble_fade-in_Rpi { ... }
@keyframes profile-bubble_ring_PWz { ... }
@keyframes profile-bubble_fill_jRE { ... }
@keyframes surveys_slideIn_rfd { ... }
@keyframes surveys_toastEnter_f3Q { ... }
@keyframes onetrust-fade-in { ... }
@keyframes HeroImage_bubb__mpqQX { ... }
@keyframes WorkSmarterAnimation_dash__HXvBi { ... }
@keyframes WorkSmarterAnimation_move__mE4BO { ... }
@keyframes WorkSmarterAnimation_scene1__dvono { ... }
@keyframes WorkSmarterAnimation_shift__G0k8l { ... }
@keyframes CaptureTextAnimation_dash__sZJLz { ... }
@keyframes CaptureTextAnimation_jamila__9lTDj { ... }
@keyframes CaptureTextAnimation_controls__OA_6w { ... }
@keyframes ShareBlockAnimation_background__iF0z1 { ... }
@keyframes ShareBlockAnimation_buttonClick__cDoJQ { ... }
@keyframes ShareBlockAnimation_pointer__n5BAl { ... }
@keyframes ShareBlockAnimation_icon__oE9QP { ... }
@keyframes ShareBlockAnimation_cursorText__Rn7_K { ... }
@keyframes ShareBlockAnimation_textLink__AedDy { ... }
@keyframes ShareBlockAnimation_send__R0mW7 { ... }
```

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

```css
@keyframes EnterpriseAnimation_glow__VCgqx{0%,80%{filter:hue-rotate(0deg) brightness(1)}40%{filter:hue-rotate(1turn) brightness(1.75)}}}
@keyframes RecordScreenSchedule_remove__eF4du{0%{opacity:1}
@keyframes ChatUnfurlAnimation_moveUp3__ltAgB{75%{opacity:0;transform:translateY(1rem)}80%,90%{opacity:1;transform:translateY(0)}95%{opacity:0;transform:translateY(-1rem)}}
@keyframes ChatUnfurlAnimation_moveUp__KUoh9{10%,60%{opacity:1;transform:translateY(0)}70%,to{opacity:0;transform:translateY(-4rem)}}
@keyframes ChatUnfurlAnimation_moveUp2__I7mmp{10%{opacity:0;transform:translateY(4rem)}20%,60%{opacity:1;transform:translateY(0)}70%,to{opacity:0;transform:translateY(-4rem)}}
@keyframes ChatUnfurlAnimation_expand___LYr7{20%{height:36%}25%,90%{height:107%}}
@keyframes ChatUnfurlAnimation_unfurl__AmPML{0%,25%,to{opacity:0}28%,90%{opacity:1}}
@keyframes ChatUnfurlAnimation_play__bHqlx{0%,25%,40%{opacity:0}28%,38%{opacity:1}}
@keyframes ChatUnfurlAnimation_click__OvyUw{0%,28%,to{opacity:0;transform:translate(2.5rem,2.5rem)}33%,38%{opacity:1;transform:translate(0)}40%,90%{opacity:0;transform:translate(0)}}
@keyframes ChatUnfurlAnimation_remove__YKMot{0%,28%,40%{opacity:1}0%,25%,41%,to{opacity:0}}}
@keyframes CommentsConversationAnimation_fill__6JMyH{0%,10%{transform:scaleX(0)}80%{transform:scaleX(1)}}
@keyframes CommentsConversationAnimation_emoji1__TWE3Q{0%,17%,41%{opacity:0;transform:translateY(.625rem)}19%,39%{opacity:1;transform:translateY(0)}}
@keyframes CommentsConversationAnimation_comment1__qSRR3{0%,33%,57%{opacity:0;transform:translateY(.625rem)}35%,55%{opacity:1;transform:translateY(0)}}
@keyframes CommentsConversationAnimation_comment2__rFbbF{0%,63%,87%{opacity:0;transform:translateY(.625rem)}65%,85%{opacity:1;transform:translateY(0)}}}
@keyframes SanityMarkdown_spin__2GSOd{to{transform:rotate(1turn)}}
@keyframes StandardHeroAccent_button__UB7R5{90%{background-color:var(--lns-color-orange);transform:translateY(0)}93%{background-color:#dc684d}95%{transform:translateY(.375rem)}97%{background-color:#dc684d}
@keyframes StandardHeroAccent_cursor__d4akH{50%{transform:translate(12.5rem,12.5rem)}80%{transform:translate(5.5rem,.8125rem)}90%{transform:translate(5.3125rem,.625rem) scale(2)}95%{transform:translate(5.3125rem,.625rem) scale(1.5)}
@keyframes StandardHeroAccent_desktop__l8Ggr{80%{transform:translateY(-100%)}
@keyframes StandardHeroAccent_opacity__FqEXT{90%{opacity:0}
@keyframes StandardHeroAccent_window__1sDEW{80%{transform:translateX(100vw)}
@keyframes Hero_radialShift__k0fg2{0%{background-position:100% 100%;background-size:100%}33%{background-position:50% 50%;background-size:300%}69%{background-position:0 0;background-size:200%}
@keyframes pulse{0%,to{opacity:1}50%{opacity:.2}}}
@keyframes uppy-StatusBar-ProgressStripes{0%{background-position:0 0}
@keyframes uppy-StatusBar-spinnerAnimation{0%{transform:rotate(0deg)}
@keyframes uppy-Dashboard-fadeIn{0%{opacity:0}
@keyframes uppy-Dashboard-fadeOut{0%{opacity:1}
@keyframes uppy-Dashboard-slideDownAndFadeIn{0%{opacity:0;transform:translate3d(-50%,-70%,0)}
@keyframes uppy-Dashboard-slideDownAndFadeIn--small{0%{opacity:0;transform:translate3d(0,-20%,0)}
@keyframes uppy-Dashboard-slideUpFadeOut{0%{opacity:1;transform:translate3d(-50%,-50%,0)}
@keyframes uppy-Dashboard-slideUpFadeOut--small{0%{opacity:1;transform:translateZ(0)}
@keyframes k1v8un7d{0%{transform:rotate(50deg);stroke-dashoffset:60}
@keyframes kztt5h0{to{transform:rotate(1turn)}}
@keyframes k11647nu{0%{opacity:1;transform:translateZ(0)}
@keyframes k12cqms0{0%{opacity:1;transform:translateZ(0)}
@keyframes k1bbsfcj{0%{opacity:1;transform:none}
@keyframes k1dj5hf1{0%{opacity:1;transform:translateZ(0)}
@keyframes k1fo8igf{0%{opacity:0;transform:translate3d(0,-4px,0)}50%{opacity:1}
@keyframes k1gp9ioh{0%{opacity:0;transform:translate3d(calc(5% + 4px),0,0)}50%{opacity:1}
@keyframes k1h8oue3{0%{opacity:0;transform:translate3d(0,4px,0)}50%{opacity:1}
@keyframes k1j8u6o8{0%{opacity:0;transform:translate3d(0,-100%,0)}
@keyframes k1na2ju7{0%{opacity:0;transform:translate3d(-100%,0,0)}
@keyframes k1rq2oqw{0%{opacity:0;transform:scale(.5)}50%{opacity:1}75%{transform:scale(1.25)}
@keyframes k1sspn6e{0%{opacity:1;transform:translateZ(0)}
@keyframes k1tay9q1{to{opacity:0;transform:scale(.75)}}
@keyframes k1vint76{0%{opacity:0;transform:translate3d(4px,0,0)}50%{opacity:1}
@keyframes k1vmhg30{0%{opacity:1;transform:none}
@keyframes k1wh49cw{0%{opacity:1;transform:none}
@keyframes k1y4xa46{0%{opacity:0;transform:translate3d(calc(-5% - 4px),0,0)}50%{opacity:1}
@keyframes k1ydy56c{0%{opacity:1;transform:none}
@keyframes k1ylodgn{0%{opacity:1;transform:translateZ(0)}
@keyframes k73gfcn{0%{opacity:1;transform:translateZ(0)}
@keyframes k7ccisj{0%{opacity:1;transform:translate3d}
@keyframes k8nf8el{0%{opacity:0;transform:translate3d(100%,0,0)}
@keyframes k9i97cc{0%{opacity:0;transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}
@keyframes kbjizr2{0%{opacity:1}
@keyframes kecjqy3{0%{opacity:0;transform:translate3d(0,calc(-5% - 4px),0)}50%{opacity:1}
@keyframes kij747q{0%{opacity:0}50%{opacity:1}
@keyframes km3530i{0%{opacity:0;transform:translate3d(-4px,0,0)}50%{opacity:1}
@keyframes kqit24e{0%{opacity:0;transform:translate3d(0,100%,0)}
@keyframes kwlxyjp{0%{opacity:1;transform:translateZ(0)}
@keyframes kyep8rx{0%{box-shadow:var(--_1jzibln)}33%{box-shadow:var(--_1jzibln)}66%{box-shadow:var(--_1v4eexu)}
@keyframes ftux-wrapper_fadeIn_VIZ{to{opacity:1}}
@keyframes video-description_dash_jfe{to{transform:rotate(1turn)}}
@keyframes video-description_fade-in_ioX{to{opacity:1}}
@keyframes right-panel_generating-highlights-tab-glow_ppY{0%{background-position:150% 0}
@keyframes video-highlights_loading-message-glow_Jnc{0%{background-position:150% 0}
@keyframes video-highlights_stream-message-logo-glow_HaU{0%,35%,65%,to{filter:none;opacity:.65}50%{filter:drop-shadow(0 0 4px rgba(223,223,223,.9));opacity:1}}
@keyframes edit-item_angleRotation_nB2{to{transform:rotate(1turn)}}
@keyframes chapters_dash_yLW{to{tran
```
</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: radial-gradient(98.47% 309.53% at 1.53% 0,#ffe9c1 0,#ffe76b 9.9%,#ffe4c3 21.7%,#ffcfca 35.11%,#89cdff 68.23%,#c8c6f9 100%);

/* Gradient 2 */
background: conic-gradient(from 180deg at 50% 50%,var(--thd-color-blue-70,#1868db);

/* Gradient 3 */
background: linear-gradient(45deg,#0000004d 25%,#0000 0,#0000 50%,#0000004d 0,#0000004d 75%,#0000 0,#0000);

/* Gradient 4 */
background: linear-gradient(to right,#0000,var(--lns-color-backgroundSecondary);

```

### Hover State CSS (Intercepted)

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

```css
.RecordScreenAnimation_controlsButton__tRpOw:hover{background-color:var(--lns-themeLight-color-backgroundHover)}

.UseCaseFeatureBlock_link__dGwL4:hover{text-decoration-thickness:.125rem}

.SanityPortableText_portableText__mUFJ4 a:hover{text-decoration-line:none}

.SanityPortableText_portableText__mUFJ4 a:hover{color:currentColor}
```

> **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 1366 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:
`360px` · `375px` · `400px` · `425px` · `426px` · `476px` · `480px` · `530px` · `550px` · `560px` · `593px` · `600px` · `640px` · `767px` … (+18 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×694 · `15.6154px`×164 · `12.6154px`×104 · `14px`×94 · `25.2692px`×78 · `18px`×78 · `18.6231px`×42 · `15.75px`×36

**Radius scale** (× = paint count): `9999px`×80 · `68.9231px`×20 · `41.6923px`×17 · `12px`×5 · `9px`×5 · `2px`×4 · `16px`×3 · `8px`×3

**Weights** (× = paint count): `400`×991 · `700`×213 · `653`×99 · `500`×61

**Layout gaps** (× = paint count): `15.6154px`×22 · `normal 16px`×19 · `16px`×11 · `4.5px`×8 · `111.04px`×6 · `70.72px`×6 · `32px normal`×4 · `normal 32px`×4

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.06) 0px 5px 18px 0px, rgba(0, 0, 0, 0.1) 0px 24px 83px 0px
rgba(0, 0, 0, 0.03) 0px 4px 6.4px 0px, rgba(0, 0, 0, 0.05) 0px 3px 9.6px 0px, rgba(0, 0, 0, 0.07) 0px 8px 32px 0px, rgba(0, 0, 0, 0.1) 0px 32px 96px 0px
rgba(0, 0, 0, 0.05) 0px 4.5px 11.25px 0px
rgba(0, 0, 0, 0.5) 0px -81px 27px -54px inset, rgba(0, 0, 0, 0.5) 0px -162px 54px -108px inset, rgba(0, 0, 0, 0.5) 0px -243px 81px -162px inset
```

### 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 { font-family:Charlie Text,sans-serif }
body { color:var(--lns-color-grey8) }
header { background-color:var(--thd-color-white) }
h1 { color:var(--thd-color-black) }
h1 { font-family:Charlie Display,sans-serif }
h1 { font-size:3.3125rem }
h2 { color:var(--thd-color-black) }
h2 { font-size:2.875rem }
h2 { font-family:Charlie Display,sans-serif }
button { font-family:inherit; font-size:100%; font-weight:inherit; color:inherit }
button { border-radius:624.9375rem }
a { border-radius:0 0 1.5rem 1.5rem; background-color:var(--thd-color-violet-10); font-size:.9375rem; color:var(--thd-color-grey-60) }
```

> 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://loom.com | 2026-06-11T06:12:05.528Z*
*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.*