nvidia.com

DESIGN.md

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

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

colors:
  background: "#ffffff"
  surface-1: "#eeeeee"
  surface-2: "#efefef"
  ink-subtle: "#1a1a1a"
  primary: "#76b900"
  on-primary: "#111111"
  primary-hover: "#6aa700"
  hairline: "#666666"

typography:
  display-xl:
    fontFamily: "NVIDIA-EMEA, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0
  display-md:
    fontFamily: "NVIDIA-EMEA, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0
  body:
    fontFamily: "NVIDIA-EMEA, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0
  caption:
    fontFamily: "Font Awesome 6 Brands, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  caption-sm:
    fontFamily: "NVIDIA-EMEA, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0

rounded:
  none: 0px
  xs: 2px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 32px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 64px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#222222"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 5px 0px 5px 15px
  card-standard-card:
    backgroundColor: "transparent"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 20px
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 10px

extracted_at: "2026-06-11T05:01:53.559Z"
completeness: 68
scoreVersion: "v2"

---

# Design System — nvidia.com
> Extracted automatically by Prism from https://nvidia.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**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (NVIDIA-EMEA) | "Sélectionnez vos centres d’int" |
| Color assertion | dual-accent | #76b900 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 23 keyframes, 8 transitions |
| Radius language | 8px-rounded | from token scale |

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

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

## 1. Visual Theme & Atmosphere

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

Typography is anchored in **NVIDIA-EMEA**. 

Body text reads in Black (`#000000`) (contrast ratio 21.0:1, well above WCAG AA). **Brand Green** (`#76b900`) 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 (4 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Sharp, zero-radius corners throughout reinforce a structured, grid-based aesthetic. Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: White (`#ffffff`)
- Primary typeface: NVIDIA-NALA
- Accent: Brand Green (`#76b900`)
- Shadow system: 4 distinct elevation levels
- Custom fonts loaded: NVIDIA-NALA, NVIDIA-EMEA, NVIDIA-RU, NVIDIA-APAC, NVIDIA-CN, NVIDIA, Heebo, Source-Han-Sans-SC, Source-Han-Sans-TC, Source-Han-Sans-KR, Source-Han-Sans-JP, hushly

## 2. Color Palette & Roles

### Background & Surface
- **White** (`#ffffff`): Page background (primary)
- **Off-White** (`#eeeeee`): Surface / elevated background
- **Off-White** (`#efefef`): Surface / elevated background
- **Off-White** (`#f7f7f7`): Surface / elevated background

### Text & Content
- **Black** (`#000000`): Primary body text
- **Near-Black** (`#1a1a1a`): Secondary text
- **Charcoal** (`#333333`): Secondary text
- **Near-Black** (`#222222`): Secondary text

### Accent & Interactive
- **Brand Green** (`#76b900`): Accent / interactive (CSS var)
- **#6aa700** (`#6aa700`): Interactive / accent
- **#74b71b** (`#74b71b`): Interactive / accent

### Border & Divider
- **Light Grey** (`#cccccc`): Borders / dividers

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

- `#666666` — Slate Grey
- `#5e5e5e` — Slate Grey
- `#999999` — Grey
- `#a7a7a7` — Grey
- `#8c1c55` — #8c1c55 *(token)*
- `#0046a4` — Cobalt Blue *(token)*
- `#4d1368` — #4d1368 *(token)*
- `#bff230` — #bff230 *(token)*
- `#df6500` — Bright Orange *(token)*
- `#757575` — Slate Grey *(token)*
- `#3f8500` — #3f8500 *(token)*
- `#f9d4ff` — Soft Pink *(token)*
- `#feeeb2` — Vibrant Yellow *(token)*
- `#898989` — Slate Grey *(token)*
- `#ef9100` — #ef9100 *(token)*
- `#5d1337` — #5d1337 *(token)*
- `#e0e0e0` — Whitesmoke *(token)*
- `#650b0b` — #650b0b *(token)*
- `#e52020` — M Tricolor Red *(token)*
- `#952fc6` — #952fc6 *(token)*
- `#d2308e` — #d2308e *(token)*
- `#002781` — #002781 *(token)*
- `#fcde7b` — #fcde7b *(token)*
- `#cbf5ff` — #cbf5ff *(token)*
- `#adfcf8` — #adfcf8 *(token)*
- `#313131` — Charcoal *(token)*
- `#04554b` — #04554b *(token)*
- `#ff8181` — #ff8181 *(token)*
- `#cfff40` — #cfff40 *(token)*
- `#961515` — #961515 *(token)*
- `#0074df` — M Tricolor Blue *(token)*
- `#161616` — Near-Black *(token)*
- *…+14 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Font Weight Token**
- `--font-weight-mono-regular`: `400`
- `--font-weight-bold`: `700`
- `--font-weight-regular`: `400`
- `--font-weight-light`: `300`

**Font Size Token**
- `--font-size-64`: `64px`
- `--font-size-44`: `44px`
- `--font-size-50`: `50px`
- `--font-size-22`: `22px`

**Success**
- `--color-green-100`: `#bff230`
- `--color-green-500`: `#3f8500`
- `--color-green-050`: `#cfff40`
- `--color-green-300`: `#76b900`

**Motion Token**
- `--card-expand-duration`: `300ms`
- `--card-content-hide-duration`: `300ms`
- `--card-content-reveal-duration`: `300ms`

**Spacing Token**
- `--padding-text`: `32px`
- `--text-maxwidth-open-with-padding`: `calc(410px - 32px + 6px)`
- `--padding-largetile`: `32px`
- `--carousel-fixed-width-spacer`: `calc(50vw - 645px)`

**Warning**
- `--color-yellow-400`: `#df6500`
- `--color-yellow-050`: `#feeeb2`
- `--color-yellow-300`: `#ef9100`
- `--color-yellow-100`: `#fcde7b`

**Shadow Token**
- `--vertical-shadow-width`: ``

**Error / Destructive**
- `--color-red-800`: `#650b0b`
- `--color-red-500`: `#e52020`
- `--color-red-300`: `#ff8181`
- `--color-red-700`: `#961515`

**Primary Brand Color**
- `--color-brand-green`: `#76b900`

**Other tokens**
- `--color-fuchsia-700`: `#8c1c55`
- `--color-blue-700`: `#0046a4`
- `--color-purple-800`: `#4d1368`
- `--fa-font-sharp-light`: `normal 300 1em/1 "Font Awesome 6 Sharp"`
- `--text-maxwidth-3items`: `calc(410px - 32px*2)`
- `--fa-font-brands`: `normal 400 1em/1 "Font Awesome 6 Brands"`
- `--color-gray-300`: `#a7a7a7`
- `--text-maxwidth-2items`: `calc(630px - 32px*2)`

## 3. Typography Rules

### Font Families
- **Primary**: `NVIDIA-EMEA`
- **Secondary**: `NVIDIA-NALA`
- **Font 3**: `NVIDIA-RU`
- **Font 4**: `NVIDIA-APAC`
- **Font 5**: `NVIDIA-CN`

### Custom Fonts Loaded
- **NVIDIA-NALA** weight 100 1000 (normal)
- **NVIDIA-EMEA** weight 100 1000 (normal)
- **NVIDIA-RU** weight 100 1000 (normal)
- **NVIDIA-APAC** weight 100 1000 (normal)
- **NVIDIA-CN** weight 100 1000 (normal)
- **NVIDIA** weight 100 1000 (normal)
- **Heebo** weight 100 1000 (normal)
- **Font Awesome 6 Brands** weight 400 (normal)
- **Font Awesome 6 Brands CN** weight 400 (normal)
- **Font Awesome 6 Duotone** weight 900 (normal)
- **Font Awesome 6 Duotone CN** weight 900 (normal)
- **Font Awesome 6 Pro** weight 300 (normal)
- **Font Awesome 6 Pro CN** weight 300 (normal)
- **Font Awesome 6 Pro** weight 400 (normal)
- **Font Awesome 6 Pro CN** weight 400 (normal)
- **Font Awesome 6 Pro** weight 900 (normal)
- **Font Awesome 6 Pro CN** weight 900 (normal)
- **Font Awesome 6 Pro** weight 100 (normal)
- **Font Awesome 6 Pro CN** weight 100 (normal)
- **Font Awesome 6 Sharp** weight 300 (normal)
- **Font Awesome 6 Sharp CN** weight 300 (normal)
- **Font Awesome 6 Sharp** weight 400 (normal)
- **Font Awesome 6 Sharp CN** weight 400 (normal)
- **Font Awesome 6 Sharp** weight 900 (normal)
- **Font Awesome 6 Sharp CN** weight 900 (normal)
- **Source-Han-Sans-SC** weight 348 (normal)
- **Source-Han-Sans-SC** weight 448 (normal)
- **Source-Han-Sans-SC** weight 500 (normal)
- **Source-Han-Sans-SC** weight 748 (normal)
- **Source-Han-Sans-TC** weight 348 (normal)
- **Source-Han-Sans-TC** weight 448 (normal)
- **Source-Han-Sans-TC** weight 500 (normal)
- **Source-Han-Sans-TC** weight 748 (normal)
- **Source-Han-Sans-KR** weight 348 (normal)
- **Source-Han-Sans-KR** weight 448 (normal)
- **Source-Han-Sans-KR** weight 500 (normal)
- **Source-Han-Sans-KR** weight 748 (normal)
- **Source-Han-Sans-JP** weight 348 (normal)
- **Source-Han-Sans-JP** weight 448 (normal)
- **Source-Han-Sans-JP** weight 500 (normal)
- **Source-Han-Sans-JP** weight 748 (normal)
- **hushly** weight normal (normal)
- **Font Awesome\ 6 Brands** weight 400 (normal)
- **Font Awesome\ 6 Brands CN** weight 400 (normal)
- **Font Awesome\ 6 Duotone** weight 900 (normal)
- **Font Awesome\ 6 Duotone CN** weight 900 (normal)
- **Font Awesome\ 6 Pro** weight 300 (normal)
- **Font Awesome\ 6 Pro CN** weight 300 (normal)
- **Font Awesome\ 6 Sharp** weight 300 (normal)
- **Font Awesome\ 6 Sharp CN** weight 300 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | NVIDIA-EMEA | 48px | 700 | 1.25 | normal | Main headline (h2) |
| Sub-heading | NVIDIA-EMEA | 36px | 700 | 1.25 | normal | Third-level heading (h3) |
| Caption / Badge | Font Awesome 6 Brands | 24px | 400 | 1 | normal | small text (24px) |
| Body | NVIDIA-EMEA | 16px | 400 | normal | normal | Standard reading text |
| Micro | NVIDIA-EMEA | 11px | 700 | 1 | normal | small text (11px) |

### Font Weight Scale

CSS custom properties define 5 explicit weight steps:
- `--font-weight-light`: `300` — Light
- `--font-weight-mono-regular`: `400` — Regular
- `--font-weight-regular`: `400` — Regular
- `--font-weight-semibold`: `500` — Medium
- `--font-weight-bold`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `48px`, `36px`, `28px`, `24px`, `22px`, `20px`, `18px`, `16px`, `15px`, `14px`, `12px`, `11px`, `10px`

> 8 size(s) detected outside the sampled hierarchy (28px, 22px, 20px, 18px, 15px, 14px, 12px, 10px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#222222`
- Padding: 5px 0px 5px 15px
- Radius: 0px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button

### Cards & Containers

**Standard Card**
- Background: `transparent`
- Padding: 0px 0px 0px 20px
- Radius: 0px
- Use: Content containers, listing items

### Tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#000000`
- Padding: 0px 0px 10px
- Radius: 0px
- Font: 16px weight 400
- 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: "rgb(118, 185, 0)"
      fg: "rgb(0, 0, 0)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  navLink:
    default:
      bg: "rgb(118, 185, 0)"
      fg: "rgb(0, 0, 0)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  badge:
    default:
      bg: "rgb(118, 185, 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

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

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

## 5. Layout Principles

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

### Grid
Single column, centered content

### Max Width
346px

### Spacing System
Compact spacing — information density prioritized

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

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

### Shape Language

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

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

**Full Radius Spectrum**: 0px, 2px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

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

**3/8 structural patterns detected.**

### Navigation Pattern

- **Position:** fixed (stays visible during scroll)
- **Layout:** unknown — Layout not classified
- **Height:** 45px
- **Logo:** ✓ present
- **Nav links:** 7 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Search:** ✓ search input visible in nav
- **Clone instruction:** Build a fixed unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

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

### Footer Pattern

- **Columns:** 1
- **Links:** 0 total
- **Height:** 16px
- **Includes:** ✗ no newsletter | ✗ no social |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~0 links per column, 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.19) 0px 2px 6px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.2) 3px 0px 15px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.24) 0px 3px 4.7px 0.3px`,<br>`rgba(0, 0, 0, 0.16) 0px 1px 5.88px 0.12px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.3) 0px 0px 5px 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 |
|-------|---------------|
| `ease` | CSS ease — Default |
| `ease-out` | Ease Out — Decelerating |
| `linear` | Linear — No Easing |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--card-expand-duration` | `300ms` | Normal |
| `--card-content-hide-duration` | `300ms` | Normal |
| `--card-content-reveal-duration` | `300ms` | Normal |
| `--card-fade-in-duration` | `200ms` | Normal |
| `--card-fade-out-duration` | `200ms` | Normal |
| `--card-shrink-duration` | `300ms` | Normal |

### Copy-Paste Transition Snippets

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

**Transform**
```css
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
```

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

**All Props**
```css
transition: 0.2s ease-in;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `fa-beat` | Scale | transform | UI transition |
| `fa-bounce` | Scale | transform | Playful feedback |
| `fa-fade` | Fade | opacity | UI transition |
| `fa-beat-fade` | Fade + Move | opacity, transform | UI transition |
| `fa-flip` | Rotate / Spin | transform | UI transition |
| `fa-shake` | Rotate / Spin | transform | Error feedback |
| `fa-spin` | Rotate / Spin | transform | Loading indicator |
| `icon-rotate` | Scale | transform | Loading indicator |
| `icon-rotate-rev` | Scale | transform | Loading indicator |
| `progressBar` | Custom | width | UI transition |
| `slideAnimationLeft` | Slide | transform | UI transition |
| `slideAnimationRight` | Slide | transform | UI transition |
| `spin` | Rotate / Spin | transform | Loading indicator |
| `animationspin` | Rotate / Spin | transform | Loading indicator |
| `account-icon-spinner-rotate` | Rotate / Spin | transform | Loading indicator |
| `unibrow-scroll-horizontal` | Slide | transform | UI transition |
| `unibrow-scroll-vertical` | Slide | transform | UI transition |
| `cmp-search__loading-indicator-spin` | Rotate / Spin | transform | Loading indicator |
| `librarian-page-cascade-in` | Fade + Move | opacity, transform | UI transition |
| `rotateGradientBorder` | Custom | --angle | Loading indicator |

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

### Motion Fingerprint

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

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

## 8. Do's and Don'ts

### Do
- Use NVIDIA-EMEA 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 Brand Green (`#76b900`) as the primary accent — it's the brand's signature interactive color
- Keep navigation fixed to the top — the design uses a persistent navigation pattern
- Maintain nav height at 45px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Make the navigation fixed — it stays visible during scroll, signaling content depth
- Include a search input directly in the nav — discoverability is a primary UX value here
- Use a 3-column grid on desktop — density matters for this content type

### Don't
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't put a CTA button in the nav — this design uses links only at the top
- Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)


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

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 374px | Single column, compact spacing |
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 639px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Tablet | 1023px | Multi-column grids begin |
| Large Desktop | 1290px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| button | padding | `5px 0px 5px 15px` | `5px 15px` |

### Collapsing Strategy
- 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: 5px 0px 5px 15px 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.*

- **Glassmorphism** — 1 frosted/blur layer(s) (e.g. `blur(3px)`).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (5) — animated custom properties.

> **Motion fingerprint**: glassmorphism (1 layers), CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Photography-driven

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

**Canonical Brand Image (OG):**
- https://www.nvidia.com/content/dam/en-zz/Solutions/homepage/v2/mfg/nvidia-og-image-1200x630.jpg
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 3.32:1 (ultra-wide cinematic)
- Rendered size: 2560×770px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 59 (65%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 31 (34%)
- Ultra-wide (>2.3): 1 (1%)

**Media Format Mix:**
- JPG: 48 (typically photographic content)
- PNG: 12 (logos, transparent UI elements, mockups)

**Average rendered image size:** 424×292px
**Above-fold image count:** 1 / 91

**Decorative Patterns Detected:**
- 2 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth

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

**Imagery Guidance for clones:**
- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.

## 10. Agent Prompt Guide

### Quick Reference
- Background: White (`#ffffff`)
- Primary text: Black (`#000000`)
- Accent: Brand Green (`#76b900`)
- Border: Slate Grey (`#666666`)
- Font: NVIDIA-EMEA
- Body: 16px weight 400

### Example Component Prompts
- "Create the primary CTA button: `#76b900` background, `#222222` text, 9999px border-radius, 5px 0px 5px 15px padding, 700 weight, NVIDIA-EMEA font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px 0px 0px 20px."
- "Build navigation: fixed on `#ffffff`. NVIDIA-EMEA 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in NVIDIA-EMEA, weight range 300–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Brand Green (`#76b900`) is the sole interactive color. On hover → #6aa700 (`#6aa700`). Use CSS transitions, not opacity/brightness filters.
4. **Shape**: cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
5. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
6. **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: #eeeeee;
  --ca-surface-2: #efefef;
  --ca-ink-subtle: #1a1a1a;
  --ca-primary: #76b900;
  --ca-on-primary: #111111;
  --ca-primary-hover: #6aa700;
  --ca-hairline: #666666;
}

/* Typography */
:root {
  --ca-font-primary: "NVIDIA-EMEA", system-ui, sans-serif;
  --ca-text-display: 48px;
  --ca-text-body: 16px;
  --ca-text-caption: 24px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 2px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 32px;
  --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: feature-section
    tag: div
    classes: ["aem-GridColumn--default--12"]
    height: 900px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgba(0, 0, 0, 0.8)"
    tone: dark
    vertical-padding: ~33px
  - section: hero
    tag: div
    classes: ["root", "responsivegrid"]
    height: 8366px
    width: full-bleed
    layout: block
    children: 1
  - section: hero
    tag: div
    classes: ["nv-carousel-home", "carousel", "panelcontainer", "nv-carousel--hide-arrows"]
    height: 770px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(0, 0, 0)"
  - section: feature-section
    tag: div
    classes: ["container", "responsivegrid", "nv-container--theme-light"]
    height: 770px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(255, 255, 255)"
  - section: feature-section
    tag: div
    classes: ["general-container"]
    height: 541px
    width: 1320px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 120px
    width: 520px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["nv-modal-container"]
    height: 500px
    width: 1070px
    layout: block
    children: 3
  - section: feature-section
    tag: div
    classes: ["simplebar-wrapper"]
    height: 500px
    width: 1070px
    layout: block
    children: 3
  - section: feature-section
    tag: div
    classes: ["simplebar-content-wrapper"]
    height: 500px
    width: 1070px
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["progressmaincontainer"]
    height: 103px
    width: 1291px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["aem-GridColumn--default--12"]
    height: 454px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["general-container-text"]
    height: 454px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["mbox-name-homepage-recommendation", "at-element-marker"]
    height: 454px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(26, 26, 26)"
    tone: dark
    padding: "1px 0px 0px"
  - section: unknown
    tag: div
    height: 101px
    width: 1290px
    layout: flex-row justify=normal
    children: 2
    bg: "rgb(26, 26, 26)"
    tone: dark
  - section: content-section
    tag: div
    classes: ["container", "responsivegrid", "aem-GridColumn--default--12"]
    height: 352px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(26, 26, 26)"
    tone: dark
  - section: content-section
    tag: div
    classes: ["general-container", "d-col-4", "l-col-4", "t-col-1"]
    height: 352px
    width: 1320px
    layout: block
    children: 8
    vertical-padding: ~30px
    padding: "0px 0px 60px"
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 87px
    width: 300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 87px
    width: 300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 87px
    width: 300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 87px
    width: 300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 87px
    width: 300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 87px
    width: 300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 87px
    width: 300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["general-container-text"]
    height: 87px
    width: 300px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["nv-carousel-home", "carousel", "panelcontainer", "nv-carousel--arrows-topright"]
    height: 675px
    width: full-bleed
    layout: block
    children: 1
```

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


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

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

```yaml
copy:
  section-headings:
    - "Découvrez NVIDIA RTX Spark"
    - "Ressources recommandées"
  sub-headings:
    - "Intelligence Artificielle"
    - "Conception d'agents durables grâce au nouveau modèle Nemotron 3 Ultra"
    - "Annonce de NVIDIA FGX : le premier cerveau d'IA au monde pour les usines robotiques"
    - "Présentation de NVIDIA Ising"
    - "aNVIDIA annonce un accès anticipé pour Omniverse Sensor RTXNVIDIA Announces Nemotron Model Families"
    - "NVIDIA Unveils OaNVIDIA dévoile un jeu de données d'IA physique ouvert, le plus grand jeu de données"
  navigation:
    - "FR"
    - "Skip to main content"
    - "Acheter"
    - "Drivers"
    - "Assistance"
    - "Sign In"
```

**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:
  hero:
    count: 1
    avg-ratio: 3.32
    common-aspect: "~16:6 banner"
```

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


## 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** 6 · **auth** 1 · **docs** 1 · **blog** 37 · **social** 2 · **other** 13

**Primary actions (conversion path):**
- Account access — "Sign In" (login/signup) → `https://www.nvidia.com/fr-fr/#`

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

*Blog* — medium confidence, 12 items:

| Title | Featured image | Link |
|---|---|---|
| Robotics | Blog Amazon Devices & Services ad | `cq5dam.thumbnail.319.319.png` (ar 1.78) | https://blogs.nvidia.com/blog/amazon-zero-touch-manufacturing |
| Data Center | Article Découvrez NVIDIA RTX P | `cq5dam.thumbnail.319.319.png` (ar 1.78) | https://blogs.nvidia.com/blog/gtc-2026-news/#rtx-pro-4500 |
| Building Long-Running Agents With New Nemotr | `nemotron-3-ultra-nano-1920x1080.jpeg` (ar 1.78) | https://developer.nvidia.com/blog/nvidia-nemotron-3-ultra-powers-faster-more-efficient-reasoning-for-long-running-agents |
| The U.K. Ramps Up Sovereign Compute | `5340350-ent-ltw-26-corp-blog-sfg-192` (ar 1.78) | https://blogs.nvidia.com/blog/uk-sovereign-ai-advancements |
| Announcing NVIDIA Factory Operations Bluepri | `new-nvidia-fox-pr-sfg.jpeg` (ar 1.78) | https://blogs.nvidia.com/blog/factory-operations-fox-blueprint-ai-brain/ |
| Enhanced Real-Time AI for Video Pipelines an | `nvidia-ai-for-media.jpeg` (ar 1.78) | https://blogs.nvidia.com/blog/nvidia-gtc-taipei-computex-2026-news/#ai-for-media |
| D'AT&T aux Nations Unies, les agents d'IA re | `nvidia-gtc25-nvaie-corp-blog-sfg.jpe` (ar 1.78) | https://blogs.nvidia.com/blog/ai-enterprise-agents/ |
| Nouveaux microservices NIM pour protéger les | `cybersecurity-ai-blog-devnews-press-` (ar 1.78) | https://blogs.nvidia.com/blog/nemo-guardrails-nim-microservices/ |

*News* — medium confidence, 10 items:

| Title | Featured image | Link |
|---|---|---|
| Data Center | Announcement Le GPU universel  | `cq5dam.thumbnail.300.169.png` (ar 1.79) | https://nvidianews.nvidia.com/news/nvidia-global-data-center-system-manufacturers-to-supercharge-generative-ai-and-industrial-digitalization |
| HPC | Événement Accélération des centres de  | `cq5dam.thumbnail.300.169.png` (ar 1.79) | https://nvidianews.nvidia.com/news/nvidia-accelerates-quantum-computing-centers-worldwide-with-cuda-q-platform |
| New Collection of Open Source Physical AI Ag | `26cptx-ov-pai-launchables-sfg-1920x1` (ar 1.78) | https://nvidianews.nvidia.com/news/nvidia-releases-major-collection-of-open-source-agent-tools-and-skills-for-physical-ai |
| The New Frontier Open Foundation Model for P | `nvidia-cosmos3-sfg.jpeg` (ar 1.78) | https://nvidianews.nvidia.com/news/nvidia-launches-cosmos-3-the-open-frontier-foundation-model-for-physical-ai |
| Enterprise Software Is Going Agentic With NV | `enterprise-software-sfg.jpeg` (ar 1.78) | https://nvidianews.nvidia.com/news/enterprise-software-leaders-build-ai-agents-with-nvidia?nvid=nv-int-csfg-373484 |
| Présentation de NVIDIA Ising | `nvidia-ising-sfg.jpeg` (ar 1.78) | https://nvidianews.nvidia.com/news/nvidia-launches-ising-the-worlds-first-open-ai-models-to-accelerate-the-path-to-useful-quantum-computers |
| NVIDIA and TSMC Bring AI Into Fabs to Advanc | `nvidia-tsmc-sfg.jpeg` (ar 1.78) | https://nvidianews.nvidia.com/news/nvidia-tsmc-semiconductor-manufacturing |
| Bringing Design, Engineering, and Manufactur | `industrial-ai-gtc-sj-2026-pr-sfg-mul` (ar 1.78) | https://nvidianews.nvidia.com/news/nvidia-and-global-industrial-software-giants-bring-design-engineering-and-manufacturing-into-the-ai-era |

*Gtc* — medium confidence, 3 items:

| Title | Featured image | Link |
|---|---|---|
| CONFÉRENCE NVIDIA GTC | Évènement Découvrez  | `cq5dam.thumbnail.319.319.png` (ar 1.78) | https://www.nvidia.com/fr-fr/gtc/ |
| NVIDIA GTC | Évènement Ajoutez la GTC Berlin | `cq5dam.thumbnail.319.319.png` (ar 1.78) | https://www.nvidia.com/en-eu/gtc/ |
| Industrial AI and Manufacturing Conference S | `gtc-industrial-targeted-agenda-sfg.j` (ar 1.78) | https://www.nvidia.com/gtc/sessions/industrial-ai-and-manufacturing/ |

**Signals:** 44/60 links carry a featured image · device mockups detected: laptop ×40 · dominant link roles: content-card (41), inline-link (13), navigation (6).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 17 | 25 | 12 named colors |
| Typography | 13 | 20 | 5 roles defined |
| Components | 12 | 20 | 3 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 10 | 10 | 204 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 (NVIDIA-NALA, NVIDIA-EMEA, NVIDIA-RU)** — 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 |
|----------|----------------|-------------------|
| **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 | 204 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 5 typography roles inferred |
| §4 Components | Medium | 3 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 15 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 91 images, hero present |

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

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

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'NVIDIA';
  /* src: url('/fonts/NVIDIA.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA';
  /* src: url('/fonts/NVIDIA.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA';
  /* src: url('/fonts/NVIDIA.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA';
  /* src: url('/fonts/NVIDIA.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-NALA';
  /* src: url('/fonts/NVIDIA-NALA.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-NALA';
  /* src: url('/fonts/NVIDIA-NALA.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-NALA';
  /* src: url('/fonts/NVIDIA-NALA.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-NALA';
  /* src: url('/fonts/NVIDIA-NALA.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-EMEA';
  /* src: url('/fonts/NVIDIA-EMEA.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-EMEA';
  /* src: url('/fonts/NVIDIA-EMEA.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-EMEA';
  /* src: url('/fonts/NVIDIA-EMEA.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-EMEA';
  /* src: url('/fonts/NVIDIA-EMEA.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-RU';
  /* src: url('/fonts/NVIDIA-RU.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-RU';
  /* src: url('/fonts/NVIDIA-RU.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-RU';
  /* src: url('/fonts/NVIDIA-RU.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-RU';
  /* src: url('/fonts/NVIDIA-RU.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-APAC';
  /* src: url('/fonts/NVIDIA-APAC.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-APAC';
  /* src: url('/fonts/NVIDIA-APAC.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-APAC';
  /* src: url('/fonts/NVIDIA-APAC.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-APAC';
  /* src: url('/fonts/NVIDIA-APAC.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-CN';
  /* src: url('/fonts/NVIDIA-CN.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-CN';
  /* src: url('/fonts/NVIDIA-CN.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-CN';
  /* src: url('/fonts/NVIDIA-CN.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-CN';
  /* src: url('/fonts/NVIDIA-CN.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-NALA';
  /* src: url('/fonts/NVIDIA-NALA.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-NALA';
  /* src: url('/fonts/NVIDIA-NALA.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-EMEA';
  /* src: url('/fonts/NVIDIA-EMEA.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-EMEA';
  /* src: url('/fonts/NVIDIA-EMEA.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-RU';
  /* src: url('/fonts/NVIDIA-RU.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-RU';
  /* src: url('/fonts/NVIDIA-RU.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-APAC';
  /* src: url('/fonts/NVIDIA-APAC.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-APAC';
  /* src: url('/fonts/NVIDIA-APAC.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-CN';
  /* src: url('/fonts/NVIDIA-CN.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA-CN';
  /* src: url('/fonts/NVIDIA-CN.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA';
  /* src: url('/fonts/NVIDIA.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA';
  /* src: url('/fonts/NVIDIA.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  /* src: url('/fonts/Heebo.woff2') format('ttf'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  /* src: url('/fonts/Heebo.woff2') format('ttf'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  /* src: url('/fonts/Heebo.woff2') format('ttf'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  /* src: url('/fonts/Heebo.woff2') format('ttf'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  /* src: url('/fonts/Heebo.woff2') format('truetype supports variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Font Awesome\ 6 Brands';
  /* src: url('/fonts/Font-Awesome\-6-Brands.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Brands CN';
  /* src: url('/fonts/Font-Awesome\-6-Brands-CN.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Duotone';
  /* src: url('/fonts/Font-Awesome\-6-Duotone.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Duotone CN';
  /* src: url('/fonts/Font-Awesome\-6-Duotone-CN.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Pro';
  /* src: url('/fonts/Font-Awesome\-6-Pro.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Pro CN';
  /* src: url('/fonts/Font-Awesome\-6-Pro-CN.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Pro';
  /* src: url('/fonts/Font-Awesome\-6-Pro.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Pro CN';
  /* src: url('/fonts/Font-Awesome\-6-Pro-CN.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Pro';
  /* src: url('/fonts/Font-Awesome\-6-Pro.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Pro CN';
  /* src: url('/fonts/Font-Awesome\-6-Pro-CN.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Pro';
  /* src: url('/fonts/Font-Awesome\-6-Pro.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Pro CN';
  /* src: url('/fonts/Font-Awesome\-6-Pro-CN.woff2') format('woff2'); */
  font-weight: 100;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Sharp';
  /* src: url('/fonts/Font-Awesome\-6-Sharp.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Sharp CN';
  /* src: url('/fonts/Font-Awesome\-6-Sharp-CN.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Sharp';
  /* src: url('/fonts/Font-Awesome\-6-Sharp.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Sharp CN';
  /* src: url('/fonts/Font-Awesome\-6-Sharp-CN.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Sharp';
  /* src: url('/fonts/Font-Awesome\-6-Sharp.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome\ 6 Sharp CN';
  /* src: url('/fonts/Font-Awesome\-6-Sharp-CN.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Source-Han-Sans-SC';
  /* src: url('/fonts/Source-Han-Sans-SC.woff2') format('woff2 supports variations'); */
  font-weight: 348;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-SC';
  /* src: url('/fonts/Source-Han-Sans-SC.woff2') format('woff2 supports variations'); */
  font-weight: 448;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-SC';
  /* src: url('/fonts/Source-Han-Sans-SC.woff2') format('woff2 supports variations'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-SC';
  /* src: url('/fonts/Source-Han-Sans-SC.woff2') format('woff2 supports variations'); */
  font-weight: 748;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-TC';
  /* src: url('/fonts/Source-Han-Sans-TC.woff2') format('woff2 supports variations'); */
  font-weight: 348;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-TC';
  /* src: url('/fonts/Source-Han-Sans-TC.woff2') format('woff2 supports variations'); */
  font-weight: 448;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-TC';
  /* src: url('/fonts/Source-Han-Sans-TC.woff2') format('woff2 supports variations'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-TC';
  /* src: url('/fonts/Source-Han-Sans-TC.woff2') format('woff2 supports variations'); */
  font-weight: 748;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-KR';
  /* src: url('/fonts/Source-Han-Sans-KR.woff2') format('woff2 supports variations'); */
  font-weight: 348;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-KR';
  /* src: url('/fonts/Source-Han-Sans-KR.woff2') format('woff2 supports variations'); */
  font-weight: 448;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-KR';
  /* src: url('/fonts/Source-Han-Sans-KR.woff2') format('woff2 supports variations'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-KR';
  /* src: url('/fonts/Source-Han-Sans-KR.woff2') format('woff2 supports variations'); */
  font-weight: 748;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-JP';
  /* src: url('/fonts/Source-Han-Sans-JP.woff2') format('woff2 supports variations'); */
  font-weight: 348;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-JP';
  /* src: url('/fonts/Source-Han-Sans-JP.woff2') format('woff2 supports variations'); */
  font-weight: 448;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-JP';
  /* src: url('/fonts/Source-Han-Sans-JP.woff2') format('woff2 supports variations'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source-Han-Sans-JP';
  /* src: url('/fonts/Source-Han-Sans-JP.woff2') format('woff2 supports variations'); */
  font-weight: 748;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'hushly';
  /* src: url('/fonts/hushly.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes cmp-search__loading-indicator-spin { ... }
@keyframes fa-beat { ... }
@keyframes fa-bounce { ... }
@keyframes fa-fade { ... }
@keyframes fa-beat-fade { ... }
@keyframes fa-flip { ... }
@keyframes fa-shake { ... }
@keyframes fa-spin { ... }
@keyframes icon-rotate { ... }
@keyframes icon-rotate-rev { ... }
@keyframes progressBar { ... }
@keyframes slideAnimationLeft { ... }
@keyframes slideAnimationRight { ... }
@keyframes spin { ... }
@keyframes animationspin { ... }
@keyframes account-icon-spinner-rotate { ... }
@keyframes unibrow-scroll-horizontal { ... }
@keyframes unibrow-scroll-vertical { ... }
@keyframes onetrust-fade-in { ... }
@keyframes bounceInDown { ... }
@keyframes bounce { ... }
```

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

```css
@keyframes cmp-search__loading-indicator-spin{0{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}
@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}
@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}
@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}
@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}
@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}24%,8%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
@-webkit-keyframes icon-rotate{0%{-webkit-transform:scaleY(0);transform:scaleY(0)}
@-webkit-keyframes icon-rotate-rev{0%{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
@-webkit-keyframes progressBar{0%{width:0}
@-webkit-keyframes slideAnimationLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}
@-webkit-keyframes slideAnimationRight{0%{-webkit-transform:translate3d(calc(var(--scroll-img-width)*-1),0,0);transform:translate3d(calc(var(--scroll-img-width)*-1),0,0)}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
@-webkit-keyframes animationspin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
@-webkit-keyframes account-icon-spinner-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
@-webkit-keyframes unibrow-scroll-horizontal{0%{-webkit-transform:translateX(0);transform:translateX(0)}
@-webkit-keyframes unibrow-scroll-vertical{0%{-webkit-transform:translateY(0);transform:translateY(0)}
@keyframes onetrust-fade-in{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes bounceInDown {from,60%,75%,90%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0% {opacity: 0;-webkit-transform: translate3d(0, -3000px, 0);transform: translate3d(0, -3000px, 0);}60% {opacity: 1;-webkit-transform: translate3d(0, 25px, 0);transform: translate3d(0, 25px, 0);}75% {-webkit-transform: translate3d(0, -10px, 0);transform: translate3d(0, -10px, 0);}90% {-webkit-transform: translate3d(0, 5px, 0);transform: translate3d(0, 5px, 0);}
@-webkit-keyframes bounce {from,20%,53%,80%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}40%,43% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -30px, 0);transform: translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -15px, 0);transform: translate3d(0, -15px, 0);}90% {-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}}
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: linear-gradient(270deg,transparent 0 6px,#76b900 6px 9px,transparent 9px 15px);

/* Gradient 2 */
background: linear-gradient(180deg,transparent 0 6px,#76b900 6px 9px,transparent 9px 15px);

/* Gradient 3 */
background: linear-gradient(0deg,transparent,#000 20% 80%,transparent);

/* Gradient 4 */
background: linear-gradient(to bottom,var(--frame-gallery-gradient-start);

/* Gradient 5 */
background: linear-gradient(to right,var(--frame-gallery-gradient-start);

```

### Hover State CSS (Intercepted)

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

```css
#fr-btns button#frClosePopup .btn:hover {
   color: #000;}

.ui-button,.ui-button:active,.ui-button:hover,.ui-button:link,.ui-button:visited{text-decoration:none}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{background-image:none;border-style:solid;border-width:4px;height:8px;width:8px}

.ui-datepicker-rtl .ui-datepicker-prev:hover{left:auto;right:1px}

.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}

.ui-button,.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,html .ui-button.ui-state-disabled:active,html .ui-button.ui-state-disabled:hover{background:#f6f6f6;border:1px solid #c5c5c5;color:#454545;font-weight:400}

.ui-button:focus,.ui-button:hover,.ui-state-focus,.ui-state-hover,.ui-widget-content .ui-state-focus,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-focus,.ui-widget-header .ui-state-hover{background:#ededed;border:1px solid #ccc;color:#2b2b2b;font-weight:400}

.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,a.ui-button:focus,a.ui-button:hover{color:#2b2b2b;text-decoration:none}

.ui-button.ui-state-active:hover,.ui-button:active,.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active{background:#007fff;border:1px solid #003eff;color:#fff;font-weight:400}

.ui-button:focus .ui-icon,.ui-button:hover .ui-icon,.ui-state-focus .ui-icon,.ui-state-hover .ui-icon{background-image:url(clientlib-base/css/images/ui-icons_555555_256x240.png)}

a:active,a:hover{outline-width:0}
```

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

### Real Responsive Breakpoints
**29 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`300px` · `320px` · `374px` · `375px` · `399px` · `400px` · `425px` · `426px` · `450px` · `480px` · `500px` · `530px` · `550px` · `600px` … (+15 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×2024 · `15px`×370 · `14px`×342 · `20px`×196 · `18px`×52 · `11px`×52 · `24px`×30 · `36px`×22

**Radius scale** (× = paint count): `2px`×91

**Weights** (× = paint count): `400`×2390 · `700`×719 · `900`×64 · `300`×3

**Layout gaps** (× = paint count): `30px 15px`×8 · `10px`×8 · `30px`×4 · `15.12px`×4 · `5px`×2 · `10.08px`×2 · `15px`×1

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.3) 0px 0px 5px 0px
rgba(0, 0, 0, 0.19) 0px 2px 6px 0px
rgba(0, 0, 0, 0.24) 0px 3px 4.7px 0.3px, rgba(0, 0, 0, 0.16) 0px 1px 5.88px 0.12px
```

### 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 { color:#000; font-family:NVIDIA,Arial,Helvetica,Sans-Serif; font-weight:400 }
nav { font-size:1pc; transition:top .5s }
h2 { gap:.42em }
button { background-color:transparent; color:var(--color-gray-900) }
a { background-color:var(--custom-button-color,#76b900); color:#000; font-size:18px; font-weight:700; transition:background-color .2s ease-out }
a { font-size:1pc }
button { background-color:var(--custom-button-color,#76b900); color:#000; font-size:18px; font-weight:700; transition:background-color .2s ease-out }
button { font-size:1pc }
```

> 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://nvidia.com | 2026-06-11T05:01:53.591Z*
*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.*