Acd Cinematic Nvidia Design

---
name: acd-cinematic-nvidia-design
description: Reference DESIGN.md for GPU-vendor cinematic: chrome-black canvas, signature green action, video-led hero, hard-edged grotesque headlines. Use when building UI components, applying design tokens, or implementing visual styles for cinematic nvidia.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, cinematic, claude-design]
---

# NVIDIA — Cinematic Compute Design Mode

You are an expert in the NVIDIA — Cinematic Compute aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for GPU-vendor cinematic: chrome-black canvas, signature green action, video-led hero, hard-edged grotesque headlines.

## 1. Visual Theme & Atmosphere

Cinematic compute. The page reads like a hardware launch reel — black canvas, full-bleed video of die shots and rendered scenes, green CTA punching through. Type stays sharp, narrow, almost industrial. There is exactly one accent and it is the green; everything else is grayscale.

Mood: high-energy, precision-engineered, motion-forward.

## 2. Color Palette & Roles

```
--bg:              #000000   /* canvas */
--bg-alt:          #0d0d0d
--surface:         #1a1a1a
--surface-2:       #2a2a2a
--text:            #ffffff
--text-muted:      #b8b8b8
--text-dim:        #767676
--border:          #333333
--border-strong:   #4d4d4d

--accent:          #76b900   /* signature green — primary CTA + brand */
--accent-hover:    #8fd400
--accent-deep:     #5a8d00   /* hover-pressed, dark variants */
--accent-soft:     #c9e892   /* tinted callouts only */

--secondary:       #10b1fb   /* developer / data accent, sparingly */
--success:         #76b900
--warning:         #ffb800
--danger:          #d13438
```

Rule: green and only green for primary action and brand mark. Cyan `--secondary` is reserved for developer surfaces (CUDA, RAPIDS, NeMo). Never gradient between the two; they are not partners.

## 3. Typography Rules

- **Display + headlines:** `NVIDIA Sans` (NALA), fallback `Helvetica Neue`, `Arial`, system. Weight 500–700, tight tracking (−1% at large sizes).
- **Body:** NVIDIA Sans regular, weight 400, 16–18px, line-height 1.5.
- **UI labels:** NVIDIA Sans weight 500, 12–14px, uppercase only for category eyebrows (tracked +6%).
- **Numerals:** tabular figures on spec tables, benchmark charts, pricing.
- **Mono:** `JetBrains Mono`, fallback `SF Mono`. Used for code samples, command snippets, telemetry.

Scale: 12 / 14 / 16 / 18 / 24 / 32 / 48 / 72 / 96 / 128.

Display headlines go big. 96px and up for product launches.

## 4. Component Stylings

**Buttons**
- Primary: `--accent` fill, black text, radius 4px, padding 12/24, weight 600. Hover: `--accent-hover`. No lift, no scale.
- Secondary: transparent fill, 1px white border, white text. Hover: 1px `--accent` border.
- Tertiary / link: white text, green underline on hover.
- Destructive: `--danger` fill, white text, only on confirm modals.

**Cards / product tiles**
- `--surface` fill, 1px `--border`, radius 4px. Padding 24.
- Hero product cards run full-bleed images with text overlay; gradient scrim `linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%)` for legibility.
- Hover: 1px `--accent` border, 200ms ease. No scale, no glow.

**Inputs**
- `--bg-alt` fill, 1px `--border-strong`, radius 4px, padding 10/14. Focus: 2px `--accent` ring with 1px offset.

**Nav**
- Fixed top, `--bg` fill with 90% opacity and 8px backdrop blur. White links, green underline on active. Mega-menu opens flush, full-width, dark.

**Video hero**
- Autoplay muted, 100vw × 80vh minimum. Loop. Subtle bottom scrim for headline legibility. Reduced-motion users get a static still frame.

## 5. Layout Principles

- Full-bleed hero (100vw, 80–100vh).
- 1440px max for content sections, 32px gutter, 12-column.
- 8px base. 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
- Generous vertical whitespace between sections (96–128px).
- Spec tables break grid and run dense.

## 6. Depth & Elevation

Flat surfaces with hard borders. Depth comes from:
- Surface tonal shift (`--bg → --surface → --surface-2`)
- 1px `--border` and `--border-strong`
- Video and image hierarchy

Modals get `0 24px 64px rgba(0, 0, 0, 0.72)` over a 70% black scrim. No soft glows on cards. Reserve glow effects for chart highlights only.

## 7. Do's and Don'ts

**Do**
- Open with full-bleed video. Die shots, rendered scenes, lab footage, robotaxi POV.
- Oversize the launch headline. 96px+.
- Lock the green to action and brand; let chrome stay grayscale.
- Use tabular numerals for benchmark deltas (1.7×, 2.5×, +43%).
- Keep corners at 4px. Hard edges read as engineered.

**Don't**
- Mix green and cyan in the same component.
- Use light backgrounds. NVIDIA marketing is dark by default.
- Soften corners past 8px.
- Add purple gradients, glassmorphism, or pastel accents.
- Replace video hero with stock photography.

## 8. Responsive Behavior

- Hero video remains full-bleed; headline scales 128 → 40 on mobile.
- Mega-menu collapses to drawer at 1024px, full-screen overlay below 768px.
- Spec tables become horizontally scrollable below 640px (preserve density, no stacking).
- Autoplay disabled on mobile per bandwidth respect; static poster frame substitutes.
- Body type holds 16px on mobile.

## 9. Agent Prompt Guide

Bias: black `#000000` canvas, signature green `#76b900` reserved for primary action and brand mark only, NVIDIA Sans / Helvetica Neue tight grotesque, oversized display headlines (96px+), full-bleed video hero, 4px radii, tabular numerals on benchmark tables, mega-menu nav with backdrop blur.

Reject: light-mode marketing pages, multi-accent palettes, soft pastel gradients, glassmorphism, rounded-pill buttons, hero stock photography in place of video, scaled hover lifts, decorative illustration in chrome.

## When to Use This Mode

- When user references **nvidia** or the **cinematic** family as inspiration
- When building UI in the cinematic aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic