figma.com

DESIGN.md

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

---
version: alpha
name: figma.com
description: "Light product system built on #ffffff with #24cb71 as the primary CTA accent. Type anchored in figmaSans at 56px / weight 400. Extracted automatically from https://figma.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  figma.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(36, 203, 113) as the high-saturation accent for primary actions.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside figmaSans as the primary typeface.
  FigmaSans is paired with figmaSans Fallback for secondary roles.
  A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy.
  Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

colors:
  background: "#ffffff"
  surface-1: "#e6e6e6"
  surface-2: "#f3ffe3"
  primary: "#24cb71"
  on-primary: "#111111"
  primary-hover: "#ff7237"
  semantic-error: "#972121"

typography:
  display-xl:
    fontFamily: "figmaSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -1.44px
  display-lg:
    fontFamily: "figmaSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.84px
  display-md:
    fontFamily: "figmaSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 520
    lineHeight: 1.35
    letterSpacing: -0.24px
  body:
    fontFamily: "figmaSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  button:
    fontFamily: "figmaSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 330
    lineHeight: 1.4
    letterSpacing: -0.14px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 18px
  xl: 50px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 8px
  sm: 28px
  md: 34px
  lg: 46px
  xl: 50px
  xxl: 120px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 8px
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 24px
  tab-pill-tab:
    backgroundColor: "#000000"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 8px 18px 10px

extracted_at: "2026-06-11T05:00:53.582Z"
completeness: 70
scoreVersion: "v2"

---

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

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (figmaSans) | "Prompt, code, and design from " |
| Color assertion | dual-accent | #24cb71 |
| Whitespace | sparse | section rhythm 60px |
| Interaction | animated | 4 keyframes, 20 transitions |
| Radius language | soft-pill | from token scale |

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

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

Typography is anchored in **figmaSans** with OpenType utility features (`"kern"`) for data-dense contexts. Negative letter-spacing at display sizes (-1.44px at 72px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Pure Black (`#000000`) (contrast ratio 21.0:1, well above WCAG AA). **Emerald** (`#24cb71`) 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 (5 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. The site uses a variable font with WDTH + WGHT + MONO + SLNT axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: figmaSans
- Accent: Emerald (`#24cb71`)
- Display: 72px weight 400, letter-spacing -1.44px
- Shadow system: 5 distinct elevation levels
- Custom fonts loaded: figmaSans, figmaSans Fallback, figmaMono, figmaMono Fallback

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Whitesmoke** (`#e6e6e6`): Surface / elevated background
- **Beige** (`#f3ffe3`): Surface / elevated background
- **Whitesmoke** (`#e2e2e2`): Surface / elevated background
- **#e4ff97** (`#e4ff97`): Surface / elevated background

### Text & Content
- **Pure Black** (`#000000`): Primary body text
- **#721c1c** (`#721c1c`): Secondary text

### Accent & Interactive
- **Emerald** (`#24cb71`): Interactive / accent
- **Coral** (`#ff7237`): Interactive / accent
- **Sky Bright** (`#00b6ff`): Interactive / accent
- **Warm Rose** (`#ff3737`): Interactive / accent
- **Violet** (`#874fff`): Interactive / accent
- **Deep Purple** (`#4d49fc`): Interactive / accent
- **#33dfdf** (`#33dfdf`): Interactive / accent

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

- `#b98e01` — #b98e01
- `#c4baff` — Lavender
- `#95b9ac` — Cool Gray
- `#cb9fd2` — Plum
- `#ffc9c1` — Pink
- `#c7f8fb` — #c7f8fb
- `#808080` — Slate Grey
- `#697485` — Slate Gray
- `#972121` — #972121 *(token)*

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--f-lego-block-padding`: `7.5rem`
- `--fig-section-block-padding`: `5rem`
- `--fig-space-8`: `0.5rem`
- `--fig-space-12`: `0.75rem`

**Border Radius Token**
- `--fig-radius-full`: `9999px`
- `--fig-radius-24`: `1.5rem`
- `--fig-radius-28`: `1.75rem`
- `--fig-radius-8`: `0.5rem`

**Other tokens**
- `--fig-theme-btn-primary-bg`: `#000000`
- `--fig-theme-form-input-bg`: `color-mix(in oklch, #000000, transparent 92%)`
- `--global-font-mono`: `"figmaMono","figmaMono Fallback",SF Mono,menlo,monospace`
- `--fig-theme-card-bg`: `color-mix(in oklch, #000000, transparent 96%)`
- `--fig-theme-btn-transparent-bg-hover`: `color-mix(in oklch, #000000, transparent 92%)`
- `--font-figma-mono`: `"figmaMono","figmaMono Fallback",SF Mono,menlo,monospace`
- `--fig-theme-btn-ghost-bg-hover`: `color-mix(in oklch, #000000, transparent 96%)`
- `--fig-theme-form-error-bg`: `#972121`

## 3. Typography Rules

### Font Families
- **Primary**: `figmaSans`
- **Secondary**: `figmaSans Fallback`
- **Font 3**: `figmaMono`
- **Font 4**: `figmaMono Fallback`

### Custom Fonts Loaded
- **figmaSans** weight 320 (normal)
- **figmaSans Fallback** weight normal (normal)
- **figmaMono** weight 400 (normal)
- **figmaMono Fallback** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | figmaSans | 72px | 400 | 1 | -1.44px | Main headline (h1) |
| Section Heading | figmaSans | 56px | 400 | 1.1 | -0.84px | Section titles (h2) |
| Sub-heading | figmaSans | 24px | 520 | 1.35 | -0.24px | Third-level heading (h3) |
| Button Large | figmaSans | 18px | 330 | 1.4 | -0.14px | Button label (18px) |
| Button Large | figmaSans | 18px | 480 | 1.4 | -0.09px | Button label (18px) |
| Card Title | figmaSans | 16px | 400 | 1.45 | normal | Card headings |

### Full Font Size Scale

Sizes detected in the design (descending): `72px`, `56px`, `24px`, `18px`, `16px`, `12px`

> 1 size(s) detected outside the sampled hierarchy (12px). 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

**Active OpenType features:**
- Kerning (kern) — `on`

**Variable font axes:**
- WDTH axis
- WGHT axis
- MONO axis
- SLNT axis

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#000000`
- Padding: 8px
- Radius: 0px
- Font: 18px weight 330
- Use: Subtle action, toolbar, nav button

### Tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#000000`
- Padding: 0px 24px
- Radius: 0px
- Font: 16px weight 400
- Use: Navigation tabs, filter tabs

**Pill Tab**
- Background: `rgba(0, 0, 0, 0.08)`
- Text: `#000000`
- Padding: 8px 18px 10px
- Radius: 50px
- Font: 18px weight 480
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


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

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0.08)"
      fg: "rgb(0, 0, 0)"
  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

### Tabs
- **2 shape(s)** in this system: `Ghost Tab`, `Pill Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

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

### Grid
Single column, centered content

### Max Width
95rem

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 8px |
| sm | 28px |
| md | 34px |
| base | 40px |
| lg | 46px |
| xl | 50px |
| 2xl | 60px |
| 3xl | 120px |

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

### Shape Language

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

**Shape Personality**: Sharp & Angular — No rounding. Precise, editorial, enterprise feel.

**Full Radius Spectrum**: 0px, 2px, 4px, 8px, 16px, 18px, 50px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~120px internal vertical padding (up to 120px) — **very airy / premium**. (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** | `120px` | Top/bottom of full-bleed hero sections |
| **section** | `50px` | Between major bands (color change, content shift) |
| **subsection** | `46px` | Within a section, between content groups |
| **card** | `34px` | Card padding, list-item spacing |
| **compact** | `28px` | 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).

**7/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Make anything possible, all in Figma" — 72px left-aligned
- **Subheading:** "Figma lets you turn big ideas into real products. Brainstorm, design, and build with your team."
- **CTAs:** 1 (primary: "Get started")
- **Clone instruction:** Reproduce the **left-aligned** 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:** 41px
- **Logo:** ✓ present
- **Nav links:** 1 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:** 8 cards detected
- **Columns (desktop):** 3-up grid
- **Card dimensions:** 420×560px (aspect 0.75:1)
- **Gap:** 0px between cards
- **Content:** ✗ no image
- **Clone instruction:** Build a 3-column grid (desktop) with cards at ~0.75:1 aspect ratio. Text/icon-only cards (no photography).

### Pricing Table Pattern

- **Tier count:** 2 pricing tiers
- **Layout:** side-by-side (horizontal comparison)
- **Columns (desktop):** 2-up
- **Feature list:** ✓ (median ~33 feature points per tier)
- **Clone instruction:** Build a 2-column side-by-side pricing comparison.

### Testimonial Pattern

- **Count:** 2 testimonial blocks
- **Layout:** list
- **Avg quote length:** 86 chars (medium quote)
- **Includes:** ✗ no avatars | ✗ no logos | ✗ no ratings
- **Clone instruction:** Build a list of 2 testimonials.   

### CTA Banner Pattern

- **Banner count:** 1
- **Position:** mid-page
- **Visual treatment:** ✓ contrasting background
- **Primary CTA text:** "Explore all templates"
- **Clone instruction:** Place a single CTA banner mid-page. Use contrasting solid background.

### Footer Pattern

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

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.08) 0px 1px 0px 0px` | Cards, elevated surfaces |
| Inset (Level 2) | <br>`rgb(0, 0, 0) 0px 0px 0px 1px inset` | Buttons, pressed-state elements |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.1) 0px 24px 70px 0px` | Cards, elevated surfaces |
| Inset (Level 4) | <br>`rgb(255, 255, 255) 0px 0px 0px 1px inset` | Buttons, pressed-state elements |

**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 |
|-------|---------------|
| `ease` | CSS ease — Default |
| `ease-out` | Ease Out — Decelerating |
| `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 |
| `160ms` | Normal | Panel open/close, navigation |
| `200ms` | Normal | Panel open/close, navigation |
| `250ms` | Normal | Panel open/close, navigation |
| `300ms` | Normal | Panel open/close, navigation |
| `350ms` | Slow | Hero animations, page transitions |
| `400ms` | Slow | Hero animations, page transitions |

### Copy-Paste Transition Snippets

**Background**
```css
transition: background 0.4s cubic-bezier(0.8, 0, 0.2, 1);
```

**Transform**
```css
transition: transform 0.25s;
```

**All Props**
```css
transition: border-radius 0.16s ease-out;
```

**All Props**
```css
transition: translate 0.16s ease-out;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `animation-6j0toc` | Custom | border-left-color | UI transition |
| `animation-jpvf7s` | Custom | stroke-dashoffset | UI transition |
| `animation-zsk7zs` | Slide | transform | UI transition |
| `animation-yh21v4` | Custom | rotate | UI transition |

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 4 unique animations (4 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 figmaSans as the primary typeface — it defines the brand personality
- Keep font weights between 330-400 — the system uses a narrow weight range for subtle hierarchy
- Use negative letter-spacing (-1.44px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Emerald (`#24cb71`) as the primary accent — it's the brand's signature interactive color
- Maintain nav height at 41.1875px — consistent vertical space for the navigation bar
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- 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
- Place 2 pricing tiers side-by-side on desktop — direct comparison is the value prop

### Don't
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 400 is the maximum weight in this system
- 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 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(36, 203, 113)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(36, 203, 113)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 358px | Single column, compact spacing |
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 720px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Tablet | 1000px | 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 | `72px` | `44px` |
| heading | line-height | `72px` | `48.4px` |
| heading | letter-spacing | `-1.44px` | `-0.44px` |
| nav | height | `41.1875px` | `auto` |
| button | width | `111.891px` | `auto` |
| card | width | `420px` | `318px` |

### Collapsing Strategy
- Headlines: 72px → 44px 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 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.


## 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.
- **Animated SVG** — path/line-draw animations.
- **Mesh gradients** — 2 multi-stop organic color field(s) as background atmosphere.
- **Clip-path shapes** — 8 non-rectangular cut(s).

> **Motion fingerprint**: Canvas 2D, SVG animations, mesh gradients, non-rectangular shapes (10)

## 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/599r6htc/regionalized/342e17642c7afa81206490b0dd21c3e5724ae040-2400x1260.png?w=1200&q=70&fit=max&auto=format (1200×630px)
  *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): 22 (100%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 0 (0%)

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

**Average rendered image size:** 343×232px
**Above-fold image count:** 0 / 22

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

**Clone instruction for decorative work:** Decorative details are subtle — don't over-style; the design relies on restraint.

**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: Pure Black (`#000000`)
- Accent: Emerald (`#24cb71`)
- Border: Translucent Pure Black (8%) (`rgba(0, 0, 0, 0.08)`)
- Font: figmaSans
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 72px figmaSans weight 400, line-height 1, letter-spacing -1.44px, color #000000."
- "Create the primary CTA button: `#24cb71` background, `#000000` text, 9999px border-radius, 8px padding, 330 weight, figmaSans font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: static on `#ffffff`. figmaSans 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 figmaSans, weight range 330–400. Never exceed 400 — heavier weights break the brand's tonal restraint.
3. **Accent**: Emerald (`#24cb71`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0.8,0,0.2,1)`. 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 (8px–50px). 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-background: #ffffff;
  --ca-surface-1: #e6e6e6;
  --ca-surface-2: #f3ffe3;
  --ca-primary: #24cb71;
  --ca-on-primary: #111111;
  --ca-primary-hover: #ff7237;
  --ca-semantic-error: #972121;
}

/* Typography */
:root {
  --ca-font-primary: "figmaSans", system-ui, sans-serif;
  --ca-text-display: 72px;
  --ca-text-heading: 56px;
  --ca-text-body: 16px;
  --ca-text-button: 18px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 8px;
  --ca-space-sm: 28px;
  --ca-space-md: 34px;
  --ca-space-base: 40px;
  --ca-space-lg: 46px;
  --ca-space-xl: 50px;
  --ca-space-2xl: 60px;
  --ca-space-3xl: 120px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 16px;
  --ca-radius-lg: 18px;
  --ca-radius-xl: 50px;
  --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: 9460px
    width: full-bleed
    layout: block
    children: 6
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~120px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: logo-strip
    tag: div
    height: 81px
    width: full-bleed
    layout: block
    children: 1
  - section: header
    tag: header
    height: 81px
    width: full-bleed
    layout: flex-row justify=normal
    children: 1
    bg: "rgb(255, 255, 255)"
  - section: feature-section
    tag: section
    height: 661px
    width: full-bleed
    layout: block
    children: 3
  - section: feature-section
    tag: main
    height: 8102px
    width: full-bleed
    layout: block
    children: 10
    vertical-padding: ~120px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: logo-strip
    tag: section
    height: 128px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~40px
    padding: "40px 0px"
  - section: feature-section
    tag: section
    height: 975px
    width: full-bleed
    layout: block
    children: 1
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: section
    tag: section
    height: 569px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~120px (airy)
    padding: "120px 0px"
  - section: feature-section
    tag: section
    height: 1774px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(243, 255, 227)"
    vertical-padding: ~120px (airy)
  - section: card-grid
    tag: section
    height: 1347px
    width: 1320px
    layout: grid: 2-col gap=64px 60px
    children: 3
  - section: feature-section
    tag: section
    height: 822px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(226, 226, 226)"
    vertical-padding: ~60px (generous)
    padding: "120px 0px 0px"
  - section: section
    tag: section
    height: 507px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~120px (airy)
    padding: "120px 0px"
  - section: feature-section
    tag: section
    height: 1019px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~120px (airy)
    padding: "120px 0px"
  - section: section
    tag: section
    height: 600px
    width: full-bleed
    layout: flex-row justify=center
    children: 2
  - section: feature-section
    tag: section
    height: 847px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(0, 0, 0)"
    vertical-padding: ~120px (airy)
    padding: "120px 0px"
  - section: footer
    tag: footer
    height: 1237px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(0, 0, 0)"
    vertical-padding: ~120px (airy)
    padding: "120px 0px"
```

**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:
    - "Prompt, code, and design from first idea to final product"
    - "Bring everyone together with systems that scale"
    - "Explore what people are making"
    - "Start with a template. Make just about anything."
    - "PRODUCT"
  sub-headings:
    - "Share libraries and design systems across teams."
    - "Turn Figma context into code"
    - "Publish custom websites—with or without code"
    - "Virtual Teleportation Portal App"
    - "Websites"
    - "Portfolio templates"
  ctas:
    - "Products"
    - "Contact sales"
    - "Get started for free"
    - "Get started"
  navigation:
    - "Contact sales"
    - "Get started for free"
    - "Pricing"
    - "Log in"
  footer-links:
    - "Figma Design"
```

**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: 32
    avg-ratio: 3.47
    common-aspect: "~16:6 banner"
    sample-alts:
      - "AirBnb"
      - "Duolingo"
      - "GitHub"
```

**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">
  Products
</button>
```
_Source pattern detected: padding `8px` · radius `0px` · weight `330`_

### 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** 2 · **cta** 3 · **auth** 1 · **pricing** 1 · **project** 4 · **social** 11 · **footer** 15 · **other** 23

**Primary actions (conversion path):**
- Primary call-to-action — "Get started for free" (the conversion path) → `https://www.figma.com/signup`
- Primary call-to-action — "Get started for free" (the conversion path) → `https://www.figma.com/signup?locale=en-us`
- Account access — "Log in" (login/signup) → `https://www.figma.com/login`
- Primary call-to-action — "Get started" (the conversion path) → `https://www.figma.com/signup`

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

*Community* — medium confidence, 10 items:

| Title | Featured image | Link |
|---|---|---|
| Websites | `iBzCFj2D8AAAAASUVORK5CYII=` (ar 1.33) | https://www.figma.com/community/website-templates?editor_type=sites |
| Social media | `AC6qZUOqEud8AAAAAElFTkSuQmCC` (ar 1.33) | https://www.figma.com/community/social-media-templates?editor_type=buzz |
| Mobile apps | `zlpbKHAAAAAAElFTkSuQmCC` (ar 1.33) | https://www.figma.com/community/mobile-apps |
| Presentations | `K7wQAAAABJRU5ErkJggg==` (ar 1.33) | https://www.figma.com/community/presentations?editor_type=slides |
| Invitations | `P9md2iO2lHgAAAAASUVORK5CYII=` (ar 1.33) | https://www.figma.com/community/invitation-templates?editor_type=buzz |
| Illustrations | `pKWl5YX29vbXZTLZR1z1uOj09vbe6O7uLhWL` (ar 1.33) | https://www.figma.com/community/illustrations |
| Portfolio templates | `L3NZ8Imjufipo9SqhX98qaLRfCB232oQmlVJ` (ar 1.33) | https://www.figma.com/community/portfolio-templates |
| Plugins | `l4rO84VbWnkAAAAASUVORK5CYII=` (ar 1.33) | https://www.figma.com/community/plugins |

**Signals:** 41/60 links carry a featured image · device mockups detected: laptop ×18, phone ×3 · dominant link roles: content-card (34), footer-link (19), inline-link (3).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 19 | 25 | 14 named colors |
| Typography | 15 | 20 | 6 roles defined |
| Components | 8 | 20 | 2 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 5 | 10 | 104 vars |
| Responsive Breakpoints | 5 | 5 | 8 breakpoints |
| Variable Fonts | 5 | 5 | WDTH, WGHT, MONO, SLNT axes |

## 12. Known Gaps & Confidence

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

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

- **Licensed web fonts (figmaSans, figmaMono)** — 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 |
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

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

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

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'figmaSans';
  /* src: url('/fonts/figmaSans.woff2') format('woff2'); */
  font-weight: 320;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'figmaSans Fallback';
  /* src: url('/fonts/figmaSans-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'figmaMono';
  /* src: url('/fonts/figmaMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'figmaMono Fallback';
  /* src: url('/fonts/figmaMono-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes buffer { ... }
@keyframes throb { ... }
@keyframes wiggle { ... }
@keyframes pulse { ... }
@keyframes dash { ... }
@keyframes rotate { ... }
@keyframes scaleAnimation { ... }
@keyframes LikeButton_module_heartbeat__3908feee { ... }
@keyframes ShareButton_module_takeoff__26260904 { ... }
@keyframes WatchLaterButton_module_pop__238c6c3b { ... }
@keyframes TinyProgressBar_module_buffer__c04d36b1 { ... }
@keyframes ShareSheet_module_backdropFadeIn__5ab8a323 { ... }
@keyframes ShareSheet_module_backdropFadeOut__5ab8a323 { ... }
@keyframes ShareSheet_module_modalSlideIn__5ab8a323 { ... }
@keyframes ShareSheet_module_modalSlideOut__5ab8a323 { ... }
@keyframes AiCreditsEnrollmentModal_module_backdropFadeIn__6d3d95f8 { ... }
@keyframes AiCreditsEnrollmentModal_module_backdropFadeOut__6d3d95f8 { ... }
@keyframes AiCreditsEnrollmentModal_module_modalSlideIn__6d3d95f8 { ... }
@keyframes AiCreditsEnrollmentModal_module_modalSlideOut__6d3d95f8 { ... }
@keyframes OutroContentWrapper_module_fadeIn__06afa88b { ... }
@keyframes LinkOutro_module_slideDown__0f1c39e6 { ... }
@keyframes Spinner_module_buffer__795e5e53 { ... }
@keyframes Spinner_module_throb__795e5e53 { ... }
@keyframes Spinner_module_wiggle__795e5e53 { ... }
@keyframes Spinner_module_pulse__795e5e53 { ... }
@keyframes Spinner_module_dash__795e5e53 { ... }
@keyframes Spinner_module_rotate__795e5e53 { ... }
@keyframes Spinner_module_scaleAnimation__795e5e53 { ... }
@keyframes AnimatedClock_module_hourHand__8976d762 { ... }
@keyframes AnimatedClock_module_minuteHand__8976d762 { ... }
```

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

```css
@keyframes buffer{100%{transform:translateX(-10px)}}
@keyframes throb{0%,100%{background-color:#555}50%{background-color:#444}}
@keyframes wiggle{0%{transform:translateY(10px)}20%{transform:translateY(0)}40%,80%{transform:translateX(8px)}60%{transform:translateX(-8px)}100%{transform:translateX(0)}}
@keyframes pulse{50%{transform:scale(.9)}}
@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-135px}}
@keyframes rotate{100%{transform:rotate(360deg)}}
@keyframes scaleAnimation{0%{transform:scale(.9,.9)}100%{transform:scale(1,1)}}
@keyframes LikeButton_module_heartbeat__3908feee{0%{transform:scale(1)}10%{transform:scale(1)}20%{transform:scale(1.3)}30%{transform:scale(1.1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes ShareButton_module_takeoff__26260904{0%{transform:translate(0,0)}20%{transform:translate(-3px,3px)}40%{transform:translate(2px,-2px)}60%{transform:translate(-1px,1px)}80%{transform:translate(.5px,-.5px)}100%{transform:translate(0,0)}}
@keyframes WatchLaterButton_module_pop__238c6c3b{0%{transform:scale(1)}10%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes TinyProgressBar_module_buffer__c04d36b1{100%{transform:translateX(-10px)}}
@keyframes ShareSheet_module_backdropFadeIn__5ab8a323{from{opacity:0}
@keyframes ShareSheet_module_backdropFadeOut__5ab8a323{from{opacity:1}
@keyframes ShareSheet_module_modalSlideIn__5ab8a323{from{opacity:0;transform:translateY(12px) scale(.97)}
@keyframes ShareSheet_module_modalSlideOut__5ab8a323{from{opacity:1;transform:translateY(0) scale(1)}
@keyframes AiCreditsEnrollmentModal_module_backdropFadeIn__6d3d95f8{from{opacity:0}
@keyframes AiCreditsEnrollmentModal_module_backdropFadeOut__6d3d95f8{from{opacity:1}
@keyframes AiCreditsEnrollmentModal_module_modalSlideIn__6d3d95f8{from{opacity:0;transform:translateY(12px) scale(.97)}
@keyframes AiCreditsEnrollmentModal_module_modalSlideOut__6d3d95f8{from{opacity:1;transform:translateY(0) scale(1)}
@keyframes OutroContentWrapper_module_fadeIn__06afa88b{0%{opacity:0}100%{opacity:1}}
@keyframes LinkOutro_module_slideDown__0f1c39e6{to{transform:translate(0,0);opacity:1}}
@keyframes Spinner_module_buffer__795e5e53{100%{transform:translateX(-10px)}}
@keyframes Spinner_module_throb__795e5e53{0%,100%{background-color:#555}50%{background-color:#444}}
@keyframes Spinner_module_wiggle__795e5e53{0%{transform:translateY(10px)}20%{transform:translateY(0)}40%,80%{transform:translateX(8px)}60%{transform:translateX(-8px)}100%{transform:translateX(0)}}
@keyframes Spinner_module_pulse__795e5e53{50%{transform:scale(.9)}}
@keyframes Spinner_module_dash__795e5e53{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-135px}}
@keyframes Spinner_module_rotate__795e5e53{100%{transform:rotate(360deg)}}
@keyframes Spinner_module_scaleAnimation__795e5e53{0%{transform:scale(.9,.9)}100%{transform:scale(1,1)}}
@keyframes AnimatedClock_module_hourHand__8976d762{to{rotate:calc(45deg * var(--clock-rotate-direction))}}
@keyframes AnimatedClock_module_minuteHand__8976d762{to{rotate:calc(360deg * var(--clock-rotate-direction))}}
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);

/* Gradient 2 */
background: radial-gradient(#82ffeb 0,#17d5ff 30%,#0ba1ff 45%,#9e00ff 75%,rgba(157,0,255,0);

/* Gradient 3 */
background: linear-gradient(to right,transparent 0%,#000 16px,#000 calc(100% - 16px);

```

### Hover State CSS (Intercepted)

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

```css
.SideDock_module_root__5460dbdc button:hover:not(:active){background-color:var(--color-two);color:var(--color-two-monochrome);border:none}

.SideDock_module_root__5460dbdc button:hover:not(:active) path{fill:var(--color-two-monochrome)}

.SideDock_module_root__5460dbdc.SideDock_module_outroVisible__5460dbdc button:not(:hover){opacity:.65}

button.LikeButton_module_likeButton__3908feee.LikeButton_module_animating__3908feee:hover{background-color:var(--color-one-opacity-ninety);color:var(--color-three)}

button.LikeButton_module_likeButton__3908feee:hover:not(.LikeButton_module_animating__3908feee) .LikeButton_module_likeIcon__3908feee{animation:LikeButton_module_heartbeat__3908feee 1s 1 ease-out}

button.LikeButton_module_likeButton__3908feee:hover:not(.LikeButton_module_animating__3908feee) .LikeButton_module_likeIcon__3908feee path{stroke:var(--color-two-monochrome);fill:transparent}

button.LikeButton_module_likeButton__3908feee:hover:not(.LikeButton_module_animating__3908feee) .LikeButton_module_likeIcon__3908feee.LikeButton_module_liked__3908feee path,button.LikeButton_module_likeButton__3908feee:hover:not(.LikeButton_module_animating__3908feee) .LikeButton_module_likeIcon__3908feee.LikeButton_module_liked__3908feee.LikeButton_module_redHeart__3908feee path{fill:var(--color-two-monochrome);stroke:var(--color-two-monochrome)}

@media (prefers-reduced-motion:reduce){button.LikeButton_module_likeButton__3908feee:hover:not(.LikeButton_module_animating__3908feee) .LikeButton_module_likeIcon__3908feee{animation:none}

.ShareButton_module_shareButton__26260904:hover .ShareButton_module_shareIcon__26260904{display:inline-block;animation:ShareButton_module_takeoff__26260904 750ms 1;animation-timing-function:ease-in-out;transform-origin:center}

@media (prefers-reduced-motion:reduce){.ShareButton_module_shareButton__26260904:hover .ShareButton_module_shareIcon__26260904{animation:none}

button.WatchLaterButton_module_watchLaterButton__238c6c3b.WatchLaterButton_module_animating__238c6c3b:hover{background-color:var(--color-one-opacity-ninety);color:var(--color-three)}

button.WatchLaterButton_module_watchLaterButton__238c6c3b:hover:not(.WatchLaterButton_module_animating__238c6c3b) .WatchLaterButton_module_watchLaterIcon__238c6c3b{display:inline-block;animation:.25s ease-in-out .1s 1;transform-origin:center;animation-name:WatchLaterButton_module_pop__238c6c3b}

@media (prefers-reduced-motion:reduce){button.WatchLaterButton_module_watchLaterButton__238c6c3b:hover:not(.WatchLaterButton_module_animating__238c6c3b) .WatchLaterButton_module_watchLaterIcon__238c6c3b{animation:none}

button.WatchLaterButton_module_watchLaterButton__238c6c3b:hover:not(.WatchLaterButton_module_animating__238c6c3b) circle[data-animated-clock-circle]{stroke:var(--color-two-monochrome)}

button.WatchLaterButton_module_watchLaterButton__238c6c3b:hover:not(.WatchLaterButton_module_animating__238c6c3b) path[data-animated-clock-hand]{stroke:var(--color-two-monochrome)}

button.WatchLaterButton_module_watchLaterButton__238c6c3b:hover:not(.WatchLaterButton_module_animating__238c6c3b).WatchLaterButton_module_filled__238c6c3b circle[data-animated-clock-circle]{fill:var(--color-two-monochrome)}

button.WatchLaterButton_module_watchLaterButton__238c6c3b:hover:not(.WatchLaterButton_module_animating__238c6c3b).WatchLaterButton_module_filled__238c6c3b path[data-animated-clock-hand]{stroke:var(--color-two)}

.DebugPanel_module_debugButton__ce9664e0:hover:not(:active){border:none}

.DebugValues_module_clipId__54d9bb7b:hover{text-decoration:underline}

.BandwidthSeriesDisplay_module_marker__e795ff85:hover{cursor:pointer;stroke-width:3}
```

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

### Real Responsive Breakpoints
**36 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`250px` · `299px` · `300px` · `303px` · `322px` · `330px` · `350px` · `358px` · `360px` · `375px` · `400px` · `414px` · `430px` · `480px` … (+22 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `18px`×553 · `16px`×513 · `10px`×117 · `24px`×45 · `56px`×14 · `72px`×12 · `12px`×6

**Radius scale** (× = paint count): `50%`×46 · `50px`×16 · `8px`×6 · `2px`×6 · `4px`×3 · `16px`×2 · `18px`×1

**Weights** (× = paint count): `400`×542 · `330`×538 · `320`×140 · `520`×32 · `480`×26 · `340`×24 · `450`×16 · `700`×1

**Layout gaps** (× = paint count): `16px`×12 · `6px`×8 · `8px`×5 · `12px`×4 · `60px`×4 · `120px`×3 · `32px`×3 · `64px 60px`×1

**Elevation (real shadows)**:
```css
rgb(0, 0, 0) 0px 0px 0px 1px inset
rgba(0, 0, 0, 0.08) 0px 1px 0px 0px
rgba(0, 0, 0, 0.1) 0px 24px 70px 0px
rgb(255, 255, 255) 0px 0px 0px 1px 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
header { background:var(--f-bg-color, #FFFFFF); color:var(--f-text-color, #000000); transition:background 0.4s cubic-bezier(.8,0,.2,1) }
h1 { font-size:2em }
h1 { font-family:var(--global-font-sans, 'figmaSans', 'figmaSans Fallback', SF Pro Display, system-ui, helvetica, sans-serif); font-size:2.75rem; font-weight:400; color:var(--f-text-color, #000000) }
@media (min-width: 960px) h1 { font-size:4rem; font-weight:400 }
@media (min-width: 1440px) h1 { font-size:4.5rem; font-weight:400 }
h2 { font-family:var(--global-font-mono, 'figmaMono', 'figmaMono Fallback', SF Mono, menlo, monospace); font-weight:400; font-size:1rem; color:var(--f-text-color, #000000) }
button { font-family:inherit; font-size:100% }
button { transition:translate 160ms ease-out }
```

> 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://figma.com | 2026-06-11T05:00:53.608Z*
*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.*